/* Errant Software: one page, many worlds.
   Read DESIGN.md first. Shared tokens live in :root; each world section only
   overrides world tokens (accent, surface, button, bezel). The body background
   and the thread color change as each world scrolls into view. */

/* =========================================================
   1. Tokens
   ========================================================= */
:root {
  /* brand */
  --paper: #fff6e6;
  --ink: #2b1d4a;
  --ink-soft: #5b4d72;
  --coral: #ff7a59;        /* decoration only: thread, squiggles, sun */
  --coral-ink: #b93c22;    /* coral when it is text (5.2:1 on paper) */
  --sun: #ffd166;

  /* page colors, swapped per world on body */
  --bg: var(--paper);
  --fg: var(--ink);
  --thread: var(--coral);

  /* world tokens (sections override these) */
  --accent: var(--coral);
  --accent-ink: var(--coral-ink);
  --surface: #fffdf8;
  --bezel: #1b1530;
  --btn-bg: var(--fg);
  --btn-fg: var(--bg);
  --btn-shade: color-mix(in srgb, var(--fg) 55%, #000);
  --btn-radius: var(--r-pill);

  /* type */
  --display: "Fredoka", "Trebuchet MS", ui-rounded, system-ui, sans-serif;
  --body: "Nunito", ui-rounded, system-ui, sans-serif;
  --hand: "Gochi Hand", "Comic Sans MS", cursive;
  --mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --fs-sm: .9rem;
  --fs-body: 1.125rem;
  --fs-lead: 1.22rem;
  --fs-tag: 1.25rem;
  --fs-h3: clamp(1.4rem, 2.4vw, 1.9rem);
  --fs-h2: clamp(2.4rem, 7vw, 5.2rem);
  --fs-display: clamp(2.5rem, 7.2vw, 5.8rem);

  /* shape */
  --r-sharp: 6px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* space */
  --gutter: 24px;
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: 96px;
  --s-7: 140px;

  --lift: 0 22px 44px -20px rgba(30, 15, 60, .4);
  --nav-h: 96px;
  color-scheme: light;
}

/* body worlds: only page background and text color */
body[data-world="home"]        { --bg: #fff6e6; --fg: #2b1d4a; }
body[data-world="patchwork"]   { --bg: #fdf7ea; --fg: #2d1f8f; }
body[data-world="wimble"]      { --bg: #efe6fa; --fg: #432367; }
body[data-world="interotune"]  { --bg: #f6efe6; --fg: #1f2a5a; }
body[data-world="japan-day"]   { --bg: #f1e6cf; --fg: #1d1a24; }
body[data-world="japan-night"] { --bg: #14111c; --fg: #f3e7cc; }
body[data-world="finale"]      { --bg: #2b1d4a; --fg: #fff6e6; }

/* section worlds: accent, surfaces, buttons, device bezels */
.patchwork  { --accent: #e63946; --accent-ink: #b3202b; --surface: #fffdf8; --bezel: #2d1f8f; --btn-bg: #2d1f8f; --btn-fg: #fff; --btn-shade: #170f52; }
.wimble     { --accent: #ef916d; --accent-ink: #6a4799; --surface: #fffaf1; --bezel: #432367; --btn-bg: #6a4799; --btn-fg: #fff; --btn-shade: #432367; }
.interotune { --accent: #f4a07a; --accent-ink: #5a4fb8; --surface: #fffaf3; --bezel: #1b1530; --btn-bg: #1f2a5a; --btn-fg: #fff; --btn-shade: #7a6fd0; }
.japan      { --accent: #c1272d; --accent-ink: #a61e24; --surface: #fbf5e7; --bezel: #0c0a12; --btn-bg: #b3202b; --btn-fg: #fbf5e7; --btn-shade: #1d1a24; --btn-radius: var(--r-sharp); }
.kakure     { --accent: #ec5a5f; --accent-ink: #d4a843; --surface: #221c2c; --bezel: #0c0a12; --btn-bg: #d4a843; --btn-fg: #14111c; --btn-shade: #7a5a1a; --btn-radius: var(--r-sharp); }
.finale     { --surface: #fff6e6; }

/* =========================================================
   2. Base
   ========================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--fs-body)/1.65 var(--body);
  overflow-x: clip;
  transition: background-color 1.1s ease, color 1.1s ease;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; margin: 0 0 .4em; font-weight: 600; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* one focus ring everywhere: page ink with a page-colored halo */
:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; box-shadow: 0 0 0 7px var(--bg); border-radius: var(--r-sm); }
[tabindex="-1"]:focus { outline: none; box-shadow: none; }

.skip { position: fixed; left: var(--s-2); top: -100px; z-index: 100; min-height: 44px; display: inline-flex; align-items: center; padding: 10px 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-weight: 800; text-decoration: none; }
.skip:focus { top: 84px; }

/* reveal on scroll: only hidden when JS is running to reveal it */
.js .reveal { opacity: 0; transform: translateY(40px) scale(.98); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.9,.3,1.2); }
.js .reveal.in, .js .reveal:focus-within { opacity: 1; transform: none; }
.js .reveal:focus-within { transition-duration: .15s; }

/* text that the thread may pass behind gets a soft page-colored halo */
.halo { text-shadow: 0 0 3px var(--bg), 0 0 8px var(--bg), 0 0 16px var(--bg); }

/* =========================================================
   3. The thread
   ========================================================= */
.thread { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 1; overflow: visible; }
#thread-path { transition: stroke 1s ease; }
#needle { transition: opacity .3s; }

/* =========================================================
   4. Nav + mobile menu
   ========================================================= */
.nav {
  position: fixed; inset: 14px 16px auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 8px 6px 10px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(30, 15, 60, .1);
  transition: background-color 1.1s ease;
  max-width: 1180px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding-right: 6px; text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 1.25rem; white-space: nowrap; }
.brand > span { overflow: hidden; text-overflow: ellipsis; }
.brand b { font-weight: 400; margin-left: .25em; opacity: .75; }
.brand-mark { flex: none; width: 36px; height: 36px; transition: transform .6s cubic-bezier(.3,1.6,.5,1); }
.brand-mark .dot { fill: var(--ink); stroke: var(--fg); stroke-width: 3; }
.brand:hover .brand-mark { transform: rotate(-20deg) scale(1.08); }
.nav nav { display: flex; gap: 2px; }
.nav nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 800; font-size: .95rem; padding: 0 14px; border-radius: var(--r-pill); transition: background-color .2s, transform .12s; }
.nav nav a small { display: none; }
.nav nav a:hover, .nav nav a[aria-current="true"] { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.nav nav a:active { background: color-mix(in srgb, var(--fg) 18%, transparent); transform: scale(.96); }
.menu-btn { display: none; }

@media (max-width: 860px) {
  .js .menu-btn {
    flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
    font: 600 1rem var(--display); color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent);
    border: 0; border-radius: var(--r-pill); cursor: pointer;
  }
  .menu-btn:active { background: color-mix(in srgb, var(--fg) 16%, transparent); }
  .menu-icon { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: background-color .2s; }
  .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s; }
  .menu-icon::before { top: -6px; } .menu-icon::after { top: 6px; }
  .menu-btn[aria-expanded="true"] .menu-icon { background: transparent; }
  .menu-btn[aria-expanded="true"] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }

  .js .nav nav {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    display: none; flex-direction: column; gap: 4px; padding: 10px;
    border-radius: var(--r-lg); background: var(--bg); box-shadow: 0 24px 50px -16px rgba(30, 15, 60, .45);
    max-height: calc(100svh - 110px); overflow-y: auto;
  }
  .js .nav.open nav { display: flex; }
  .js .nav nav a { flex-direction: column; align-items: flex-start; justify-content: center; min-height: 56px; padding: 8px 18px; border-radius: var(--r-md); font: 600 1.2rem var(--display); }
  .js .nav nav a small { display: block; font: 700 .85rem var(--body); opacity: .75; }
  /* without JS there is no menu button, so the links scroll sideways instead */
  html:not(.js) .nav nav { overflow-x: auto; max-width: 60vw; }
}
@media (max-width: 360px) { .brand b { display: none; } .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .js .menu-btn { padding: 0 13px; } }

/* =========================================================
   5. Buttons, chips, badges
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 48px; max-width: 100%; padding: .7em 1.4em;
  font: 600 1.05rem var(--display); text-decoration: none; text-align: center;
  color: var(--btn-fg); background: var(--btn-bg); border: 0; border-radius: var(--btn-radius);
  box-shadow: 0 5px 0 var(--btn-shade);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 8px 0 var(--btn-shade); }
.btn:focus-visible { box-shadow: 0 8px 0 var(--btn-shade), 0 0 0 7px var(--bg); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--btn-shade); transition-duration: .05s; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 2px 0 var(--btn-shade); }
.btn-lg { font-size: 1.18rem; min-height: 54px; }
.btn-primary { --btn-bg: #c23f22; --btn-fg: #fff; --btn-shade: #7f2410; }
/* secondary: same shape, quieter color */
.btn-soft { --btn-bg: var(--surface); --btn-fg: var(--accent-ink); --btn-shade: color-mix(in srgb, var(--accent-ink) 55%, transparent); outline: 2px solid color-mix(in srgb, var(--accent-ink) 35%, transparent); outline-offset: -2px; }
.btn-soft:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-1); list-style: none; padding: 0; margin: 0 0 1.3em; }
.chips li { font-weight: 800; font-size: .85rem; padding: 4px 12px; border-radius: var(--r-pill); border: 2px dashed currentColor; }

/* a status, not a control */
.status { display: inline-flex; align-items: center; gap: .5em; font: 600 1rem var(--display); padding: .55em 1.1em; border-radius: var(--r-pill); border: 2px dashed currentColor; color: var(--ink-soft); }
.status::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 2px var(--ink-soft); }

/* =========================================================
   6. Device frames: one recipe, bezel color per world
   ========================================================= */
.browser { margin: 0; border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: 0 30px 60px -20px rgba(30, 15, 60, .38), 0 0 0 1px rgba(30, 15, 60, .08); }
.browser img { width: 100%; background: linear-gradient(135deg, #f1ecf9, #fff6e6); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f1ecf9; font: 700 .8rem var(--body); color: #5b4d72; }
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff6b6b; }
.browser-bar i:nth-child(2) { background: var(--sun); } .browser-bar i:nth-child(3) { background: #6bcb77; }
.browser-bar span { margin-left: 10px; background: #fff; border-radius: var(--r-pill); padding: 2px 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-link { display: block; border-radius: var(--r-md); text-decoration: none; }
/* static tilts use `rotate` so reveal transforms never cancel them */
.tilt-l { rotate: -2.5deg; }
.tilt-r { rotate: 1deg; }

.phone, .tablet, .ipad { margin: 0; background: var(--bezel); box-shadow: 0 30px 60px -18px rgba(20, 10, 50, .45); }
.phone { position: relative; margin: 0 auto; width: min(320px, 78vw); aspect-ratio: 9 / 18.5; border-radius: 42px; padding: 11px; }
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: var(--r-pill); background: var(--bezel); z-index: 2; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 32px; background: linear-gradient(160deg, #f6efe6, #e7defa); }
.phone-dark { box-shadow: 0 30px 70px -18px rgba(0,0,0,.6), 0 0 0 2px #d4a84355; }
.tablet { border-radius: 30px; padding: 14px; rotate: 2deg; }
.tablet video { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--r-md); background: #fdf7ea url(/assets/img/patchy-arms-up.webp) center / auto 70% no-repeat; }
.tablet figcaption { color: #fff; font: 600 1rem var(--display); text-align: center; padding: 10px 0 0; }
.ipad { border-radius: var(--r-lg); padding: 12px; }
.ipad img { border-radius: var(--r-md); background: #efe6fa; }

/* =========================================================
   7. Hero
   ========================================================= */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: 120px var(--gutter) 80px; overflow: hidden; }
.hero-sky { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 80% at 80% 10%, #ffe2b8 0, transparent 60%), radial-gradient(80% 60% at 10% 90%, #d9f0e8 0, transparent 60%); }
.sun { position: absolute; right: 8%; top: 14%; width: 140px; height: 140px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 18px #ffd16633, 0 0 0 40px #ffd16619; animation: sunpulse 6s ease-in-out infinite; }
.cloud { position: absolute; height: 46px; border-radius: var(--r-pill); background: #fff; opacity: .9; box-shadow: 30px -18px 0 4px #fff, 70px 0 0 0 #fff; }
.cloud.c1 { width: 120px; top: 22%; left: -10%; animation: drift 48s linear infinite; }
.cloud.c2 { width: 90px; top: 58%; left: -20%; animation: drift 64s linear infinite 8s; }
.cloud.c3 { width: 150px; top: 8%; left: -25%; animation: drift 80s linear infinite 20s; }
.hero-copy { position: relative; z-index: 3; max-width: 760px; margin-left: max(0px, calc((100vw - 1180px) / 2)); }
.kicker { margin: 0 0 .6em; }
.scribble { font: 1.6rem var(--hand); color: var(--coral-ink); display: inline-block; transform: rotate(-4deg); }
.hero-title { font-size: var(--fs-display); font-weight: 700; letter-spacing: -.02em; margin-bottom: .3em; }
.hero-title .word { display: inline-block; }
.js .hero-title .word { opacity: 0; transform: translateY(.6em) rotate(6deg); animation: wordin .8s cubic-bezier(.2,1.4,.4,1) forwards; }
.hero-title .word:nth-child(2) { animation-delay: .06s } .hero-title .word:nth-child(3) { animation-delay: .12s }
.hero-title .word:nth-child(4) { animation-delay: .18s } .hero-title .word:nth-child(5) { animation-delay: .24s }
.hero-title .word:nth-child(6) { animation-delay: .30s } .hero-title .word:nth-child(7) { animation-delay: .36s }
.hero-title .word:nth-child(8) { animation-delay: .42s } .hero-title .word:nth-child(9) { animation-delay: .48s }
.hero-title .wander { color: var(--coral-ink); position: relative; }
.hero-title .wander::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .22em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M2 8 Q 15 0 30 8 T 60 8 T 90 8 T 118 6' fill='none' stroke='%23ffd166' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.what { font: 600 clamp(1.2rem, 2vw, 1.5rem)/1.3 var(--display); margin-bottom: .6em; }
.lede { font-size: var(--fs-lead); max-width: 600px; color: var(--ink-soft); margin-bottom: 1.6em; }
.hero-crowd { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.float { position: absolute; will-change: transform; filter: drop-shadow(0 14px 18px rgba(43,29,74,.18)); }
img.float { animation: bob 5s ease-in-out infinite; }
.f-patchy { width: clamp(150px, 19vw, 280px); right: 6%; top: 34%; animation-delay: -1s; }
.f-wimble { width: clamp(110px, 13vw, 190px); right: 27%; top: 58%; }
.f-headphones { width: clamp(80px, 9vw, 130px); right: 30%; top: 16%; animation-delay: -3s; }
.f-car { width: clamp(70px, 8vw, 115px); right: 5%; bottom: 7%; animation-delay: -.5s; }
.f-church { width: clamp(70px, 8vw, 115px); right: 44%; top: 8%; opacity: .95; animation-delay: -2.5s; }
.f-quilt { width: clamp(60px, 7vw, 100px); right: 17%; top: 11%; transform: rotate(12deg); animation-delay: -4s; }
.f-japlan { width: clamp(50px, 6vw, 86px); right: 44%; bottom: 10%; animation-delay: -1.7s; }
.f-headphones, .f-quilt { border-radius: var(--r-md); border: 5px solid #fff; background: #fff; }
.scroll-hint { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; border: 2px solid var(--ink); border-radius: 14px; transform: translateX(-50%); z-index: 3; opacity: .6; }
.scroll-hint span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--ink); animation: hint 1.6s ease-in-out infinite; }

@media (max-width: 820px) {
  .hero { align-items: start; padding-top: 110px; }
  .hero-crowd { opacity: .55; }
  .f-patchy { top: auto; bottom: 3%; right: 2%; }
  .f-wimble { top: auto; bottom: 5%; right: 44%; }
  .f-car { right: auto; left: 6%; bottom: 4%; }
  .f-church, .f-japlan, .f-headphones, .f-quilt { display: none; }
}

/* =========================================================
   8. About
   ========================================================= */
.about { position: relative; z-index: 2; padding: var(--s-6) var(--gutter) var(--s-7); }
.about-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.about h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
.about h2 i { font-family: var(--hand); font-weight: 400; color: var(--coral-ink); font-style: normal; }
.about p { font-size: var(--fs-lead); color: var(--ink-soft); }
.stats { list-style: none; padding: 0; margin: 2em 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; }
.stats li { background: var(--surface); border-radius: var(--r-md); padding: 14px 22px; box-shadow: 0 8px 0 #2b1d4a14; transform: rotate(var(--r, -2deg)); min-width: 170px; max-width: 240px; }
.stats li:nth-child(2) { --r: 2deg; } .stats li:nth-child(3) { --r: -1deg; }
.stats b { display: block; font: 700 2.6rem/1 var(--display); color: var(--coral-ink); }
.stats span { font-weight: 800; font-size: var(--fs-sm); line-height: 1.35; display: block; margin-top: 4px; }

/* =========================================================
   9. Worlds (shared)
   ========================================================= */
.world { position: relative; padding: var(--s-7) var(--gutter) var(--s-7); }
.world-head {
  position: relative; z-index: 3; max-width: 820px; margin: 0 auto var(--s-6); text-align: center;
  padding: var(--s-3) var(--s-3) var(--s-2); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
}
.world-head p { font-size: var(--fs-lead); line-height: 1.7; }
.world-tag { font: var(--fs-tag) var(--hand); letter-spacing: .02em; color: var(--accent-ink); margin-bottom: .3em; }
.world-title { font-size: var(--fs-h2); font-weight: 700; }
.world-logo { margin: 0 auto .6em; width: min(420px, 80%); }
.product { position: relative; z-index: 3; max-width: 1240px; margin: 0 auto var(--s-7); display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.product:last-child { margin-bottom: 0; }
.product > *, .wimble-play > *, .intero-grid > *, .japlan-row > *, .kakure-row > * { min-width: 0; }
.product.flip .product-media { order: 2; }
.product-copy .logo { width: min(300px, 80%); margin-bottom: 14px; border-radius: var(--r-md); }
.product-copy p { line-height: 1.75; }
.product-copy .pitch, .pitch { font: 600 var(--fs-h3)/1.2 var(--display); margin-bottom: .7em; }
.product-media { position: relative; }
/* art with a cream backdrop sits on each world's paper like a print, not a box */
.logo, .world-logo { mix-blend-mode: multiply; }
@media (max-width: 860px) {
  :root { --s-7: 100px; --s-6: 64px; --gutter: 18px; }
  .product { grid-template-columns: 1fr; }
  .product.flip .product-media { order: 0; }
}

/* =========================================================
   10. Patchwork
   ========================================================= */
.patchwork { overflow-x: clip; }
.patch-title { color: #2d1f8f; text-shadow: 3px 3px 0 var(--sun); }
.quilt-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.quilt { position: sticky; top: 0; height: 100vh; }
.quilt .patch {
  position: absolute; width: var(--s); height: var(--s); border-radius: 12px;
  background-size: cover; opacity: .9;
  outline: 3px dashed rgba(255,255,255,.9); outline-offset: -8px;
  transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--k, 1));
  will-change: transform;
  box-shadow: 0 10px 20px rgba(45,31,143,.12);
}
.patchwork .product-copy { background: color-mix(in srgb, #fdf7ea 90%, transparent); border-radius: var(--r-lg); padding: 22px 24px; }
.sticker { position: absolute; filter: drop-shadow(0 10px 14px rgba(0,0,0,.18)); }
.s-patchy-laptop { width: 36%; right: -6%; bottom: -16%; transform: rotate(6deg); animation: bob 5s ease-in-out infinite; }
.symbol-cloud { position: absolute; inset: -30px -20px; pointer-events: none; }
.symbol-cloud img { position: absolute; width: 74px; background: #fff; border-radius: var(--r-md); padding: 6px; box-shadow: 0 8px 16px rgba(45,31,143,.18); animation: bob 4.5s ease-in-out infinite; }
.symbol-cloud img:nth-child(1) { left: -4%; top: -6%; transform: rotate(-8deg); }
.symbol-cloud img:nth-child(2) { right: 0; top: -10%; animation-delay: -1s; transform: rotate(6deg); }
.symbol-cloud img:nth-child(3) { left: -8%; bottom: 10%; animation-delay: -2s; transform: rotate(5deg); }
.symbol-cloud img:nth-child(4) { right: -6%; bottom: 18%; animation-delay: -3s; transform: rotate(-7deg); }
.symbol-cloud img:nth-child(5) { left: 40%; top: -16%; animation-delay: -1.5s; }
.symbol-cloud img:nth-child(6) { left: 46%; bottom: -8%; animation-delay: -2.5s; transform: rotate(9deg); }
@media (max-width: 860px) {
  .s-patchy-laptop { right: 0; bottom: -12%; width: 32%; }
  .symbol-cloud { inset: -20px 0; }
  .symbol-cloud img { width: 58px; }
  .symbol-cloud img:nth-child(1), .symbol-cloud img:nth-child(3) { left: 0; }
  .symbol-cloud img:nth-child(2), .symbol-cloud img:nth-child(4) { right: 0; }
}
.ways { list-style: none; padding: 0; margin: 0 0 1.4em; display: grid; gap: var(--s-1); }
.ways li { padding: 8px 14px; border-radius: 14px; background: #fff; border-left: 8px solid var(--c, #6bcb77); }
.ways li:nth-child(1) { --c: #ffb703; } .ways li:nth-child(2) { --c: #00b4d8; } .ways li:nth-child(3) { --c: #e63946; } .ways li:nth-child(4) { --c: #6bcb77; }
.ways b { font-family: var(--display); font-weight: 600; margin-right: 6px; color: #2d1f8f; }
.loom { position: relative; background: var(--surface); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--lift); border: 3px dashed #2d1f8f33; }
.loom-svg { width: 100%; height: auto; }
.loom .warp line { stroke: #2d1f8f22; stroke-width: 3; stroke-dasharray: 7 6; }
.loom .weft { fill: none; stroke-width: 6; stroke-linecap: round; }
.js .loom .weft { stroke-dasharray: 600; stroke-dashoffset: 600; }
.loom .w1 { stroke: #e63946; } .loom .w2 { stroke: #00b4d8; opacity: .7; }
.loom .dots circle { fill: var(--sun); stroke: #2d1f8f; stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.js .loom .dots circle { transform: scale(0); }
.in .loom .weft { animation: weave 2.4s ease forwards; }
.in .loom .w2 { animation-delay: .5s; }
.in .loom .dots circle { animation: pop .5s cubic-bezier(.3,1.8,.5,1) forwards; }
.in .loom .dots circle:nth-child(1) { animation-delay: .8s } .in .loom .dots circle:nth-child(2) { animation-delay: 1.3s }
.in .loom .dots circle:nth-child(3) { animation-delay: 1.8s } .in .loom .dots circle:nth-child(4) { animation-delay: 2.3s }
.badge { position: absolute; top: -14px; right: 20px; font: 1.3rem var(--hand); background: var(--sun); color: #2d1f8f; padding: 4px 14px; border-radius: var(--r-sm); transform: rotate(4deg); box-shadow: 0 4px 0 #2d1f8f22; }
.thread-name { font-size: clamp(2rem, 4vw, 3rem); color: #2d1f8f; }
.thread-name span { color: var(--accent-ink); }

/* =========================================================
   11. Wimble's World
   ========================================================= */
.wimble { overflow: hidden; }
.wimble-town { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.town-map { position: absolute; left: 50%; top: 0; width: max(1400px, 120%); max-width: none; transform: translate(-50%, var(--town-y, 0)); opacity: .18; }
.drive-car { position: absolute; width: 150px; top: 34%; left: 0; transform: translateX(var(--car-x, -150px)); filter: drop-shadow(0 8px 8px rgba(67,35,103,.25)); }
.wimble .world-head { background: #efe6fa; }
.wimble-title { color: #432367; }
.wimble-title span { color: #b8552f; }
.wimble-play { position: relative; z-index: 3; max-width: 1240px; margin: 0 auto 110px; display: grid; grid-template-columns: minmax(300px, .8fr) 1.2fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.wimble-maker { background: var(--surface); border-radius: var(--r-lg); padding: 34px 26px 30px; text-align: center; box-shadow: 0 16px 0 #43236714; }
.wimble-stack { position: relative; width: min(340px, 72vw); max-width: 100%; aspect-ratio: 640 / 730; margin: 0 auto 18px; }
.wimble-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s ease, transform .5s cubic-bezier(.3,1.7,.5,1); filter: drop-shadow(0 16px 18px rgba(67,35,103,.22)); }
.wimble-stack img.on { opacity: 1; transform: none; }
.wimble-stack img:not(.on) { opacity: 0; transform: scale(.6) rotate(-8deg); }
.wimble-stack.boing { animation: boing .6s cubic-bezier(.3,1.8,.5,1); }
.hand-note { font: 1.25rem var(--hand); color: var(--accent-ink); margin: 14px 0 0; }
.rooms { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; --fan: 1; }
.room { margin: 0; background: #fff; padding: 10px 10px 8px; border-radius: var(--r-md); box-shadow: var(--lift); transition: transform .2s linear; }
.room img { border-radius: 12px; aspect-ratio: 1; object-fit: cover; background: #efe6fa; }
.room figcaption { font: 1.35rem var(--hand); color: var(--accent-ink); text-align: center; padding-top: 4px; }
.room.r1 { transform: translate(calc((1 - var(--fan)) * 60px), calc((1 - var(--fan)) * 80px)) rotate(calc(-3deg * var(--fan))); }
.room.r2 { transform: translate(calc((1 - var(--fan)) * -60px), calc((1 - var(--fan)) * 80px)) rotate(calc(2.5deg * var(--fan))) translateY(28px); }
.room.r3 { transform: translate(calc((1 - var(--fan)) * 60px), calc((1 - var(--fan)) * -60px)) rotate(calc(2deg * var(--fan))); }
.room.r4 { transform: translate(calc((1 - var(--fan)) * -60px), calc((1 - var(--fan)) * -60px)) rotate(calc(-2deg * var(--fan))) translateY(28px); }
.wimble-mapshot { position: relative; z-index: 3; max-width: 1100px; margin: 0 auto 90px; }
.wimble-mapshot figcaption { font: 1.4rem var(--hand); text-align: center; margin-top: 16px; color: var(--accent-ink); }
.wimble-mapshot .ipad { rotate: -1deg; }
.pip { position: absolute; right: -40px; bottom: -30px; width: clamp(110px, 14vw, 190px); filter: drop-shadow(0 12px 14px rgba(67,35,103,.25)); animation: bob 3s ease-in-out infinite; }
.pip-say { position: absolute; right: 120px; bottom: 150px; font: 1.2rem var(--hand); background: #fff; padding: 2px 10px; border-radius: 12px; transform: rotate(-8deg); animation: bob 2s ease-in-out infinite; }
.toys { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.toys img { position: absolute; width: clamp(60px, 7vw, 100px); filter: drop-shadow(0 10px 12px rgba(67,35,103,.2)); animation: bob 5s ease-in-out infinite; }
.toys img:nth-child(1) { left: 4%; top: 30%; }
.toys img:nth-child(2) { right: 5%; top: 18%; animation-delay: -1.5s; }
.toys img:nth-child(3) { left: 6%; bottom: 14%; animation-delay: -3s; transform: rotate(-10deg); }
.toys img:nth-child(4) { right: 3%; bottom: 30%; animation-delay: -2s; }
@media (max-width: 860px) {
  .wimble-play { grid-template-columns: 1fr; margin-bottom: 70px; }
  .wimble-maker { padding: 26px 16px; }
  .rooms { gap: 14px; }
  .pip { right: -6px; }
  .pip-say { right: 70px; bottom: 110px; }
  .toys { display: none; }
}

/* =========================================================
   12. InteroTune
   ========================================================= */
.interotune { overflow: hidden; }
.intero-title { background: linear-gradient(90deg, #5a4fb8, #2f7f72, #b95a30); -webkit-background-clip: text; background-clip: text; color: transparent; }
.waves { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.wave { position: absolute; left: -5%; width: 110%; height: 42%; bottom: 0; transform: translateY(var(--rise, 60%)); transition: transform .2s linear; }
.wave path { animation: sway 9s ease-in-out infinite alternate; transform-origin: center; }
.wv1 { bottom: 26%; } .wv1 path { fill: #cfc6f2; }
.wv2 { bottom: 12%; } .wv2 path { fill: #bfe3d6; animation-duration: 11s; }
.wv3 { bottom: -2%; } .wv3 path { fill: #ffd2bb; animation-duration: 13s; }
.breath { position: absolute; right: 8%; top: 120px; width: 150px; height: 150px; z-index: 1; }
.breath span { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd2bb, #f4a07a); animation: breathe 8s ease-in-out infinite; box-shadow: 0 0 60px #f4a07a88; }
.intero-grid { position: relative; z-index: 3; max-width: 1200px; margin: 0 auto 110px; display: grid; grid-template-columns: auto 1fr; gap: 70px; align-items: center; }
.intero-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.soft-card { background: color-mix(in srgb, var(--surface) 92%, transparent); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--lift); }
.soft-card img { width: 110px; margin: -6px auto 6px; border-radius: var(--r-md); }
.soft-card h3 { font-size: 1.5rem; color: #1f2a5a; }
.soft-card p { font-size: .98rem; margin: 0; }
.soft-card:nth-child(2) { translate: 0 26px; }
.private { grid-column: 1 / -1; font: 1.35rem var(--hand); text-align: center; margin: 30px 0 4px; color: #1f2a5a; }
.intero-cta { grid-column: 1 / -1; margin: 0; }
.wide-shot { position: relative; z-index: 3; max-width: 1100px; margin: 0 auto; }
@media (max-width: 860px) {
  .intero-grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 70px; }
  .intero-cards { grid-template-columns: 1fr; }
  .soft-card:nth-child(2) { translate: none; }
  .breath { width: 90px; height: 90px; }
}

/* =========================================================
   13. Japan (day): Go JaPlan
   ========================================================= */
.japan { padding-top: 0; padding-bottom: 120px; overflow: hidden; }
.panorama { position: relative; height: 72vh; min-height: 420px; overflow: hidden; margin: 0 calc(-1 * var(--gutter)) var(--s-5); mask-image: linear-gradient(#000 70%, transparent); -webkit-mask-image: linear-gradient(#000 70%, transparent); }
.pano-track { position: absolute; inset: 0 auto 0 0; height: 100%; transform: translateX(var(--pano-x, 0)); will-change: transform; }
.pano-track img { height: 100%; width: auto; min-width: 135vw; max-width: none; object-fit: cover; }
/* a flat hanko-red sun in the sky, moved with transform so nothing reflows */
.red-sun { position: absolute; right: 14%; top: 8%; width: 110px; height: 110px; border-radius: 50%; background: #d9352e; box-shadow: 0 0 0 10px #d9352e22, 0 0 40px #d9352e55; transform: translateY(var(--sun-y, 0px)); }
.japan-inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 3; }
.japan .world-tag, .pitch.jp { font-family: var(--mincho); font-weight: 600; }
.japan .world-tag, .kakure .world-tag { font-family: var(--mincho); font-weight: 600; font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase; }
.japlan-heading { margin: 0 auto .5em; }
.japlan-logo { border-radius: 14px; }
.japlan-row { display: grid; grid-template-columns: 1fr auto; gap: 0; align-items: end; margin-bottom: 70px; }
.browser-jp { border-radius: var(--r-sm); box-shadow: 0 30px 70px -20px rgba(29,26,36,.45), 0 0 0 2px #1d1a24; }
.browser-jp .browser-bar { background: #efe4cc; }
.japlan-row .shot-link { rotate: -1.2deg; }
.japlan-row .phone { margin: 0 0 -40px -70px; position: relative; z-index: 2; rotate: 3deg; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 70px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.steps li { counter-increment: s; font: 600 1.2rem var(--mincho); background: var(--surface); border: 2px solid #1d1a24; border-radius: var(--r-sharp); padding: 14px 12px; text-align: center; box-shadow: 6px 6px 0 var(--accent); overflow-wrap: anywhere; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 50%; background: var(--accent-ink); color: var(--surface); font: 700 1.05rem var(--display); }
@media (max-width: 860px) {
  .japlan-row { grid-template-columns: 1fr; }
  .japlan-row .phone { margin: -60px auto 0; }
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 340px) { .steps { grid-template-columns: 1fr; } }

/* =========================================================
   14. Kakure (night)
   ========================================================= */
/* night falls at the floral border, not halfway down the screen */
.kakure { --bg: #14111c; --fg: #f3e7cc; background: var(--bg); color: var(--fg); overflow: hidden; padding-top: 110px; padding-bottom: 80px; }
.stars { position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(1.5px 1.5px at 10% 20%, #f3e7cc, transparent), radial-gradient(1px 1px at 30% 70%, #f3e7cc, transparent), radial-gradient(1.5px 1.5px at 55% 15%, #f3e7cc, transparent), radial-gradient(1px 1px at 75% 45%, #f3e7cc, transparent), radial-gradient(2px 2px at 88% 12%, #d4a843, transparent), radial-gradient(1px 1px at 20% 90%, #f3e7cc, transparent), radial-gradient(1.5px 1.5px at 65% 85%, #f3e7cc, transparent); background-size: 420px 420px; animation: twinkle 7s ease-in-out infinite alternate; }
.kakure::before { content: ""; position: absolute; inset: 0 0 auto; height: 18px; background: url(/assets/img/kakure-floral.webp) center / 80px repeat-x; opacity: .7; }
.kakure-inner { position: relative; z-index: 3; max-width: 1140px; margin: 0 auto; }
.kakure-title { font-family: var(--mincho); font-weight: 600; color: #d4a843; letter-spacing: .04em; }
.kakure-title .kanji { display: block; font-size: .5em; color: var(--accent); letter-spacing: .3em; margin-bottom: .2em; }
.kakure-title small { display: block; font-size: .36em; color: #f3e7cc; letter-spacing: .25em; text-transform: uppercase; margin-top: .4em; }
.kakure .world-head p { color: #e6d8b8; }
.hexes { display: flex; justify-content: center; margin: -20px auto 60px; perspective: 800px; filter: drop-shadow(0 14px 18px rgba(0,0,0,.5)); }
.hexes img { width: clamp(64px, 14vw, 150px); margin: 0 -6px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: transform .9s cubic-bezier(.2,1.4,.4,1), opacity .6s; }
.js .hexes img { transform: rotateY(90deg) translateY(20px); opacity: 0; }
.hexes img:nth-child(even) { margin-top: 60px; }
.js .hexes.in img { transform: none; opacity: 1; }
.hexes.in img:nth-child(2) { transition-delay: .12s } .hexes.in img:nth-child(3) { transition-delay: .24s }
.hexes.in img:nth-child(4) { transition-delay: .36s } .hexes.in img:nth-child(5) { transition-delay: .48s }
.kakure-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 50px; align-items: center; margin-bottom: 90px; }
.kakure .phone { aspect-ratio: 700 / 770; width: min(380px, 84vw); border-radius: 30px; }
.kakure .phone::before { display: none; }
.kakure .phone img { border-radius: 22px; }
.church-swap { position: relative; width: 100%; aspect-ratio: 1; max-width: 320px; margin: 0 auto; --hide: 0; }
.church-swap img { position: absolute; inset: 0; width: 100%; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); transition: opacity .15s linear; }
.church-open { opacity: calc(1 - var(--hide)); transform: translateY(calc(var(--hide) * 18px)); }
.church-hidden { opacity: var(--hide); transform: translateY(calc(var(--hide) * 18px)); }
.church-label { position: absolute; left: 0; right: 0; bottom: -46px; text-align: center; font: 600 1.1rem var(--mincho); letter-spacing: .15em; text-transform: uppercase; }
.church-label span { position: absolute; left: 0; right: 0; }
.l-open { color: #d4a843; opacity: calc(1 - var(--hide)); }
.l-hidden { color: var(--accent); opacity: var(--hide); }
.cards { position: relative; height: 320px; max-width: 340px; width: 100%; margin: 0 auto; }
.cards img { position: absolute; left: 50%; top: 50%; width: 210px; margin: -80px 0 0 -105px; border-radius: var(--r-sm); box-shadow: 0 16px 30px rgba(0,0,0,.55); border: 3px solid #d4a843; transition: transform .9s cubic-bezier(.2,1.3,.4,1); }
.cards.in img:nth-child(1), html:not(.js) .cards img:nth-child(1) { transform: translate(-70px, 40px) rotate(-22deg); }
.cards.in img:nth-child(2), html:not(.js) .cards img:nth-child(2) { transform: translate(-35px, 5px) rotate(-11deg); transition-delay: .08s; }
.cards.in img:nth-child(3), html:not(.js) .cards img:nth-child(3) { transform: translate(0, -10px) rotate(0); transition-delay: .16s; }
.cards.in img:nth-child(4), html:not(.js) .cards img:nth-child(4) { transform: translate(35px, 5px) rotate(11deg); transition-delay: .24s; }
.cards.in img:nth-child(5), html:not(.js) .cards img:nth-child(5) { transform: translate(70px, 40px) rotate(22deg); transition-delay: .32s; }
@media (max-width: 860px) {
  .kakure-row { grid-template-columns: 1fr; gap: 80px; }
  .church-label { letter-spacing: .08em; }
  .cards { transform: scale(.85); }
}

/* =========================================================
   15. Finale + footer
   ========================================================= */
.finale { position: relative; z-index: 2; padding: 70px var(--gutter) 40px; text-align: center; }
.finale h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 700; color: var(--sun); }
.finale p { font-size: var(--fs-lead); }
.doors { list-style: none; padding: 0; margin: 40px auto 90px; max-width: 1040px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.doors li { flex: 0 1 132px; display: flex; }
.doors a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; min-height: 150px; text-decoration: none; background: var(--surface); color: var(--ink); border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-sm); padding: 18px 10px 14px; font: 600 1rem/1.2 var(--display); transition: transform .3s cubic-bezier(.3,1.8,.5,1); box-shadow: 0 8px 0 #0003; }
.doors a:hover, .doors a:focus-visible { transform: translateY(-10px) rotate(-3deg); }
.doors a:active { transform: translateY(-2px) scale(.97); transition-duration: .08s; }
.doors img { width: 72px; height: 72px; object-fit: contain; }
.doors .soon { position: absolute; top: -10px; right: -6px; font: 1rem var(--hand); background: var(--sun); color: var(--ink); padding: 0 8px; border-radius: 8px; transform: rotate(6deg); }
.doors .door-soon a { background: color-mix(in srgb, var(--surface) 80%, var(--bg)); border: 2px dashed #fff6e699; }
.foot { font-size: var(--fs-sm); color: color-mix(in srgb, var(--fg) 80%, var(--bg)); }
@media (max-width: 420px) { .doors li { flex-basis: 128px; } }

/* =========================================================
   16. Keyframes + reduced motion
   ========================================================= */
@keyframes wordin { to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes drift { to { transform: translateX(130vw); } }
@keyframes sunpulse { 50% { box-shadow: 0 0 0 26px #ffd16633, 0 0 0 56px #ffd16614; } }
@keyframes hint { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@keyframes weave { to { stroke-dashoffset: 0; } }
@keyframes pop { to { transform: scale(1); } }
@keyframes boing { 30% { transform: scale(1.12, .9); } 60% { transform: scale(.94, 1.08); } }
@keyframes sway { from { transform: translateX(-3%) scaleY(1); } to { transform: translateX(3%) scaleY(1.15); } }
@keyframes breathe { 0%, 100% { transform: scale(.8); } 45%, 55% { transform: scale(1.12); } }
@keyframes twinkle { to { opacity: .55; } }

@media (max-width: 820px) { .thread { opacity: .7; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal, .js .hexes img { opacity: 1; transform: none; }
  .js .hero-title .word { opacity: 1; transform: none; }
  .church-swap { --hide: 1 !important; }
}