/* Proposta Voo Livre 23 — palco 1920×1080 escalado para a janela, slides lado a lado. */
:root {
  --brown: #3b1812; --red: #d00d24; --cream: #ffe7ca; --mint: #2cefb8;
  --s: 1; --ox: 0px; --oy: 0px;
  /* posição da linha de base dentro de uma caixa com line-height:1 (em em) */
  --bl-fa: .835; --bl-fd: .835; --bl-ff: .9; --bl-fl: .85;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--brown);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

#viewport {
  position: fixed; inset: 0;
  overflow: hidden;
  touch-action: pinch-zoom;   /* pinça (zoom) liberada; o resto a gente trata no JS */
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
#viewport.is-drag { cursor: grabbing; }
#viewport.is-zoomed { cursor: auto; user-select: text; -webkit-user-select: text; }

#track {
  display: flex;
  height: 100%;
  width: calc(var(--n, 14) * 100vw);
  will-change: transform;
}

.slide {
  position: relative;
  flex: 0 0 100vw;
  height: 100%;
  overflow: hidden;
}
.px { position: absolute; inset: 0; will-change: translate; }

.stage {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
  transform: translate(var(--ox), var(--oy)) scale(var(--s));
  overflow: hidden;
}

.s, .ast, .t, .g { position: absolute; }
.corner-l { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; scale: var(--s); pointer-events: none; }
.photo { object-fit: cover; display: block; -webkit-user-drag: none; }
.corner { position: absolute; right: 0; top: 0; width: 0; height: 0; transform-origin: 100% 0; scale: var(--s); pointer-events: none; }
.g { left: 0; top: 0; width: 0; height: 0; }
.deco { pointer-events: none; overflow: visible; }

.t { white-space: nowrap; line-height: 1; font-kerning: normal; }
.t i { display: block; font-style: inherit; }
.t[data-a="mask"] { clip-path: inset(0 -.06em 0 -.06em); }
.t b { font-weight: inherit; }
.t .mt { color: var(--mint); }
.t .amp { display: inline-block; height: 1em; width: .5408em; vertical-align: -.18em; overflow: visible; }

.ast { width: 246px; height: 246px; }
.ast svg { display: block; overflow: visible; animation: spin 80s linear infinite; animation-play-state: paused; }
.slide.is-on .ast svg { animation-play-state: running; }

.fl { animation: float 7s ease-in-out infinite; animation-play-state: paused; }
.slide.is-on .fl { animation-play-state: running; }
.fl:nth-of-type(2n) { animation-duration: 8.5s; animation-delay: -2s; }
.fl:nth-of-type(3n) { animation-duration: 6.2s; animation-delay: -4s; }
@keyframes float { 50% { translate: 0 -14px; } }
@keyframes spin { to { transform: rotate(360deg); } }

[data-a="grow"] { transform-origin: 0 50%; }

.sticker { background: #5a271e; border-radius: 12px; rotate: 4deg; }
.k-seu[data-sticker] { rotate: 4deg; }
.t.k-seu { font-variation-settings: 'wdth' 66; }
.k-seu b { display: block; }

/* estado inicial das animações de entrada (o JS controla o resto) */
.js [data-a] { opacity: 0; }
.js .g[data-a] { opacity: 1; }
.js .g[data-a] > .t { opacity: 0; }
.js .t[data-a="mask"] { opacity: 1; }
.js .t[data-a="mask"] > i { transform: translateY(112%); }

html.still .fl, html.still .ast svg { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ast svg, .fl { animation: none; }
}

/* aviso discreto: só aparece com o celular em pé */
.rotate-hint {
  position: fixed; left: 0; right: 0; margin: 0 auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  width: max-content; max-width: calc(100vw - 32px);
  display: none; align-items: center; gap: 10px;
  padding: 11px 18px 11px 14px;
  border: 0; border-radius: 999px;
  background: rgba(59, 24, 18, .94); color: var(--cream);
  font: 500 15px/1 Archivo, sans-serif; font-variation-settings: 'wdth' 75; letter-spacing: .01em;
  box-shadow: 0 0 0 1px rgba(255, 231, 202, .2), 0 10px 28px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(12px); pointer-events: none; z-index: 20;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}
@media (orientation: portrait) and (max-width: 900px) { .rotate-hint { display: flex; } }
.rotate-hint.show { opacity: 1; transform: none; pointer-events: auto; transition-delay: 1.1s; }
.rotate-hint.show.out { opacity: 0; transform: translateY(12px); pointer-events: none; transition-delay: 0s; }
.rotate-hint svg { flex: none; }
.rh-phone { transform-box: fill-box; transform-origin: center; animation: rh-turn 3.2s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes rh-turn { 0%, 22% { transform: rotate(0); } 50%, 78% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .rh-phone { animation: none; } .rotate-hint { transition: none; } }

/* dica de tela cheia (iPhone/iPad no navegador): só em paisagem, some sozinha */
.fs-hint { display: none; }
@media (orientation: landscape) and (max-height: 520px) { .fs-hint { display: flex; } .rotate-hint:not(.fs-hint) { display: none; } }
@media (orientation: portrait) { .fs-hint { display: none !important; } }
.fs-hint { font-size: 14px; padding: 9px 16px 9px 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }