/* Home — the finished K comes apart into its four layers as you scroll:
   frame (Print) → fill (Tech) → detail (Brand) → light (Event) → back together */

.build { position: relative; }

/* ---------- Sticky stage ---------- */
.stage {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh;
  overflow: hidden; pointer-events: none;
}
.stage__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 48% 62% at 72% 52%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 48% 62% at 72% 52%, #000 25%, transparent 78%);
  transition: opacity 1.2s var(--ease);
}
.kwrap {
  position: absolute; top: var(--nav-h); bottom: 0; left: 50%; right: var(--gutter);
  display: grid; place-items: center;
  transition: opacity .6s var(--ease);
}
.kbox {
  position: relative; --step: clamp(0.85px, .11vw, 1.6px);
  width: min(38vw, 64vh, 620px);
  aspect-ratio: 1859 / 1898;
  transition: transform 1.4s var(--ease), filter 1.4s var(--ease);
}
.k { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); }
/* the bulb sits at (1012, 837) in the K's viewBox, so the light swells from there */
.k--light { transform-origin: 50% 40.7%; }

/* 3D: the frame layer sits on 40 stacked copies of the silhouette, each pushed back in Z;
   home.js moves every layer (and this stack) along Z */
.k3d {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: perspective(1800px) rotateX(var(--rx, 10deg)) rotateY(var(--ry, -30deg));
  will-change: transform;
}
.kdepth { position: absolute; inset: 0; transform-style: preserve-3d; }
.kdepth svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  transform: translateZ(calc(var(--i) * var(--step, 2.8px) * -1));
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.kdepth use { --kf: inherit; }
.k .k-frame, .kdepth use { fill: var(--kf, var(--pink)); }

.k-fill  { fill: #F9AE3C; }
.k-det   { fill: var(--pink); }
.k-bulb  { pointer-events: none; }
.k-detline { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linejoin: round; }


.hud {
  position: absolute; right: var(--gutter); top: calc(var(--nav-h) + 22px);
  display: grid; justify-items: end; gap: 6px; text-align: right;
  transition: opacity 1s;
}
.hud__phase { color: var(--cream); }
.hud__pct { font: 500 clamp(40px, 4.4vw, 64px)/.9 var(--font-display); color: var(--cream); font-variant-numeric: tabular-nums; }
.hud__pct small { font-size: .4em; color: var(--cream-3); margin-left: 2px; }

/* Complete */
.stage.is-done .stage__grid { opacity: 0; }
.stage.is-done .hud { opacity: 0; }
.stage.is-done .kbox {
  transform: scale(1.04);
  filter: drop-shadow(0 0 60px rgba(252, 176, 60, .28)) drop-shadow(0 30px 60px var(--k-shadow));
  animation: bob 6s ease-in-out 1.4s infinite;
}
@keyframes bob { 50% { transform: scale(1.04) translateY(-12px); } }

/* ---------- Step index (navigation + progress) ---------- */
.steps {
  position: fixed; right: var(--gutter); bottom: 24px; z-index: 50;
  display: flex; gap: 6px;
  padding: 6px; border-radius: 40px;
  background: var(--glass); border: 1px dashed var(--cork);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden;
  transition: opacity .4s, transform .4s var(--ease), visibility 0s .4s;
}
.steps.is-visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .4s, transform .4s var(--ease); }
.steps a {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px; border-radius: 30px;
  font: 500 12px/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em;
  color: var(--cream-2); text-decoration: none;
  transition: color .25s, background .25s;
}
.steps a b { font-weight: 500; color: var(--cream-3); }
.steps a i { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; border-radius: 2px; }
.steps a:hover { color: var(--cream); background: var(--hover); }
.steps a.is-active { color: var(--bg); background: var(--cream); }
.steps a.is-active b { color: inherit; }
.steps a.is-active i { background: var(--pink); }

/* ---------- Chapters ---------- */
.chapter {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 56px) 0 120px;
}
.chapter--hero { margin-top: -100vh; margin-top: -100svh; }
.chapter > .wrap { width: min(var(--max), 100% - 2 * var(--gutter)); }
.chapter__inner { width: min(640px, 47%); }
.chapter__inner > .label { display: block; margin-bottom: 22px; }
.chapter .lead { margin-top: 26px; }
.chapter .btns { margin-top: 36px; }
.chapter .display { font-size: clamp(2.8rem, 6.4vw, 6.8rem); }
.chapter--hero .chapter__inner > .label { animation: rise 1s var(--ease) .1s both; }
.chapter--hero .display { animation: rise 1.1s var(--ease) .2s both; }
.chapter--hero .lead { animation: rise 1.1s var(--ease) .35s both; }
.chapter--hero .btns { animation: rise 1.1s var(--ease) .5s both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.chapter--done { min-height: 115vh; }
.chapter .rows { margin-top: 40px; }
.chapter .rows li { grid-template-columns: 40px 1fr; }

/* Print products */
.products { display: grid; grid-template-columns: .78fr 1fr 1fr; gap: 14px; align-items: end; margin-top: 44px; }
.product { position: relative; }
.product img {
  width: 100%;   /* studio background is baked to the page colour (#100904) */
  animation: bob2 7s ease-in-out infinite;
  transition: transform .5s var(--ease);
}
.product:nth-child(2) img { animation-delay: -2.3s; }
.product:nth-child(3) img { animation-delay: -4.6s; }
.product:hover img { transform: translateY(-6px) scale(1.04); }
.product--fade img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.product figcaption { margin-top: 10px; text-align: center; }
@keyframes bob2 { 50% { translate: 0 -8px; } }

/* Tech apps */
.apps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; }

.app {
  display: flex; flex-direction: column;
  border: 1px dashed var(--cork); border-radius: 12px; overflow: hidden;
  text-decoration: none; background: var(--glass);
  transition: border-color .3s, transform .4s var(--ease);
}
.app:hover { border-color: var(--gold); transform: translateY(-4px); }
.app__art { position: relative; height: 190px; background: var(--bark); overflow: hidden; }
.app__body { padding: 20px 20px 22px; display: grid; gap: 8px; align-content: start; flex: 1; }
.app__body p:not(.label) { color: var(--cream-2); font-size: 15px; }
.app__body .link { justify-self: start; margin-top: 6px; }

.app__art--cards img {
  position: absolute; top: 26px; left: 50%; width: 118px; aspect-ratio: 508 / 496; object-fit: cover;
  border-radius: 8px; box-shadow: 0 16px 30px rgba(0, 0, 0, .5);
  transition: transform .5s var(--ease);
}
.app__art--cards img:nth-child(1) { transform: translateX(-50%) translateX(-78px) rotate(-9deg); }
.app__art--cards img:nth-child(2) { transform: translateX(-50%) translateY(-6px); z-index: 2; }
.app__art--cards img:nth-child(3) { transform: translateX(-50%) translateX(78px) rotate(9deg); }
.app:hover .app__art--cards img:nth-child(1) { transform: translateX(-50%) translateX(-92px) rotate(-13deg); }
.app:hover .app__art--cards img:nth-child(2) { transform: translateX(-50%) translateY(-14px) scale(1.04); }
.app:hover .app__art--cards img:nth-child(3) { transform: translateX(-50%) translateX(92px) rotate(13deg); }

.app__art--pos { display: grid; place-items: center; }
.receipt {
  position: relative; width: 132px; padding: 16px 14px 22px;
  background: #ffedd7; color: var(--ink);
  display: grid; gap: 7px;
  box-shadow: 0 18px 30px rgba(0, 0, 0, .5);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 7px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 7px repeat-x;
  transform: rotate(-3deg); transition: transform .5s var(--ease);
}
.app:hover .receipt { transform: rotate(0) translateY(-6px); }
.receipt b { font: 600 11px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; text-align: center; padding-bottom: 6px; border-bottom: 1px dashed rgba(16, 9, 4, .35); }
.receipt i { height: 5px; border-radius: 3px; background: rgba(16, 9, 4, .16); }
.receipt i.short { width: 60%; }
.receipt__total { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding-top: 8px; border-top: 1px dashed rgba(16, 9, 4, .35); }
.receipt__total em { width: 44px; height: 7px; border-radius: 3px; background: rgba(16, 9, 4, .5); }
.receipt__total strong { font: 600 10px/1 var(--font-display); text-transform: uppercase; letter-spacing: .1em; color: var(--pink); border: 1.5px solid var(--pink); padding: 3px 5px; border-radius: 3px; transform: rotate(-8deg); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .chapter__inner { width: min(560px, 52%); }
  .kwrap { left: 54%; }
  .apps { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* K sits in the top of the screen; text scrolls up underneath and over it */
  .kwrap { left: 0; right: 0; top: var(--nav-h); bottom: auto; height: 44svh; height: 44vh; }
  .kbox { width: min(60vw, 34vh, 340px); }
  .hud { display: none; }
  .stage__grid { -webkit-mask-image: radial-gradient(ellipse 70% 40% at 50% 28%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 70% 40% at 50% 28%, #000 20%, transparent 80%); }
  .stage.is-dim .kwrap { opacity: .2; }

  .chapter { align-items: flex-start; padding: calc(var(--nav-h) + 40px) 0 110px; }
  /* every chapter opens with the K in view above its text */
  .chapter--hero, .chapter[data-layer] { padding-top: calc(var(--nav-h) + 44vh); min-height: 100svh; }
  .chapter__inner { width: 100%; }
  .chapter .display { font-size: clamp(2.5rem, 11vw, 4rem); }

  .steps { left: var(--gutter); right: var(--gutter); bottom: calc(14px + env(safe-area-inset-bottom)); justify-content: space-between; }
  /* phones: half the extrusion layers (same thickness) to keep scrolling smooth */
  .kbox { --step: clamp(1.7px, .22vw, 3.2px); }
  .kdepth svg:nth-child(2n) { display: none; }
  .chapter__inner .btns { position: relative; z-index: 2; }
  .steps a { flex: 1; justify-content: center; padding: 11px 8px; }
  .products { gap: 8px; }
}
@media (max-width: 420px) {
  .steps a b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .product img, .stage.is-done .kbox { animation: none; }
}