/* ============================================================
   MODO LEITURA — folha separada, para poder ser DESLIGADA
   ============================================================
   Esta folha tem um interruptor. O main.js a desabilita quando a
   pagina roda com ?motion=2 — o experimento de ligar no celular o
   mesmo motor do desktop (Lenis + pin + WebGL). Sem desligar isto,
   o motor nasce mas o layout continua desmontado em lista, e o
   teste nao prova nada.

   Enquanto ninguem liga o interruptor, o comportamento e o mesmo
   de sempre: abaixo de 900px a home e documento, nao experiencia.
   ============================================================ */

@media (max-width:900px){
  /* --- nada de 3D nem de fumaca --- */
  #three-stage,#como canvas,#como .c-smoke,#como .c-bg{display:none!important}
  .rock-still.leitura{display:block}

  /* --- nada escondido esperando animacao que nao vem mais --- */
  .rv,.rv-s,#about .st .w,#como .c-card,#como .c-words .char,
  #hero .h-title .char,#hero .h-links .alink,#hero .h-side > *,#hero .h-scroll,
  #menu .m-links a .w span,#menu .m-side .col,#nav{
    opacity:1!important;transform:none!important;filter:none!important;visibility:visible!important
  }
  #menu{transition:clip-path .5s var(--ease)}

  /* --- FATOS: deck empilhado vira lista --- */
  #fatos .deck{position:static;height:auto;min-height:0;display:flex;flex-direction:column;gap:1.1em}
  /* transform:translate(-50%,-50%) e do CSS, nao do GSAP: sem zerar,
     a carta sai pela esquerda mesmo com position:static. */
  #fatos .card{position:static;left:auto;top:auto;transform:none;width:100%;max-width:none;
    aspect-ratio:auto;min-height:14rem;box-shadow:0 18px 40px -28px rgba(7,7,8,.45)}

  /* --- FORMACOES: trilho horizontal vira coluna --- */
  #formacoes .pin{height:auto;display:block;overflow:visible}
  #formacoes .track{width:auto;flex-direction:column;padding:0 var(--gutter);gap:2.6em}
  #formacoes .intro,#formacoes .fcard,#formacoes .outro{
    flex:0 0 auto!important;width:auto;border-left:0;padding-left:0;padding-right:0}
  #formacoes .fcard{border-top:1px solid var(--line-light);padding-top:2em}
  #formacoes .outro{border-top:1px solid var(--line-light);padding-top:2.4em;
    align-items:flex-start;text-align:left}
  #formacoes .fcard p,#formacoes .outro .d3{max-width:none}

  /* --- COMO FUNCIONA: pedra caindo vira secao normal --- */
  #como .pin{height:auto;display:block;overflow:visible;
    padding:clamp(3.4rem,8vh,5rem) var(--gutter)}
  #como .c-label,#como .c-foot{position:static;transform:none;mix-blend-mode:normal}
  #como .c-label{margin-bottom:1.8em}
  #como .c-foot{margin-top:2.4em;flex-direction:column;align-items:flex-start;gap:1.2em}
  #como .c-words{mix-blend-mode:normal;text-align:left}
  #como .c-words .line{white-space:normal;font-size:clamp(1.9rem,8.8vw,3.2rem)}
  #como .c-cards{position:static;display:grid;gap:1em;margin-top:2.4em}
  #como .c-card{position:static;width:auto;left:auto;right:auto;top:auto;bottom:auto;
    backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(7,7,8,.9)}

  /* --- GALERIA: leque vira grade de verdade --- */
  #galeria .pin{height:auto;display:block;padding:clamp(3.4rem,8vh,5rem) var(--gutter) 0}
  #galeria .g-title{position:static;display:block;text-align:left;margin-bottom:2em}
  #galeria .g-cards{position:static;display:grid;grid-template-columns:1fr 1fr;gap:.8em;
    pointer-events:auto}
  #galeria .g-card{position:static;left:auto;top:auto;transform:none;width:auto;box-shadow:none}
  #galeria .g-foot{position:static;margin-top:2em;padding-bottom:clamp(3rem,7vh,4rem);
    flex-direction:column;align-items:flex-start;gap:1.2em}

  /* --- STRIPES: nao ha mais o que transicionar --- */
  #stripes{display:none}
}