/* Camada de movimento — opção aprovada "A · Curtain Call". Requer html[data-motion="a"] e a classe html.intro durante a abertura (ver motion.js). */
/* ===================== MOTION LAYER ===================== */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-expo:cubic-bezier(.16,1,.3,1);--ease-drawer:cubic-bezier(.32,.72,0,1);--ease-pop:cubic-bezier(.34,1.56,.64,1);color-scheme:dark}
/* --- base (every option): feedback, hover gating, route change --- */
.btn{transition:transform 160ms var(--ease-out),background-color 150ms ease,border-color 150ms ease,color 150ms ease}
.btn:active{transform:scale(.97)}
.tabs button{transition:color 150ms ease,border-color 150ms ease}
.topnav a{transition:color 150ms ease,border-color 150ms ease}
.news{transition:transform 260ms var(--ease-out),opacity 200ms ease}
@keyframes markPulse{0%{box-shadow:0 0 0 0 #c9a24f66,0 0 22px #c9a24f44}100%{box-shadow:0 0 0 14px #c9a24f00,0 0 22px #c9a24f44}}
.poster .bulbs:before,.poster .bulbs:after{animation:none}
.map-canvas path{transition:fill 120ms ease,opacity 300ms ease}
.topnav{top:env(safe-area-inset-top,0px)}

/* ===== A · Curtain Call ===== */
html[data-motion=a] .poster{overflow:hidden}
html[data-motion=a] .poster:before{content:'';position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,var(--curtain) 0,#5a1017 50%,var(--curtain) 100%);pointer-events:none;transform:scaleX(0);transform-origin:50% 50%}
html[data-motion=a].intro .poster:before{animation:curtain 1100ms var(--ease-in-out) 350ms both}
@keyframes curtain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
html[data-motion=a].intro .poster .bulbs:before,html[data-motion=a].intro .poster .bulbs:after{animation:chase 1.1s steps(2) 3}
html[data-motion=a].intro .poster .name{animation:rise 900ms var(--ease-expo) 900ms both,bloom 1400ms ease 1200ms both}
@keyframes rise{from{opacity:0;transform:translate(-50%,-30%) rotate(-90deg)}to{opacity:1;transform:translate(-50%,-50%) rotate(-90deg)}}
@keyframes bloom{0%{text-shadow:0 0 0 #ffe1a300,0 0 0 #ffc46a00}60%{text-shadow:0 0 34px #ffe1a3ff,0 0 110px #ffc46a99}100%{text-shadow:0 0 16px #ffe1a3b0,0 0 70px #ffc46a55}}
html[data-motion=a].intro .poster .seal,html[data-motion=a].intro .poster .act-clock,html[data-motion=a].intro .poster .now,html[data-motion=a].intro .poster .brand{animation:fadeUp 600ms var(--ease-out) 1500ms both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html[data-motion=a] .act .no,html[data-motion=a] .act h1,html[data-motion=a] .act h2{clip-path:inset(0 0 0 0)}
html[data-motion=a] .act.pre .no,html[data-motion=a] .act.pre h1,html[data-motion=a] .act.pre h2{clip-path:inset(0 100% 0 0)}
html[data-motion=a] .act.in .no{transition:clip-path 500ms var(--ease-in-out)}
html[data-motion=a] .act.in h1,html[data-motion=a] .act.in h2{transition:clip-path 700ms var(--ease-in-out) 120ms}
html[data-motion=a] .tickets .ticket{transition:transform 500ms var(--ease-out),opacity 400ms ease}
html[data-motion=a] .act.pre .ticket{opacity:0;transform:translateY(14px)}
html[data-motion=a] .act.in .ticket:nth-child(2){transition-delay:60ms}html[data-motion=a] .act.in .ticket:nth-child(3){transition-delay:120ms}
html[data-motion=a] [data-applaud].on svg{animation:pop 420ms var(--ease-pop) 1}
@keyframes pop{0%{transform:scale(.8)}100%{transform:scale(1)}}
html[data-motion=a] .encore h2{animation:bloom 1400ms ease both}
/* mobile poster for A: name rises vertically (not rotated) */
@media(max-width:860px){html[data-motion=a].intro .poster .name{animation:riseM 900ms var(--ease-expo) 900ms both,bloom 1400ms ease 1200ms both}}
@keyframes riseM{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* reduced motion: gentler, never zero */
@media(prefers-reduced-motion:reduce){
 html[data-motion] *{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
 html[data-motion=a] .poster:before{display:none}
 html[data-motion=a] .act.pre .no,html[data-motion=a] .act.pre h1,html[data-motion=a] .act.pre h2{clip-path:none}
 html[data-motion=a] .act.pre .ticket{opacity:1;transform:none}
}