/* Etusivu — parallax planes, sticky rig, live depth readout.
   Every transform here is derived in CSS from --sy, which app.js writes
   once per frame. */

.eyebrow, .step-id, .rig-cap, .hud-title, .hud-id, .hud-rate,
.hud-y, .cue, .yhteys-title, .yhteys-item dt {
  font: 600 0.6875rem/1.2 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}

/* ── signature: live depth readout ────────────────────────────────── */

.hud { display: none; }

.js .hud {
  display: block;
  position: fixed; z-index: 30;
  right: var(--gut); top: 50%; transform: translateY(-50%);
  width: 11.5rem;
  padding: .9rem 1rem 1rem;
  border: 1px solid var(--rail);
  background: color-mix(in srgb, var(--plane) 82%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--glass) 15%, transparent);
}
.hud-title { color: var(--brass); margin-bottom: .7rem; }
.hud-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hud-row { display: grid; grid-template-columns: 1.6rem 2.7rem 1fr; align-items: center; gap: .45rem; }
.hud-id { color: var(--dim); letter-spacing: .06em; }
.hud-rate { color: var(--ink); letter-spacing: .02em; }
.hud-bar { height: 3px; background: var(--rail); overflow: hidden; }
.hud-fill { display: block; height: 100%; background: var(--brass); }

.f1 { width: min(100%, calc(var(--sy, 0) * 0.088%)); }
.f2 { width: min(100%, calc(var(--sy, 0) * 0.044%)); }
.f3 { width: min(100%, calc(var(--sy, 0) * 0.019%)); }

.hud-y {
  margin-top: .85rem; padding-top: .7rem;
  border-top: 1px solid var(--rail);
  color: var(--dim);
  display: flex; justify-content: space-between;
}
.hud-num { color: var(--glass); }
.hud-num::after { counter-reset: y var(--sy, 0); content: counter(y) " px"; }

/* ── hero: three planes ───────────────────────────────────────────── */

.hero { position: relative; padding: 18vh var(--gut) 10vh; overflow: hidden; }
.js .hero { min-height: 142vh; padding-bottom: 0; }

.plane { will-change: transform; }
.p1, .p2 { position: absolute; inset: -10% 0 0; pointer-events: none; }

/* Lag = 1 − rate. Far sheets lag most, the foreground outruns the page. */
.p1 { transform: translate3d(0, calc(var(--sy, 0) * 0.70px), 0); }
.p2 { transform: translate3d(0, calc(var(--sy, 0) * 0.35px), 0); }
.p3 { position: relative; transform: translate3d(0, calc(var(--sy, 0) * -0.15px), 0); }

.field {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 44% at 22% 26%, color-mix(in srgb, var(--glass) 16%, transparent), transparent 70%),
    radial-gradient(46% 38% at 82% 58%, color-mix(in srgb, var(--brass-fill) 11%, transparent), transparent 72%),
    radial-gradient(72% 52% at 50% 104%, color-mix(in srgb, var(--glass) 18%, transparent), transparent 76%);
}

.glass {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--glass) 38%, transparent);
  background: color-mix(in srgb, var(--lit) 32%, transparent);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--glass) 10%, transparent),
    0 14px 30px color-mix(in srgb, var(--glass) 9%, transparent);
}
.ga { left: 4%;  top: 12%; width: 33vmin; height: 33vmin; border-radius: 50%; }
.gb { left: 54%; top: 6%;  width: 38vmin; height: 21vmin; transform: rotate(-9deg); }
.gc { left: 18%; top: 54%; width: 32vmin; height: 32vmin; transform: rotate(18deg); }
.gd { left: 58%; top: 66%; width: 27vmin; height: 27vmin; border-radius: 50%; }
.ge { left: 8%;  top: 84%; width: 46vmin; height: 17vmin; transform: rotate(4deg); }

.p3 { max-width: 62rem; }
.eyebrow { color: var(--brass); margin-bottom: 1.6rem; }

.hero-title {
  margin: 0;
  font: 800 clamp(4.5rem, 21vw, 15rem)/0.84 var(--display);
  letter-spacing: -0.055em;
  color: var(--ink);
  view-transition-name: page-title;
}

.lede {
  margin: 2rem 0 0;
  max-width: 34ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: color-mix(in srgb, var(--ink) 74%, var(--ground));
}

.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18vh;
  background: linear-gradient(transparent, var(--ground));
  pointer-events: none; z-index: 1;
}

.cue { display: none; }
.js .cue {
  display: block;
  position: absolute; left: var(--gut); top: calc(100vh - 5rem); z-index: 2;
  color: var(--dim);
}
.js .cue::after {
  content: ""; display: block;
  width: 1px; height: 2.4rem; margin-top: .7rem;
  background: linear-gradient(var(--brass), transparent);
  animation: drop 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes drop {
  0%, 100% { transform: scaleY(.3); opacity: .4; }
  50%      { transform: scaleY(1);  opacity: 1; }
}

/* ── tasot: sticky rig + scrolling steps ──────────────────────────── */

.tasot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding: 10vh var(--gut) 6vh;
  border-top: 1px solid var(--rail);
}

.rig { position: sticky; top: 20vh; margin: 0; }
.rig-cap { color: var(--dim); margin-bottom: 1.5rem; }
.rig svg { width: 100%; max-width: 24rem; height: auto; display: block; }

.rail line { stroke: var(--rail); stroke-width: 1; }
.lens circle { fill: var(--lit); stroke: var(--brass); stroke-width: 1.5; }
.lens path { stroke: color-mix(in srgb, var(--brass) 45%, transparent); stroke-width: 1; fill: none; }

.sheet polygon {
  fill: color-mix(in srgb, var(--lit) 40%, transparent);
  stroke: color-mix(in srgb, var(--glass) 55%, transparent);
  stroke-width: 1;
  transition: fill .55s ease, stroke .55s ease, transform .55s cubic-bezier(.22,.7,.28,1);
}
.sheet { transition: opacity .55s ease; opacity: .55; }
.tick text {
  fill: var(--dim);
  font: 600 10px var(--mono); letter-spacing: .12em;
  transition: fill .55s ease;
}

.rig[data-active="1"] .s1,
.rig[data-active="2"] .s2,
.rig[data-active="3"] .s3 { opacity: 1; }
.rig[data-active="1"] .s1 polygon,
.rig[data-active="2"] .s2 polygon,
.rig[data-active="3"] .s3 polygon {
  fill: color-mix(in srgb, var(--brass-fill) 30%, transparent);
  stroke: var(--brass);
  transform: translateX(16px);
}

.steps { list-style: none; margin: 0; padding: 0; }

.step { padding-block: 4vh; }
.js .step {
  min-height: 70vh;
  display: flex; flex-direction: column; justify-content: center;
  opacity: .28;
  transition: opacity .5s ease;
}
.js .step.in { opacity: 1; }

.step-id { color: var(--brass); margin-bottom: 1rem; }
.step-title {
  margin: 0 0 1rem;
  font: 700 clamp(1.6rem, 3.4vw, 2.6rem)/1.1 var(--display);
  letter-spacing: -0.025em;
}
.step-text { margin: 0; max-width: 40ch; color: color-mix(in srgb, var(--ink) 72%, var(--ground)); }

/* ── yhteys ───────────────────────────────────────────────────────── */

.yhteys { padding: 14vh var(--gut); border-top: 1px solid var(--rail); }
.yhteys-title { color: var(--dim); margin-bottom: 2.5rem; }
.yhteys-list { margin: 0; display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); max-width: 60rem; }
.yhteys-item dt { color: var(--brass); margin-bottom: .7rem; }
.yhteys-item dd {
  margin: 0;
  font: 500 clamp(1.4rem, 3vw, 2.1rem)/1.2 var(--display);
  letter-spacing: -0.02em;
  word-break: break-word;
}

/* ── narrow viewports ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Block flow so the rig can pin against the whole section rather than
     against its own one-row grid track, which has no travel to stick in. */
  .tasot { display: block; }
  .rig-col {
    position: sticky; top: 3.4rem; z-index: 5;
    padding: 1rem 0 1.25rem;
    background: var(--ground);
    border-bottom: 1px solid var(--rail);
  }
  /* Dissolve text under the shelf instead of cutting it mid-glyph. */
  .rig-col::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%;
    height: 1.6rem; pointer-events: none;
    background: linear-gradient(var(--ground), transparent);
  }
  .rig { position: static; }
  .rig-cap { display: none; }
  .rig svg { max-width: 14rem; margin: 0 auto; }
  .tick text { font-size: 16px; }
  .steps { padding-top: 1.5rem; }
  .js .hud {
    top: auto; bottom: 0; right: 0; left: 0;
    width: auto; transform: none;
    border-left: 0; border-right: 0; border-bottom: 0;
    display: flex; align-items: center; gap: 1rem;
    padding: .6rem var(--gut);
  }
  .hud-title { margin-bottom: 0; }
  .hud-list { flex: 1; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .hud-rate { display: none; }
  .hud-y { display: none; }
  .js .step { min-height: 52vh; }
}

@media (max-width: 560px) {
  .js .hero { min-height: 126vh; }
}

/* ── motion off ───────────────────────────────────────────────────── */

.calm .hud, .calm .cue { display: none; }
.calm .hero { min-height: auto; padding-bottom: 12vh; }
.calm .plane { transform: none; }
.calm .step { min-height: auto; opacity: 1; }
.calm .sheet { opacity: 1; }