/* ===== HAMA — V3 animations (pure CSS + SVG). Subtle, slow, institutional.
   Animations are gated on a `.go` class (added when the block scrolls into view)
   so nothing plays until visible. Reduced-motion → final static state. ===== */

@media (prefers-reduced-motion: no-preference){

  /* ---------- Hero: drifting key-lattice background ---------- */
  .hero::before{ animation: hama-drift 60s linear infinite; }
  @keyframes hama-drift{
    from{ background-position:0 0, 0 0; }
    to{ background-position:54px 54px, 54px 54px; }
  }

  /* ---------- Hero chat: bubbles appear in sequence, lock pulse, typing ---------- */
  .chat-win.go .bubble{ opacity:0; transform:translateY(8px); animation: hama-bubble .5s ease forwards; }
  .app-win.go .bubble{ opacity:0; transform:translateY(8px); animation: hama-bubble .5s ease forwards; }
  .app-win.go .bubble.b1{ animation-delay:.3s }
  .app-win.go .bubble.b2{ animation-delay:.9s }
  .app-win.go .bubble.b3{ animation-delay:1.5s }
  .chat-win.go .bubble.b1{ animation-delay:.25s; }
  .chat-win.go .bubble.b2{ animation-delay:1.15s; }
  .chat-win.go .bubble.b3{ animation-delay:2.4s; }
  @keyframes hama-bubble{ to{ opacity:1; transform:none; } }

  .chat-win.go .typing,
  .tabpanel.active .typing{ animation: hama-typing-show 3.4s ease infinite; }
  @keyframes hama-typing-show{ 0%,18%{opacity:0} 24%,40%{opacity:1} 48%,100%{opacity:0} }
  .typing .dot{ animation: hama-dot 1.1s ease-in-out infinite; }
  .typing .dot:nth-child(2){ animation-delay:.18s; }
  .typing .dot:nth-child(3){ animation-delay:.36s; }
  @keyframes hama-dot{ 0%,100%{ transform:translateY(0); opacity:.4 } 50%{ transform:translateY(-3px); opacity:1 } }

  .chat-e2e svg{ animation: hama-lockpulse 3s ease-in-out infinite; transform-origin:center; }
  @keyframes hama-lockpulse{ 0%,100%{ opacity:.7 } 50%{ opacity:1; filter:drop-shadow(0 0 5px rgba(15,125,146,.5)) } }

  /* ---------- Foundation: encryption motif (lock shackle + plaintext→cipher) ---------- */
  .enc-motif.go .em-shackle{ animation: hama-shackle 5s ease-in-out infinite; transform-origin:center bottom; }
  @keyframes hama-shackle{ 0%,30%{ transform:translateY(-3px) } 45%,100%{ transform:translateY(0) } }
  .enc-motif.go .em-body{ animation: hama-emglow 5s ease-in-out infinite; }
  @keyframes hama-emglow{ 0%,40%{ filter:none } 55%,100%{ filter:drop-shadow(0 0 6px rgba(34,199,230,.45)) } }
  .enc-motif .em-cell{ animation: hama-cipher 5s steps(1) infinite; }
  .enc-motif.go .em-cell{ animation-play-state:running; }
  .enc-motif .em-cell:nth-child(2){ animation-delay:.3s } .enc-motif .em-cell:nth-child(3){ animation-delay:.6s }
  .enc-motif .em-cell:nth-child(4){ animation-delay:.9s } .enc-motif .em-cell:nth-child(5){ animation-delay:1.2s }
  .enc-motif .em-cell:nth-child(6){ animation-delay:1.5s }
  @keyframes hama-cipher{ 0%,45%{ color:#5fdcef } 55%,100%{ color:#3a4a66 } }

  /* ---------- Architecture diagram: packet travel, perimeter draw, cloud strike ---------- */
  .arch.go .arch-line{ stroke-dasharray:6 6; animation: hama-flow 2.6s linear infinite; }
  @keyframes hama-flow{ to{ stroke-dashoffset:-48; } }
  .arch.go .packet{ animation: hama-packet 3.4s ease-in-out infinite; }
  @keyframes hama-packet{
    0%{ offset-distance:0%; opacity:0 } 8%{ opacity:1 }
    50%{ offset-distance:100%; opacity:1 } 58%{ opacity:0 }
    100%{ offset-distance:100%; opacity:0 }
  }
  .arch.go .perimeter{ stroke-dasharray:1400; stroke-dashoffset:1400; animation: hama-draw 2.4s ease forwards .2s; }
  @keyframes hama-draw{ to{ stroke-dashoffset:0; } }
  .arch.go .arch-shield{ animation: hama-shieldpulse 3.2s ease-in-out infinite; transform-origin:center; }
  @keyframes hama-shieldpulse{ 0%,100%{ opacity:.85 } 50%{ opacity:1 } }
  .arch.go .arch-cloud{ animation: hama-cloudfade 4s ease-in-out infinite; }
  @keyframes hama-cloudfade{ 0%,100%{ opacity:.35 } 50%{ opacity:.18 } }

  /* ---------- Capability card motifs (small looping) ---------- */
  .cm-bar{ transform-origin:bottom; }
  .fcard.in .cm-bars .cm-bar{ animation: hama-grow 2.8s ease-in-out infinite; }
  .fcard.in .cm-bars .cm-bar:nth-child(1){ animation-delay:0s } .fcard.in .cm-bars .cm-bar:nth-child(2){ animation-delay:.2s }
  .fcard.in .cm-bars .cm-bar:nth-child(3){ animation-delay:.4s } .fcard.in .cm-bars .cm-bar:nth-child(4){ animation-delay:.6s }
  @keyframes hama-grow{ 0%,100%{ transform:scaleY(.35) } 50%{ transform:scaleY(1) } }

  .fcard.in .cm-bubble{ animation: hama-cmbub 3.4s ease-in-out infinite; }
  .fcard.in .cm-bubble.bb2{ animation-delay:.4s } .fcard.in .cm-bubble.bb3{ animation-delay:.8s }
  @keyframes hama-cmbub{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }

  .fcard.in .cm-node{ animation: hama-node 3s ease-in-out infinite; }
  .fcard.in .cm-node.n2{ animation-delay:.4s } .fcard.in .cm-node.n3{ animation-delay:.8s }
  @keyframes hama-node{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }
  .fcard.in .cm-link{ stroke-dasharray:40; stroke-dashoffset:40; animation: hama-draw 1.4s ease forwards; }

  .fcard.in .cm-step{ animation: hama-step 3.2s ease-in-out infinite; }
  .fcard.in .cm-step.s2{ animation-delay:.5s } .fcard.in .cm-step.s3{ animation-delay:1s }
  @keyframes hama-step{ 0%,20%{ background:rgba(37,99,235,.28) } 50%,100%{ background:var(--primary) } }

  .fcard.in .cm-row{ animation: hama-rowin 3.4s ease-in-out infinite; }
  .fcard.in .cm-row.r2{ animation-delay:.45s } .fcard.in .cm-row.r3{ animation-delay:.9s }
  @keyframes hama-rowin{ 0%,100%{ opacity:.4 } 50%{ opacity:1 } }

  /* gentle glow pulse on the icon tile */
  .fcard.in .cm{ animation: hama-tileglow 3.6s ease-in-out infinite; }
  @keyframes hama-tileglow{ 0%,100%{ box-shadow:0 0 0 0 rgba(37,99,235,0) } 50%{ box-shadow:0 0 0 6px rgba(37,99,235,.09) } }
  .fcard-flag.in .cm{ animation: hama-tileglow-cy 3.6s ease-in-out infinite; }
  @keyframes hama-tileglow-cy{ 0%,100%{ box-shadow:0 0 0 0 rgba(34,199,230,0) } 50%{ box-shadow:0 0 0 6px rgba(34,199,230,.12) } }

  /* ---------- Tab showcase mockups ---------- */
  /* chat bubbles inside active tab */
  .tabpanel.active .tp-bubble{ opacity:0; transform:translateY(8px); animation: hama-bubble .5s ease forwards; }
  .tabpanel.active .tp-bubble.b1{ animation-delay:.2s }
  .tabpanel.active .tp-bubble.b2{ animation-delay:1.0s }
  .tabpanel.active .tp-bubble.b3{ animation-delay:2.0s }

  /* monitoring growing bars + hourly chart */
  .tabpanel.active .cell-bar .bar i{ width:0 !important; animation: hama-fill 1.3s ease forwards; }
  .tabpanel.active .cell-bar:nth-child(1) .bar i{ animation-delay:.1s }
  @keyframes hama-fill{ to{ width:var(--w) !important; } }
  .tabpanel.active .hchart .hbar{ transform:scaleY(0); transform-origin:bottom; animation: hama-hbar .9s cubic-bezier(.2,.7,.3,1) forwards; }

  /* employee-detail: pills/rows cascade, app bars fill, stacked chart grow */
  .tabpanel.active .emp-pills .epill{ opacity:0; animation: hama-bubble .5s ease forwards; }
  .tabpanel.active .emp-pills .epill:nth-child(1){animation-delay:.05s}.tabpanel.active .emp-pills .epill:nth-child(2){animation-delay:.12s}
  .tabpanel.active .emp-pills .epill:nth-child(3){animation-delay:.19s}.tabpanel.active .emp-pills .epill:nth-child(4){animation-delay:.26s}
  .tabpanel.active .emp-pills .epill:nth-child(5){animation-delay:.33s}.tabpanel.active .emp-pills .epill:nth-child(6){animation-delay:.4s}
  .tabpanel.active .app-row .ar-bar i{ width:0 !important; animation: hama-fill 1.1s ease forwards .15s; }
  .tabpanel.active .app-row,.tabpanel.active .site-row{ opacity:0; animation: hama-bubble .45s ease forwards; }
  .tabpanel.active .acol .seg{ transform:scaleY(0); transform-origin:bottom; animation: hama-hbar .7s cubic-bezier(.2,.7,.3,1) forwards; }
  .tabpanel.active .acol:nth-child(1) .seg{animation-delay:.04s}.tabpanel.active .acol:nth-child(2) .seg{animation-delay:.09s}
  .tabpanel.active .acol:nth-child(3) .seg{animation-delay:.14s}.tabpanel.active .acol:nth-child(4) .seg{animation-delay:.19s}
  .tabpanel.active .acol:nth-child(5) .seg{animation-delay:.24s}.tabpanel.active .acol:nth-child(6) .seg{animation-delay:.29s}
  .tabpanel.active .acol:nth-child(7) .seg{animation-delay:.34s}.tabpanel.active .acol:nth-child(8) .seg{animation-delay:.39s}
  .tabpanel.active .acol:nth-child(9) .seg{animation-delay:.44s}.tabpanel.active .acol:nth-child(10) .seg{animation-delay:.49s}
  .tabpanel.active .acol:nth-child(11) .seg{animation-delay:.54s}.tabpanel.active .acol:nth-child(12) .seg{animation-delay:.59s}

  /* attendance status tracks fill */
  .tabpanel.active .scard .track i{ width:0 !important; animation: hama-fill 1.2s ease forwards .2s; }

  /* journal / hr / requests / admin rows cascade in */
  .tabpanel.active .casc{ opacity:0; transform:translateY(8px); animation: hama-bubble .5s ease forwards; }

  /* org tree connectors draw */
  .tabpanel.active .tree-link{ stroke-dasharray:120; stroke-dashoffset:120; animation: hama-draw 1.1s ease forwards .3s; }

  /* requests stepper light up */
  .tabpanel.active .step{ }
  .tabpanel.active .step.done .step-dot{ animation: hama-stepdone .5s ease forwards; }
  .tabpanel.active .step-line i{ transform:scaleX(0); transform-origin:left; animation: hama-line .6s ease forwards; }
  @keyframes hama-line{ to{ transform:scaleX(1) } }
  @keyframes hama-stepdone{ from{ transform:scale(.5); opacity:.4 } to{ transform:scale(1); opacity:1 } }

  /* checkmark draw */
  .tabpanel.active .ck-path{ stroke-dasharray:24; stroke-dashoffset:24; animation: hama-draw .5s ease forwards; }

  /* deployment + final subtle motifs */
  .dep-motif.go .dm-bar{ transform:scaleX(0); transform-origin:left; animation: hama-line 1.2s ease forwards; }
  .final::after{ animation: hama-finaldrift 22s ease-in-out infinite alternate; }
  @keyframes hama-finaldrift{ from{ transform:translate(-2%, -2%) } to{ transform:translate(2%, 2%) } }

  /* ---------- Video call: active-speaker cycle + waveform ---------- */
  .tabpanel.active .vtile{ animation: hama-speaker 8s ease-in-out infinite; }
  .tabpanel.active .vs2{ animation-delay:2s } .tabpanel.active .vs3{ animation-delay:4s } .tabpanel.active .vs4{ animation-delay:6s }
  @keyframes hama-speaker{
    0%{ border-color:transparent; box-shadow:none }
    4%,21%{ border-color:var(--cyan-2); box-shadow:0 0 0 1px var(--cyan-2),0 0 18px rgba(34,199,230,.35) }
    25%,100%{ border-color:transparent; box-shadow:none }
  }
  .tabpanel.active .vwave i{ animation: hama-wave 1s ease-in-out infinite; }
  .tabpanel.active .vwave i:nth-child(2){animation-delay:.15s}
  .tabpanel.active .vwave i:nth-child(3){animation-delay:.3s}
  .tabpanel.active .vwave i:nth-child(4){animation-delay:.45s}
  .tabpanel.active .vwave i:nth-child(5){animation-delay:.6s}
  @keyframes hama-wave{ 0%,100%{ height:5px } 50%{ height:14px } }

  /* ---------- Remote desktop: cursor travel + click ripple ---------- */
  .tabpanel.active .rs-cursor{ animation: hama-cursor 6.5s ease-in-out infinite; }
  @keyframes hama-cursor{
    0%{ transform:translate(40px,38px) } 22%{ transform:translate(150px,66px) }
    40%{ transform:translate(150px,66px) } 60%{ transform:translate(250px,128px) }
    78%{ transform:translate(250px,128px) } 100%{ transform:translate(40px,38px) }
  }
  .tabpanel.active .rs-ripple{ animation: hama-ripple 6.5s ease-out infinite; }
  @keyframes hama-ripple{
    0%,34%{ transform:scale(.4); opacity:0 } 40%{ transform:scale(.4); opacity:.9 }
    52%{ transform:scale(2.6); opacity:0 } 72%{ transform:scale(.4); opacity:0 }
    78%{ transform:scale(.4); opacity:.9 } 90%{ transform:scale(2.6); opacity:0 } 100%{ opacity:0 }
  }

  /* number count-up baseline (JS drives value; this just softens) */
  .countup{ transition: color .3s ease; }

  /* ---------- Hero app demo: per-screen animations ---------- */
  .scr-head .rec{ animation: e2e-typing 1.4s ease-in-out infinite; }
  .aw-screen[data-screen=video].on .hv-tile{ animation: hama-speaker 8s ease-in-out infinite; }
  .aw-screen[data-screen=video].on .sp2{ animation-delay:2s } .aw-screen[data-screen=video].on .sp3{ animation-delay:4s } .aw-screen[data-screen=video].on .sp4{ animation-delay:6s }
  @keyframes hama-speaker{ 0%{ border-color:transparent } 5%,20%{ border-color:var(--cyan-2);box-shadow:0 0 0 1px var(--cyan-2),0 0 16px rgba(34,199,230,.35) } 25%,100%{ border-color:transparent;box-shadow:none } }
  .aw-screen[data-screen=mon].on .hm-chart i{ transform:scaleY(0); animation: hama-hbar .7s cubic-bezier(.2,.7,.3,1) forwards; }
  .aw-screen[data-screen=mon].on .hm-chart i:nth-child(2){animation-delay:.05s}.aw-screen[data-screen=mon].on .hm-chart i:nth-child(3){animation-delay:.1s}.aw-screen[data-screen=mon].on .hm-chart i:nth-child(4){animation-delay:.15s}.aw-screen[data-screen=mon].on .hm-chart i:nth-child(5){animation-delay:.2s}.aw-screen[data-screen=mon].on .hm-chart i:nth-child(6){animation-delay:.25s}.aw-screen[data-screen=mon].on .hm-chart i:nth-child(7){animation-delay:.3s}.aw-screen[data-screen=mon].on .hm-chart i:nth-child(8){animation-delay:.35s}.aw-screen[data-screen=mon].on .hm-chart i:nth-child(9){animation-delay:.4s}.aw-screen[data-screen=mon].on .hm-chart i:nth-child(10){animation-delay:.45s}.aw-screen[data-screen=mon].on .hm-chart i:nth-child(11){animation-delay:.5s}.aw-screen[data-screen=mon].on .hm-chart i:nth-child(12){animation-delay:.55s}
  .aw-screen[data-screen=mon].on .hm-row .r-bar i{ width:0; animation: hama-fill 1.1s ease forwards .15s; }
  .aw-screen[data-screen=hr].on .ht-link{ stroke-dasharray:80; stroke-dashoffset:80; animation: hama-draw 1s ease forwards .2s; }
  .aw-screen[data-screen=hr].on .ht-node{ opacity:0; animation: hama-bubble .5s ease forwards; }
  .aw-screen[data-screen=hr].on .ht-row:nth-child(3) .ht-node:nth-child(1){animation-delay:.3s}.aw-screen[data-screen=hr].on .ht-row:nth-child(3) .ht-node:nth-child(2){animation-delay:.45s}.aw-screen[data-screen=hr].on .ht-row:nth-child(3) .ht-node:nth-child(3){animation-delay:.6s}
  .aw-screen[data-screen=req].on .hreq-row{ opacity:0; animation: hama-bubble .5s ease forwards; }
  .aw-screen[data-screen=req].on .hreq-row:nth-child(2){ animation-delay:.5s }
  .e2e-stage.go .e2e-ring{ animation: e2e-sonar 3.6s ease-out infinite; }
  .e2e-stage.go .e2e-ring.rr2{ animation-delay:.9s }
  .e2e-stage.go .e2e-ring.rr3{ animation-delay:1.8s }
  .e2e-stage.go .e2e-ring.rr4{ animation-delay:2.7s }
  @keyframes e2e-sonar{ 0%{ transform:translate(-50%,-50%) scale(.5); opacity:0 } 12%{ opacity:.5 } 100%{ transform:translate(-50%,-50%) scale(2.7); opacity:0 } }

  .e2e-stage.go .e2e-node.n-lock{ animation: e2e-lockglow 3s ease-in-out infinite; }
  @keyframes e2e-lockglow{ 0%,100%{ box-shadow:0 0 0 6px rgba(52,211,153,.10),0 0 26px rgba(52,211,153,.45) } 50%{ box-shadow:0 0 0 10px rgba(52,211,153,.14),0 0 42px rgba(52,211,153,.72) } }

  .e2e-stage.go .e2e-node.n-left,.e2e-stage.go .e2e-node.n-right{ animation: e2e-nodepulse 3s ease-in-out infinite; }
  .e2e-stage.go .e2e-node.n-right{ animation-delay:1.5s }
  @keyframes e2e-nodepulse{ 0%,100%{ border-color:rgba(95,220,239,.45); box-shadow:0 0 0 0 rgba(95,220,239,0) } 50%{ border-color:rgba(95,220,239,.85); box-shadow:0 0 16px rgba(95,220,239,.32) } }

  .e2e-stage.go .e2e-msg i{ animation: e2e-typing 1.1s ease-in-out infinite; }
  .e2e-stage.go .e2e-msg i:nth-child(2){ animation-delay:.18s }
  .e2e-stage.go .e2e-msg i:nth-child(3){ animation-delay:.36s }
  @keyframes e2e-typing{ 0%,100%{ opacity:.4; transform:translateY(0) } 50%{ opacity:1; transform:translateY(-2px) } }

  .e2e-stage.go .e2e-msg{ animation: e2e-msgflow 4s ease-in-out infinite; }
  .e2e-stage.go .e2e-msg.msg-r{ animation-delay:.7s }
  @keyframes e2e-msgflow{ 0%,8%{ opacity:0 } 18%,62%{ opacity:1 } 80%,100%{ opacity:0 } }

  .e2e-stage.go .e2e-dot{ animation: e2e-packet 3.2s ease-in-out infinite; }
  .e2e-stage.go .e2e-dot.d2{ animation-delay:1.6s }
  @keyframes e2e-packet{ 0%{ left:18%; opacity:0 } 10%{ opacity:1 } 48%{ left:50%; opacity:1 } 58%{ left:50%; opacity:.35 } 90%{ left:82%; opacity:1 } 100%{ left:82%; opacity:0 } }
}

/* staggered hourly bars (heights via inline --h) */
.hchart .hbar:nth-child(1){animation-delay:.05s}.hchart .hbar:nth-child(2){animation-delay:.1s}
.hchart .hbar:nth-child(3){animation-delay:.15s}.hchart .hbar:nth-child(4){animation-delay:.2s}
.hchart .hbar:nth-child(5){animation-delay:.25s}.hchart .hbar:nth-child(6){animation-delay:.3s}
.hchart .hbar:nth-child(7){animation-delay:.35s}.hchart .hbar:nth-child(8){animation-delay:.4s}
.hchart .hbar:nth-child(9){animation-delay:.45s}.hchart .hbar:nth-child(10){animation-delay:.5s}
.hchart .hbar:nth-child(11){animation-delay:.55s}.hchart .hbar:nth-child(12){animation-delay:.6s}
@keyframes hama-hbar{ to{ transform:scaleY(1) } }