/* =====================================================================
   Paradise — slider de destinos (Figma: GRIGOLETTO · 27 — Paradise)

   Uma unidade --u = um pixel do design 1440x810. Ela é o MENOR dos dois
   fatores (largura/1440, altura/810): o palco sempre contém o quadro do
   design inteiro e cresce no outro eixo. Cada peça se ancora na borda a que
   pertence no Figma — barra no topo, descrição e contador embaixo, título e
   cartões no centro — e a foto cobre o palco todo. Assim nada da interface é
   cortado em 16:10, 4:3 ou ultrawide.

   No retrato a unidade passa a ser o menor entre largura/390 e altura/700,
   e a composição é refeita embaixo, no bloco "Retrato".
   ===================================================================== */

:root {
  --u: min(calc(100vw / 1440), calc(100vh / 810));
  --u: min(calc(100vw / 1440), calc(100dvh / 810));
  --serif: "Merriweather", Georgia, serif;
  --sans: "Outfit", system-ui, sans-serif;
  --bg: #1a1a1a;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body {
  overflow: hidden;
  color: #fff;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, figure { margin: 0; font-weight: inherit; font-size: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.stage {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  /* capa 16:9 do palco — o tamanho de qualquer foto antes do zoom (--s) */
  --cw: max(100vw, 100dvh * 16 / 9);
  --ch: max(100dvh, 100vw * 9 / 16);
  /* cartão do carrossel e o vão entre eles */
  --card-w: calc(874 * var(--u));
  --card-h: calc(530 * var(--u));
  --gap: calc(24 * var(--u));
  /* duração e curva da fase em curso — o JS troca a cada fase */
  --d: 0ms;
  --e: cubic-bezier(.9, 0, .1, 1);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

.probe {
  position: fixed; left: 0; top: 0;
  visibility: hidden; pointer-events: none;
  width: var(--card-w); height: var(--card-h);
  padding-left: var(--gap);
  margin-left: calc(1000 * var(--u));
}

/* ---------------------------------------------------------------- fotos */

/* contexto próprio: o z-index de cada foto não pode passar por cima dos textos */
.slides { position: absolute; inset: 0; z-index: 0; }

.slide {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  overflow: hidden;
  background: #0d1b22;
  transition-property: left, top, width, height;
  transition-duration: var(--d);
  transition-timing-function: var(--e);
}
/* sem JS fica só o primeiro destino, montado como hero */
html:not(.js) .slide:not(.is-active) { display: none; }

.slide img {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--cw);
  height: var(--ch);
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(var(--s, var(--zoom, 1)));
  transition: transform var(--d) var(--e);
  backface-visibility: hidden;
}

/* "Rectangle 23": 899x497 no canto inferior esquerdo. Os handles do Figma
   viram 213.74deg com paradas em 44.64% e 83.96% (contas no README).
   O Figma interpola cor e alfa SEPARADOS (preto 1% → tom 100%), o que escurece
   o meio da rampa; o CSS pré-multiplica e sai claro demais. As paradas
   intermediárias refazem a curva do Figma: cor = tom·t, alfa = .01 + .99·t. */
.shade {
  position: absolute;
  left: 0; bottom: 0;
  width: calc(899 * var(--u));
  height: calc(497 * var(--u));
  background: linear-gradient(213.74deg,
    rgb(0 0 0 / .01) 44.64%,
    color-mix(in srgb, color-mix(in srgb, var(--tint) 25%, #000) 25.75%, transparent) 54.47%,
    color-mix(in srgb, color-mix(in srgb, var(--tint) 50%, #000) 50.5%, transparent) 64.3%,
    color-mix(in srgb, color-mix(in srgb, var(--tint) 75%, #000) 75.25%, transparent) 74.13%,
    var(--tint) 83.96%);
  opacity: var(--shade, 1);
  transition: opacity var(--d) var(--e);
  pointer-events: none;
}
.is-zoomed .shade { --shade: 0; }

/* ---------------------------------------------------------------- textos */

.copies { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.copy { position: absolute; inset: 0; transition: clip-path var(--d) var(--e); }

/* Os três blocos saem para BAIXO por dentro de uma janela que corta,
   como os frames com clip do Figma; o próximo entra subindo. */
.label, .title {
  position: absolute;
  left: 0; right: 0;
  overflow: hidden;
  /* flex, não text-align: MALDIVA e ALASKA com o tracking passam da largura
     do palco, e texto que transborda não centraliza com text-align */
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  font-family: var(--serif);
  white-space: nowrap;
}
.label span, .title span {
  display: block;
  flex: none;
  text-box: trim-both cap alphabetic;
  transition: transform var(--d) var(--e);
}

/* "Paradise": Merriweather 500 32px, tracking 54.72, topo da caixa em 187 */
.label {
  top: calc(50% - 218 * var(--u));
  height: calc(24 * var(--u));
  font-size: calc(32 * var(--u));
  font-weight: 500;
  font-variation-settings: "opsz" 32, "wdth" 100;
  letter-spacing: calc(54.72 * var(--u));
  /* o CSS põe o tracking também depois da última letra; o Figma não */
  padding-left: calc(54.72 * var(--u));
}

/* "Caribe": Merriweather 300 em 300px (270px nos nomes mais largos).
   Topo da caixa em 263.5; a janela tem 7px de folga para cima e para baixo. */
.title {
  top: calc(50% - (141.5 + 7) * var(--u));
  padding: calc(7 * var(--u)) 0 calc(7 * var(--u)) calc(var(--ls) * var(--u));
  font-size: calc(var(--fs) * var(--u));
  font-weight: 300;
  /* medido: só "wdth" 112 + "opsz" 18 dá a largura do Figma (1318 / 1385 /
     1364px nos três nomes, dentro de 0.5px). O rótulo, ao contrário, é wdth 100. */
  font-variation-settings: "opsz" 18, "wdth" 112;
  letter-spacing: calc(var(--ls) * var(--u));
}

.desc {
  position: absolute;
  left: calc(82 * var(--u));
  top: calc(100% - 192 * var(--u));
  width: calc(338.9 * var(--u));
  transition: transform var(--d) var(--e), opacity var(--d) var(--e);
}
.desc h2 {
  font-size: calc(20 * var(--u));
  font-weight: 500;
  line-height: 1.26;
  text-transform: uppercase;
  text-box: trim-both cap alphabetic;
}
.desc p {
  margin-top: calc(18 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(20.16 * var(--u));
  opacity: .8;
  text-box: trim-both cap alphabetic;
}

.copy:not(.is-active) .label span { transform: translateY(130%); }
.copy:not(.is-active) .title span { transform: translateY(calc(100% + 14 * var(--u))); }
.copy:not(.is-active) .desc { transform: translateY(calc(50 * var(--u))); opacity: 0; }

/* ---------------------------------------------------------------- barra */

.nav { position: absolute; inset: 0 0 auto; z-index: 3; }

.brand {
  position: absolute;
  left: calc(53 * var(--u));
  top: calc(36.3 * var(--u));
  display: block;
  width: calc(113.7 * var(--u));
  height: calc(15 * var(--u));
}
.globe { position: absolute; left: 0; top: 0; width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.wordmark {
  position: absolute;
  left: calc(31.7 * var(--u));
  top: calc(3.5 * var(--u));
  width: calc(82 * var(--u));
  height: calc(8 * var(--u));
  overflow: visible;
}

.menu {
  position: absolute;
  left: calc(278 * var(--u));
  top: calc(39.8 * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(26 * var(--u));
  font-size: calc(12 * var(--u));
  text-transform: uppercase;
}
.menu a { position: relative; display: block; text-box: trim-both cap alphabetic; }
.menu i { width: 1px; height: calc(8 * var(--u)); margin: 0 -.5px; background: rgb(255 255 255 / .4); }
.menu a[aria-current]::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(18.2 * var(--u));
  height: 1px;
  background: rgb(255 255 255 / .5);
}
.menu a::before { content: ""; position: absolute; inset: calc(-10 * var(--u)) calc(-8 * var(--u)); }
.menu a:hover { opacity: .75; }

.icon { position: absolute; display: block; }
.icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.icon::before { content: ""; position: absolute; inset: calc(-10 * var(--u)); }
.tools .icon:first-child {
  right: calc(113 * var(--u));
  top: calc(32.3 * var(--u));
  width: calc(18 * var(--u)); height: calc(18 * var(--u));
}
.burger {
  right: calc(53 * var(--u));
  top: calc(36.2 * var(--u));
  width: calc(14.9 * var(--u)); height: calc(10 * var(--u));
}

/* ---------------------------------------------------------------- contador */

.counter { position: absolute; inset: 0; pointer-events: none; z-index: 3; font-family: var(--serif); }

.counter-window {
  position: absolute;
  right: calc(195 * var(--u));
  bottom: calc(52 * var(--u));
  width: calc(118 * var(--u));
  height: calc(63 * var(--u));
  overflow: hidden;
}
.counter-roll {
  padding-top: calc(7.5 * var(--u));
  text-align: right;
  font-size: calc(69.835 * var(--u));
  font-weight: 300;
  font-variation-settings: "opsz" 18, "wdth" 112;
  transform: translateY(calc(var(--n, 1) * -83 * var(--u)));
  transition: transform var(--d) var(--e);
}
.counter-roll span { display: block; height: calc(52 * var(--u)); margin-bottom: calc(31 * var(--u)); text-box: trim-both cap alphabetic; }

.counter-rule {
  position: absolute;
  right: calc(143.3 * var(--u));
  bottom: calc(56 * var(--u));
  width: calc(41.9 * var(--u));
  height: 1px;
  background: rgb(255 255 255 / .5);
}
.counter-total {
  position: absolute;
  right: calc(81.8 * var(--u));
  bottom: calc(56 * var(--u));
  width: calc(52 * var(--u));
  text-align: center;
  font-size: calc(40 * var(--u));
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 112;
  opacity: .5;
  text-box: trim-both cap alphabetic;
}

/* ---------------------------------------------------------------- segure */

/* "scroll": aros de 275.6px centrados a 8.5px da borda de baixo — só a
   metade de cima aparece. Desce 154px enquanto o carrossel está aberto. */
.hold {
  position: absolute;
  z-index: 3;
  left: calc(50% - 137.8 * var(--u));
  bottom: calc(-129.3 * var(--u));
  width: calc(275.6 * var(--u));
  height: calc(275.6 * var(--u));
  border-radius: 50%;
  transition: transform var(--d) var(--e);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.is-zoomed .hold { transform: translateY(calc(154 * var(--u))); }

.hold svg { position: absolute; overflow: visible; pointer-events: none; }
.hold-rings, .hold-text { inset: 0; width: 100%; height: 100%; }
.hold circle { fill: none; stroke: #fff; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ring-outer { opacity: .1; }
.ring-inner { opacity: .2; }
.ring-progress {
  opacity: .9;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset .35s ease-out;
}
.hold.is-holding .ring-progress { stroke-dashoffset: 0; transition: stroke-dashoffset var(--hold, 800ms) linear; }

/* "Ellipse 18": vidro 168.2px, branco 8% + desfoque de fundo 20 (Figma)
   = blur(10px) no CSS */
.hold-glass {
  position: absolute;
  left: calc(53.7 * var(--u)); top: calc(53.7 * var(--u));
  width: calc(168.2 * var(--u)); height: calc(168.2 * var(--u));
  border-radius: 50%;
  background: rgb(255 255 255 / .08);
  -webkit-backdrop-filter: blur(calc(10 * var(--u)));
  backdrop-filter: blur(calc(10 * var(--u)));
  transition: background-color .3s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.hold-text text {
  fill: #fff;
  opacity: .4;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 6.71px;
  text-transform: uppercase;
}
.hold-arrow {
  left: calc(128.2 * var(--u)); top: calc(110.3 * var(--u));
  width: calc(20 * var(--u)); height: calc(20 * var(--u));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.hold:hover .hold-glass, .hold:focus-visible .hold-glass { background-color: rgb(255 255 255 / .14); }
.hold:hover .hold-arrow { transform: translateY(calc(3 * var(--u))); }
.hold.is-holding .hold-glass { transform: scale(.94); }
.hold:focus-visible .ring-inner { opacity: .7; }

/* ---------------------------------------------------------------- retrato */

@media (max-aspect-ratio: 4/5) {
  /* referência 390x700; num tablet em pé quem manda é a altura */
  :root {
    --u: min(calc(100vw / 390), calc(100vh / 700));
    --u: min(calc(100vw / 390), calc(100dvh / 700));
  }
  .stage {
    --card-w: calc(262 * var(--u));
    --card-h: calc(400 * var(--u));
    --gap: calc(14 * var(--u));
  }

  .brand { left: calc(22 * var(--u)); top: calc(30 * var(--u)); }
  .menu { display: none; }
  .tools .icon:first-child { right: calc(62 * var(--u)); top: calc(28.5 * var(--u)); }
  .burger { right: calc(22 * var(--u)); top: calc(32.5 * var(--u)); }

  .label {
    top: calc(42% - 86 * var(--u));
    height: calc(11 * var(--u));
    font-size: calc(14.5 * var(--u));
    letter-spacing: calc(24.8 * var(--u));
    padding-left: calc(24.8 * var(--u));
  }
  .title {
    top: calc(42% - (54 + 4) * var(--u));
    padding: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(var(--ls) * .245 * var(--u));
    font-size: calc(var(--fs) * .245 * var(--u));
    letter-spacing: calc(var(--ls) * .245 * var(--u));
  }
  .copy:not(.is-active) .title span { transform: translateY(calc(100% + 8 * var(--u))); }

  .desc { left: calc(24 * var(--u)); top: auto; bottom: calc(146 * var(--u)); width: calc(300 * var(--u)); }
  .desc h2 { font-size: calc(15 * var(--u)); }
  .desc p { margin-top: calc(13 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(17 * var(--u)); }

  /* sem largura para dividir a base com a descrição: o contador sobe para
     o canto de cima, logo abaixo da barra */
  .counter-window { right: calc(80 * var(--u)); top: calc(78 * var(--u)); bottom: auto; width: calc(70 * var(--u)); height: calc(36 * var(--u)); }
  .counter-roll { padding-top: calc(4 * var(--u)); font-size: calc(38 * var(--u)); transform: translateY(calc(var(--n, 1) * -46 * var(--u))); }
  .counter-roll span { height: calc(28.3 * var(--u)); margin-bottom: calc(17.7 * var(--u)); }
  .counter-rule { right: calc(52 * var(--u)); top: calc(110.3 * var(--u)); bottom: auto; width: calc(22 * var(--u)); }
  .counter-total { right: calc(22 * var(--u)); top: calc(96.4 * var(--u)); bottom: auto; width: calc(26 * var(--u)); font-size: calc(19 * var(--u)); }

  .hold { left: calc(50% - 110 * var(--u)); bottom: calc(-102 * var(--u)); width: calc(220 * var(--u)); height: calc(220 * var(--u)); }
  .hold-glass { left: calc(42.9 * var(--u)); top: calc(42.9 * var(--u)); width: calc(134.2 * var(--u)); height: calc(134.2 * var(--u)); }
  .hold-arrow { left: calc(102 * var(--u)); top: calc(88 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .is-zoomed .hold { transform: translateY(calc(130 * var(--u))); }
  .shade { width: 100%; height: 62%; background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, var(--tint) 92%); }
}

/* sem movimento: a foto troca por esmaecimento (no JS) e o texto também */
@media (prefers-reduced-motion: reduce) {
  .copy { transition: opacity .6s ease; }
  .copy:not(.is-active) { opacity: 0; }
  .copy:not(.is-active) .label span,
  .copy:not(.is-active) .title span,
  .copy:not(.is-active) .desc { transform: none; }
}