/* InkWoof v2: abertura da home, "a tinta acende o estúdio" (~1,8 s, uma vez por sessão).
   Portada de design/ui-v2/mockups/opening.html. A classe .op fica na casca só durante a abertura; .idle depois dela.
   0 ms escuro, a luz de tinta floresce · 80 ms trilho e topo · 220 ms título palavra por palavra · 560 ms compositor nítido, aro dá uma volta
   600 ms as peças assentam no leque · 900 ms Inko sobe · 1150 ms traço sob "criar?" · 950 ms formatos e projetos em cascata.
   Movimento reduzido: tudo aparece em 200 ms, só opacidade, sem parallax. */

.iw-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.iw-title .w > span { display: inline-block; }
.iw-title .ink { overflow: visible; }

.op .iw-home-main::before { animation: op-bloom 1500ms var(--iw-ease-out) both; }
@keyframes op-bloom { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.op .iw-rail { animation: op-in-x 520ms var(--iw-ease-out) 80ms both; }
.op .iw-home-top { animation: op-in-y 520ms var(--iw-ease-out) 140ms both; }
.op .iw-eyebrow { animation: op-in-y 600ms var(--iw-ease-out) 180ms both; }
@keyframes op-in-x { from { opacity: 0; translate: -10px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes op-in-y { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.op .iw-title .w > span { animation: op-word 820ms var(--iw-ease-out) both; animation-delay: calc(220ms + var(--k) * var(--iw-stagger-hero)); }
@keyframes op-word { from { translate: 0 105%; } to { translate: 0 0; } }
.op .iw-title .ink path { stroke-dasharray: 320; stroke-dashoffset: 320; animation: op-draw 720ms var(--iw-ease-in-out) 1150ms forwards; }
@keyframes op-draw { to { stroke-dashoffset: 0; } }
.op .iw-sub { animation: op-in-y 600ms var(--iw-ease-out) 520ms both; }
.op .brief-composer.hero { animation: op-composer 760ms var(--iw-ease-out) 560ms both; }
.op .brief-composer.hero::before { animation: op-rim 1300ms var(--iw-ease-in-out) 620ms both, iw-rim 9s linear 1920ms infinite; }
@keyframes op-composer { from { opacity: 0; translate: 0 18px; scale: .98; filter: blur(8px); } to { opacity: 1; translate: 0 0; scale: 1; filter: none; } }
@keyframes op-rim { from { --iw-angle: 0deg; opacity: 0; } 30% { opacity: 1; } to { --iw-angle: 360deg; opacity: .5; } }
.op .iw-hint, .op .home-ai .iw-composer-hint { animation: op-in-y 500ms var(--iw-ease-out) 760ms both; }
.op .iw-scene-glow { animation: op-glow 1200ms var(--iw-ease-out) 480ms both; }
@keyframes op-glow { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
.op .iw-fan > * { animation: op-card 980ms var(--iw-ease-spring-soft) both; }
.op .iw-fan > :nth-child(1) { animation-delay: 600ms; } .op .iw-fan > :nth-child(2) { animation-delay: 690ms; } .op .iw-fan > :nth-child(3) { animation-delay: 780ms; }
@keyframes op-card { from { opacity: 0; translate: 40px 90px; rotate: 14deg; } 40% { opacity: 1; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.op .iw-inko { animation: op-inko 900ms var(--iw-ease-spring-soft) 900ms both; }
@keyframes op-inko { from { opacity: 0; translate: 0 46px; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
.op .iw-scene-floor, .op .iw-scene-cap { animation: op-fade 800ms ease 900ms both; }
@keyframes op-fade { from { opacity: 0; } to { opacity: 1; } }
.op .iw-formats .iw-sec-head, .op .iw-projects .iw-sec-head { animation: op-in-y 520ms var(--iw-ease-out) 950ms both; }
.op .iw-ftile { animation: op-in-y 560ms var(--iw-ease-out) both; animation-delay: calc(1000ms + var(--k, 0) * 50ms); }
.op .project-card { animation: op-in-y 620ms var(--iw-ease-out) both; animation-delay: calc(1120ms + var(--k, 0) * 70ms); }

/* Depois da abertura: só a atmosfera respira, devagar (pausa em aba oculta) */
.idle .iw-home-main::before { animation: op-drift 12s ease-in-out infinite alternate; animation-play-state: var(--iw-loop-state); }
@keyframes op-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(18px, -10px) scale(1.04); } }
.iw-scene .iw-fan, .iw-scene .iw-inko { transition: translate 600ms var(--iw-ease-out); }

@media (prefers-reduced-motion: reduce) {
  .op *, .op *::before, .op *::after { animation-name: op-fade !important; animation-duration: 200ms !important; animation-delay: 0ms !important; animation-timing-function: ease !important; }
  .op .iw-title .ink path { stroke-dashoffset: 0; stroke-dasharray: none; }
  .idle .iw-home-main::before { animation: none; }
}