/* Abertura em história: "você acessou algo VIP". Camada de teste, não mexe na base.
   Passe de acesso sobe, é escaneado e carimbado "LIBERADO"; a tela se abre em diagonal e a página começa. */
html.intro-on,html.intro-on body{overflow:hidden}

.intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#3d4044;color:#fff;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);font-family:var(--fonte,system-ui)}
.intro::before{content:"";position:absolute;inset:0;background:var(--grao);opacity:.07;mix-blend-mode:screen;pointer-events:none}
.intro::after{content:"";position:absolute;left:50%;top:50%;width:140vmax;height:140vmax;translate:-50% -50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 55%);opacity:0;animation:in-brasa 1.8s ease-out .5s forwards;pointer-events:none}
@keyframes in-brasa{0%{opacity:0}50%{opacity:1}100%{opacity:.55}}

.intro-cena{position:relative;z-index:2;display:grid;justify-items:center;gap:22px;width:min(86vw,340px);text-align:center}

/* 1) frase de entrada */
.intro-txt1{margin:0;font-size:13px;font-weight:800;letter-spacing:.5em;text-transform:uppercase;color:#cfcfcf;opacity:0;animation:in-letras .9s cubic-bezier(.2,.8,.2,1) .15s forwards}
@keyframes in-letras{from{opacity:0;letter-spacing:.9em}to{opacity:1;letter-spacing:.32em}}

/* 2) passe de acesso */
.intro-ticket{position:relative;width:100%;background:var(--papel,#f4f1ec);color:#0a0a0a;border-radius:6px;box-shadow:6px 6px 0 var(--laranja,#f59b3a);opacity:0;translate:0 46px;rotate:-3deg;animation:in-sobe .65s cubic-bezier(.2,.9,.25,1) .55s forwards}
@keyframes in-sobe{to{opacity:1;translate:0 0;rotate:-2deg}}
.intro-ticket::before,.intro-ticket::after{content:"";position:absolute;top:calc(100% - 52px);width:22px;height:22px;border-radius:50%;background:#3d4044}
.intro-ticket::before{left:-11px}
.intro-ticket::after{right:-11px}
.it-topo{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 0;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#6b6b6b}
.it-nome{padding:6px 18px 16px;font-size:clamp(40px,13vw,54px);line-height:.95;font-weight:900;letter-spacing:-.03em;text-align:left;text-transform:uppercase}
.it-nome em{font-style:normal;color:var(--vermelho,#0e8a96)}
.it-baixo{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-top:2px dashed #cfc7b8;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.it-barras{flex:1;height:26px;background:repeating-linear-gradient(90deg,#0a0a0a 0 2px,transparent 2px 5px,#0a0a0a 5px 6px,transparent 6px 10px,#0a0a0a 10px 13px,transparent 13px 16px);opacity:.85}
/* linha de leitura que percorre o passe */
.it-scan{position:absolute;left:0;right:0;top:0;height:3px;background:var(--laranja,#f59b3a);box-shadow:0 0 18px 5px rgba(245,155,58,.85);opacity:0;animation:in-scan .75s ease-in-out 1.15s forwards}
@keyframes in-scan{0%{opacity:0;top:0}12%{opacity:1}88%{opacity:1}100%{opacity:0;top:calc(100% - 3px)}}

/* 3) carimbo */
.intro-carimbo{position:absolute;right:-6px;bottom:20px;padding:6px 14px;border:4px solid var(--vermelho,#0e8a96);border-radius:4px;color:var(--vermelho,#0e8a96);background:rgba(244,241,236,.88);font-size:22px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;opacity:0;scale:2.4;rotate:-14deg;animation:in-carimbo .28s cubic-bezier(.5,0,.2,1.3) 1.95s forwards}
@keyframes in-carimbo{0%{opacity:0;scale:2.4}60%{opacity:1;scale:.94}100%{opacity:1;scale:1;rotate:-9deg}}
.intro-ticket.bate{animation:in-sobe .65s cubic-bezier(.2,.9,.25,1) .55s forwards,in-bate .22s ease-out 2.05s}
@keyframes in-bate{0%,100%{translate:0 0}35%{translate:0 6px}70%{translate:0 -2px}}

/* 4) frase final */
.intro-txt2{margin:0;font-size:18px;font-weight:700;line-height:1.35;opacity:0;translate:0 12px;animation:in-fio .55s ease 2.35s forwards}
.intro-txt2 b{color:var(--laranja,#f59b3a)}
@keyframes in-fio{to{opacity:1;translate:0 0}}

/* barra de "carregamento" e botão pular */
.intro-barra{position:absolute;left:0;bottom:0;height:4px;width:100%;background:rgba(255,255,255,.12);z-index:3}
.intro-barra i{display:block;height:100%;width:100%;background:var(--laranja,#f59b3a);transform-origin:left;scale:0 1;animation:in-barra 3s linear forwards}
@keyframes in-barra{to{scale:1 1}}
.intro-pular{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:4;min-height:44px;padding:0 16px;border:2px solid rgba(255,255,255,.55);background:rgba(0,0,0,.3);color:#fff;font:inherit;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:0;animation:in-suave .4s ease .3s forwards;cursor:pointer}
.intro-pular:hover{border-color:#fff}
@keyframes in-suave{to{opacity:1}}

/* saída: a tela se abre em diagonal */
.intro.sai{animation:in-abre .6s cubic-bezier(.7,0,.2,1) forwards;pointer-events:none}
@keyframes in-abre{from{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 0,0 22%)}}
.intro.sai .intro-cena{animation:in-some .35s ease forwards}
@keyframes in-some{to{opacity:0;translate:0 -18px}}

/* movimento reduzido: só um fade curto */
@media (prefers-reduced-motion:reduce){
  .intro,.intro *,.intro::after{animation-duration:.01ms!important;animation-delay:0s!important}
}
.intro-carimbo{top:58px;right:12px;bottom:auto}