/* gaê Cosméticos — Beauty Clube | build estático (Hostinger) */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{-webkit-font-smoothing:antialiased;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
main{display:block}

/* ============================================================
   gaê Beauty Clube — experiência cinematográfica (mobile-first)
   ============================================================ */

:root {
  --gae-noir: oklch(0.24 0.032 42);
  --gae-champagne: oklch(0.9 0.048 78);
  --gae-rose: oklch(0.82 0.06 40);
  --gae-copper: oklch(0.72 0.09 48);
}

html,
body {
  overflow-x: hidden;
  background-color: var(--gae-noir);
}

.stage-root {
  width: 100vw;
  min-height: 100svh;
  max-height: 100svh;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(
    120% 90% at 50% 40%,
    color-mix(in oklab, var(--gae-rose) 16%, var(--gae-noir)),
    var(--gae-noir) 70%
  );
}

.stage {
  position: relative;
  width: 100vw;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: grab;
}

.stage:active {
  cursor: grabbing;
}

.film {
  position: relative;
  aspect-ratio: 9 / 16;
  width: min(100vw, calc(100svh * 9 / 16));
  height: auto;
  max-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  transform: perspective(1200px) translate3d(0, calc(var(--depth, 0) * -3px), 0)
    rotateX(calc(var(--depth, 0) * -0.5deg)) scale(calc(1 + var(--depth-mag, 0) * 0.012));
  transform-origin: 50% 55%;
  will-change: transform;
}

.film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: opacity, filter;
  /* microblur cinematográfico apenas no ponto central do crossfade */
  filter: blur(calc(var(--xfm, 0) * 1.1px));
}

/* microvariação de luminosidade champagne — somente durante a transição */
.xfade-glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: calc(var(--xfm, 0) * 0.16);
  background: radial-gradient(
    92% 68% at 50% 52%,
    color-mix(in oklab, var(--gae-champagne) 60%, transparent),
    transparent 72%
  );
}


/* micro-paralaxe: apenas camadas atmosféricas de overlay */
.depth {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.depth-layer {
  position: absolute;
  inset: -6%;
  display: block;
  opacity: 0.5;
  will-change: transform;
}

.depth-back {
  background: radial-gradient(
    70% 55% at 50% calc(30% + var(--depth, 0) * 2%),
    color-mix(in oklab, var(--gae-champagne) 10%, transparent),
    transparent 70%
  );
  opacity: calc(0.5 + var(--depth-mag, 0) * 0.22);
  transform: translate3d(0, calc(var(--depth, 0) * 5px), 0)
    scale(calc(1 + var(--depth-mag, 0) * 0.008));
}

.depth-mid {
  background: radial-gradient(
    60% 40% at 50% calc(78% - var(--depth, 0) * 3%),
    color-mix(in oklab, var(--gae-copper) 9%, transparent),
    transparent 72%
  );
  opacity: calc(0.5 + var(--depth-mag, 0) * 0.3);
  transform: translate3d(0, calc(var(--depth, 0) * -12px), 0)
    scale(calc(1 + var(--depth-mag, 0) * 0.018));
}

.depth-front {
  background:
    linear-gradient(to bottom, color-mix(in oklab, var(--gae-noir) 26%, transparent), transparent 22%),
    linear-gradient(to top, color-mix(in oklab, var(--gae-noir) 22%, transparent), transparent 20%),
    radial-gradient(
      118% 88% at 50% 50%,
      transparent 52%,
      color-mix(in oklab, var(--gae-noir) calc(18% + var(--depth-mag, 0) * 22%), transparent) 100%
    );
  opacity: 0.75;
  transform: translate3d(0, calc(var(--depth, 0) * -22px), 0)
    scale(calc(1 + var(--depth-mag, 0) * 0.028));
}

/* hit area invisível sobre o botão gravado no capítulo 02 */
.cta-hit {
  position: absolute;
  left: 19%;
  width: 62%;
  top: 67.6%;
  height: 7.4%;
  z-index: 5;
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* onda de luz champagne líquida — uma única vez */
.champagne-ripple {
  position: absolute;
  z-index: 4;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--gae-champagne) 70%, transparent) 0%,
    color-mix(in oklab, var(--gae-copper) 32%, transparent) 42%,
    transparent 68%
  );
  mix-blend-mode: screen;
  filter: blur(0.4px);
  animation: champagne-bloom 460ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes champagne-bloom {
  0% {
    opacity: 0.85;
    transform: scale(0.4);
  }
  55% {
    opacity: 0.45;
  }
  100% {
    opacity: 0;
    transform: scale(11);
  }
}

/* microindicação editorial */
.hint {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 5svh);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  pointer-events: none;
  animation: hint-in 900ms ease both;
}

.hint-label {
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  white-space: nowrap;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--gae-champagne) 88%, white);
  text-shadow: 0 1px 12px color-mix(in oklab, var(--gae-noir) 60%, transparent);
}

.hint-chevron {
  width: 9px;
  height: 9px;
  border-left: 1px solid color-mix(in oklab, var(--gae-champagne) 85%, white);
  border-bottom: 1px solid color-mix(in oklab, var(--gae-champagne) 85%, white);
  transform: rotate(135deg);
  animation: hint-float 2.4s ease-in-out infinite;
}

@keyframes hint-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hint-float {
  0%,
  100% {
    transform: rotate(135deg) translate(0, 0);
    opacity: 0.55;
  }
  50% {
    transform: rotate(135deg) translate(3px, -3px);
    opacity: 1;
  }
}

/* ============================================================
   GAE REACTIVE TOUCH — camada aditiva de reação ao toque
   ============================================================ */

.rt-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}

.rt-layer > span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 999px;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* núcleo de luz — muito sutil */
.rt-core {
  width: 26px;
  height: 26px;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--gae-champagne) 55%, transparent) 0%,
    color-mix(in oklab, var(--gae-copper) 26%, transparent) 46%,
    transparent 70%
  );
  animation: rt-core-in 620ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes rt-core-in {
  0% {
    opacity: 0;
    scale: 0.35;
  }
  18% {
    opacity: 0.5;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 1.5;
  }
}

/* halo discreto que acompanha o dedo durante o arraste */
.rt-halo {
  width: 64px;
  height: 64px;
  opacity: 0;
  transition: opacity 260ms ease;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--gae-champagne) 20%, transparent) 0%,
    color-mix(in oklab, var(--gae-copper) 12%, transparent) 45%,
    transparent 72%
  );
}

.rt-halo.is-on {
  opacity: 0.34;
}

/* liquid touch — onda cinematográfica */
.rt-wave {
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in oklab, var(--gae-champagne) 40%, transparent);
  background: radial-gradient(
    circle,
    transparent 58%,
    color-mix(in oklab, var(--gae-champagne) 16%, transparent) 78%,
    transparent 100%
  );
  animation: rt-wave-out 900ms cubic-bezier(0.16, 0.84, 0.3, 1) forwards;
}

@keyframes rt-wave-out {
  0% {
    opacity: 0.42;
    scale: 0.3;
  }
  100% {
    opacity: 0;
    scale: 6.4;
  }
}

/* pequena onda de retorno ao soltar o dedo */
.rt-return {
  width: 52px;
  height: 52px;
  border: 1px solid color-mix(in oklab, var(--gae-rose) 34%, transparent);
  animation: rt-return-out 620ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes rt-return-out {
  0% {
    opacity: 0.34;
    scale: 1.5;
  }
  100% {
    opacity: 0;
    scale: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rt-halo.is-on {
    opacity: 0.16;
  }

  .rt-core {
    animation-duration: 400ms;
  }
}

/* ============================================================
   GAE GOLDEN LIGHT REVEAL — revelação cinematográfica da cena final
   camada aditiva de luz sobre o vídeo 02 (nunca altera a arte gravada)
   ============================================================ */

.final-reveal {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
  opacity: 0;
}

.final-reveal.is-on {
  opacity: 1;
}

.final-reveal > span {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

/* FASE 1 — presença: halo suave atrás da região do título (~25–34%) */
.fr-presence {
  left: 4%;
  top: 19%;
  width: 92%;
  height: 22%;
  mix-blend-mode: soft-light;
  background: radial-gradient(
    62% 58% at 50% 50%,
    color-mix(in oklab, var(--gae-champagne) 78%, transparent),
    transparent 74%
  );
}

.is-on .fr-presence {
  animation: fr-presence 950ms 250ms cubic-bezier(0.33, 0, 0.2, 1) both;
}

@keyframes fr-presence {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}

/* FASE 2 — golden light sweep sobre o título: feixe estreito esquerda → direita */
.fr-sweep {
  top: 22%;
  left: 0;
  width: 24%;
  height: 15%;
  mix-blend-mode: screen;
  filter: blur(5px);
  background: linear-gradient(
    100deg,
    transparent 0%,
    color-mix(in oklab, var(--gae-champagne) 44%, transparent) 30%,
    color-mix(in oklab, var(--gae-champagne) 55%, white 45%) 50%,
    color-mix(in oklab, var(--gae-copper) 36%, transparent) 72%,
    transparent 100%
  );
}

.is-on .fr-sweep {
  animation: fr-sweep 1150ms 1150ms cubic-bezier(0.45, 0.05, 0.35, 1) both;
}

@keyframes fr-sweep {
  0% {
    opacity: 0;
    transform: translate3d(-130%, 0, 0) skewX(-8deg);
  }
  18% {
    opacity: 0.72;
  }
  82% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translate3d(560%, 0, 0) skewX(-8deg);
  }
}

/* FASE 3 — microonda mais discreta sobre o texto secundário (~37–45%) */
.fr-sweep-2 {
  top: 36.5%;
  left: 0;
  width: 18%;
  height: 9.5%;
  mix-blend-mode: screen;
  filter: blur(6px);
  background: linear-gradient(
    100deg,
    transparent 0%,
    color-mix(in oklab, var(--gae-champagne) 26%, transparent) 35%,
    color-mix(in oklab, var(--gae-champagne) 48%, transparent) 52%,
    transparent 100%
  );
}

.is-on .fr-sweep-2 {
  animation: fr-sweep-2 950ms 2650ms cubic-bezier(0.45, 0.05, 0.35, 1) both;
}

@keyframes fr-sweep-2 {
  0% {
    opacity: 0;
    transform: translate3d(-140%, 0, 0) skewX(-8deg);
  }
  20% {
    opacity: 0.32;
  }
  80% {
    opacity: 0.32;
  }
  100% {
    opacity: 0;
    transform: translate3d(640%, 0, 0) skewX(-8deg);
  }
}

/* FASE 4 — reflexo único sobre o botão gravado (~69–76%) */
.fr-cta-glint {
  top: 68.2%;
  left: 0;
  width: 20%;
  height: 8.2%;
  mix-blend-mode: screen;
  filter: blur(4px);
  background: linear-gradient(
    100deg,
    transparent 0%,
    color-mix(in oklab, var(--gae-champagne) 30%, transparent) 34%,
    color-mix(in oklab, var(--gae-champagne) 62%, white 6%) 50%,
    transparent 100%
  );
}

.is-on .fr-cta-glint {
  animation: fr-cta-glint 850ms 4050ms cubic-bezier(0.45, 0.05, 0.35, 1) both;
}

@keyframes fr-cta-glint {
  0% {
    opacity: 0;
    transform: translate3d(-120%, 0, 0) skewX(-8deg);
  }
  22% {
    opacity: 0.45;
  }
  78% {
    opacity: 0.45;
  }
  100% {
    opacity: 0;
    transform: translate3d(540%, 0, 0) skewX(-8deg);
  }
}

/* ============================================================
   AURA DE REVELAÇÃO — luz nascendo ATRÁS do texto (nunca glow nas letras)
   ============================================================ */

/* aura principal: cresce atrás do título, respira uma vez e desaparece */
.fr-aura {
  left: 0;
  top: 12%;
  width: 100%;
  height: 34%;
  mix-blend-mode: screen;
  background:
    radial-gradient(
      46% 52% at 50% 52%,
      color-mix(in oklab, var(--gae-champagne) 58%, white 14%) 0%,
      color-mix(in oklab, var(--gae-champagne) 40%, transparent) 38%,
      color-mix(in oklab, var(--gae-copper) 22%, transparent) 62%,
      transparent 82%
    );
}

.is-on .fr-aura {
  animation: fr-aura 3400ms 150ms cubic-bezier(0.3, 0, 0.25, 1) both;
}

@keyframes fr-aura {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  14% {
    opacity: 0.34;
    transform: scale(0.86);
  }
  34% {
    opacity: 0.82;
    transform: scale(1);
  }
  /* respiração única no pico — o sweep atravessa o texto neste momento */
  46% {
    opacity: 1;
    transform: scale(1.045);
  }
  54% {
    opacity: 0.92;
    transform: scale(1.02);
  }
  62% {
    opacity: 0.86;
    transform: scale(1.015);
  }
  82% {
    opacity: 0.38;
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

/* aura secundária: muito mais discreta, entra depois da revelação do título */
.fr-aura-2 {
  left: 8%;
  top: 34%;
  width: 84%;
  height: 14%;
  mix-blend-mode: screen;
  background: radial-gradient(
    56% 78% at 50% 50%,
    color-mix(in oklab, var(--gae-champagne) 34%, transparent) 0%,
    transparent 78%
  );
}

.is-on .fr-aura-2 {
  animation: fr-aura-2 2200ms 2900ms cubic-bezier(0.3, 0, 0.25, 1) both;
}

@keyframes fr-aura-2 {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  40% {
    opacity: 0.34;
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

/* aura do CTA: discreta, atrás/ao redor do botão gravado, some em seguida */
.fr-cta-aura {
  left: 12%;
  top: 65.5%;
  width: 76%;
  height: 12.5%;
  border-radius: 999px;
  mix-blend-mode: screen;
  background: radial-gradient(
    60% 84% at 50% 50%,
    color-mix(in oklab, var(--gae-champagne) 42%, var(--gae-copper) 10%) 0%,
    color-mix(in oklab, var(--gae-champagne) 18%, transparent) 48%,
    transparent 78%
  );
}

.is-on .fr-cta-aura {
  animation: fr-cta-aura 1700ms 3950ms cubic-bezier(0.3, 0, 0.25, 1) both;
}

@keyframes fr-cta-aura {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }
  34% {
    opacity: 0.42;
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    transform: scale(1.06);
  }
}

/* pequena pulsação de luz após o reflexo — uma única vez, extremamente sutil */
.fr-cta-pulse {
  left: 17%;
  top: 67.8%;
  width: 66%;
  height: 8.6%;
  border-radius: 999px;
  mix-blend-mode: soft-light;
  background: radial-gradient(
    70% 90% at 50% 50%,
    color-mix(in oklab, var(--gae-champagne) 85%, white 10%),
    transparent 76%
  );
}

.is-on .fr-cta-pulse {
  animation: fr-cta-pulse 700ms 4950ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes fr-cta-pulse {
  0% {
    opacity: 0;
    transform: scale(0.97);
  }
  38% {
    opacity: 0.5;
    transform: scale(1.015);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* ============================================================
   LUXURY FOCUS — palco de luz atrás do texto de benefício
   ("descontos secretos e ofertas exclusivas", ~36–47%)
   camada puramente aditiva: nunca altera a arte gravada
   ============================================================ */
.fr-focus {
  left: 2%;
  top: 33%;
  width: 96%;
  height: 17%;
  border-radius: 999px;
  mix-blend-mode: screen;
  background:
    radial-gradient(
      44% 62% at 50% 58%,
      color-mix(in oklab, var(--gae-champagne) 52%, var(--gae-copper) 12%) 0%,
      color-mix(in oklab, var(--gae-champagne) 26%, transparent) 42%,
      transparent 74%
    ),
    radial-gradient(
      78% 96% at 50% 50%,
      color-mix(in oklab, var(--gae-champagne) 22%, transparent) 0%,
      color-mix(in oklab, var(--gae-copper) 12%, transparent) 46%,
      transparent 80%
    );
}

.is-on .fr-focus {
  animation: fr-focus 3600ms 1950ms cubic-bezier(0.3, 0, 0.25, 1) both;
}

@keyframes fr-focus {
  0% {
    opacity: 0;
    transform: scale3d(0.82, 0.7, 1);
  }
  /* nasce devagar: o ambiente se ilumina antes do sweep passar */
  22% {
    opacity: 0.34;
    transform: scale3d(0.94, 0.88, 1);
  }
  /* pico exatamente quando a microonda atravessa o texto de benefício */
  42% {
    opacity: 0.85;
    transform: scale3d(1.03, 1.04, 1);
  }
  52% {
    opacity: 0.78;
    transform: scale3d(1.01, 1.01, 1);
  }
  /* diminui suavemente — o texto permanece em destaque natural */
  100% {
    opacity: 0;
    transform: scale3d(1.05, 1.06, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .final-reveal,
  .final-reveal.is-on,
  .is-on .fr-presence,
  .is-on .fr-sweep,
  .is-on .fr-sweep-2,
  .is-on .fr-cta-glint,
  .is-on .fr-cta-pulse,
  .is-on .fr-aura,
  .is-on .fr-aura-2,
  .is-on .fr-cta-aura,
  .is-on .fr-focus {
    animation: none;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hint-chevron,
  .champagne-ripple {
    animation: none;
  }

  .film,
  .depth-layer {
    transform: none !important;
    transition: none;
  }
}