/* Movimento da landing: entradas pontuais, controles e profundidade.
   Sem dependências e sem ocultar o conteúdo base. */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --motion-fast:180ms;
  --motion-medium:360ms;
}
html{scrollbar-gutter:stable}

/* Navegação: estado, localização e progresso de leitura. */
.header{transition:background var(--motion-medium),border-color var(--motion-medium),box-shadow var(--motion-medium)}
.header.is-scrolled{background:#090c12f5;border-bottom-color:#354056;box-shadow:0 8px 30px #0002}
.reading-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue-soft);transform:scaleX(0);transform-origin:left;pointer-events:none}
.navigation a{position:relative}
.navigation a::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:1px;background:var(--blue-soft);transform:scaleX(0);transform-origin:left;transition:transform var(--motion-medium) var(--ease-out)}
.navigation a:is(:hover,:focus-visible,[aria-current="location"])::after{transform:scaleX(1)}
.navigation a[aria-current="location"]{color:var(--blue-soft)}

/* Ritmo comum nas interações, sem deslocar os textos. */
.button{transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-medium),transform var(--motion-medium) var(--ease-out)}
.button>.icon:last-child,.shot-option>.icon,.footer__links .icon{transition:transform var(--motion-medium) var(--ease-out)}
.button:active{transform:translateY(0) scale(.98);box-shadow:none}
.button:focus-visible{box-shadow:0 0 0 6px #4c85ff20}
.app-window,.continuity-panel,.step-visual,.deliverable__art,.fit-panel,.offer-card{transition:border-color var(--motion-medium),box-shadow 500ms var(--ease-out)}
.app-window:focus-within,.deliverable__art:focus-within{border-color:#7e9dcd;box-shadow:0 16px 50px #0004}
.hero-stage__glow{inset:-18px -22px;border-color:#263246;background:radial-gradient(ellipse at 60% 45%,#31579314,transparent 72%)}
.hero-stage__window{box-shadow:0 32px 80px #0005,0 1px 0 #ffffff0a inset}
.symptom{position:relative;transition:border-color var(--motion-medium),background var(--motion-medium)}
.symptom::after,.audience::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--blue-soft);transform:scaleX(0);transform-origin:left;transition:transform 500ms var(--ease-out);pointer-events:none}
.audience{position:relative}
.audience::after{background:#456394}
.symptom__letter{transition:color var(--motion-medium)}
.signup input:not([type="hidden"]),.signup select{transition:border-color var(--motion-fast),background var(--motion-fast),box-shadow var(--motion-fast)}
.signup input:focus,.signup select:focus{background:#19263a;box-shadow:0 0 0 4px #4c85ff12}
.signup__status:not([hidden]){animation:control-enter 260ms var(--ease-out)}

/* A troca de plano mantém o visor imóvel e dissolve a imagem anterior. */
.camera-screen{overflow:hidden;isolation:isolate}
.camera-shot{overflow:hidden}
.camera-shot picture{transform-origin:center}
.camera-shot[aria-hidden="true"]{pointer-events:none}
.viewfinder-label{z-index:3;pointer-events:none}
.shot-option{position:relative;transition:background 250ms,border-color 250ms,box-shadow 250ms}
.shot-option::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:2px;background:var(--blue-soft);transform:scaleY(0);transition:transform var(--motion-medium) var(--ease-out)}
.shot-option.is-active::before{transform:scaleY(1)}
.shot-option.is-active>.icon{transform:translateX(3px)}

/* Preserva a semântica nativa de details e a exclusividade do FAQ. */
.faq-item summary{transition:color 220ms,background 220ms}
.faq-item summary>.icon{transition:transform var(--motion-medium) var(--ease-out),color 220ms}
.faq-item summary:is(:hover,:focus-visible){color:var(--blue-soft)}
.faq-item[open]>div{animation:control-enter 320ms var(--ease-out)}
@supports (interpolate-size:allow-keywords){
  .faq-item{interpolate-size:allow-keywords}
  .faq-item::details-content{height:0;opacity:0;overflow:clip;transition:height var(--motion-medium) var(--ease-out),opacity 220ms,content-visibility var(--motion-medium) allow-discrete}
  .faq-item[open]::details-content{height:auto;opacity:1}
  .faq-item[open]>div{animation:none}
}

@media (hover:hover) and (pointer:fine){
  .button:hover>.icon:last-child,.footer__links>a:hover .icon{transform:translateX(3px)}
  .app-window:hover{border-color:#647d9e;box-shadow:0 28px 70px #0005}
  .continuity-panel:hover,.step-visual:hover,.deliverable__art:hover{border-color:#617a9e}
  .offer-card:hover{border-color:#6683ad;box-shadow:0 20px 45px #0003}
  .symptom:hover{border-color:#3b4d66;background:#151d2a}
  .symptom:hover::after,.audience:hover::after{transform:scaleX(1)}
  .symptom:hover .symptom__letter{color:var(--blue-soft)}
  .script-paper{transition:transform 650ms var(--ease-out)}
  .workflow-steps>li:hover .script-paper{transform:rotate(-1deg) translateY(8px)}
  .reference-chip{transition:transform 500ms var(--ease-out),border-color 300ms}
  .workflow-steps>li:hover .reference-chip{transform:translateX(0);border-color:#607b9e}
  .manga-page{transition:box-shadow 500ms var(--ease-out)}
  .manga-showcase:hover .manga-page{box-shadow:0 28px 65px #101b3c50}
}

/* Profundidade leve da página, vinculada à rolagem e apenas no desktop. */
@supports (animation-timeline:view()){
  @media (min-width:961px) and (prefers-reduced-motion:no-preference){
    .manga-showcase{view-timeline-name:--manga-view;view-timeline-axis:block}
    .manga-page{animation:page-depth linear both;animation-timeline:--manga-view;animation-range:entry 0% exit 100%}
    .manga-showcase__back{animation:cover-depth linear both;animation-timeline:--manga-view;animation-range:entry 0% exit 100%}
  }
}
@keyframes page-depth{from{transform:translateY(24px) rotate(-8deg)}to{transform:translateY(-18px) rotate(-3deg)}}
@keyframes cover-depth{from{transform:translateY(-12px) rotate(11deg)}to{transform:translateY(12px) rotate(6deg)}}
@keyframes control-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

@media (min-width:961px){
  .header__inner{transition:min-height var(--motion-medium) var(--ease-out)}
  .header.is-scrolled .header__inner{min-height:64px}
  .faq-heading{position:sticky;top:112px;align-self:start}
}
@media (max-width:960px){
  .navigation a::after{bottom:6px;right:24px}
  .menu-ready .navigation{opacity:0;transform:translateY(-6px);transition:opacity 220ms,transform 280ms var(--ease-out),display 220ms allow-discrete}
  .menu-ready .navigation.is-open{opacity:1;transform:none}
  @starting-style{.menu-ready .navigation.is-open{opacity:0;transform:translateY(-6px)}}
}
@media (max-width:760px){
  .text-link{min-height:44px}
  .hero-stage__glow{inset:-10px -8px;border-radius:12px}
  .dock{opacity:1;transform:translateY(0);transition:opacity 220ms,transform 320ms var(--ease-out),display 320ms allow-discrete}
  .dock[hidden]{opacity:0;transform:translateY(100%)}
  @starting-style{.dock:not([hidden]){opacity:0;transform:translateY(100%)}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after,::details-content{animation:none!important;transition:none!important}
  .button:hover,.button:active{transform:none}
}