/* Hestaren interactive layer. Every effect is decorative and degrades to a calm, static page. */

/* Sticky frosted header with reading progress. */
.header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--dark) 80%,transparent);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);transition:height .35s ease,background .35s ease}
@media(min-width:761px){.header.scrolled{height:78px}}
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#f08a1300,var(--orange) 30%,#ffb35c);transform-origin:left;transform:scaleX(var(--progress,0));pointer-events:none;box-shadow:0 0 10px #f08a1370}

/* Hero: the grid lights up beneath the cursor. */
.hero{--mx:70%;--my:45%}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx) var(--my),#f08a1310,transparent 65%);opacity:var(--glow,0);transition:opacity .5s ease}
.hero-grid:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#f08a13 1px,transparent 1px),linear-gradient(90deg,#f08a13 1px,transparent 1px);background-size:80px 80px;-webkit-mask-image:radial-gradient(240px circle at var(--mx) var(--my),#000,transparent 75%);mask-image:radial-gradient(240px circle at var(--mx) var(--my),#000,transparent 75%);opacity:var(--glow,0);transition:opacity .5s ease}
.decode{display:inline-block;white-space:nowrap}
.decode .glyph{color:#ffb35c;opacity:.85}

/* WebGL globe sits beneath the interactive 2D layer. */
.globe-gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-visual #network{position:relative;z-index:1}
.hero-visual .globe-nodes,.hero-visual .globe-callout{z-index:2}

/* Ask Hestaren: one compact row and a single caption line, nothing over the globe. */
.ask{position:absolute;z-index:3;left:6%;bottom:46px;display:flex;align-items:center;gap:14px}
.ask-label{font-size:10px;letter-spacing:2px;color:var(--muted);white-space:nowrap}.ask-label b{color:var(--orange);font-weight:400}
.ask-options{display:flex;padding:3px;border:1px solid var(--line);border-radius:30px;background:color-mix(in srgb,var(--dark) 75%,transparent)}
.ask-options button{padding:6px 14px;border:0;border-radius:30px;background:transparent;color:var(--muted);font-size:12px;transition:background .25s,color .25s}
.ask-options button:hover{color:var(--cream)}
.ask-options button[aria-pressed=true]{background:var(--orange);color:var(--deeper)}
.plan-caption{position:absolute;z-index:3;left:6%;right:0;bottom:12px;margin:0;min-height:20px;font-size:13px;line-height:1.5;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-caption .plan-step{font-size:10px;letter-spacing:1.5px;color:var(--orange);margin-right:12px}
.plan-caption b{color:var(--cream);font-weight:600;margin-right:8px}
.plan-caption.swap{animation:caption-in .45s ease}
@keyframes caption-in{from{opacity:0;transform:translateY(4px)}}

/* Capability ticker. */
.ticker{overflow:hidden;border-bottom:1px solid var(--line);padding:20px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-track{display:flex;width:max-content;animation:ticker 60s linear infinite}
.ticker-track>div{display:flex;align-items:center;gap:28px;padding-right:28px}
.ticker span{font:600 11px/1 var(--sans);letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ticker b{color:var(--orange);font-size:9px;font-weight:400;opacity:.8}
@keyframes ticker{to{transform:translateX(-50%)}}

/* Spotlight cards. */
.service,.steps article{--x:50%;--y:30%;position:relative;isolation:isolate}
.service:before,.steps article:before{content:"";position:absolute;inset:0 -1px 0 -1px;z-index:-1;pointer-events:none;background:radial-gradient(280px circle at var(--x) var(--y),#f08a131a,transparent 70%);opacity:0;transition:opacity .35s ease}
.service:hover:before,.steps article:hover:before{opacity:1}
.service:after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.service+.service:after{left:0}
.service:hover:after{transform:scaleX(1)}
.service svg{transition:transform .5s cubic-bezier(.2,.7,.3,1)}.service:hover svg{transform:rotate(-6deg) scale(1.08)}

/* Approach steps draw their own line as you read. */
.steps article{border-top-color:transparent!important}
.steps article>.step-line{position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line);overflow:hidden}
.steps article>.step-line:after{content:"";position:absolute;inset:0;background:var(--orange);transform:scaleX(var(--fill,0));transform-origin:left;box-shadow:0 0 8px #f08a13}
.steps article>span:not(.step-line){transition:color .4s}

/* Magnetic buttons use the independent translate property so hover transforms still compose. */
.magnetic{transition:translate .35s cubic-bezier(.2,.7,.3,1),transform .2s,background .2s}

/* Illusion 1: four parts rotate into line as you scroll, and a square appears that is never drawn. */
.kanizsa{margin:44px 0 0;display:flex;align-items:center;gap:26px;--align:1}
.kanizsa svg{width:124px;height:124px;flex-shrink:0;fill:#b75b00;overflow:visible}
.kanizsa g{transform-box:fill-box;transform-origin:center;transform:rotate(calc(var(--r) * (1 - var(--align))))}
.kanizsa figcaption{font-size:13px;letter-spacing:.2px;color:#7a6f7c;max-width:220px;line-height:1.6}
html[data-theme=dark] .kanizsa svg{fill:var(--orange)}html[data-theme=dark] .kanizsa figcaption{color:#b9acbb}

/* Illusion 2: dot layers drift at different speeds as the page scrolls, giving the dark sections depth. */
.approach,.contact,.product{position:relative;isolation:isolate}
.approach:before,.approach:after,.contact:after,.product:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.approach:before{background-image:radial-gradient(color-mix(in srgb,var(--cream) 22%,transparent) 1px,transparent 1.2px);background-size:46px 46px;background-position:0 calc(var(--depth,0px) * .18);opacity:.35;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.approach:after,.product:after,.contact:after{background-image:radial-gradient(#f08a13 1px,transparent 1.4px);background-size:92px 92px;background-position:23px calc(23px + var(--depth,0px) * .42);opacity:.16;-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 70% 50%,#000,transparent 70%)}

/* Contact glow follows the cursor. */
.contact{--cx:20%;--cy:80%}
.contact:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(600px circle at var(--cx) var(--cy),#f08a131c,transparent 65%);transition:background-position .3s}

/* Phones and tablets. */
@media(max-width:760px){
 .hero-visual{height:auto;min-height:0;display:flex;flex-direction:column}
 .hero-visual canvas{height:360px;flex-shrink:0}
 .globe-gl{height:360px!important;bottom:auto}
 .ask{position:relative;left:0;bottom:0;margin-top:8px;flex-wrap:wrap;gap:10px}
 .plan-caption{position:relative;left:0;bottom:0;margin-top:10px;white-space:normal}
 .ticker{padding:16px 0}.ticker span{font-size:10px;letter-spacing:2px}.ticker-track>div{gap:20px;padding-right:20px}
 .kanizsa{margin-top:28px}.kanizsa svg{width:100px;height:100px}
}

/* Respect reduced motion: everything stays put. */
@media(prefers-reduced-motion:reduce){
 .ticker-track{animation:none}.header{transition:none}.plan-caption.swap{animation:none}.magnetic{translate:none!important}
}

/* Node labels: a compact tag beside the node instead of a long leader line. */
.globe-callout{padding:4px 10px;max-width:none;background:color-mix(in srgb,var(--dark) 85%,transparent);border:1px solid #f08a1355;border-radius:20px;font-size:12px;letter-spacing:.3px;line-height:1.4;text-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media(max-width:760px){.globe-callout{font-size:11px;padding:3px 8px}}

/* Keep the Ask row and caption centered under the globe so they never meet the hero copy. */
@media(min-width:761px){
 .ask{left:50%;right:auto;transform:translateX(-50%);white-space:nowrap}
 .plan-caption{left:8%;right:8%;text-align:center}
}