/* ==========================================================================
   L402 Lab — landing page
   ========================================================================== */

/* ---- Hero ----------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(28px, 6vw, 72px) clamp(24px, 4vw, 48px);
}
.hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--space-4); }
.hero__kicker-text { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 700; color: var(--ink-soft); }
.hero__title { font-size: var(--step-5); margin-bottom: var(--space-5); max-width: 11ch; }
.squiggle { position: relative; white-space: nowrap; color: var(--c-web); }
.squiggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.3em;
  bottom: -0.1em;
  height: 0.22em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6 Q6 1 11 6 T21 6 T31 6 T41 6' fill='none' stroke='%23FF7A1A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 0 / 0.8em 100%;
}
.hero__lede { margin-bottom: var(--space-5); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.hero__ctas .btn-lg { padding-inline: 1.1em; font-size: var(--step-0); }

.loop-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink-soft);
}
.loop-legend li { display: inline-flex; align-items: center; gap: 8px; position: relative; }
.loop-legend li + li::before { content: "→"; position: absolute; left: -19px; color: var(--ink); font-family: var(--font-mono); }
.loop-legend { flex-direction: column; gap: 8px; }
.loop-legend li + li::before { content: none; }
.loop-legend__coin {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-sat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M22 8 13 22h7l-3 10 10-14h-7z' fill='%231B1A2E'/%3E%3C/svg%3E") center / 80% no-repeat;
  border: var(--stroke) solid var(--c-ink);
}

.hero__web {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: rotate(1deg);
  background-color: #FFFFFF;
  background-image: radial-gradient(#E6E1F7 1.2px, transparent 1.6px);
  background-size: 18px 18px;
}
.hero__web-svg { aspect-ratio: 600 / 540; }
.web-svg { display: block; width: 100%; height: 100%; }

.thread { fill: none; stroke: var(--c-ink); stroke-linecap: round; }
.thread--radial { stroke-width: 1.6; opacity: 0.8; }
.thread--ring { stroke-width: 1.25; opacity: 0.75; }
.thread--ring-1 { stroke-width: 1.6; opacity: 0.9; }
.thread--wisp { stroke-width: 1; opacity: 0.5; }
.dew-drop { fill: #D7F0FF; stroke: var(--c-ink); stroke-width: 1.4; }
.dew-shine { fill: #FFFFFF; }
.page-sheet { fill: #FFFFFF; stroke: var(--c-ink); stroke-width: 1.8; stroke-linejoin: round; }
.page-fold { fill: #E8E4F7; stroke: var(--c-ink); stroke-width: 1.4; stroke-linejoin: round; }
.page-lines { stroke: #9C98B5; stroke-width: 1.6; stroke-linecap: round; }
.hub-disc { fill: var(--c-sat); stroke: var(--c-ink); stroke-width: 2; }
.hub-swirl { fill: none; stroke: var(--c-ink); stroke-width: 1.6; stroke-linecap: round; }
.route { fill: none; stroke: none; }

/* mini doors on the web */
.wd-halo { fill: var(--c-mint); fill-opacity: 0; stroke: var(--c-mint); stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0.6); transition: opacity 400ms var(--ease-out), transform 600ms var(--ease-spring), fill-opacity 400ms; }
.wd-pad { fill: #ECE8FA; stroke: var(--c-ink); stroke-width: 1.6; }
.wd-frame { fill: #FFFFFF; stroke: var(--c-ink); stroke-width: 2; }
.wd-hole { fill: #0D0C1F; }
.wd-glow { fill: var(--c-sat); opacity: 0; transition: opacity 300ms 200ms; }
.wd-leaf { transform-box: fill-box; transform-origin: 0% 50%; transition: transform 700ms var(--ease-spring); }
.wd-leaf-face { fill: var(--c-web); stroke: var(--c-ink); stroke-width: 1.8; }
.wd-slot { fill: #0D0C1F; transition: fill 200ms; }
.wd-knob { fill: var(--c-sat); stroke: var(--c-ink); stroke-width: 1; }
.wd-string { stroke: var(--c-ink); stroke-width: 1.4; fill: none; }
.wd-nail { fill: var(--c-sat); stroke: var(--c-ink); stroke-width: 1.2; }
.wd-plaque { fill: #FFFFFF; stroke: var(--c-ink); stroke-width: 1.8; transition: fill 250ms; }
.wd-num { font: 800 10.5px/1 var(--font-display); fill: var(--c-web); }
.wd-sign { transform-box: fill-box; transform-origin: 50% 0%; }
.wd-label-bg { fill: #FFFFFF; stroke: var(--c-ink); stroke-width: 1.5; }
.wd-label-text { font: 700 10.5px/1 var(--font-mono); fill: var(--c-ink); }
.wd-sparks path { fill: var(--c-sat); stroke: var(--c-ink); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); transition: transform 500ms var(--ease-spring), opacity 200ms; }
.wd-ok { opacity: 0; transform-box: fill-box; transition: opacity 250ms; }
.wd-ok rect { fill: var(--c-mint); stroke: var(--c-ink); stroke-width: 1.6; }
.wd-ok text { font: 700 11px/1 var(--font-mono); fill: var(--c-ink); }

.wd.is-challenged .wd-sign { animation: wd-swing 900ms var(--ease-in-out); }
.wd.is-challenged .wd-plaque { fill: #EDE7FF; }
.wd.is-fed .wd-slot { fill: var(--c-sat); }
.wd.is-open .wd-leaf { transform: scaleX(0.14) skewY(-12deg); }
.wd.is-open .wd-glow { opacity: 1; }
.wd.is-open .wd-plaque { fill: var(--c-mint); }
.wd.is-open .wd-num { fill: var(--c-ink); }
.wd.is-open .wd-halo { opacity: 1; fill-opacity: 0.18; transform: scale(1); }
.wd.is-open .wd-sparks path { opacity: 1; transform: scale(1); }
.wd.is-open .wd-sparks path:nth-child(2) { transition-delay: 80ms; }
.wd.is-open .wd-sparks path:nth-child(3) { transition-delay: 160ms; }
.wd.is-open .wd-sparks path:nth-child(4) { transition-delay: 240ms; }
.wd.is-open .wd-ok { opacity: 1; animation: wd-float 1.3s var(--ease-out); }
@keyframes wd-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } }
@keyframes wd-float { from { transform: translateY(14px); } }

/* coin + spider */
.web-coin { opacity: 0; }
.web-coin.is-flying { opacity: 1; }
.web-coin .c-face { fill: var(--c-sat); stroke: var(--c-ink); stroke-width: 2; }
.web-coin .c-bolt { fill: var(--c-ink); }
.web-spider { color: var(--c-ink); }
.web-spider .sp-legs { transform-origin: 0 0; }
.web-spider.is-walking .sp-legs--a { animation: legs-a 260ms ease-in-out infinite alternate; }
.web-spider.is-walking .sp-legs--b { animation: legs-b 260ms ease-in-out infinite alternate; }
@keyframes legs-a { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes legs-b { from { transform: rotate(7deg); } to { transform: rotate(-7deg); } }

/* budget + ticker overlays */
.hero-budget {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c-ink);
  background: #FFFFFF;
  border: var(--stroke) solid var(--c-ink);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--c-ink);
}
.hb__bar { width: 70px; height: 10px; border: 1.5px solid var(--c-ink); border-radius: 99px; overflow: hidden; background: #ECE8FA; }
.hb__fill { display: block; height: 100%; width: 100%; background: var(--c-sat); border-right: 1.5px solid var(--c-ink); transition: width 500ms var(--ease-spring); }

.ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #E9E6FF;
  background: var(--c-night);
  border-top: var(--stroke) solid var(--c-ink);
}
.ticker__prompt { color: var(--c-sat); font-weight: 700; }
.ticker__text { overflow-wrap: anywhere; }
.ticker__text.is-new { animation: tick-in 300ms var(--ease-out); }
.ticker__text[data-kind="402"] { color: #C9BCFF; }
.ticker__text[data-kind="pay"] { color: var(--c-sat); }
.ticker__text[data-kind="200"] { color: var(--c-mint); }
@keyframes tick-in { from { opacity: 0; transform: translateY(6px); } }

/* ---- Try a door ------------------------------------------------------------------ */

.try {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding-top: clamp(40px, 6vw, 72px);
}
.try__copy h2 { margin-bottom: var(--space-4); }
.try__copy p { max-width: 52ch; }
.try__door {
  display: grid;
  justify-items: center;
  padding: var(--space-6) var(--space-4) var(--space-5);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transform: rotate(-1deg);
  background-image: radial-gradient(#ECE8FA 1.2px, transparent 1.6px);
  background-size: 16px 16px;
}
.try__door .door { width: 100%; max-width: 380px; }
.linklike { padding: 0; background: none; border: 0; font: inherit; font-weight: 900; color: var(--c-web); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.fortune__text { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.01em; }
.fortune__json { margin: 0 0 var(--space-3); font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.fortune .proof-note { margin: 0; }

/* ---- Rooms --------------------------------------------------------------------------- */

.rooms__head { margin-bottom: var(--space-6); }
.rooms__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.room-card {
  grid-column: span 2;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out);
}
.room-card:nth-child(1) { grid-column: span 4; flex-direction: row; transform: rotate(-0.6deg); }
.room-card:nth-child(2) { transform: rotate(1deg); }
.room-card:nth-child(3) { transform: rotate(-0.8deg); }
.room-card:nth-child(4) { transform: rotate(0.6deg); }
.room-card:nth-child(5) { transform: rotate(-0.5deg); }
.room-card:hover { transform: translate(-2px, -4px) rotate(0); box-shadow: var(--shadow-lg); }
.room-card:active { transform: var(--press-shift); box-shadow: var(--shadow-press); }
.room-card:focus-visible { box-shadow: var(--focus-ring), var(--shadow); border-radius: var(--radius-lg); }

.room-card__motif {
  display: grid;
  place-items: center;
  padding: var(--space-5) var(--space-5) var(--space-3);
  min-height: 150px;
}
.room-card__motif svg { width: 100%; max-width: 220px; height: auto; overflow: visible; }
.room-card:nth-child(1) .room-card__motif { flex: 0 0 44%; padding: var(--space-5); }
.room-card:nth-child(1) .room-card__motif svg { max-width: 300px; }
.room-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 12px 12px;
  padding: var(--space-4) var(--space-4) var(--space-4);
  background: var(--surface);
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius);
}
.room-card:nth-child(1) .room-card__body { margin: 12px 12px 12px 0; justify-content: center; }
.room-card__num { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.room-card__name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1; letter-spacing: var(--tracking-display); }
.room-card:nth-child(1) .room-card__name { font-size: var(--step-3); }
.room-card__promise { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.45; }
.room-card__teaches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.room-card__teaches .chip { font-size: 10.5px; background: transparent; }
.room-card__go { margin-top: auto; padding-top: var(--space-2); font-weight: 900; display: inline-flex; gap: 6px; align-items: center; }
.room-card:hover .arrow { transform: translateX(4px); }
.room-card .arrow { transition: transform var(--dur-2) var(--ease-spring); }

/* motif strokes use the card's room tokens */
.room-card svg { color: var(--ink); }
.m-moon { fill: var(--c-sat); stroke: var(--c-ink); stroke-width: 2; }
.m-web path { fill: none; stroke: #8F7BFF; stroke-width: 1.4; }
.m-thread { stroke: #F4F2FB; stroke-width: 1.6; }
.m-spider { color: #F4F2FB; }
.m-dew { fill: #D7F0FF; stroke: #F4F2FB; stroke-width: 1.2; }
.m-note { fill: #FFF8E1; stroke: #2A1C10; stroke-width: 2; }
.m-note--b { fill: #D7F0FF; }
.m-lines { stroke: #B59A78; stroke-width: 2.4; stroke-linecap: round; }
.m-price { font: 700 11px/1 var(--font-mono); fill: #2A1C10; }
.m-tape { fill: #F4E7A1; opacity: 0.9; stroke: #2A1C10; stroke-width: 1; stroke-dasharray: 2 2; }
.m-pin { fill: #E8423F; stroke: #2A1C10; stroke-width: 2; }
.m-pin-shine { fill: none; stroke: #FFFFFF; stroke-width: 1.5; stroke-linecap: round; }
.m-lid { fill: #8C3B1E; stroke: #F8E9D2; stroke-width: 2; }
.m-jar { fill: #4A2C20; stroke: #F8E9D2; stroke-width: 2.2; }
.m-label { fill: #F8E9D2; stroke: #F2B134; stroke-width: 2; }
.m-label-t { font: 800 9px/1 var(--font-display); fill: #2B1710; letter-spacing: 0.08em; }
.m-flecks circle { fill: #F2B134; }
.m-steam { fill: none; stroke: #F2B134; stroke-width: 2; stroke-linecap: round; opacity: 0.7; }
.m-vm { fill: #0D1D13; stroke: #3DFF8F; stroke-width: 2.2; }
.m-screen { fill: #07110B; stroke: #3DFF8F; stroke-width: 1.6; }
.m-screen-t { font: 700 10px/1 var(--font-mono); fill: #3DFF8F; }
.m-blink { animation: blink 1s steps(1) infinite; }
.m-btns rect { fill: #FFB000; stroke: #07110B; stroke-width: 1; }
.m-coinslot { fill: #07110B; stroke: #FFB000; stroke-width: 1.6; }
.m-tray { fill: #07110B; stroke: #3DFF8F; stroke-width: 1.6; }
.m-bp path, .m-bp circle { fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; }
.m-bp-t { font: 700 11px/1 var(--font-mono); fill: #8FD3FF; }
@keyframes blink { 50% { opacity: 0; } }

/* per-room card texture */
.room-card--garden { background-image: radial-gradient(#3A3680 1.2px, transparent 1.6px); background-size: 20px 20px; }
.room-card--corkboard { background-image: radial-gradient(#A86B32 1.4px, transparent 1.8px), radial-gradient(#D9A066 1px, transparent 1.4px); background-size: 11px 11px, 7px 7px; background-position: 0 0, 3px 4px; }
.room-card--spice { background-image: radial-gradient(#4A2C20 1.2px, transparent 1.6px); background-size: 14px 14px; }
.room-card--machine { background-image: repeating-linear-gradient(0deg, rgba(61, 255, 143, 0.07) 0 2px, transparent 2px 5px); }
.room-card--lab { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 18px 18px; }

/* ---- The rule --------------------------------------------------------------------------- */

.rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.rule__spider { position: relative; display: flex; flex-direction: column; align-items: center; color: var(--ink); padding-top: 0; animation: rule-bob 4s var(--ease-in-out) infinite; }
.rule__thread { display: block; width: 2px; height: 70px; background: var(--ink); margin-bottom: -18px; }
@keyframes rule-bob { 50% { transform: translateY(8px); } }
.rule__bubble {
  position: relative;
  margin-top: 60px;
  padding: clamp(22px, 4vw, 40px);
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
}
.rule__bubble::before,
.rule__bubble::after {
  content: "";
  position: absolute;
  left: -22px;
  top: 46px;
  border-style: solid;
  border-width: 14px 24px 14px 0;
  border-color: transparent var(--line) transparent transparent;
}
.rule__bubble::after { left: -18px; border-width: 12px 21px 12px 0; top: 48px; border-color: transparent var(--surface) transparent transparent; }
.rule__main { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1.05; letter-spacing: var(--tracking-display); max-width: 22ch; margin-bottom: var(--space-4); }
.rule__main mark { background: var(--c-mint); color: var(--c-ink); padding: 0 0.12em; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.rule__sub { font-weight: 900; margin-bottom: var(--space-3); }
.rule__nots { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rule__nots li {
  position: relative;
  padding: 0.35em 0.9em;
  font-weight: 900;
  font-size: var(--step--1);
  background: #FFE9EF;
  border: var(--stroke) solid var(--c-ink);
  border-radius: var(--radius-pill);
  color: var(--c-ink);
}
.rule__nots li::before { content: "✗ "; color: #D81B60; }
.rule__nots li:nth-child(odd) { transform: rotate(-1.5deg); }
.rule__nots li:nth-child(even) { transform: rotate(1.2deg); }

/* ---- Progress --------------------------------------------------------------------------- */
.progress h2 { margin-bottom: var(--space-5); }

/* ---- Responsive ------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero__web { max-width: 640px; width: 100%; justify-self: center; }
  .try { grid-template-columns: 1fr; }
  .rooms__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-card, .room-card:nth-child(1) { grid-column: span 1; }
  .room-card:nth-child(1) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .rooms__grid { grid-template-columns: 1fr; }
  .room-card:nth-child(1) { flex-direction: column; }
  .room-card:nth-child(1) .room-card__motif { flex: none; }
  .room-card:nth-child(1) .room-card__body { margin: 0 12px 12px; }
  .rule { grid-template-columns: 1fr; }
  .rule__spider { flex-direction: column; align-self: start; margin-left: 24px; }
  .rule__spider svg { width: 74px; height: auto; }
  .rule__thread { height: 30px; }
  .rule__bubble { margin-top: 4px; }
  .rule__bubble::before { left: 40px; top: -24px; border-width: 0 14px 24px 14px; border-color: transparent transparent var(--line) transparent; }
  .rule__bubble::after { left: 42px; top: -19px; border-width: 0 12px 21px 12px; border-color: transparent transparent var(--surface) transparent; }
  .hero__web { transform: none; }
  .hero-budget { top: 8px; left: 8px; font-size: 10.5px; }
  .ticker { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .rule__spider, .m-blink { animation: none; }
  .room-card, .hero__web, .try__door { transform: none !important; }
}

/* ---- Room 06: Hello Mister Spider card (scoped to this card only) ---------------------------- */
.room-card--spiders {
  --paper: #0B0A0F;
  --surface: #16131B;
  --surface-2: #231E29;
  --ink: #F3EFE6;
  --ink-soft: #B9B1A3;
  --line: #F3EFE6;
  --shadow-color: #C8102E;
  --accent: #FF7A1A;
  --on-accent: #0B0A0F;
  grid-column: 1 / -1;
  flex-direction: row;
  transform: rotate(0.4deg);
  background-image: radial-gradient(#1D1922 1.2px, transparent 1.6px);
  background-size: 18px 18px;
}
.room-card--spiders .room-card__motif { flex: 0 0 34%; padding: var(--space-5); }
.room-card--spiders .room-card__motif svg { max-width: 220px; }
.room-card--spiders .room-card__body { margin: 12px 12px 12px 0; justify-content: center; }
.room-card--spiders .room-card__name { font-size: var(--step-3); }
.m-poster { fill: #0B0A0F; stroke: #F3EFE6; stroke-width: 2; }
.m-splat { fill: #C8102E; }
.m-frame { fill: #2A2530; stroke: #F3EFE6; stroke-width: 2; }
.m-poster-t { font: 800 12px/1 var(--font-display); fill: #C8102E; letter-spacing: 0.04em; }
.m-poster-s { font: 700 7px/1 var(--font-mono); fill: #F3EFE6; letter-spacing: 0.1em; }
.m-jumper { color: #F3EFE6; }
.m-silk { stroke: #F3EFE6; stroke-width: 1.4; }
.room-card--spiders .m-tape { fill: #EADFB8; stroke: #B9A877; }
@media (max-width: 980px) {
  .room-card--spiders { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .room-card--spiders { flex-direction: column; }
  .room-card--spiders .room-card__motif { flex: none; }
  .room-card--spiders .room-card__body { margin: 0 12px 12px; }
}