/* ===== Landing page + hub: stamps, envelope, route, postcards =====
   Builds on style.css tokens. Everything here is paper on the night desk. */

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Airmail chevron border: the one repeating device, used on the envelope,
   the rules modal edge and the closing rule. */
.airmail {
  background: repeating-linear-gradient(
    135deg,
    var(--red) 0 24px,
    var(--paper) 24px 36px,
    var(--stamp-blue) 36px 60px,
    var(--paper) 60px 72px
  );
}

/* ===== Stamp ===== */

.stamp {
  --ink-c: var(--stamp-blue);
  container-type: inline-size;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink-c);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  aspect-ratio: 4 / 5;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.28s var(--ease-out), filter 0.28s var(--ease-out);
}

.stamp[data-ink='red'] { --ink-c: var(--red); }
.stamp[data-ink='ink'] { --ink-c: var(--stamp-ink); }

.stamp:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}

.stamp-face {
  --r: 2.7cqw;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 8cqw 8cqw 6cqw;
  background: var(--paper);
  /* Perforated edge: half-holes on all four sides, pitch chosen so the
     notches land evenly. Adjacent stamps in the sheet form whole holes. */
  -webkit-mask:
    radial-gradient(var(--r) at 50% 0, #0000 98%, #000) 50% 0 / calc(100cqw / 9) 100% repeat-x,
    radial-gradient(var(--r) at 50% 100%, #0000 98%, #000) 50% 100% / calc(100cqw / 9) 100% repeat-x,
    radial-gradient(var(--r) at 0 50%, #0000 98%, #000) 0 50% / 100% calc(125cqw / 11) repeat-y,
    radial-gradient(var(--r) at 100% 50%, #0000 98%, #000) 100% 50% / 100% calc(125cqw / 11) repeat-y;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(var(--r) at 50% 0, #0000 98%, #000) 50% 0 / calc(100cqw / 9) 100% repeat-x,
    radial-gradient(var(--r) at 50% 100%, #0000 98%, #000) 50% 100% / calc(100cqw / 9) 100% repeat-x,
    radial-gradient(var(--r) at 0 50%, #0000 98%, #000) 0 50% / 100% calc(125cqw / 11) repeat-y,
    radial-gradient(var(--r) at 100% 50%, #0000 98%, #000) 100% 50% / 100% calc(125cqw / 11) repeat-y;
  mask-composite: intersect;
}

.stamp-frame {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  border: max(1.5px, 0.9cqw) solid var(--ink-c);
  background: color-mix(in srgb, var(--ink-c) 7%, var(--paper));
}

/* A second, thinner rule inside the frame, like an engraved border */
.stamp-frame::before {
  content: '';
  position: absolute;
  inset: 2.2cqw;
  border: 1px solid color-mix(in srgb, var(--ink-c) 45%, transparent);
  pointer-events: none;
}

.stamp-art {
  width: 56%;
  aspect-ratio: 1;
  background: var(--ink-c);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.stamp-value {
  position: absolute;
  top: 3.6cqw;
  left: 5cqw;
  font-family: var(--font-display);
  font-size: 10cqw;
  line-height: 1;
  letter-spacing: 0.02em;
}

.stamp-name {
  margin-top: 3.4cqw;
  min-height: 2.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 9.2cqw;
  line-height: 1.05;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .stamp:hover {
    transform: translateY(-7px) rotate(-1.2deg) scale(1.035);
    filter: drop-shadow(0 18px 14px rgba(var(--shade), 0.55));
    z-index: 3;
  }
}

.stamp:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}

/* ===== Sheet (landing games + hub picker) ===== */

.stamp-sheet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  /* one shadow for the whole block, so neighbours never shade each other */
  filter: drop-shadow(0 26px 26px rgba(var(--shade), 0.55));
}

@media (min-width: 520px) {
  .stamp-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .stamp-sheet { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@keyframes stampIn {
  from { opacity: 0; translate: 0 18px; rotate: 1.5deg; }
}

.js .stamp-sheet[data-sheet]:not(.is-in) .stamp { opacity: 0; }

.stamp-sheet[data-sheet].is-in .stamp {
  animation: stampIn 0.7s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 38ms);
}

/* ===== Hero: the envelope ===== */

.hero {
  padding: 8px 24px 0;
}

.envelope {
  max-width: 1192px;
  margin: 0 auto;
  padding: 14px;
  border-radius: 3px;
  box-shadow: 0 44px 60px -36px rgba(var(--shade), 0.95);
}

.envelope-paper {
  --ink: var(--stamp-ink);
  --ink-dim: var(--stamp-dim);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px;
  min-height: clamp(420px, calc(100dvh - 190px), 600px);
  padding: clamp(28px, 4.6vw, 64px);
  background: var(--paper);
  color: var(--stamp-ink);
  overflow: hidden;
}

/* faint fibre on the paper itself */
.envelope-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07  0 0 0 0 .13  0 0 0 0 .3  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  pointer-events: none;
}

.hero-copy {
  position: relative;
  align-self: center;
  max-width: 34rem;
}

.hero h1 {
  margin: 0 0 22px;
  font-family: var(--font-wide);
  font-size: clamp(2.15rem, 4.7vw, 4.1rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--stamp-ink);
}

.hero-sub {
  margin: 0 0 32px;
  max-width: 30rem;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--stamp-dim);
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--red);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
}

.link-arrow .ph {
  width: 1.1em;
  height: 1.1em;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition: translate 0.2s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover .ph { translate: 4px 0; }
}

.hero-stamps {
  position: relative;
  align-self: center;
  justify-self: end;
  width: min(100%, 500px);
  aspect-ratio: 1.12;
}

.hero-stamps .stamp {
  position: absolute;
  width: 39%;
}

.hero-stamps .stamp:nth-of-type(1) { left: 0;     top: 20%; rotate: -5deg; }
.hero-stamps .stamp:nth-of-type(2) { left: 31%;    top: 2%;  rotate: 2deg; z-index: 2; }
.hero-stamps .stamp:nth-of-type(3) { left: 61%;    top: 21%; rotate: 7deg; }

.cancel {
  position: absolute;
  left: -4%;
  top: 30%;
  width: 78%;
  color: var(--red);
  mix-blend-mode: multiply;
  opacity: 0.82;
  pointer-events: none;
}

.postmark {
  position: absolute;
  right: -3%;
  top: -8%;
  width: 40%;
  color: var(--red);
  rotate: -9deg;
  mix-blend-mode: multiply;
  opacity: 0.9;
  pointer-events: none;
}

.postmark text {
  font-family: var(--font-display);
  fill: currentColor;
  text-transform: uppercase;
}

.par-avion {
  position: absolute;
  right: 0;
  bottom: 4%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 16px 9px;
  border: 3px solid var(--stamp-blue);
  color: var(--stamp-blue);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-transform: uppercase;
  rotate: -3deg;
  background: color-mix(in srgb, var(--stamp-blue) 6%, var(--paper));
}

.par-avion span + span {
  padding-top: 2px;
  border-top: 1.5px solid var(--stamp-blue);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
}

/* Load choreography: copy rises, stamps land, the postmark thumps down last */
@keyframes rise {
  from { opacity: 0; translate: 0 14px; }
}

@keyframes land {
  from { opacity: 0; translate: 0 -24px; scale: 1.07; }
}

@keyframes thump {
  from { opacity: 0; scale: 1.55; rotate: -24deg; }
  55% { opacity: 0.9; }
}

@keyframes inkIn {
  from { opacity: 0; }
}

/* --t0 is when the hero timeline starts: 0 normally, after the boot curtain on a first visit */
.hero-copy > * { animation: rise 0.8s var(--ease-out) backwards; animation-delay: calc(var(--t0) + 120ms); }
.hero-copy > :nth-child(2) { animation-delay: calc(var(--t0) + 220ms); }
.hero-copy > :nth-child(3) { animation-delay: calc(var(--t0) + 320ms); }
.hero-stamps .stamp { animation: land 0.75s var(--ease-out) backwards; }
.hero-stamps .stamp:nth-of-type(1) { animation-delay: calc(var(--t0) + 550ms); }
.hero-stamps .stamp:nth-of-type(2) { animation-delay: calc(var(--t0) + 650ms); }
.hero-stamps .stamp:nth-of-type(3) { animation-delay: calc(var(--t0) + 750ms); }
.postmark { animation: thump 0.45s cubic-bezier(0.2, 0.9, 0.25, 1) calc(var(--t0) + 1150ms) backwards; }
.cancel { animation: inkIn 0.35s ease-out calc(var(--t0) + 1220ms) backwards; }
.par-avion { animation: inkIn 0.6s ease-out calc(var(--t0) + 950ms) backwards; }

/* ===== Sections ===== */

.block {
  padding-top: clamp(72px, 10vw, 132px);
}

.block h2,
.closing h2 {
  margin: 0 0 16px;
  font-family: var(--font-wide);
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
}

.block-lead {
  margin: 0 0 44px;
  max-width: 34rem;
  font-size: 1.05rem;
  color: var(--ink-dim);
}

/* Games sheet section */

.sheet-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  align-items: end;
}

@media (min-width: 1000px) {
  .sheet-layout { grid-template-columns: minmax(0, 1fr) 240px; gap: 56px; }
}

.sheet-aside {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.sheet-key {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--ink-dim);
}

.sheet-key li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sheet-key .sw {
  flex-shrink: 0;
  width: 18px;
  height: 22px;
  background: var(--paper);
  border: 4px solid var(--c);
}

.sheet-aside p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-dim);
}

/* How it works: a flight path with four postmarks along it */

.route-track {
  position: relative;
  container-type: inline-size;
}

.route-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.route-steps::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  border-top: 2px dashed color-mix(in srgb, var(--ink) 38%, transparent);
}

.route-step h3 {
  margin: 22px 0 8px;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.route-step p {
  margin: 0;
  max-width: 26ch;
  font-size: 0.96rem;
  color: var(--ink-dim);
}

.roundel {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--red);
  box-shadow: 0 0 0 9px var(--bg), 0 20px 24px -16px rgba(var(--shade), 0.9);
}

.roundel::before,
.roundel::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--red);
  pointer-events: none;
}

.roundel::before { inset: 6px; }
.roundel::after { inset: 12px; border-width: 1px; opacity: 0.55; }

.roundel .ph {
  width: 34px;
  height: 34px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.route-plane {
  position: absolute;
  left: 0;
  top: 30px;
  z-index: 2;
  width: 28px;
  height: 28px;
  background: var(--paper);
  -webkit-mask: url('icons/bold/airplane-tilt.svg') center / contain no-repeat;
  mask: url('icons/bold/airplane-tilt.svg') center / contain no-repeat;
  rotate: 45deg;
  filter: drop-shadow(0 6px 4px rgba(var(--shade), 0.6));
}

.route.is-in .route-plane {
  translate: calc(100cqw - 28px) 0;
  transition: translate 1.9s cubic-bezier(0.45, 0, 0.2, 1) 0.25s;
}

@media (max-width: 759px) {
  .route-steps { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .route-steps::before {
    top: 0;
    bottom: 0;
    left: 43px;
    right: auto;
    border-top: 0;
    border-left: 2px dashed color-mix(in srgb, var(--ink) 38%, transparent);
  }
  .route-step { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 20px; align-items: center; }
  .route-step h3 { margin: 0 0 6px; }
  .route-step .roundel { grid-row: 1 / span 2; }
  .route-plane { display: none; }
}

/* Two ways in: postcards */

.ways-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.postcard {
  --ink: var(--stamp-ink);
  --ink-dim: var(--stamp-dim);
  position: relative;
  background: var(--paper);
  color: var(--stamp-ink);
  border-radius: 2px;
  box-shadow: 0 34px 40px -30px rgba(var(--shade), 0.95);
}

.postcard h3 {
  margin: 0 0 12px;
  font-family: var(--font-wide);
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.postcard p {
  margin: 0 0 26px;
  max-width: 30rem;
  color: var(--stamp-dim);
}

.postcard-msg {
  padding: clamp(26px, 3.4vw, 40px);
}

.postcard--friend {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  rotate: -0.7deg;
}

.postcard--anyone {
  margin-top: 60px;
  rotate: 0.8deg;
}

.postcard-address {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(26px, 3.4vw, 40px) clamp(22px, 3vw, 34px);
  border-left: 2px solid rgba(19, 34, 79, 0.22);
}

.postage {
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 62px;
  height: 76px;
  border: 2px dashed rgba(19, 34, 79, 0.4);
  color: var(--stamp-blue);
}

.postage .ph {
  width: 30px;
  height: 30px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.typed {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--stamp-ink);
}

.address-rule {
  height: 0;
  border-top: 1.5px solid rgba(19, 34, 79, 0.28);
}

.postcard--anyone .postage {
  position: absolute;
  top: 24px;
  right: 24px;
}

.postcard--anyone .postcard-msg {
  padding-right: 110px;
}

@media (max-width: 899px) {
  .ways-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .postcard--friend { grid-template-columns: minmax(0, 1fr); rotate: 0deg; }
  .postcard--anyone { margin-top: 0; rotate: 0deg; }
  .postcard-address { display: none; }
  .postcard--friend .postcard-msg { padding-right: clamp(26px, 3.4vw, 40px); }
}

/* Closing rule and line */

.closing {
  margin-top: clamp(72px, 10vw, 132px);
}

.closing::before {
  content: '';
  display: block;
  height: 14px;
  background: repeating-linear-gradient(
    135deg,
    var(--red) 0 24px,
    var(--paper) 24px 36px,
    var(--stamp-blue) 36px 60px,
    var(--paper) 60px 72px
  );
}

.closing-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 92px) 24px 0;
}

.closing h2 {
  margin: 0;
  max-width: 13ch;
  font-size: clamp(2.3rem, 6.2vw, 5rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.site-foot {
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  color: var(--ink-dim);
  font-size: 0.9rem;
  text-align: left;
}

.site-foot p { margin: 0; max-width: 40rem; }

/* ===== Scroll reveal (generic) ===== */

.js [data-reveal]:not(.is-in) {
  opacity: 0;
  translate: 0 16px;
}

.js [data-reveal] {
  transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 70ms);
}

/* ===== Nav on the landing page ===== */

.nav-cta { margin-left: 4px; }

@media (max-width: 719px) {
  .nav-links li:not(.nav-cta) { display: none; }
  .topbar { padding-left: 18px; padding-right: 18px; }
}

/* ===== Hero on narrow screens ===== */

@media (max-width: 899px) {
  .hero { padding-left: 14px; padding-right: 14px; }
  .envelope-paper {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
    padding: 26px 22px 30px;
  }
  .hero-stamps {
    order: -1;
    justify-self: stretch;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    aspect-ratio: 1.45;
  }
  .par-avion { display: none; }
}

/* ===== Hub ===== */

.game-page--wide { max-width: 1040px; }

.game-page--wide .status-row { justify-content: flex-start; }

.hub-title {
  margin: 8px 0 26px;
  font-family: var(--font-wide);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  letter-spacing: -0.028em;
  line-height: 1.05;
  text-align: left;
  text-transform: none;
}

#oppLeftOverlay .turn-banner {
  padding: 0 0 4px;
  border: 0;
  background: none;
}

.hub-picker .turn-banner {
  margin-bottom: 26px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 1.5rem;
  text-align: left;
}

/* ===== Futuristic layer: boot curtain, scan reveal, HUD, pointer light =====
   Landing page only. One deliberate exception to the no-glow rule: the scan line
   and the pointer light are the only luminous things on the page. */

:root { --t0: 0s; }
html.intro { --t0: 3.3s; }
html.intro.intro-skip { --t0: 0s; }

/* Desk: a faint drifting grid that fades out toward the edges, and a soft light that follows the cursor */
.desk-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: radial-gradient(ellipse 85% 65% at 50% 22%, #000 25%, transparent 82%);
  mask: radial-gradient(ellipse 85% 65% at 50% 22%, #000 25%, transparent 82%);
}

.desk-fx::before {
  content: '';
  position: absolute;
  inset: -56px 0 0;
  background:
    linear-gradient(rgba(242, 238, 227, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(242, 238, 227, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
  animation: gridDrift 7s linear infinite;
}

@keyframes gridDrift {
  to { translate: 0 56px; }
}

.desk-spot {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 72%) var(--my, 28%), rgba(120, 150, 255, 0.11), transparent 70%);
}

/* Boot curtain: two halves that part on a seam, over a hairline loader */
.boot { display: none; }

html.intro .boot {
  --boot-bg: #050B1B;
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  animation: bootGone 0s linear 4.7s forwards;
}

@keyframes bootGone {
  to { visibility: hidden; pointer-events: none; }
}

.boot.is-skipped { animation: bootSkip 0.28s ease-out forwards; }

@keyframes bootSkip {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.boot-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.2%;
  background:
    repeating-linear-gradient(0deg, rgba(242, 238, 227, 0.03) 0 1px, transparent 1px 3px),
    var(--boot-bg);
}

.boot-half--top { top: 0; animation: bootTop 1.3s cubic-bezier(0.77, 0, 0.18, 1) 3.1s forwards; }
.boot-half--bottom { bottom: 0; animation: bootBottom 1.3s cubic-bezier(0.77, 0, 0.18, 1) 3.1s forwards; }

@keyframes bootTop { to { translate: 0 -101%; } }
@keyframes bootBottom { to { translate: 0 101%; } }

.boot-seam {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--red-text);
  animation: seamIn 1.2s cubic-bezier(0.65, 0, 0.2, 1) 0.3s backwards, seamOut 0.8s ease-in 3.1s forwards;
}

@keyframes seamIn { from { scale: 0 1; } }

@keyframes seamOut {
  30% { background: var(--paper); transform: scaleY(2.4); }
  to { opacity: 0; transform: scaleY(0.3); }
}

.boot-ui {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  padding: clamp(32px, 8vh, 84px) 24px;
  animation: bootUiOut 0.56s ease-in 2.84s forwards;
}

@keyframes bootUiOut {
  to { opacity: 0; translate: 0 -10px; filter: blur(4px); }
}

.boot-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid rgba(242, 238, 227, 0.5);
  animation: cornerIn 1.5s var(--ease-out) 0.4s backwards;
}

.boot-corner--tl { top: 20px; left: 20px; border-top-width: 2px; border-left-width: 2px; --dx: -1; --dy: -1; }
.boot-corner--tr { top: 20px; right: 20px; border-top-width: 2px; border-right-width: 2px; --dx: 1; --dy: -1; }
.boot-corner--bl { bottom: 20px; left: 20px; border-bottom-width: 2px; border-left-width: 2px; --dx: -1; --dy: 1; }
.boot-corner--br { bottom: 20px; right: 20px; border-bottom-width: 2px; border-right-width: 2px; --dx: 1; --dy: 1; }

@keyframes cornerIn {
  from { opacity: 0; translate: calc(var(--dx) * 44px) calc(var(--dy) * 44px); }
}

.boot-logo {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  animation: bootLogo 1.8s var(--ease-out) 0.5s backwards;
}

@keyframes bootLogo {
  from { opacity: 0; letter-spacing: 0.5em; filter: blur(6px); }
}

.boot-line {
  align-self: center;
  /* sit entirely above the seam line, however many lines it wraps to */
  translate: 0 calc(-50% - 18px);
  max-width: 36rem;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.3vw, 1.2rem);
  line-height: 2;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink);
}

.boot-line span {
  display: inline-block;
  margin: 0 0.3em;
  animation: bootWord 1.5s var(--ease-out) backwards;
  animation-delay: calc(1s + var(--w) * 0.52s);
}

.boot-line span:last-child { color: var(--red-text); }

@keyframes bootWord {
  from { opacity: 0; filter: blur(12px); translate: 0 6px; }
}

.boot-meter {
  align-self: end;
  width: min(240px, 62vw);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 12px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  animation: bootFade 1s ease 0.6s backwards;
}

@keyframes bootFade { from { opacity: 0; } }

.boot-count {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.boot-bar {
  grid-column: 1 / -1;
  display: block;
  height: 2px;
  background: rgba(242, 238, 227, 0.16);
  overflow: hidden;
}

.boot-bar i {
  display: block;
  height: 100%;
  background: var(--red-text);
  transform-origin: left;
  animation: barFill 2.2s linear 0.7s both;
}

/* stutters like a real load: quick, stall, quick, stall, done */
@keyframes barFill {
  0% { transform: scaleX(0); }
  22% { transform: scaleX(0.34); }
  38% { transform: scaleX(0.41); }
  60% { transform: scaleX(0.78); }
  76% { transform: scaleX(0.84); }
  100% { transform: scaleX(1); }
}

/* Nav drops in after the curtain */
.topbar--in {
  animation: dropIn 0.8s var(--ease-out) backwards;
  animation-delay: calc(var(--t0) + 60ms);
}

@keyframes dropIn {
  from { opacity: 0; translate: 0 -14px; }
}

/* Scan reveal: a red line sweeps left to right and the envelope only exists behind it.
   Clip and line share one box (the wrapper) and one curve, so they stay locked together.
   The clip is padded 80px past the edges so the envelope's shadow is never cut. */
.scan-wrap {
  position: relative;
  max-width: 1192px;
  margin: 0 auto;
  container-type: inline-size;
}

.scan-wrap .envelope {
  animation: scanReveal 1s cubic-bezier(0.6, 0, 0.25, 1) var(--t0) backwards;
}

@keyframes scanReveal {
  from { clip-path: inset(-80px 100% -140px -80px); }
  to { clip-path: inset(-80px -80px -140px -80px); }
}

.scanline {
  position: absolute;
  left: 0;
  top: -12px;
  bottom: -12px;
  width: 2px;
  background: var(--red-text);
  box-shadow: 0 0 18px 2px rgba(255, 130, 114, 0.5);
  pointer-events: none;
  animation:
    scanMove 1s cubic-bezier(0.6, 0, 0.25, 1) var(--t0) backwards,
    scanFade 1s linear var(--t0) both;
}

@keyframes scanMove {
  to { translate: calc(100cqw + 80px) 0; }
}

@keyframes scanFade {
  0% { opacity: 0; }
  10%, 85% { opacity: 1; }
  100% { opacity: 0; }
}

/* Headline decode: each character keeps its real width while it scrambles */
.dw { display: inline-block; white-space: nowrap; }
.dc { display: inline-block; text-align: center; }
.dc.pre { visibility: hidden; }
.dc.scr { color: var(--red); }

/* HUD: focus brackets and a two-line readout under the envelope */
.hud {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--ink-dim);
  opacity: 0.75;
  pointer-events: none;
  animation: hudIn 0.75s var(--ease-out) calc(var(--t0) + 0.8s) backwards;
}

.hud--tl { top: -12px; left: -12px; border-top-width: 2px; border-left-width: 2px; --dx: -1; --dy: -1; }
.hud--tr { top: -12px; right: -12px; border-top-width: 2px; border-right-width: 2px; --dx: 1; --dy: -1; }
.hud--bl { bottom: -12px; left: -12px; border-bottom-width: 2px; border-left-width: 2px; --dx: -1; --dy: 1; }
.hud--br { bottom: -12px; right: -12px; border-bottom-width: 2px; border-right-width: 2px; --dx: 1; --dy: 1; }

@keyframes hudIn {
  from { opacity: 0; translate: calc(var(--dx) * 30px) calc(var(--dy) * 30px); }
}

.hud-readout {
  position: absolute;
  top: calc(100% + 20px);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  animation: rise 0.8s var(--ease-out) calc(var(--t0) + 1s) backwards;
}

.hud-readout--l { left: 4px; }
.hud-readout--r { right: 4px; }

.hud-readout i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-text);
  animation: blip 1.8s ease-in-out infinite;
}

@keyframes blip { 50% { opacity: 0.25; } }

@media (max-width: 899px) {
  .hud-readout--r { display: none; }
}

/* Stamps drift with the cursor, each at its own depth (mouse only). The land animation
   owns `translate` while it runs; afterwards this takes over. */
@media (hover: hover) and (pointer: fine) {
  .hero-stamps .stamp {
    translate: calc(var(--px, 0) * var(--z, 0) * 1px) calc(var(--py, 0) * var(--z, 0) * 1px);
    transition: transform 0.28s var(--ease-out), filter 0.28s var(--ease-out), translate 0.4s var(--ease-out);
  }
  .hero-stamps .stamp:nth-of-type(1) { --z: 26; }
  .hero-stamps .stamp:nth-of-type(2) { --z: 44; }
  .hero-stamps .stamp:nth-of-type(3) { --z: 18; }
}

/* ===== Reduced motion: everything is simply there ===== */

@media (prefers-reduced-motion: reduce) {
  .scanline, .boot { display: none !important; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal]:not(.is-in),
  .js .stamp-sheet[data-sheet]:not(.is-in) .stamp {
    opacity: 1;
    translate: none;
  }
  .route .route-plane { translate: calc(100cqw - 28px) 0; }
}