/* ==========================================================================
   COLLAGE KIT — Y2K · scrapbook · editorial · maximalist · ethereal
   Shared by every page. Pages tune it with these tokens:
     --paper-1/2/3   torn-paper colours      --tape-1/2   washi tape colours
     --ink           text on paper           --holo       iridescent foil
   ========================================================================== */

:root {
  --paper-1: #fbf6e9;
  --paper-2: #ffe3f3;
  --paper-3: #e4f7ff;
  --ink: #16081f;
  --tape-1: rgba(255, 105, 200, .62);
  --tape-2: rgba(120, 255, 190, .62);
  --holo: conic-gradient(from var(--holo-a, 0deg), #ffb8f1, #b8fff9, #fff6b8, #c9b8ff, #b8ffcf, #ffb8f1);
  --font-editorial: 'Playfair Display', Georgia, serif;
  --font-poster: 'Anton', Impact, sans-serif;
  --font-marker: 'Permanent Marker', cursive;
  --font-hand: 'Caveat', cursive;
  --font-mono: 'Space Mono', monospace;
  --font-y2k: 'Monoton', cursive;
}

@property --holo-a { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@keyframes holo-spin { to { --holo-a: 360deg; } }

/* ---------- Film grain over everything (ethereal / photocopy) ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 9990; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift .9s steps(4) infinite;
}
@keyframes grain-shift { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, 3%); } }

/* Soft light beams + haze */
.ether {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    conic-gradient(from 200deg at 50% -10%, transparent 0deg, rgba(255,255,255,.12) 8deg, transparent 16deg, transparent 30deg, rgba(255,230,255,.1) 36deg, transparent 44deg, transparent 60deg, rgba(220,255,240,.1) 66deg, transparent 74deg);
  mix-blend-mode: screen;
  animation: ether-sway 14s ease-in-out infinite alternate;
}
@keyframes ether-sway { to { transform: rotate(4deg) scale(1.08); } }

/* ---------- Independent floating ----------
   JS gives each [data-float] its own --fx/--fy/--fr/--fd/--fdel. Uses the
   individual translate/rotate properties so it STACKS on top of whatever
   transform an element already has. */
[data-float] {
  animation: float-free var(--fd, 7s) ease-in-out var(--fdel, 0s) infinite alternate;
}
@keyframes float-free {
  0%   { translate: 0 0; rotate: var(--fr0, 0deg); }
  33%  { translate: var(--fx, 6px) calc(var(--fy, 8px) * -1); rotate: var(--fr, 2deg); }
  66%  { translate: calc(var(--fx, 6px) * -.6) var(--fy, 8px); rotate: calc(var(--fr, 2deg) * -.5); }
  100% { translate: calc(var(--fx, 6px) * .4) calc(var(--fy, 8px) * .5); rotate: var(--fr0, 0deg); }
}
/* Elements that already run their own animation get float on a wrapper rotate only */
[data-float].keep-anim { animation: none; }

/* ---------- Sticker cut-outs ---------- */
.cutout {
  position: absolute; pointer-events: none; user-select: none;
  filter: drop-shadow(3px 6px 0 rgba(20, 0, 40, .35)) drop-shadow(0 0 18px rgba(255,255,255,.15));
}
.cutout--glow { filter: drop-shadow(3px 6px 0 rgba(20,0,40,.35)) drop-shadow(0 0 24px rgba(57,255,106,.55)); }
.emoji-sticker {
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(3px 5px 0 rgba(0,0,0,.35));
}

/* ---------- Perched cut-outs: sitting on a panel's top edge ---------- */
.perch {
  position: absolute; bottom: calc(100% - 12px); height: 92px; width: auto; max-width: 140px; object-fit: contain;
  z-index: 4; pointer-events: none;
  transform-origin: 50% 100%;
  filter: drop-shadow(3px 5px 0 rgba(0,0,0,.4));
  animation: perch-sway 5s ease-in-out infinite alternate;
}
.perch--right { right: 34px; }
.perch--left  { left: 34px; }
.panel:nth-of-type(3n) .perch { animation-duration: 6.5s; }
@keyframes perch-sway { from { rotate: -3deg; } to { rotate: 3deg; } }
/* leave a landing strip above every panel so a perched creature never covers text */
.has-perches .page-main { gap: 104px; }

/* ---------- Washi tape ---------- */
.tape {
  position: absolute; z-index: 3; width: var(--tw, 110px); height: 30px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 6px, transparent 6px 14px),
    var(--tc, var(--tape-1));
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 100% 0, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 0 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  mix-blend-mode: multiply;
}
.tape--holo { background: var(--holo); opacity: .75; animation: holo-spin 6s linear infinite; mix-blend-mode: normal; }

/* ---------- Torn paper (shape comes from JS: --tear) ---------- */
.torn {
  position: relative; isolation: isolate;
  background: none !important; border: 0 !important; box-shadow: none !important;
  filter: drop-shadow(4px 7px 0 rgba(15, 0, 30, .38));
}
.torn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.55), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(120,80,40,.12), transparent 45%),
    var(--paper, var(--paper-1));
  clip-path: var(--tear, none);
}
.torn--lined::before {
  background:
    linear-gradient(90deg, transparent 38px, rgba(255,60,120,.45) 38px 40px, transparent 40px),
    repeating-linear-gradient(transparent 0 27px, rgba(60,120,255,.25) 27px 28px),
    var(--paper, var(--paper-1));
}
.torn--grid::before {
  background:
    linear-gradient(rgba(0,0,0,.07) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(0,0,0,.07) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--paper, var(--paper-1));
}
.torn--halftone::before {
  background:
    radial-gradient(circle, rgba(0,0,0,.18) 1.2px, transparent 1.6px) 0 0 / 9px 9px,
    var(--paper, var(--paper-1));
}

/* ---------- Ransom-note letters ---------- */
.ransom { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .06em .02em; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
.ransom .r-chip {
  display: inline-block; line-height: 1; padding: .08em .14em .1em;
  rotate: var(--r, 0deg);
  box-shadow: 2px 3px 0 rgba(0,0,0,.35);
}
.ransom .r-chip.r-holo { background: var(--holo) !important; animation: holo-spin 5s linear infinite, float-free var(--fd, 7s) ease-in-out var(--fdel, 0s) infinite alternate; }
.ransom .r-chip.r-cut { clip-path: polygon(3% 6%, 96% 0, 100% 90%, 92% 100%, 0 96%); }
.ransom .r-space { display: inline-block; width: .35em; }
.ransom .r-word { display: inline-flex; white-space: nowrap; gap: .02em; }

/* ---------- Y2K chrome sparkle ---------- */
.sparkle { position: absolute; width: var(--s, 34px); height: var(--s, 34px); pointer-events: none; animation: sparkle-twinkle var(--st, 2.4s) ease-in-out var(--sd, 0s) infinite; }
.sparkle svg { width: 100%; height: 100%; overflow: visible; }
@keyframes sparkle-twinkle { 0%, 100% { scale: .4; opacity: .4; rotate: 0deg; } 50% { scale: 1; opacity: 1; rotate: 45deg; } }
.cursor-sparkle { position: fixed; z-index: 9989; width: 18px; height: 18px; pointer-events: none; animation: cursor-sparkle .8s ease-out forwards; }
@keyframes cursor-sparkle { to { translate: var(--dx) 30px; scale: 0; rotate: 180deg; opacity: 0; } }

/* ---------- Y2K glossy holo button: the big ORDER HERE ---------- */
.order-here {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .3em;
  font-family: var(--font-poster); font-size: clamp(2rem, 4.6vw, 3.6rem); letter-spacing: .02em; line-height: 1;
  color: #16081f; text-decoration: none; text-transform: uppercase;
  padding: .32em .9em .36em;
  border: 4px solid #16081f; border-radius: 999px;
  background: var(--holo);
  box-shadow: 0 0 0 4px #fff, 7px 9px 0 4px #16081f, 0 0 50px rgba(255, 140, 240, .7), 0 0 90px rgba(57,255,106,.4);
  cursor: pointer;
  animation: holo-spin 4s linear infinite;
  transition: scale .2s cubic-bezier(.3,1.8,.5,1);
}
.order-here::before { /* glossy Y2K highlight */
  content: ''; position: absolute; left: 8%; right: 8%; top: 6%; height: 42%; border-radius: 999px;
  background: linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.1));
  pointer-events: none;
}
.order-here span { position: relative; -webkit-text-stroke: 1.5px #fff; paint-order: stroke fill; }
.order-here:hover { scale: 1.08; }
.order-here:active { scale: .96; }
.order-here:focus-visible { outline: 5px dashed #39ff6a; outline-offset: 8px; }

/* Hand-drawn doodle callout */
.doodle {
  position: absolute; pointer-events: none;
  font-family: var(--font-marker); font-size: 1.5rem; color: #fff; line-height: 1;
  text-shadow: 2px 2px 0 #16081f;
}
.doodle svg { display: block; overflow: visible; }
.doodle path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(2px 2px 0 #16081f); }

/* ---------- Editorial furniture ---------- */
.issue-line {
  font-family: var(--font-mono); font-weight: 700; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4em 1.2em;
  border-block: 2px solid currentColor; padding: .45em 0; margin-bottom: 1.2em;
}
.dymo {
  display: inline-block; font-family: var(--font-mono); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: #111; color: #fff; padding: .3em .8em; border-radius: 3px; font-size: .85rem;
  text-shadow: 0 1px 0 rgba(255,255,255,.4), 0 -1px 0 #000;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 2px 3px 0 rgba(0,0,0,.35);
}
.barcode {
  display: inline-grid; justify-items: center; gap: 2px; background: #fff; color: #000;
  padding: 8px 10px 4px; font: 700 .62rem/1 var(--font-mono); letter-spacing: .2em;
  box-shadow: 3px 4px 0 rgba(0,0,0,.4);
}
.barcode::before {
  content: ''; width: 120px; height: 46px;
  background: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 3px, #000 3px 4px, transparent 4px 7px, #000 7px 10px, transparent 10px 11px, #000 11px 12px, transparent 12px 15px, #000 15px 16px, transparent 16px 18px);
}
.pullquote {
  font-family: var(--font-editorial); font-style: italic; font-weight: 900;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.1; text-align: center;
}
.pullquote::before { content: '“'; font-size: 2.2em; line-height: 0; vertical-align: -.45em; margin-right: .05em; color: var(--theme-accent); }
.pullquote::after  { content: '”'; font-size: 2.2em; line-height: 0; vertical-align: -.45em; margin-left: .05em; color: var(--theme-accent); }
.stamp { position: absolute; width: 130px; height: 130px; pointer-events: none; animation: stamp-spin 22s linear infinite; }
.stamp svg { width: 100%; height: 100%; }
.stamp text { font: 700 12px var(--font-mono); letter-spacing: 3px; fill: currentColor; }
@keyframes stamp-spin { to { rotate: 360deg; } }

/* ---------- Scrapbook versions of the shared page blocks ---------- */
.page-hero__kicker { font-family: var(--font-mono); background: #111; color: #fff; border-radius: 3px; box-shadow: 2px 3px 0 rgba(0,0,0,.35); }
.page-hero h1 { margin: .35em 0 .3em; }
.page-hero__lede { position: relative; padding: 1.1em 1.4em; color: var(--ink); font-weight: 800; text-shadow: none !important; max-width: 60ch; }
.page-hero { position: relative; }

.panel.torn { padding: 30px 28px; color: var(--ink); }
.panel.torn h2 { text-shadow: none; }

/* Price list: ticket stubs with perforated edge */
.price-list li {
  position: relative; border-radius: 4px; border: 0;
  box-shadow: 3px 4px 0 rgba(0,0,0,.35);
  background:
    radial-gradient(circle at 0 50%, transparent 8px, var(--tag-bg, var(--theme-accent-2)) 8.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 8px, var(--tag-bg, var(--theme-accent-2)) 8.5px) right / 51% 100% no-repeat;
  padding-inline: 1.4em;
}
.price-list li em {
  font-family: var(--font-poster); font-size: 1.35rem; letter-spacing: .02em;
  border-left: 2px dashed rgba(0,0,0,.45); padding-left: .7em;
}

/* Polaroid cards */
.card {
  background: #fff !important; color: #16081f !important; border: 0 !important; border-radius: 3px !important;
  padding: 12px 12px 6px !important; overflow: visible !important;
  box-shadow: 4px 7px 0 rgba(10,0,25,.4) !important;
  position: relative;
}
.card__art { border: 0 !important; border-radius: 2px; }
.card__text { padding: 12px 4px 10px !important; }
.card__title { font-family: var(--font-marker) !important; font-size: 1.35rem !important; color: #16081f !important; text-transform: none !important; letter-spacing: 0 !important; }
.card__price {
  display: inline-block !important; margin-top: .6em !important;
  font-family: var(--font-poster); font-size: 1.15rem; color: #16081f !important;
  background: var(--theme-accent-2); padding: .1em .55em; rotate: -3deg;
  box-shadow: 2px 2px 0 #16081f;
}
.card:hover { z-index: 5; }
.card__art--soon { position: relative; overflow: hidden; background-color: #222; }
.card__art--soon .soon-cutout {
  position: absolute; inset: 8% 10% 22%; width: 80%; height: 70%; object-fit: contain;
  filter: drop-shadow(3px 5px 0 rgba(0,0,0,.35));
}
.card__art--soon > span { position: absolute; left: 50%; bottom: 7%; translate: -50% 0; rotate: -2deg; white-space: nowrap; font: 700 .62rem/1 var(--font-mono) !important; letter-spacing: .12em !important; }

/* Process steps on lined notebook paper */
.steps li { background: none !important; border: 0 !important; padding-left: 70px !important; }
.steps li::before {
  font-family: var(--font-marker); font-weight: 400; background: none !important; color: var(--theme-accent-strong, #e0006f) !important;
  border: 3px solid currentColor !important; border-radius: 50% 45% 55% 48% !important; rotate: -8deg; font-size: 1.4rem;
}
.steps strong { font-family: var(--font-marker); font-weight: 400; font-size: 1.25rem; }

.cta { position: relative; }
.cta .order-here { margin: .3em 0 .2em; }
.cta .cta__sub { margin: .8em 0 0; font: 700 1.6rem/1.1 var(--font-hand); }

/* Realm arrows as ticket stubs */
.realm-arrow { font-family: var(--font-poster) !important; letter-spacing: .03em !important; border-radius: 4px !important; border-style: dashed !important; }

/* Page bar: a strip of masking tape across the top */
.page-bar { backdrop-filter: blur(6px); }

html[data-motion="calm"] [data-float] { animation-duration: calc(var(--fd, 7s) * 2.2); }
html[data-motion="calm"] .perch { animation-duration: 12s; }
html[data-motion="calm"] .grain,
html[data-motion="calm"] .order-hand { animation: none; }
html[data-motion="calm"] .sparkle { animation-duration: 6s; }
@media (max-width: 700px) {
  .stamp { width: 96px; height: 96px; }
  .page-hero .stamp { width: 74px; height: 74px; right: -6px !important; bottom: -64px !important; }
  .doodle { font-size: 1.1rem; }
}