/* Component state CSS (hover, pseudo-elements, keyframes) used by the React components. Ported from styleguide.html. */

/* Streak */
.hk-streak{position:relative;height:1px;background:var(--line);overflow:hidden}
.hk-streak::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;background:var(--streak);transform:translateX(-100%);animation:hk-streak 3.2s var(--ease-in-out) infinite}
.hk-streak.is-once::after{animation-iteration-count:1;animation-fill-mode:forwards;animation-duration:var(--dur-slow)}
.hk-streak.is-static::after{animation:none;transform:translateX(162%)}
@keyframes hk-streak{0%{transform:translateX(-100%)}55%,100%{transform:translateX(270%)}}

/* Buttons */
.hk-btn{position:relative;display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 22px;border-radius:var(--radius-pill);font:600 12px/1 var(--font-sans);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;overflow:hidden;white-space:nowrap;transition:background var(--dur-snap) var(--ease-out),color var(--dur-snap),border-color var(--dur-snap)}
.hk-btn .hk-arr{transition:transform var(--dur-snap) var(--ease-out)}
.hk-btn:hover .hk-arr{transform:translateX(4px)}
.hk-btn::after{content:"";position:absolute;left:22px;right:22px;bottom:12px;height:1px;background:var(--streak);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out)}
.hk-btn:hover::after{transform:scaleX(1)}
.hk-btn--primary{background:var(--bone-100);color:var(--ink-950)}
.hk-btn--primary:hover{background:#fff;color:var(--ink-950)}
.hk-btn--accent{background:var(--ember-500);color:var(--ink-950)}
.hk-btn--accent:hover{background:var(--ember-400);color:var(--ink-950)}
.hk-btn--accent::after{background:var(--ink-950)}
.hk-btn--ghost{background:transparent;color:var(--text);border-color:color-mix(in srgb,var(--text) 30%,transparent)}
.hk-btn--ghost:hover{border-color:var(--text)}
.hk-btn--sm{height:36px;padding:0 16px;font-size:11px}
.hk-btn--sm::after{bottom:9px;left:16px;right:16px}
.hk-btn:disabled,.hk-btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* Chips */
.hk-chip{display:inline-flex;align-items:center;height:26px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-pill);font:600 10px/1 var(--font-sans);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);background:transparent;white-space:nowrap}
.hk-chip--on-media{border-color:rgba(243,239,231,.25);color:var(--bone-100)}
.hk-chip--filter{height:34px;padding:0 16px;font-size:11px;cursor:pointer;transition:all var(--dur-snap) var(--ease-out)}
.hk-chip--filter:hover{color:var(--text);border-color:var(--text)}
.hk-chip--filter.is-on{background:var(--text);color:var(--bg);border-color:var(--text)}

/* Nav */
.hk-nav{display:flex;align-items:center;gap:var(--space-6);padding:8px 8px 8px 20px;border-radius:var(--radius-pill);background:var(--overlay-nav);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(243,239,231,.08);box-shadow:var(--shadow-float);max-width:calc(100% - 32px);transition:transform var(--dur-base) var(--ease-out)}
.hk-nav--fixed{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:50}
.hk-nav--fixed.is-hidden{transform:translate(-50%,-140%)}
.hk-nav ul{display:flex;gap:var(--space-5);list-style:none;margin:0;padding:0;font:600 11px/1 var(--font-sans);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-400)}
.hk-nav ul a{cursor:pointer}
.hk-nav ul a:hover,.hk-nav ul a.is-active{color:var(--bone-100)}
@media (max-width:760px){.hk-nav ul{display:none}}

/* Hero */
.hk-hero-wrap{position:relative;height:clamp(560px,78vh,860px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--ink-1000);color:var(--bone-100)}
.hk-hero-wrap video,.hk-hero-wrap .hk-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.hk-hero-shade{position:absolute;inset:0;z-index:1;background:var(--vignette),var(--shade-hero)}
.hk-hero-t .hk-ln{display:block;overflow:hidden;padding-bottom:.06em}
.hk-hero-t .hk-ln>span{display:inline-block;animation:hk-rise var(--dur-slow) var(--ease-out) both}
.hk-hero-t .hk-ln:nth-child(2)>span{animation-delay:90ms}
.hk-hero-t .hk-ln:nth-child(3)>span{animation-delay:180ms}
@keyframes hk-rise{from{transform:translateY(60%)}to{transform:none}}
.hk-rec{display:inline-flex;align-items:center;gap:8px}
.hk-rec i{width:7px;height:7px;border-radius:50%;background:var(--ember-500);box-shadow:0 0 12px var(--ember-glow)}

/* Ticker */
.hk-ticker{position:relative;z-index:3;border-top:1px solid rgba(243,239,231,.12);overflow:hidden;padding-block:14px;background:rgba(12,11,10,.55);backdrop-filter:blur(6px)}
.hk-ticker .hk-track{display:flex;width:max-content;animation:hk-tick var(--ticker-speed) linear infinite}
.hk-ticker:hover .hk-track{animation-play-state:paused}
.hk-ticker span{font:700 12px/1 var(--font-sans);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-100);padding-inline:22px;white-space:nowrap;display:inline-flex;align-items:center;gap:44px}
.hk-ticker span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ember-500)}
@keyframes hk-tick{to{transform:translateX(-50%)}}

/* Creative tile */
.hk-tile{position:relative;overflow:hidden;background:var(--ink-900);cursor:pointer;color:var(--bone-100)}
.hk-tile img,.hk-tile video{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-base) var(--ease-out)}
.hk-tile video{position:absolute;inset:0;opacity:0}
.hk-tile:hover video{opacity:1}
.hk-tile:hover img{transform:scale(1.04)}
.hk-tile .hk-ov{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-5);gap:var(--space-3);background:var(--shade-tile);transform:translateY(38%);transition:transform var(--dur-base) var(--ease-out)}
.hk-tile .hk-more{opacity:0;transition:opacity var(--dur-snap)}
.hk-tile:hover .hk-ov,.hk-tile:focus-visible .hk-ov,.hk-tile.is-open .hk-ov{transform:none}
.hk-tile:hover .hk-more,.hk-tile:focus-visible .hk-more,.hk-tile.is-open .hk-more{opacity:1}
.hk-tile .hk-big{font:400 clamp(44px,4.4vw,72px)/.88 var(--font-serif);letter-spacing:-0.03em}

/* Lever row */
.hk-lever{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.2fr) 160px;gap:var(--space-5);align-items:center;padding-block:var(--space-6);border-top:var(--hairline)}
.hk-lever.is-last{border-bottom:var(--hairline)}
.hk-lever::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--streak);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease-out)}
.hk-lever:hover::after{transform:scaleX(1)}
.hk-lever .hk-idx{font:700 13px/1 var(--font-sans);font-stretch:125%;letter-spacing:.12em;color:var(--text-muted);transition:color var(--dur-snap)}
.hk-lever:hover .hk-idx{color:var(--ember-500)}
.hk-lever svg{width:100%;height:56px;stroke:var(--text);opacity:.55;fill:none;stroke-width:1}
@media (max-width:800px){.hk-lever{grid-template-columns:48px minmax(0,1fr)}.hk-lever>p,.hk-lever>svg{grid-column:2}}

/* Ecosystem card */
.hk-eco{position:relative;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:space-between;padding:var(--space-5);background:center/cover;overflow:hidden;color:var(--bone-100);cursor:pointer}
.hk-eco::before{content:"";position:absolute;inset:0;background:var(--shade-card)}
.hk-eco>*{position:relative;z-index:3}
.hk-eco .hk-h2{transition:transform var(--dur-base) var(--ease-out)}
.hk-eco:hover .hk-h2{transform:translateX(8px)}

/* Dashboard */
.hk-live{display:inline-flex;align-items:center;gap:8px}
.hk-live i{width:7px;height:7px;border-radius:50%;background:var(--ember-500);animation:hk-pulse 2s var(--ease-out) infinite}
@keyframes hk-pulse{0%{box-shadow:0 0 0 0 rgba(226,85,43,.55)}100%{box-shadow:0 0 0 10px rgba(226,85,43,0)}}

/* Form fields */
.hk-field{min-width:0}
.hk-field label{display:block;margin-bottom:var(--space-2)}
.hk-field input,.hk-field select,.hk-field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;font:400 20px/1.3 var(--font-sans);color:var(--text);border-radius:0;outline:none;transition:border-color var(--dur-snap);appearance:none;-webkit-appearance:none}
.hk-field select{cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 10px) 52%,calc(100% - 5px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.hk-field select option{background:var(--ink-900);color:var(--bone-100)}
.hk-field input::placeholder,.hk-field textarea::placeholder{color:var(--text-muted)}
.hk-field input:focus,.hk-field select:focus,.hk-field textarea:focus{border-bottom-color:var(--accent)}
.hk-field.is-error input,.hk-field.is-error select{border-bottom-color:var(--signal-down)}

@media (prefers-reduced-motion: reduce){.hk-streak::after,.hk-ticker .hk-track,.hk-live i,.hk-hero-t .hk-ln>span{animation:none}}