/* Light and dark as one pinned scene. theme-showcase.js turns scroll into:
   --rise  the MacBook arriving (0 → 1)
   --t     night to day: the screen wipe and the room (0 → 1)
   --turn  the type turning over, quickly, mid-way (0 → 1)
   --cap   the closing caption (0 → 1) */

.theme-show {
  --rise: 0; --t: 0; --turn: 0; --cap: 0;
  position: relative;
  height: 420vh;
  background: var(--stage-sunk);
}

.theme-sticky {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  height: 100svh;
  padding: clamp(5rem, 11vh, 7.5rem) var(--gutter) clamp(2rem, 6vh, 4rem);
  overflow: hidden;
}

.theme-day {
  position: absolute;
  inset: 0;
  opacity: var(--t);
  background:
    radial-gradient(60% 50% at 50% 55%, #ffffff, transparent 75%),
    linear-gradient(180deg, #f5f3ef, #e9e6e0);
}

.theme-lines {
  position: relative;
  display: grid;
  text-align: center;
}

.theme-line {
  grid-area: 1 / 1;
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem);
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.theme-line--night {
  color: var(--desk);
  opacity: calc(var(--rise) * max(0, 1 - var(--turn) * 2));
  transform: translateY(calc((1 - var(--rise)) * 2rem - var(--turn) * 1.5rem));
}

.theme-line--day {
  color: var(--ink);
  opacity: max(0, var(--turn) * 2 - 1);
  transform: translateY(calc((1 - var(--turn)) * 1.5rem));
}

.theme-mac {
  position: relative;
  width: min(60rem, 100%, calc((100svh - 22rem) * 1.6));
  opacity: calc(0.2 + var(--rise) * 0.8);
  transform: translateY(calc((1 - var(--rise)) * 14vh)) scale(calc(0.84 + var(--rise) * 0.16));
  transform-origin: 50% 100%;
}

/* A soft pool of light under the machine instead of a surface to sit on. */
.theme-mac::after {
  content: "";
  position: absolute;
  inset: auto 8% -12% 8%;
  z-index: -1;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 198, 92, 0.22), transparent);
  opacity: calc(1 - var(--t));
  filter: blur(8px);
}

.theme-show .macbook-lid {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 3rem 6rem rgba(0, 0, 0, calc(0.6 - var(--t) * 0.42));
}

.theme-screen { position: relative; }

.theme-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--t);
  background:
    radial-gradient(70% 60% at 30% 20%, rgba(150, 196, 255, 0.55), transparent 70%),
    radial-gradient(60% 60% at 85% 90%, rgba(255, 190, 150, 0.5), transparent 70%),
    linear-gradient(160deg, #cfe0f5, #f3e6d8);
}

.theme-shot { position: relative; grid-area: 1 / 1; }

/* The light theme sweeps across the same screen rather than fading through it. */
.theme-shot--light { clip-path: inset(0 calc((1 - var(--t)) * 100%) 0 0); }

.theme-caption {
  position: relative;
  max-width: 36rem;
  margin: clamp(1.25rem, 3vh, 2rem) 0 0;
  text-align: center;
  font-size: 1.08rem;
  color: var(--ink-soft);
  opacity: var(--cap);
  transform: translateY(calc((1 - var(--cap)) * 1rem));
}

@media (prefers-reduced-motion: reduce) {
  .theme-show { --rise: 1; --t: 1; --turn: 1; --cap: 1; height: auto; }
  .theme-sticky { position: static; height: auto; gap: 2rem; }
  .theme-shot--light { clip-path: inset(0 50% 0 0); }
}