:root { --fx-accent: #8B79FA; }

/* ---------- 1. section accent follows the wheel ---------- */
section[data-hk] { --sec-accent: var(--fx-accent); }
section[data-hk] .section-head h2 { position: relative; display: inline-block; }
section[data-hk] .section-head h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.32em; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--sec-accent), transparent 85%); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.2,.8,.2,1), background .6s; }
section[data-hk].is-current .section-head h2::after { transform: scaleX(1); }
section[data-hk].is-current .section-head::before { content: ""; position: absolute; left: -1.4rem; top: .2em; width: 3px; height: 1.6em; border-radius: 2px; background: var(--sec-accent); box-shadow: 0 0 18px var(--sec-accent); animation: fxBar .9s cubic-bezier(.2,.8,.2,1) both; }
section[data-hk] .section-head { position: relative; }
section[data-hk] .section-head.center::before { display: none; }
@keyframes fxBar { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
section[data-hk].is-current .product-card:hover, section[data-hk].is-current .bridge-prodcard:hover { border-color: color-mix(in srgb, var(--sec-accent) 60%, transparent); box-shadow: 0 18px 50px -20px color-mix(in srgb, var(--sec-accent) 55%, transparent); }
section[data-hk].is-current .btn-primary { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sec-accent) 45%, transparent), 0 12px 34px -14px var(--sec-accent); }
#fx-beam { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s; }
#fx-beam.is-on { opacity: 1; }
#fx-beam line { stroke: var(--fx-accent); stroke-width: 1.5; stroke-opacity: .55; stroke-dasharray: 6 10; animation: fxDash 1.2s linear infinite; }
#fx-beam circle { fill: var(--fx-accent); }
#fx-beam .glow { fill: none; stroke: var(--fx-accent); stroke-opacity: .35; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: fxPulse 2s ease-out infinite; }
@keyframes fxDash { to { stroke-dashoffset: -32; } }
@keyframes fxPulse { from { transform: scale(.5); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }

/* ---------- 2. unified depth reveal ---------- */
.fx-reveal { opacity: 0; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: var(--fx-d, 0s); will-change: transform, opacity; }
.fx-reveal[data-fx="card"] { transform: perspective(1100px) rotateX(9deg) translateY(34px) scale(.97); }
.fx-reveal[data-fx="head"] { transform: translateY(22px); }
.fx-reveal[data-fx="media"] { transform: perspective(1100px) rotateY(-9deg) translateY(20px) scale(.98); }
.fx-reveal[data-fx="row"] { transform: translateX(-24px); }
.fx-reveal.in { opacity: 1; transform: none; }
.fx-reveal.in[data-fx="card"] { transition-property: opacity, transform, border-color, box-shadow; }

/* ---------- 3. cursor light + magnetic cards ---------- */
#fx-light { position: fixed; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none; z-index: 3; mix-blend-mode: screen; opacity: 0; transition: opacity .6s; transform: translate3d(var(--lx, -1000px), var(--ly, -1000px), 0); background: radial-gradient(circle, color-mix(in srgb, var(--fx-accent) 11%, transparent), rgba(45,220,177,.025) 45%, transparent 66%); will-change: transform; }
body.fx-lit #fx-light { opacity: .7; }
html[data-skin="light"] #fx-light { mix-blend-mode: multiply; background: radial-gradient(circle, color-mix(in srgb, var(--fx-accent) 7%, transparent), transparent 66%); }
.fx-mag { --mx: 0px; --my: 0px; --tx: 0deg; --ty: 0deg; transform: translate(var(--mx), var(--my)) perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.fx-mag.is-hot { transition: transform .08s linear; }
.fx-reveal.fx-mag.in { transform: translate(var(--mx), var(--my)) perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)); }

/* ---------- 4. global star field (continues the hero particles) ---------- */
#fx-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; perspective: 900px; }
.fx-sl { position: absolute; inset: -10%; transform: translate3d(0, calc(var(--sy, 0) * var(--d)), var(--z)); will-change: transform; }
.fx-sl span { position: absolute; width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%; background: var(--fx-accent); box-shadow: 0 0 8px var(--fx-accent); opacity: .1; animation: fxTwinkle var(--t, 6s) ease-in-out infinite; animation-delay: var(--dl, 0s); transition: background .8s, box-shadow .8s; }
@keyframes fxTwinkle { 0%, 100% { opacity: .08; transform: scale(.8); } 50% { opacity: .6; transform: scale(1.2); } }
body.has-bgfx section.hk-hero { z-index: auto; }

/* ---------- 5. warp-out before navigation + cross-document transition ---------- */
body.fx-warp #hk-orbit .hk-wheel__3d { transform: scale(2.6) !important; opacity: 0; transition: transform .55s cubic-bezier(.6,0,.9,.4), opacity .5s ease .1s !important; }
body.fx-warp .hk-hero__text, body.fx-warp .hk-caption, body.fx-warp .hk-curtain, body.fx-warp .has-bgfx section:not(.hk-hero) { opacity: 0; transition: opacity .45s ease; }
body.fx-warp .hk-hero__bg { opacity: 0; transition: opacity .45s; }
::view-transition-old(root) { animation: fxOut .35s ease both; }
::view-transition-new(root) { animation: fxIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fxOut { to { opacity: 0; transform: scale(1.02); } }
@keyframes fxIn { from { opacity: 0; transform: scale(.985); } }

@media (hover: none) { #fx-light { display: none; } }
@media (max-width: 1080px) { #fx-beam { display: none; } .fx-sl:nth-child(3) { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .fx-reveal { opacity: 1; transform: none; transition: none; }
  #fx-beam, #fx-light, #fx-stars { display: none; }
  .fx-mag { transform: none !important; }
}