/* ======================================================
   RESET + CONFIGURAÇÕES GLOBAIS
====================================================== */

html, body{
    height:100%;
    overflow-x:hidden;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}
 
.hidden {
    display: none;
}

/* ======================================================
   PÁGINA 1 — TELA DO BOTÃO (IMERSÃO EMOCIONAL)
   Estrutura de camadas:
   - Fundo animado
   - Luzes flutuantes
   - Conteúdo (botão + texto)
====================================================== */

.promise-section {
    height: 100dvh;
    position: relative;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* ======================================================
   FUNDO ANIMADO (VERSÃO ESCURA E IMERSIVA)
====================================================== */

.promise-bg {
    position: absolute;
    inset: 0;

    background: linear-gradient(-45deg,
        #050505,
        #0f0a0f,
        #180315,
        #1f0a17,
        #2a0f21
    );

    background-size: 400% 400%;
    animation: gradientFlow 20s ease infinite;

    z-index: 0;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



/* ======================================================
   LUZES FLUTUANTES (EFEITO SENSORIAL)
====================================================== */

.promise-lights {
    position: absolute;
    inset: 0;

    pointer-events: none;
    z-index: 1;
}

.promise-lights::before,
.promise-lights::after {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.18),
            transparent 70%);

    border-radius: 50%;
    filter: blur(25px);

    animation: floatLights 14s ease-in-out infinite;
}

.promise-lights::before {
    top: -120px;
    left: -120px;
}

.promise-lights::after {
    bottom: -140px;
    right: -140px;
    animation-delay: 7s;
}

@keyframes floatLights {
    0% {
        transform: translate(0, 0);
        opacity: 0.6;
    }

    50% {
        transform: translate(60px, 40px);
        opacity: 1;
    }

    100% {
        transform: translate(0, 0);
        opacity: 0.6;
    }
}



/* ======================================================
   CONTEÚDO CENTRAL (BOTÃO + TEXTO)
====================================================== */

.promise-wrapper {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;

    max-width: 320px;
}



/* ======================================================
   BOTÃO DE PROMESSA (FOCO PRINCIPAL)
====================================================== */

.promise-btn {
    position: relative;

    /* VIDRO ROSADO */
    background: linear-gradient(135deg,
            rgba(255, 180, 190, 0.25),
            rgba(255, 255, 255, 0.12));

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    color: #ffffff;

    border-radius: 999px;
    padding: 16px 52px;

    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: 0.3px;

    cursor: pointer;

    /* BORDA DE CRISTAL */
    border: 1px solid rgba(255, 255, 255, 0.35);

    /* PROFUNDIDADE */
    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.45),
        inset 0 0 18px rgba(255, 255, 255, 0.25);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

/* REFLEXO DE LUZ */
.promise-btn::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(120deg,
            transparent 20%,
            rgba(255, 255, 255, 0.45),
            transparent 80%);

    opacity: 0.35;
    border-radius: inherit;

    pointer-events: none;
}

/* HOVER — MAIS VIDA */
.promise-btn:hover {
    transform: scale(1.06);

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.55),
        inset 0 0 26px rgba(255, 255, 255, 0.35);

    background: linear-gradient(135deg,
            rgba(255, 190, 200, 0.35),
            rgba(255, 255, 255, 0.18));
}


/* ======================================================
   MICRO TEXTO ABAIXO DO BOTÃO
====================================================== */

.promise-microtext {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    font-style: italic;
}



#scroll-container {
  position: relative;
  width: 100%;
}

#sticky-scene {
  position: relative;
}

/* =====================================
   SCROLL INVISÍVEL (modo preview)
===================================== */

body.builder-preview {
  overflow-y: scroll; /* garante que continua scrollando */
}

/* Chrome, Edge, Safari */
body.builder-preview::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

/* Firefox */
body.builder-preview {
  scrollbar-width: none;
}

/* IE antigo (fallback) */
body.builder-preview {
  -ms-overflow-style: none;
}

.phone-iframe{
  transform: scale(1);
}



.scene-layer {
  position: relative;
  margin-bottom: -1px;
}