/* MARK: Device
   A Blender-rendered phone (display cut out) over screens pre-warped through the same
   camera (tools/build_assets.py), topped by its cover-glass reflections. css/kits.css
   supplies each kit's canvas size and glass box. */

.device {
  --device-height: min(78svh, 780px);
  position: relative;
  width: calc(var(--device-height) * var(--kit-width) / var(--kit-height));
  height: var(--device-height);
  margin: 0;
}

.device-screen,
.device-screen .screen,
.device-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The incoming screen fades in over the outgoing one, which stays opaque underneath. */
.device-screen .screen {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.device-screen .screen.was-active { z-index: 1; opacity: 1; transition: none; }
.device-screen .screen.is-active { z-index: 2; opacity: 1; }

.device-phone,
.device-phone img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.device-glass {
  position: absolute;
  left: var(--kit-glass-left);
  top: var(--kit-glass-top);
  width: var(--kit-glass-width);
  height: var(--kit-glass-height);
  pointer-events: none;
}

.device-glass img { width: 100%; height: 100%; }

/* MARK: Hero */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 12vh, 132px) 0 0;
  text-align: center;
  background:
    radial-gradient(60% 50% at 18% 78%, rgba(22, 52, 128, 0.55), transparent 70%),
    radial-gradient(50% 45% at 86% 62%, rgba(92, 30, 104, 0.5), transparent 72%),
    radial-gradient(90% 60% at 50% 100%, rgba(12, 23, 54, 0.9), transparent 80%),
    var(--ink);
}

.hero::after {
  /* Hand the hero's glow over to the page background. */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 18%;
  background: linear-gradient(transparent, var(--ink));
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
}

.hero-app {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--text-2);
}

.hero-app img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.hero h1 {
  margin: 20px 0 0;
  font-size: clamp(64px, 11vw, 148px);
}

.hero .lead {
  max-width: 34em;
  margin-top: 22px;
}

.hero .get { margin-top: 34px; }

.hero-art {
  position: relative;
  width: min(94vw, 1180px);
  margin: clamp(40px, 7vh, 72px) auto 0;
}

.hero-art img {
  width: 100%;
  height: auto;
  aspect-ratio: 1912 / 1500;
}

@media (max-width: 699px) {
  .hero-art { width: 100%; }
  .hero-art img { aspect-ratio: 1170 / 1500; }
}

/* MARK: Features */

.feature {
  --accent: var(--blue);
  --accent-glow: rgba(10, 132, 255, 0.22);
  position: relative;
  padding-top: clamp(96px, 16vh, 180px);
}

.feature-intro {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.feature-intro h2 {
  margin: 0;
  font-size: clamp(52px, 8vw, 112px);
}

.feature-intro .lead {
  max-width: 30em;
  margin: 20px auto 0;
  text-wrap: balance;
}

.feature-body {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 24px;
}

.feature-pin {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100svh;
}

.feature-pin::before {
  content: "";
  position: absolute;
  inset: 12% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--accent-glow), transparent);
  filter: blur(20px);
}

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

.step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 82svh;
  max-width: 25em;
  padding: 0 0 0 clamp(24px, 5vw, 72px);
}

.step h3 {
  margin: 0;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.step p {
  margin: 12px 0 0;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.4;
  color: var(--text-2);
}

.step-index {
  display: block;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.js .step { opacity: 0.28; transition: opacity 0.4s ease; }
.js .step.is-active { opacity: 1; }

.feature[data-side="right"] .feature-pin { grid-column: 2; grid-row: 1; }
.feature[data-side="right"] .steps { grid-column: 1; grid-row: 1; justify-self: end; }
.feature[data-side="right"] .step { padding: 0 clamp(24px, 5vw, 72px) 0 0; }

.feature-plan { --accent: var(--purple); --accent-glow: rgba(191, 90, 242, 0.2); }
.feature-progress { --accent: var(--green); --accent-glow: rgba(48, 209, 88, 0.16); }
.feature-rhythm { --accent: var(--orange); --accent-glow: rgba(255, 159, 10, 0.18); }

/* Phones: the device pins at the top, and each step reads in the space beneath it. */
@media (max-width: 899px) {
  .feature-body {
    display: block;
    padding: 0;
  }

  .feature-pin {
    z-index: 1;
    height: 64svh;
    padding-top: 3svh;
    background: var(--ink);
  }

  /* Softens text as it slides under the pinned phone. */
  .feature-pin::after {
    content: "";
    position: absolute;
    inset: 100% 0 auto;
    height: 24px;
    background: linear-gradient(var(--ink), transparent);
  }

  .feature-pin::before { inset: 8% 4%; }
  .device { --device-height: 58svh; }

  .steps { padding: 0 28px; }

  /* Each step fills the space under the 64svh pin, so one step reads at a time. */
  .step,
  .feature[data-side="right"] .step {
    justify-content: flex-start;
    min-height: 36svh;
    max-width: 32em;
    margin: 0 auto;
    padding: 4svh 0 0;
    text-align: center;
  }

  .js .step { opacity: 0.2; }
}

/* MARK: Closing */

.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(120px, 18vh, 200px);
  padding: clamp(280px, 34vw, 480px) 24px 120px;
  text-align: center;
}

.closing-art {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
}

.closing-art img {
  width: 100%;
  height: min(56.25vw, 900px);
  object-fit: cover;
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(transparent, black 22%, black 40%, transparent 96%);
  mask-image: linear-gradient(transparent, black 22%, black 40%, transparent 96%);
}

.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 40% at 50% 62%, rgba(4, 5, 11, 0.94), transparent),
    radial-gradient(40% 30% at 30% 90%, rgba(22, 52, 128, 0.35), transparent),
    radial-gradient(40% 30% at 75% 85%, rgba(92, 30, 104, 0.3), transparent);
}

.closing-icon {
  width: 104px;
  height: 104px;
  margin: 0 auto;
  border-radius: 23px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
}

.closing h2 {
  margin: 32px 0 0;
  font-size: clamp(56px, 9vw, 128px);
}

.closing .get {
  justify-content: center;
  margin-top: 36px;
}

.fine {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--text-3);
}

.note {
  max-width: 34em;
  margin: 96px auto 0;
  padding: 32px 36px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
  text-align: left;
}

.note p { margin: 0; color: var(--text-2); }
.note p + p { margin-top: 12px; }
.note .signature { color: var(--text); font-weight: 600; }

/* MARK: Motion */

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *, .hero-art {
    animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .hero-copy > :nth-child(2) { animation-delay: 0.06s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.12s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.18s; }
  .hero-art { animation-delay: 0.24s; animation-duration: 1.4s; }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }

    .hero-art img {
      animation: drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100svh;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .device-screen .screen, .js .step, .bar { transition: none; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: none; }
}

@keyframes drift {
  to { transform: translateY(6%) scale(0.97); }
}