/* Luz da primeira tela: em vez de duas metades coladas (com uma emenda reta no centro), o fundo
   troca de cor de forma suave da esquerda para a direita, e se dissolve em formato oval. */
.hero__figure::before,
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero__image {
  z-index: 1; /* o video fica sempre por cima das duas camadas de luz */
}
.hero__figure::before {
  background:
    radial-gradient(ellipse 62% 60% at 50% 50%, transparent 55%, var(--atmos-base) 100%),
    linear-gradient(180deg, #252037 0%, #2d253c 10%, #3a2e46 20%, #4d3a4d 30%, #64474f 40%, #8c634e 50%, #835e4d 60%, #573a45 70%, #3e2d3e 80%, #2d2032 90%, #20182a 100%);
  -webkit-mask-image:
    radial-gradient(ellipse 110% 50% at 50% 50%, #000 52%, rgb(0 0 0 / 0.65) 78%, transparent 100%),
    linear-gradient(to right, #000 0%, #000 38%, transparent 62%),
    linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 0.18) 8%, rgb(0 0 0 / 0.55) 20%, #000 38%, #000 100%);
  mask-image:
    radial-gradient(ellipse 110% 50% at 50% 50%, #000 52%, rgb(0 0 0 / 0.65) 78%, transparent 100%),
    linear-gradient(to right, #000 0%, #000 38%, transparent 62%),
    linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 0.18) 8%, rgb(0 0 0 / 0.55) 20%, #000 38%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero__figure::after {
  background:
    radial-gradient(ellipse 62% 60% at 50% 50%, transparent 55%, var(--atmos-base) 100%),
    linear-gradient(180deg, #584351 0%, #715660 10%, #a88571 20%, #bb987c 30%, #ad8a7d 40%, #b48c74 50%, #c28d5c 60%, #a9714f 70%, #7b4f4e 80%, #573b4b 90%, #432f44 100%);
  -webkit-mask-image:
    radial-gradient(ellipse 110% 50% at 50% 50%, #000 52%, rgb(0 0 0 / 0.65) 78%, transparent 100%),
    linear-gradient(to right, transparent 38%, #000 62%, #000 100%),
    linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 0.18) 8%, rgb(0 0 0 / 0.55) 20%, #000 38%, #000 100%);
  mask-image:
    radial-gradient(ellipse 110% 50% at 50% 50%, #000 52%, rgb(0 0 0 / 0.65) 78%, transparent 100%),
    linear-gradient(to right, transparent 38%, #000 62%, #000 100%),
    linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 0.18) 8%, rgb(0 0 0 / 0.55) 20%, #000 38%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* O video ocupa o mesmo espaco da antiga foto, esmaecendo nas laterais e nas pontas (pes preservados).
   As bordas ficam 100% transparentes (sem a linha fina na emenda com o fundo). */
.hero__image {
  object-fit: cover;
  clip-path: inset(0 2px);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, transparent 2%, #000 30%, #000 70%, transparent 98%, transparent 100%),
    linear-gradient(to bottom, transparent 0, transparent 1%, rgb(0 0 0 / 0.35) 6%, #000 15%, #000 95.5%, transparent 99.4%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, transparent 2%, #000 30%, #000 70%, transparent 98%, transparent 100%),
    linear-gradient(to bottom, transparent 0, transparent 1%, rgb(0 0 0 / 0.35) 6%, #000 15%, #000 95.5%, transparent 99.4%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Brilho suave: so a logo respirando uma luz e o Booking pulsando.
   Nao mexe na foto, no fundo nem no layout. So roda para quem nao pediu "reduzir movimento". */
@media (prefers-reduced-motion: no-preference) {
  @keyframes logo-glow {
    0%, 100% { filter: drop-shadow(0 0 0 rgb(155 125 255 / 0)); }
    50%      { filter: drop-shadow(0 0 12px rgb(155 125 255 / 0.55)) drop-shadow(0 0 28px rgb(214 124 240 / 0.28)); }
  }
  .hero__logo {
    animation: logo-glow 5s ease-in-out infinite;
  }

  @keyframes booking-glow {
    0%, 100% { text-shadow: 0 0 0 rgb(214 124 240 / 0); }
    50%      { text-shadow: 0 0 10px rgb(214 124 240 / 0.85), 0 0 22px rgb(155 125 255 / 0.55); }
  }
  @keyframes booking-line {
    0%, 100% { opacity: 0.55; transform: scaleX(0.62); }
    50%      { opacity: 1;    transform: scaleX(1); }
  }
  .site-nav__link--primary {
    animation: booking-glow 2.8s ease-in-out infinite;
  }
  .site-nav__link--primary::after {
    transform-origin: left center;
    box-shadow: 0 0 8px rgb(155 125 255 / 0.85);
    animation: booking-line 2.8s ease-in-out infinite;
  }
}


/* ---------------------------------------------------------------- Texto abaixo da animacao */
/* Maior e mais legivel (era pequeno e todo branco). */
.hero__subtitle:not(.hero__subtitle--small) {
  font-size: clamp(1.5rem, 4.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1.18;
}
.hero__subtitle--small {
  margin-top: clamp(1.4rem, 3.2vw, 2.4rem);
  font-size: clamp(1.15rem, 2.7vw, 1.95rem);
  color: rgb(255 255 255 / 0.9);
}
.hero__subtitle .w--key {
  /* Frase principal toda em branco (as palavras-chave nao tem mais cor propria). */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  /* "Music for Every Mood." vibra devagar, como o grave de uma caixa de som: uma batida por
     compasso (4 batidas a 128 BPM = 1,875 s), suave e sem balancar de lado. */
  @keyframes speaker-beat {
    0%   { transform: scale(1); }
    12%  { transform: scale(1.03); }
    40%  { transform: scale(0.997); }
    65%  { transform: scale(1); }
    100% { transform: scale(1); }
  }
  @keyframes speaker-glow {
    0%   { filter: drop-shadow(0 0 1.2rem rgb(155 125 255 / 0.2)); }
    12%  { filter: drop-shadow(0 0 2.2rem rgb(190 130 255 / 0.55)) brightness(1.07); }
    65%, 100% { filter: drop-shadow(0 0 1.2rem rgb(155 125 255 / 0.2)); }
  }
  .hero__tagline {
    transform-origin: 50% 55%;
    animation: speaker-beat 1.875s ease-in-out infinite;
  }
  .hero__accent {
    animation: speaker-glow 1.875s ease-in-out infinite;
  }

  /* CICLO de 7 s, reiniciado pelo proprio site (js/hero-text.js): as 3 frases caem inteiras ("pa!"),
     0.85 s cada uma; depois a frase de baixo chega de uma vez e pisca uma vez (o mesmo tempo que as 3
     levaram para cair); tudo some devagar e recomeca. */
  .hero__subtitles .hero__subtitle:not(.hero__subtitle--small) .s {
    display: inline-block;
    opacity: 0;
    transform: translateY(-3.2em) scale(1.3);
  }
  @keyframes drop-1 {
    0% { opacity: 0; transform: translateY(-3.2em) scale(1.3); filter: blur(7px) brightness(1); }
    0.0% { opacity: 0; transform: translateY(-3.2em) scale(1.3); filter: blur(7px) brightness(1);
                 animation-timing-function: cubic-bezier(0.22, 0.9, 0.3, 1); }
    5.59% { opacity: 1; transform: translateY(0.14em) scale(0.96); filter: blur(0px) brightness(1.6); }
    7.53% { transform: translateY(-0.06em) scale(1.03); filter: blur(0px) brightness(1.2); }
    9.71% { transform: translateY(0.02em) scale(0.995); filter: blur(0px) brightness(1); }
    12.14%, 85.71% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px) brightness(1); }
    92.86%, 100% { opacity: 0; transform: translateY(0.9em) scale(0.97); filter: blur(6px) brightness(1); }
  }
  @keyframes drop-2 {
    0% { opacity: 0; transform: translateY(-3.2em) scale(1.3); filter: blur(7px) brightness(1); }
    12.14% { opacity: 0; transform: translateY(-3.2em) scale(1.3); filter: blur(7px) brightness(1);
                 animation-timing-function: cubic-bezier(0.22, 0.9, 0.3, 1); }
    17.73% { opacity: 1; transform: translateY(0.14em) scale(0.96); filter: blur(0px) brightness(1.6); }
    19.67% { transform: translateY(-0.06em) scale(1.03); filter: blur(0px) brightness(1.2); }
    21.86% { transform: translateY(0.02em) scale(0.995); filter: blur(0px) brightness(1); }
    24.29%, 85.71% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px) brightness(1); }
    92.86%, 100% { opacity: 0; transform: translateY(0.9em) scale(0.97); filter: blur(6px) brightness(1); }
  }
  @keyframes drop-3 {
    0% { opacity: 0; transform: translateY(-3.2em) scale(1.3); filter: blur(7px) brightness(1); }
    24.29% { opacity: 0; transform: translateY(-3.2em) scale(1.3); filter: blur(7px) brightness(1);
                 animation-timing-function: cubic-bezier(0.22, 0.9, 0.3, 1); }
    29.87% { opacity: 1; transform: translateY(0.14em) scale(0.96); filter: blur(0px) brightness(1.6); }
    31.81% { transform: translateY(-0.06em) scale(1.03); filter: blur(0px) brightness(1.2); }
    34.0% { transform: translateY(0.02em) scale(0.995); filter: blur(0px) brightness(1); }
    36.43%, 85.71% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px) brightness(1); }
    92.86%, 100% { opacity: 0; transform: translateY(0.9em) scale(0.97); filter: blur(6px) brightness(1); }
  }
  @keyframes far-loop {
    0%, 36.43% { opacity: 0; transform: scale(0.4); filter: blur(12px);
                      animation-timing-function: cubic-bezier(0.16, 0.8, 0.3, 1); }
    45.71%, 68.3% { opacity: 1; transform: scale(1); filter: blur(0); text-shadow: 0 0 0 rgb(214 124 240 / 0); }
    71.94% { opacity: 0.12; }
    76.31% { opacity: 1; text-shadow: 0 0 1.1rem rgb(214 124 240 / 0.9); }
    82.14%, 85.71% { opacity: 1; transform: scale(1); filter: blur(0); text-shadow: 0 0 0 rgb(214 124 240 / 0); }
    92.86%, 100% { opacity: 0; transform: scale(1.12); filter: blur(8px); }
  }
  .hero__subtitles.is-in .hero__subtitle:not(.hero__subtitle--small) .s:nth-of-type(1) { animation: drop-1 7s linear both; }
  .hero__subtitles.is-in .hero__subtitle:not(.hero__subtitle--small) .s:nth-of-type(2) { animation: drop-2 7s linear both; }
  .hero__subtitles.is-in .hero__subtitle:not(.hero__subtitle--small) .s:nth-of-type(3) { animation: drop-3 7s linear both; }

  .hero__subtitle--far {
    opacity: 0;
    transform: scale(0.4);
    filter: blur(12px);
  }
  .hero__subtitles.is-in .hero__subtitle--far {
    animation: far-loop 7s linear both;
  }
}


/* ---------------------------------------------------------------- Cards com video */
/* So os cards que receberam um video (cards-videos.json) ganham o gesto de clique. */
.card.has-video,
.card.has-video .card__play {
  cursor: pointer;
}
.card.has-video .card__play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.lightbox--card .lightbox__caption {
  position: relative;
  margin: 0;
  color: rgb(255 255 255 / 0.8);
  text-align: center;
}