/* K-MOTIF HERO — the connection traces the Keevaath k, core resolves into the mark */
.heroX{ --g:#7CB342;--gl:#B4E38A;--sf:#D68A2E;--sfl:#EDC078;--ro:#D4537E;--rol:#EC7BA0;
  position:relative; width:100%; height:100%; min-height:440px; border-radius:20px; overflow:hidden;
  background:radial-gradient(66% 54% at 62% 30%, rgba(124,179,66,0.10), transparent 60%),
             radial-gradient(150% 120% at 52% -8%, #45374F, #241D2E 52%, #130D1B);
  box-shadow:0 34px 90px rgba(15,10,20,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  font-family:'Newsreader',Georgia,serif; }
.hx-field{ position:absolute; inset:0; z-index:1; opacity:0.4;
  background-image:radial-gradient(rgba(180,227,138,0.12) 1px, transparent 1.4px); background-size:30px 30px;
  transform:rotateX(62deg) translateZ(-70px) scale(1.9); transform-origin:50% 60%;
  -webkit-mask-image:radial-gradient(120% 78% at 54% 30%, #000 20%, transparent 74%); mask-image:radial-gradient(120% 78% at 54% 30%, #000 20%, transparent 74%);
  animation:hx-fieldmove 26s linear infinite; }
@keyframes hx-fieldmove{ from{ background-position:0 0;} to{ background-position:0 30px;} }
.hx-aurora{ position:absolute; z-index:1; inset:-12%; pointer-events:none; opacity:0.45;
  background:conic-gradient(from 130deg at 62% 36%, transparent, rgba(124,179,66,0.10), transparent 42%, rgba(214,138,46,0.07), transparent 72%);
  filter:blur(36px); animation:hx-aurora 22s ease-in-out infinite; }
@keyframes hx-aurora{ 0%,100%{ transform:rotate(0deg) scale(1);} 50%{ transform:rotate(9deg) scale(1.08);} }
.hx-particles{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hx-pt{ position:absolute; width:2px; height:2px; border-radius:50%; background:rgba(180,227,138,0.55); box-shadow:0 0 6px rgba(180,227,138,0.7); animation:hx-float 14s ease-in-out infinite; }
.hx-pt:nth-child(1){ left:26%; top:28%;} .hx-pt:nth-child(2){ left:70%; top:22%; animation-delay:3s;} .hx-pt:nth-child(3){ left:78%; top:64%; animation-delay:6s;} .hx-pt:nth-child(4){ left:40%; top:72%; animation-delay:9s;}
@keyframes hx-float{ 0%,100%{ transform:translate(0,0); opacity:0.3;} 50%{ transform:translate(12px,-16px); opacity:0.8;} }

/* the SVG stage */
.hx-kstage{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; }
.hx-ksvg{ width:88%; max-width:620px; height:auto; overflow:visible; }

/* orbs */
.hxk-orb.sf{ fill:#E3A54B; filter:drop-shadow(0 0 8px rgba(214,138,46,0.6)); animation:hxk-bob 4.4s ease-in-out infinite; }
.hxk-orb.sf:nth-child(2){ animation-delay:.7s;} .hxk-orb.sf:nth-child(3){ animation-delay:1.4s;}
.hxk-slot{ fill:rgba(124,179,66,0.06); stroke:rgba(124,179,66,0.55); stroke-width:2; stroke-dasharray:3 3; }
@keyframes hxk-bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }

/* the k mark — hidden at beat 0, draws in beat 1, solid + glowing beat 2 */
.hxk-mark path{ stroke-dasharray:220; stroke-dashoffset:220; opacity:0; transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.15,1), opacity .5s; }
.heroX[data-beat="1"] .hxk-mark path,.heroX[data-beat="2"] .hxk-mark path{ stroke-dashoffset:0; opacity:1; }
.heroX[data-beat="1"] .hxk-arm1,.heroX[data-beat="2"] .hxk-arm1{ transition-delay:.5s; }
.heroX[data-beat="1"] .hxk-arm2,.heroX[data-beat="2"] .hxk-arm2{ transition-delay:.7s; }
.heroX[data-beat="2"] .hxk-mark{ animation:hxk-pulse 3s ease-in-out infinite; }
@keyframes hxk-pulse{ 0%,100%{ filter:url(#hxglow) drop-shadow(0 0 6px rgba(124,179,66,0.3)); } 50%{ filter:url(#hxglow) drop-shadow(0 0 16px rgba(124,179,66,0.6)); } }

/* streams draw in on beat 1+ */
.hxk-stream{ stroke-dasharray:160; stroke-dashoffset:160; opacity:0; transition:stroke-dashoffset 1s ease, opacity .5s; }
.heroX[data-beat="1"] .hxk-stream,.heroX[data-beat="2"] .hxk-stream{ stroke-dashoffset:0; opacity:0.5; }

/* gap seam beat 0 only */
.hxk-gap{ opacity:1; filter:drop-shadow(0 0 8px rgba(212,83,126,0.7)); transition:opacity .8s; animation:hxk-gappulse 2.4s ease-in-out infinite; }
.heroX[data-beat="1"] .hxk-gap,.heroX[data-beat="2"] .hxk-gap{ opacity:0; }
@keyframes hxk-gappulse{ 0%,100%{ opacity:.5;} 50%{ opacity:1;} }

/* slots fill green on beat 2 */
.heroX[data-beat="2"] .hxk-slot{ fill:rgba(124,179,66,0.3); stroke:#7CB342; stroke-dasharray:0; filter:drop-shadow(0 0 8px rgba(124,179,66,0.5)); transition:all .8s; }

/* copy */
.hx-copy{ position:absolute; left:54px; bottom:56px; z-index:5; max-width:52%; }
.hx-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:3.5px; text-transform:uppercase; color:var(--sfl); display:inline-flex; align-items:center; gap:9px; }
.hx-eyebrow::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--gl); box-shadow:0 0 8px var(--gl); animation:hx-blink 2s ease-in-out infinite; }
.hx-head{ position:relative; margin-top:16px; height:120px; }
.hx-beat{ position:absolute; left:0; top:0; font-size:clamp(30px,4vw,50px); line-height:1.04; font-weight:500; color:#F8F4EE; letter-spacing:-0.8px; opacity:0; transform:translateY(20px); transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); text-shadow:0 2px 20px rgba(0,0,0,0.3); }
.hx-beat.on{ opacity:1; transform:translateY(0); }
.hx-beat .grad{ background:linear-gradient(100deg, var(--gl) 10%, var(--sfl)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hx-beat small{ display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:2px; color:#A79FB0; font-weight:400; margin-top:14px; text-transform:uppercase; }

.hx-scan{ position:absolute; inset:0; z-index:6; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(140,220,255,0.013) 0 1px, transparent 1px 3px); opacity:0.5; }
.hx-vign{ position:absolute; inset:0; z-index:7; pointer-events:none; box-shadow:inset 0 0 120px 28px rgba(9,5,13,0.64); border-radius:20px; }
.hx-corner{ position:absolute; z-index:6; width:20px; height:20px; border:1.5px solid rgba(124,179,66,0.3); pointer-events:none; }
.hx-corner.tl{ top:15px; left:15px; border-right:0; border-bottom:0;} .hx-corner.tr{ top:15px; right:15px; border-left:0; border-bottom:0;}
.hx-corner.bl{ bottom:15px; left:15px; border-right:0; border-top:0;} .hx-corner.br{ bottom:15px; right:15px; border-left:0; border-top:0;}
.hx-hud{ position:absolute; z-index:6; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:2.5px; color:rgba(180,227,138,0.42); top:22px; right:46px; }
.hx-dots{ position:absolute; bottom:20px; right:46px; z-index:8; display:flex; gap:7px; }
.hx-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.22); transition:all .4s;}
.hx-dot.on{ background:var(--gl); box-shadow:0 0 8px var(--gl); width:20px; border-radius:4px;}
@keyframes hx-blink{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }
@media (prefers-reduced-motion:reduce){ .heroX *{ animation:none !important; } }
@media (max-width:760px){ .hx-copy{ left:24px; right:24px; max-width:none; bottom:28px;} .hx-ksvg{ width:88%; } }