/* Swiper: camada extra (clonar formato, boas-vindas, movimento) */
.cx-btn{display:inline-flex;align-items:center;gap:.45rem;min-height:38px;padding:.4rem .95rem;border-radius:999px;border:1px solid transparent;background:var(--acc,var(--accent-mentor));color:var(--on-accent);font:600 .84rem/1 inherit;font-family:inherit;cursor:pointer;margin-left:auto;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease}
.cx-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.cx-btn svg{width:15px;height:15px}
.cx-btn.cx-top{margin:.9rem 0 .2rem;margin-left:0}
.piece-head{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.cx-bg{position:fixed;inset:0;background:var(--scrim);z-index:9000;display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .2s ease}
.cx-bg.on{opacity:1}
.cx-box{width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--paper);color:var(--ink);border-radius:20px;box-shadow:var(--shadow-lift);padding:22px 22px 18px;transform:translateY(12px) scale(.98);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.cx-bg.on .cx-box{transform:none}
.cx-box h2{font-family:Fraunces,Georgia,serif;font-size:1.45rem;line-height:1.15;margin:0 0 .25rem;color:var(--title-on-paper)}
.cx-box .cx-sub{color:var(--ink-soft);font-size:.9rem;margin:0 0 1rem}
.cx-steps{display:flex;gap:.4rem;margin:0 0 1rem}
.cx-steps span{flex:1;height:4px;border-radius:99px;background:var(--paper-2)}
.cx-steps span.on{background:var(--acc,var(--accent-mentor))}
.cx-f{display:block;margin-bottom:.8rem}
.cx-f b{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.3rem}
.cx-f input,.cx-f textarea{width:100%;box-sizing:border-box;border:1px solid rgba(33,28,21,.16);background:#fff;color:var(--ink);border-radius:12px;padding:.65rem .8rem;font:inherit;font-size:.95rem}
.cx-f textarea{min-height:68px;resize:vertical}
.cx-f input:focus,.cx-f textarea:focus{outline:2px solid var(--acc,var(--accent-mentor));outline-offset:1px}
.cx-out{width:100%;box-sizing:border-box;min-height:210px;border:1px solid rgba(33,28,21,.16);background:#fff;color:var(--ink);border-radius:12px;padding:.75rem;font:.82rem/1.5 ui-monospace,Menlo,monospace}
.cx-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.cx-row .btn{min-height:40px}
.cx-note{font-size:.8rem;color:var(--ink-soft);margin:.6rem 0 0}
.cx-x{float:right;border:0;background:transparent;color:var(--ink-soft);font-size:1.4rem;line-height:1;cursor:pointer;padding:.1rem .3rem;border-radius:8px}
.cx-x:hover{background:var(--paper-2)}
.cx-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,10px);background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-radius:12px;font-weight:600;font-size:.9rem;opacity:0;transition:.2s;z-index:9100;pointer-events:none}
.cx-toast.on{opacity:1;transform:translate(-50%,0)}
.cx-how{display:grid;gap:.7rem;margin:.4rem 0 1rem;padding:0;list-style:none;counter-reset:s}
.cx-how li{display:grid;grid-template-columns:34px 1fr;gap:.7rem;align-items:start;counter-increment:s}
.cx-how li::before{content:counter(s);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--acc,var(--accent-mentor));color:var(--on-accent);font-weight:700}
.cx-how b{display:block;margin-bottom:.1rem}
.cx-how span{color:var(--ink-soft);font-size:.9rem}
.gate-buyer{font-size:.85rem;opacity:.8;margin-top:.8rem;text-align:center}
@media (max-width:600px){.cx-box{padding:18px 16px 14px;border-radius:16px}.cx-btn{margin-left:0}}
@media (prefers-reduced-motion:reduce){.cx-bg,.cx-box,.cx-toast{transition:none}}

/* ===== Swiper FX: camada de movimento e acabamento ===== */
:root{--fx-ease:cubic-bezier(.16,1,.3,1);--fx-spring:cubic-bezier(.34,1.56,.64,1)}

/* troca de tela mais marcada */
@keyframes fx-view{from{opacity:0;transform:translateY(22px) scale(.985);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.view.enter{animation:fx-view .6s var(--fx-ease) both!important}

/* revelar ao rolar */
.fx-r{opacity:0;transform:translateY(34px) scale(.97);filter:blur(6px);transition:opacity .8s var(--fx-ease),transform .9s var(--fx-ease),filter .8s var(--fx-ease);transition-delay:var(--fx-d,0s)}
.fx-r.fx-in{opacity:1;transform:none;filter:none}

/* ---- capa da tela inicial ---- */
.sh-hero{isolation:isolate}
.sh-hero .sh-hero-art{animation:fx-kb 22s ease-in-out infinite alternate;transform-origin:65% 40%;will-change:transform}
@keyframes fx-kb{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-2%,-1.5%,0)}}
.sh-hero .sh-hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 0% 100%,rgba(8,9,12,.92) 0%,rgba(8,9,12,.55) 38%,transparent 70%),linear-gradient(0deg,rgba(8,9,12,.7),transparent 45%);pointer-events:none}
.sh-hero .sh-hero-bg::before{content:"";position:absolute;inset:-20%;z-index:1;background:radial-gradient(40% 50% at var(--fx-mx,30%) var(--fx-my,70%),color-mix(in srgb,var(--title-color,#E3B341) 22%,transparent),transparent 70%);mix-blend-mode:screen;pointer-events:none;transition:background-position .3s}
.fx-w{display:inline-block;opacity:0;transform:translateY(.5em);filter:blur(10px);animation:fx-word .9s var(--fx-ease) forwards;animation-delay:calc(var(--i)*70ms + .15s)}
@keyframes fx-word{to{opacity:1;transform:none;filter:none}}
.fx-hero .sh-kick{animation:fx-drop .7s var(--fx-ease) both}
.fx-hero .sh-hero-s,.fx-hero .sh-hero-m{animation:fx-up .8s var(--fx-ease) both;animation-delay:.55s}
.fx-hero .sh-hero-act .sh-btn{animation:fx-pop .7s var(--fx-spring) both}
.fx-hero .sh-hero-act .sh-btn:nth-child(1){animation-delay:.75s}.fx-hero .sh-hero-act .sh-btn:nth-child(2){animation-delay:.85s}.fx-hero .sh-hero-act .sh-btn:nth-child(3){animation-delay:.95s}
@keyframes fx-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fx-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fx-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.sh-dot{animation:fx-pulse 2.2s ease-out infinite}
@keyframes fx-pulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* brilho que atravessa os botões principais */
.sh-btn.primary,.btn.primary,.cx-btn,#gate-btn{position:relative;overflow:hidden}
.sh-btn.primary::after,.btn.primary::after,.cx-btn::after,#gate-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:fx-shine 4.5s ease-in-out infinite;pointer-events:none}
@keyframes fx-shine{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}

/* ---- cards: inclinação 3D com reflexo ---- */
.fx-t{transform-style:preserve-3d;transition:transform .5s var(--fx-ease),box-shadow .5s var(--fx-ease)!important;will-change:transform}
.fx-t.fx-on{transition:transform .12s linear,box-shadow .3s ease!important;transform:perspective(900px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg)) translateY(-6px) scale(1.03)!important;box-shadow:0 26px 60px -18px rgba(0,0,0,.65),0 0 0 1px color-mix(in srgb,var(--title-color,#E3B341) 35%,transparent)!important;z-index:3}
.fx-t .fx-g{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--fx-gx,50%) var(--fx-gy,50%),rgba(255,255,255,.22),transparent 45%);mix-blend-mode:soft-light;z-index:4}
.fx-t.fx-on .fx-g{opacity:1}
.card.tile .tile-art img,.sh-tr-art img,.sh-hub-art img,.poster-art img{transition:transform .9s var(--fx-ease),filter .6s}
.fx-t.fx-on .tile-art img,.fx-t.fx-on .sh-tr-art img,.fx-t.fx-on .sh-hub-art img,.fx-t.fx-on .poster-art img{transform:scale(1.08);filter:saturate(1.15) contrast(1.05)}
.sh-hub{transition:transform .5s var(--fx-ease),border-color .3s,background .3s}
.sh-hub.fx-on{border-color:color-mix(in srgb,var(--title-color,#E3B341) 55%,transparent)!important}

/* títulos das seções com traço que cresce */
.row-head h2,.sh-sec>h2,.sh-sec .row-head h2{position:relative}
.fx-in .row-head h2::after,.sh-sec.fx-in>h2::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:46px;border-radius:2px;background:var(--title-color,#E3B341);transform-origin:left;animation:fx-line .9s var(--fx-ease) .2s both}
@keyframes fx-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- página da peça ---- */
#fx-prog{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--title-color,#E3B341),#D4776D);z-index:9500;pointer-events:none;box-shadow:0 0 12px color-mix(in srgb,var(--title-color,#E3B341) 60%,transparent);transition:opacity .3s}
body:not(.is-sub) #fx-prog{opacity:0}
#view-detail #panel{animation:fx-panel .7s var(--fx-ease) both}
@keyframes fx-panel{from{opacity:0;transform:translateY(40px) scale(.98)}to{opacity:1;transform:none}}
#panel-title{animation:fx-up .8s var(--fx-ease) .1s both}
#panel-summary,#cx-clone{animation:fx-up .8s var(--fx-ease) .22s both}
.vid-wrap{box-shadow:0 30px 70px -25px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06);transition:transform .6s var(--fx-ease),box-shadow .6s}
.vid-wrap:hover{transform:translateY(-3px);box-shadow:0 40px 90px -25px rgba(0,0,0,.85),0 0 0 1px color-mix(in srgb,var(--title-color,#E3B341) 30%,transparent)}
.st-tab{transition:transform .35s var(--fx-spring),background .3s,color .3s}
.st-tab:active,.sh-btn:active,.btn:active,.cx-btn:active{transform:scale(.95)}
.briefing-block>*,.piece-transcript>*{animation:fx-up .6s var(--fx-ease) both}
.briefing-block>*:nth-child(2){animation-delay:.04s}.briefing-block>*:nth-child(3){animation-delay:.08s}.briefing-block>*:nth-child(4){animation-delay:.12s}.briefing-block>*:nth-child(n+5){animation-delay:.16s}

/* ---- login ---- */
.gate{overflow:hidden;isolation:isolate}
.gate-card .brand-mark{align-items:center;justify-content:center}
.gate::before,.gate::after{content:"";position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(90px);opacity:.55;z-index:-1;pointer-events:none}
.gate::before{background:radial-gradient(circle,#8A2E2E,transparent 65%);top:-30vmax;left:-20vmax;animation:fx-orb1 18s ease-in-out infinite alternate}
.gate::after{background:radial-gradient(circle,#B8862E,transparent 65%);bottom:-35vmax;right:-25vmax;animation:fx-orb2 22s ease-in-out infinite alternate}
@keyframes fx-orb1{to{transform:translate(18vmax,14vmax) scale(1.15)}}
@keyframes fx-orb2{to{transform:translate(-16vmax,-12vmax) scale(1.2)}}
.gate-card{animation:fx-card 1s var(--fx-ease) both;backdrop-filter:blur(6px);box-shadow:0 40px 120px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)!important}
@keyframes fx-card{from{opacity:0;transform:translateY(30px) scale(.96);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.gate-card h1,.gate-card .gate-title{animation:fx-up .9s var(--fx-ease) .25s both}
.gate-card .gate-sub{animation:fx-up .9s var(--fx-ease) .35s both}
.gate-card form{animation:fx-up .9s var(--fx-ease) .45s both}
#gate-form[hidden]~.gate-buyer{display:none}

/* sem animação para quem pediu menos movimento */
@media (prefers-reduced-motion:reduce){
  .fx-r{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .view.enter,.sh-hero .sh-hero-art,.fx-w,.fx-hero *,.sh-dot,#view-detail #panel,#panel-title,#panel-summary,#cx-clone,.briefing-block>*,.piece-transcript>*,.gate::before,.gate::after,.gate-card,.gate-card *,.sh-btn.primary::after,.btn.primary::after,.cx-btn::after,#gate-btn::after{animation:none!important;opacity:1;filter:none;transform:none}
  .fx-t.fx-on{transform:none!important}
}

/* ---- modo ambiente: a cor da peça vaza para o fundo ---- */
#fx-amb{position:fixed;inset:-12%;z-index:0;background-size:cover;background-position:center;filter:blur(90px) saturate(1.7) brightness(.9);opacity:0;transform:scale(1.1);transition:opacity 1.2s ease;pointer-events:none}
#fx-amb.on{opacity:.42;animation:fx-amb 18s ease-in-out infinite alternate}
@keyframes fx-amb{to{transform:scale(1.25) rotate(4deg)}}
#main,#rail,aside.rail{position:relative;z-index:1}
.topbar{background:color-mix(in srgb,var(--bg) 40%,transparent)!important;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
@media (prefers-color-scheme:light){#fx-amb.on{opacity:.28}}
@media (prefers-reduced-motion:reduce){#fx-amb.on{animation:none}}