/* Marina & Eduardo — base comum das aberturas de teste */
:root{
  --papel:#F4EDE7;
  --papel-2:#EDE3DA;
  --terracota:#9F5333;
  --vinho:#6A2434;
  --vinho-esc:#3A0F1A;
  --tinta:#3B2A26;
  --cobre-claro:#E9C3A6;
  --serif:"Cormorant Garamond", "Times New Roman", serif;
  --sans:"Jost", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{overflow-x:clip;background:var(--papel)}
body{font-family:var(--sans);color:var(--tinta);background:var(--papel);-webkit-font-smoothing:antialiased}
h1,h2,h3,p{text-wrap:balance}
p{text-wrap:pretty}
img{display:block;max-width:100%;height:auto}

/* grão de papel bem leve */
.grao{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- palco preso ---------- */
.abertura{position:relative;height:100vh;height:100lvh;overflow:hidden}
.palco{position:absolute;inset:0;overflow:hidden}

/* boina da politriz (vista de cima) */
.boina{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;opacity:0;will-change:transform;
  background:radial-gradient(circle at 50% 50%,#2a2a2a 0 9%,#4a4a4a 9.5% 12%,#e8652a 12.5% 64%,#c9521d 64.5% 70%,#1d1d1d 70.5% 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.06)}
.boina i{position:absolute;inset:14%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(0,0,0,.13) 0 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,transparent 22%,#000 23%);mask:radial-gradient(circle,transparent 22%,#000 23%);
  animation:gira .32s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

.dica{position:absolute;left:0;right:0;bottom:5.5vh;text-align:center;font:400 13px/1.4 var(--sans);
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,236,226,.78);pointer-events:none}
.dica b{display:block;width:1px;height:34px;margin:12px auto 0;background:currentColor;opacity:.6;
  transform-origin:top;animation:desce 1.8s ease-in-out infinite}
@keyframes desce{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.dica.escura{color:rgba(59,42,38,.7)}

/* ---------- nomes ao lado do carro (B e C) ---------- */
.nome{position:absolute;top:0;font:500 clamp(30px,min(4.1vw,7.4vh),68px)/1 var(--serif);letter-spacing:.32em;
  color:var(--vinho);white-space:nowrap;pointer-events:none}
.nome small{display:block;margin-top:.9em;font:400 clamp(12px,1vw,15px)/1 var(--sans);letter-spacing:.42em;color:var(--terracota)}
.nome.esq{text-align:right;margin-right:-.32em}
.data-baixo{position:absolute;left:0;right:0;text-align:center;font:400 clamp(13px,1.05vw,16px)/1 var(--sans);
  letter-spacing:.5em;color:var(--terracota);pointer-events:none}

/* ---------- seção da data (comum) ---------- */
.data{position:relative;background:var(--papel);padding:120px 24px 110px;text-align:center;overflow:hidden}
.data .mono{width:min(150px,28vw);margin:0 auto 34px}
.data h2{font:500 clamp(30px,3.4vw,52px)/1.1 var(--serif);letter-spacing:.06em;color:var(--vinho)}
.data .dia{margin-top:14px;font:400 15px/1.5 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--terracota)}
.painel{display:flex;justify-content:center;gap:clamp(14px,3vw,48px);margin:64px auto 0;flex-wrap:wrap}
.mostrador{width:clamp(120px,11vw,168px);position:relative}
.mostrador svg{width:100%;height:auto;overflow:visible}
.mostrador .num{position:absolute;left:0;right:0;top:36%;font:500 clamp(34px,3.2vw,50px)/1 var(--serif);color:var(--vinho);font-variant-numeric:tabular-nums}
.mostrador .rot{margin-top:-6px;font:400 12px/1 var(--sans);letter-spacing:.36em;text-transform:uppercase;color:var(--terracota)}
.locais{display:flex;justify-content:center;gap:clamp(24px,6vw,96px);margin-top:72px;flex-wrap:wrap}
.local{max-width:340px}
.local h3{font:500 26px/1.15 var(--serif);color:var(--vinho)}
.local .hora{font:400 13px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--terracota);margin-bottom:12px}
.local p{margin-top:8px;font:300 16px/1.55 var(--sans);color:var(--tinta)}
.lema{margin-top:90px;font:italic 400 clamp(32px,3.6vw,56px)/1.1 var(--serif);color:var(--terracota)}
.rodape{padding:40px 24px 90px;text-align:center;font:300 13px/1.4 var(--sans);color:rgba(59,42,38,.6);background:var(--papel)}
.rodape a{color:inherit}

/* entrada borrada (blur-in) */
[data-entra]{opacity:0;filter:blur(14px);transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
[data-entra].in{opacity:1;filter:none;transform:none}

/* trocador de aberturas (só no teste) */
.troca{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;gap:4px;align-items:center;padding:5px 6px 5px 14px;border-radius:99px;
  background:rgba(30,12,18,.78);color:#f4ede7;font:400 12px/1 var(--sans);letter-spacing:.08em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.troca span{margin-right:6px;opacity:.75}
.troca a{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:inherit;text-decoration:none;font-weight:500}
.troca a.on{background:#f4ede7;color:var(--vinho)}

@media (prefers-reduced-motion:reduce){
  .boina i,.dica b{animation:none}
  [data-entra]{transition:none;opacity:1;filter:none;transform:none}
}