/* KONTRAST AUDIO — home page. Shared pieces live in site.css. */

/* =====================================================================
   HERO — the KONTRAST motion trace, and the way in
   ===================================================================== */
.k-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:clamp(640px,calc(100vh - var(--hdr)),1040px);min-height:clamp(640px,calc(100svh - var(--hdr)),1040px);overflow:hidden;border-bottom:1px solid var(--k-line)}
.k-hero__visual{position:absolute;top:0;right:0;bottom:0;width:68%;z-index:-1}
.k-hero__visual canvas{width:100%;height:100%}
.k-hero__inner{position:relative;display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:clamp(36px,5vh,72px);padding:clamp(40px,4.6vw,76px) var(--k-margin) clamp(64px,7vw,104px)}

/* One quiet line at the foot of the hero, down to the product. */
.k-hero__cue{display:inline-flex;align-items:center;align-self:flex-start;margin-top:auto;font-family:var(--k-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--k-gray-1);transition:color .2s}
.k-hero__cue:hover{color:var(--k-white)}
.k-hero__down{display:inline-block;margin-left:14px;transition:transform .25s var(--k-ease)}
.k-hero__cue:hover .k-hero__down{transform:translateY(3px)}

@media (max-width:1100px){
  .k-hero__visual{width:74%}
}
@media (max-width:900px){
  .k-hero{min-height:0}
  .k-hero__visual{position:relative;order:1;width:auto;height:clamp(230px,60vw,440px);z-index:0}
  .k-hero__inner{order:2;flex:none;gap:30px;padding-top:8px;padding-bottom:clamp(44px,12vw,72px)}
}

/* =====================================================================
   PRODUCTS — each product gets a screen of its own and brings its own palette.
   ===================================================================== */
.product--chronomorph{--product-accent-1:#5ad3e6;--product-accent-2:#3a7bd5;--product-glow:rgba(90,211,230,.45);--product-muted:#7d98a3;--product-ink:#0b6e80}
.product--transient{--product-accent-1:#ff5b24;--product-accent-2:#ff2a3d;--product-accent-3:#3a78ff;--product-glow:rgba(255,91,36,.45);--product-muted:#8c5a48;--product-ink:#c2410c}
.product--chronoaim{--product-accent-1:#a78bfa;--product-accent-2:#6d5dfc;--product-glow:rgba(167,139,250,.45);--product-muted:#6f6a8a;--product-ink:#6d4fd8}
.product--growl{--product-accent-1:#c8f53c;--product-accent-2:#86b51e;--product-glow:rgba(200,245,60,.35);--product-muted:#6f7a55;--product-ink:#5b7d10}

/* A chapter: the product as an object on a dark stage, its name large, the facts small. */
.k-chapter{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:calc(100svh - var(--hdr));padding:clamp(48px,6vw,96px) var(--k-margin) clamp(40px,4.6vw,72px);border-bottom:1px solid var(--k-line);overflow:hidden}
.k-chapter::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 42% at 50% 0%,rgba(236,235,230,.06),transparent 72%),radial-gradient(34% 28% at 50% 46%,var(--product-glow),transparent 74%);opacity:0;transition:opacity 1.8s var(--k-ease-out)}
.k-chapter.is-live::before,html:not(.k-motion) .k-chapter::before{opacity:.42}
.k-chapter__stage{display:flex;flex:1;align-items:center;justify-content:center;min-height:0;margin:0;perspective:1800px}
.k-object{width:min(980px,70vw);transform:rotateX(var(--rx,9deg)) rotateY(var(--ry,0deg));transition:transform .9s var(--k-ease-out),opacity 1.3s var(--k-ease-out),translate 1.3s var(--k-ease-out)}
.k-object img{display:block;width:100%;height:auto;border:1px solid rgba(236,235,230,.14);border-radius:6px;box-shadow:0 70px 120px -50px #000,0 0 110px -40px var(--product-glow);-webkit-box-reflect:below 8px linear-gradient(transparent 74%,rgba(255,255,255,.1))}
.k-motion .k-chapter:not(.is-live) .k-object{opacity:0;translate:0 56px}
.k-chapter__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px 56px;margin-top:clamp(40px,4.4vw,72px)}
.k-chapter__id{min-width:0}
.k-chapter__name{font-family:var(--k-display);font-size:clamp(40px,9vw,172px);font-weight:200;font-stretch:125%;line-height:.86;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.k-chapter__name b{font-weight:900}
.k-chapter__copy{max-width:42ch;margin-top:clamp(18px,1.8vw,26px);font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:var(--k-gray-1);text-wrap:pretty}
.k-chapter__meta{display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:var(--k-mono);font-size:11px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;text-align:right;color:var(--k-gray-1)}
.k-chapter__meta li{display:flex;align-items:center}
.k-chapter__link{display:inline-flex;align-items:center;gap:12px;margin-top:8px;padding-bottom:5px;border-bottom:1px solid currentColor;color:var(--k-white)}

/* The next machine: smaller, and its signal stands in for an interface not shown yet. */
.k-chapter--next{min-height:calc(82svh - var(--hdr))}
.k-chapter--next .k-chapter__name{font-size:clamp(32px,5.4vw,104px)}
.k-signal{position:relative;width:min(1100px,88vw);height:clamp(180px,30vh,340px)}
.k-signal .v-transient .v-orb{width:clamp(110px,12vw,230px)}
.k-signal .v-transient .v-spark::before{width:clamp(90px,14vw,260px)}

/* 002 FUTURE TRANSIENT: an impulse fired into a dark body. */
.v-transient{position:absolute;inset:0}
.v-transient .v-line{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(58,120,255,.55) 16%,rgba(255,91,36,.9) 46%,rgba(255,42,61,.45) 70%,transparent 94%)}
.v-transient .v-orb{position:absolute;left:64%;top:50%;width:clamp(70px,6.4vw,108px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 70% 50%,#050505 56%,#1d0c07 100%);box-shadow:inset 4px 0 5px -1px rgba(255,196,160,.95),inset 12px 0 24px -8px rgba(255,91,36,.95),-12px 0 38px -8px rgba(255,91,36,.55);transition:box-shadow .5s}
.v-transient .v-spark{position:absolute;left:30%;top:50%;width:4px;height:4px;border-radius:50%;background:#fff4ea;box-shadow:0 0 6px 2px #ff9a5c,0 0 22px 6px rgba(255,91,36,.8),0 0 60px 18px rgba(255,42,61,.3);transform:translate(-50%,-50%)}
.v-transient .v-spark::before{content:"";position:absolute;right:2px;top:50%;width:clamp(60px,8vw,140px);height:1px;background:linear-gradient(90deg,transparent,rgba(255,154,92,.95));transform:translateY(-50%)}
.v-transient .v-ticks{position:absolute;left:0;right:0;bottom:12%;height:5px;background:repeating-linear-gradient(90deg,rgba(236,235,230,.22) 0 1px,transparent 1px 12px)}
.k-chapter.is-live .v-spark{animation:v-fire 2.4s var(--k-ease) .3s 1 both}
.k-chapter:hover .v-spark{animation:v-fire 1.9s var(--k-ease) infinite}
.k-chapter.is-live .v-orb{animation:v-flare 2.4s ease .3s 1}
.k-chapter:hover .v-orb{animation:v-flare 1.9s ease infinite}
@keyframes v-fire{0%{left:30%;opacity:1}55%{left:57%;opacity:1}58%{left:57%;opacity:0}59%{left:6%;opacity:0}100%{left:30%;opacity:1}}
@keyframes v-flare{0%,50%,100%{box-shadow:inset 4px 0 5px -1px rgba(255,196,160,.95),inset 12px 0 24px -8px rgba(255,91,36,.95),-12px 0 38px -8px rgba(255,91,36,.55)}60%{box-shadow:inset 6px 0 7px -1px #fff1e6,inset 22px 0 30px -8px rgba(255,91,36,1),-20px 0 60px -6px rgba(255,91,36,.85)}}

/* One line about the company, and room around it. */
.k-statement{padding:clamp(96px,13vw,210px) var(--k-margin);border-bottom:1px solid var(--k-line)}
.k-statement__line{max-width:17em;margin-top:22px;font-size:clamp(30px,4.4vw,80px);font-weight:800;font-stretch:112%;line-height:1;letter-spacing:-.04em;text-wrap:balance}
.k-statement__copy{max-width:46ch;margin-top:clamp(22px,2.4vw,34px);font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--k-gray-1);text-wrap:pretty}

@media (max-width:900px){
  .k-chapter{min-height:0;padding-top:clamp(40px,10vw,64px)}
  .k-object{width:100%}
  .k-chapter__stage{padding:12px 0 24px}
  .k-chapter__foot{grid-template-columns:minmax(0,1fr);gap:24px}
  .k-chapter__name{font-size:clamp(26px,8.8vw,64px)}
  .k-chapter--next .k-chapter__name{font-size:clamp(24px,7.4vw,48px);white-space:normal}
  .k-chapter__meta{align-items:flex-start;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .k-chapter .v-spark,.k-chapter .v-orb{animation:none!important}
  .k-object{transition:none}
}