/* =========================================================================
   experience.css — camada de tipografia, abertura cinematográfica e micro-
   interações. Carregada depois de base.css, portanto sobrescreve o que
   precisa sem alterar o arquivo original.
   ========================================================================= */

/* ---------- Tipografia da marca ---------- */
body{font-family:'DM Sans',Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Manrope','DM Sans',Arial,Helvetica,sans-serif;font-weight:800}
.btn,.tab,.eyebrow,.footer-title,.step-num,.brand,.proof,.modal-kicker,.field label{font-family:'Manrope','DM Sans',Arial,Helvetica,sans-serif}
::selection{background:var(--o);color:#fff}
:focus-visible{outline:2px solid var(--o);outline-offset:3px;border-radius:8px}
html{scrollbar-color:var(--o) #e7eaec}
body::-webkit-scrollbar{width:10px}
body::-webkit-scrollbar-track{background:#eef1f2}
body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#f36c21,#cf4f0c);border-radius:999px;border:2px solid #eef1f2}

/* =========================================================================
   1. ABERTURA — cortina dupla + assinatura da marca
   ========================================================================= */
.intro{display:none}
.js.intro-run .intro{display:block;position:fixed;inset:0;z-index:200;overflow:hidden}
.js.intro-run.intro-done .intro{display:none}
.js.intro-run:not(.intro-reveal){overflow:hidden}

.intro-curtain{position:absolute;left:0;right:0;height:50.15%;background:linear-gradient(165deg,#1d2529 0%,#12171a 55%,#0d1113 100%);will-change:transform;transform:translateY(0)}
.intro-curtain--top{top:0}
.intro-curtain--bottom{bottom:0}
.intro-curtain:after{content:"";position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--o) 18%,#ffb52a 50%,var(--o) 82%,transparent);opacity:0;box-shadow:0 0 22px #f36c21b3}
.intro-curtain--top:after{bottom:0}
.intro-curtain--bottom:after{top:0}
.intro-run .intro-curtain:after{animation:seamGlow 1.5s ease-out .15s both}
@keyframes seamGlow{0%{opacity:0;transform:scaleX(.1)}45%{opacity:1;transform:scaleX(1)}100%{opacity:.85;transform:scaleX(1)}}

.intro-core{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:20px;padding:26px;text-align:center}
.intro-ring{position:absolute;width:min(460px,86vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f36c2130,transparent 62%);opacity:0}
.intro-run .intro-ring{animation:ringBloom 2s cubic-bezier(.22,1,.36,1) both}
@keyframes ringBloom{0%{opacity:0;transform:scale(.55)}55%{opacity:1;transform:scale(1)}100%{opacity:.9;transform:scale(1.06)}}

.intro-logo{position:relative;width:min(300px,64vw);height:auto;filter:brightness(0) invert(1) drop-shadow(0 12px 30px #0008);opacity:0}
.intro-run .intro-logo{animation:markIn 1.15s cubic-bezier(.22,1,.36,1) .1s both}
@keyframes markIn{0%{opacity:0;transform:translateY(16px) scale(.94);filter:brightness(0) invert(1) blur(14px)}100%{opacity:1;transform:none;filter:brightness(0) invert(1) blur(0) drop-shadow(0 12px 30px #0008)}}

.intro-kicker{position:relative;font:700 11px/1 'Manrope',Arial,sans-serif;letter-spacing:.42em;text-transform:uppercase;color:#f8b489;white-space:nowrap}
.intro-kicker span{display:inline-block;opacity:0}
.intro-run .intro-kicker span{animation:letterRise .7s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.45s + var(--l,0) * 28ms)}
@keyframes letterRise{0%{opacity:0;transform:translateY(9px)}100%{opacity:1;transform:none}}

.intro-bar{position:relative;width:min(210px,52vw);height:2px;border-radius:999px;background:#ffffff1f;overflow:hidden}
.intro-bar i{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,var(--o),#ffb52a);transform:scaleX(0);transform-origin:0 50%}
.intro-run .intro-bar i{animation:barFill 1.35s cubic-bezier(.5,.05,.2,1) .25s both}
@keyframes barFill{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}

/* abertura da cortina */
.intro-reveal .intro-core{animation:coreOut .5s ease both}
@keyframes coreOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.07)}}
.intro-reveal .intro-curtain{transition:transform 1.05s cubic-bezier(.76,0,.24,1) .12s}
.intro-reveal .intro-curtain--top{transform:translateY(-101%)}
.intro-reveal .intro-curtain--bottom{transform:translateY(101%)}

/* =========================================================================
   2. ENTRADA DO CONTEÚDO
   ========================================================================= */
.js .header{transform:translateY(-100%);opacity:0}
.js .mobile-cta{transform:translateY(110%)}
.stage-hero .header{animation:dropIn .85s cubic-bezier(.22,1,.36,1) both}
.stage-hero .mobile-cta{animation:riseIn .8s cubic-bezier(.22,1,.36,1) .5s both}
@keyframes dropIn{0%{transform:translateY(-100%);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes riseIn{0%{transform:translateY(110%)}100%{transform:translateY(0)}}
.stage-settled .header{animation:none;transform:none;opacity:1}
.stage-settled .mobile-cta{animation:none;transform:none}

.js .hero-in{opacity:0}
.stage-hero .hero-in{animation:heroIn 1s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.12s + var(--i,0) * 110ms)}
@keyframes heroIn{0%{opacity:0;transform:translateY(26px);filter:blur(10px)}100%{opacity:1;transform:none;filter:blur(0)}}

.js .hero-title .word-i{display:inline-block;opacity:0}
.stage-hero .hero-title .word-i{animation:wordUp .9s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.2s + var(--w,0) * 55ms)}
@keyframes wordUp{0%{opacity:0;transform:translateY(.5em) rotate(1.6deg);filter:blur(8px)}100%{opacity:1;transform:none;filter:blur(0)}}

/* =========================================================================
   3. SCROLL — progresso, header compacto, reveals
   ========================================================================= */
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--o),#ffb52a);box-shadow:0 0 14px #f36c21a6;transition:width .12s linear}

.header{transition:box-shadow .3s,background .3s}
.brand-logo{transition:height .3s cubic-bezier(.22,1,.36,1)}
.nav{transition:height .3s cubic-bezier(.22,1,.36,1)}
@media(min-width:951px){
  .header.compact{box-shadow:0 12px 34px #131c2214;background:#fffffff5}
  .header.compact .nav{height:62px}
  .header.compact .brand-logo{height:34px}
}

.js .reveal{opacity:0;transform:translateY(26px);filter:blur(7px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1),filter .85s ease}
.js .reveal.visible{opacity:1;transform:none;filter:blur(0);transition-delay:calc(var(--i,0) * 85ms)}
/* devolve o hover de elevação, que o transform do reveal sobrescreveria */
.js .benefit.reveal.visible:hover,.js .pathway.reveal.visible:hover{transform:translateY(-4px)}
.js .course.reveal.visible:hover{transform:translateY(-5px)}

/* =========================================================================
   4. VIDA NA CENA — blob, foto, cards, modal
   ========================================================================= */
.hero{position:relative}
.hero .container{position:relative;z-index:1}
.hero-spot{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s ease;background:radial-gradient(460px circle at var(--mx,72%) var(--my,28%),#f36c2124,transparent 68%)}
.stage-hero .hero-spot{opacity:1}

.hero-academic{will-change:transform;transform:translate3d(0,var(--py,0px),0)}
.hero-academic:before{animation:blobMorph 16s ease-in-out infinite}
@keyframes blobMorph{0%,100%{border-radius:46% 54% 55% 45%;transform:rotate(0) scale(1)}50%{border-radius:57% 43% 41% 59%;transform:rotate(7deg) scale(1.04)}}
.hero-academic:after{animation:ringPulse 9s ease-in-out infinite}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.55}}

.academic-photo img{transform:scale(1.04) translate3d(0,var(--py,0px),0);transition:transform .2s linear}

.course{will-change:transform}
@keyframes cardIn{0%{opacity:0;transform:translateY(26px) scale(.97);filter:blur(6px)}100%{opacity:1;transform:none;filter:blur(0)}}
.course-in{animation:cardIn .72s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 65ms)}

.btn-primary{position:relative;overflow:hidden}
.btn-primary:after{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-18deg);background:linear-gradient(90deg,transparent,#ffffff59,transparent);transition:transform .6s ease}
.btn-primary:hover:after{transform:translateX(120%) skewX(-18deg)}

.detail-modal.open{animation:fadeIn .32s ease both}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
.detail-modal.open .modal-box{animation:modalIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes modalIn{0%{opacity:0;transform:translateY(24px) scale(.96)}100%{opacity:1;transform:none}}

.faq-a p{opacity:0;transform:translateY(-6px);transition:opacity .35s ease,transform .35s ease}
.faq-item.open .faq-a p{opacity:1;transform:none;transition-delay:.12s}

.tab{transition:background .25s,color .25s,border-color .25s,transform .25s}
.tab:active{transform:scale(.96)}

/* =========================================================================
   5. FORMULÁRIO (Netlify Forms)
   ========================================================================= */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}
.formfail{display:none;background:#fdf0ee;border:1px solid #f3d3cd;color:#8f3222;padding:13px;border-radius:11px;font-size:12px;margin-bottom:13px}
.formfail.show{display:block}
#submitBtn[aria-busy="true"]{opacity:.7;pointer-events:none}

/* =========================================================================
   6. AJUSTES MOBILE + ACESSIBILIDADE
   ========================================================================= */
@media(max-width:640px){
  .js .reveal{transform:translateY(16px);filter:blur(5px);transition-duration:.62s}
  .intro-kicker{font-size:9px;letter-spacing:.3em}
  .intro-logo{width:min(232px,68vw)}
  .hero-academic{transform:none}
  .academic-photo img{transform:scale(1.02)}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;animation-delay:0s!important}
  html{scroll-behavior:auto}
  .js.intro-run .intro{display:none!important}
  .js .reveal,.js .hero-in,.js .hero-title .word-i{opacity:1!important;transform:none!important;filter:none!important}
  .js .header{transform:none!important;opacity:1!important}
  .js .mobile-cta{transform:none!important}
  .hero-academic,.academic-photo img{transform:none!important}
}