/* =========================================================
   LOADER + FIRST-VISIT INTRO ("Mini Me" scene)
   Comic layer on top of the Gallery White theme:
   thick ink outlines, hard offset shadows, lettering fonts.
   ========================================================= */
/* Comic lettering fonts, self-hosted (SIL Open Font License) */
@font-face { font-family: "Kalam"; src: url("../fonts/kalam-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("../fonts/kalam-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bangers"; src: url("../fonts/bangers-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ink: #111111;
  --comic-font: "Kalam", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
  --sfx-font: "Bangers", "Impact", "Arial Black", sans-serif;
  --comic-line: 3px;
  --comic-shadow: 5px 5px 0 var(--ink);
}
html, body { height: 100%; }
body.is-locked { overflow: hidden; }
[hidden] { display: none !important; }

/* ---------------- LOADER ---------------- */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--halftone), var(--bg);
  transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-in-out);
}
.loader.is-done { opacity: 0; transform: translateY(-3%); pointer-events: none; }
.loader__inner { width: min(34rem, calc(100% - 2 * var(--gutter))); }
.loader__msg {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .03em;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem); line-height: 1.05; max-width: none;
}
.loader__msg span { display: inline-block; opacity: 0; transform: translateY(0.4em); animation: word-in 600ms var(--ease-out) forwards; }
.loader__track {
  position: relative; height: 14px; margin-top: 4.75rem;
  background: var(--panel); border: 3px solid var(--ink); box-shadow: var(--comic-shadow-sm);
}
.loader__fill {
  position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 1%);
  background: var(--accent);
}
.loader__rider {
  position: absolute; bottom: 10px; left: calc(var(--p, 0) * 1%);
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  background: var(--surface-raised); border: 2px solid var(--ink);
  transform: translateX(-50%); opacity: 0;
  transition: opacity 300ms;
  animation: hop 520ms var(--ease-out) infinite alternate;
}
.loader__rider.is-ready { opacity: 1; }
.loader__rider img { width: 112%; max-width: none; margin: 3px 0 0 -6%; }
.loader__meta {
  display: flex; justify-content: space-between; margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted);
}
.loader__meta .num { color: var(--text); }
.loader.is-complete .loader__rider { animation: rider-jump 600ms var(--ease-spring) forwards; }

@keyframes word-in { to { opacity: 1; transform: none; } }
@keyframes hop { from { translate: 0 0; rotate: -6deg; } to { translate: 0 -5px; rotate: 6deg; } }
@keyframes rider-jump { 0% { translate: 0 0; } 40% { translate: 0 -34px; rotate: -20deg; scale: 1.15; } 100% { translate: 0 -10px; rotate: 0deg; scale: 1; } }

/* ---------------- SCENE ---------------- */
.scene {
  position: fixed; inset: 0; overflow: hidden;
  background:
    repeating-conic-gradient(from 0deg at 50% 88%, rgba(255,201,60,.5) 0 5deg, transparent 5deg 13deg),
    radial-gradient(circle, var(--paper-dot) 1.3px, transparent 1.8px) 0 0 / 14px 14px,
    radial-gradient(ellipse at 50% 90%, #FFF3CF 0%, var(--bg) 60%);
  display: grid; place-items: end center;
}
.scene.is-shake { animation: shake 420ms steps(2) 1; }
.scene.is-shake-soft { animation: shake-soft 380ms ease-in-out 1; }

/* Stage: Mini Me stands bottom-centre */
.stage {
  position: relative; z-index: 3;
  --mmh: clamp(280px, 52vh, 470px);
  width: 100%; max-width: 62rem; height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "face mm talk";
  align-items: end; column-gap: clamp(1rem, 3vw, 3rem);
  padding: 0 var(--gutter) clamp(2rem, 8vh, 5rem);
}
.mm-wrap { grid-area: mm; position: relative; }
.mm-wrap .chibi { --chibi-h: var(--mmh); }
.mm-wrap.is-hidden { visibility: hidden; }
.mm-wrap.is-jump { animation: jump 620ms var(--ease-out); }
.mm-wrap.is-shiver { animation: shiver 400ms linear; }
.mm-wrap.is-zoom-out { animation: zip-out 650ms var(--ease-in-out) forwards; }
.mm-wrap.is-land { animation: land 520ms var(--ease-spring); transform-origin: 50% 100%; }

/* Ground dust ring on landing */
.dust {
  position: absolute; left: 50%; bottom: -8px; width: 70%; height: 22px;
  translate: -50% 0; border: 3px solid var(--ink); border-radius: 50%;
  opacity: 0; pointer-events: none;
}
.dust.is-on { animation: dust 700ms var(--ease-out) forwards; }

/* ---------------- COMIC BUBBLE ---------------- */
.talk {
  grid-area: talk; align-self: end; justify-self: start; position: relative;
  margin-bottom: calc(var(--mmh) * 0.6);
  width: min(100%, 26rem);
}
.talk .reply { position: absolute; top: calc(100% + 1.25rem); left: 0; min-width: 100%; width: max-content; max-width: min(30rem, calc(100vw - 2 * var(--gutter))); }
.bubble {
  position: relative;
  background: #fff; color: var(--ink);
  border: var(--comic-line) solid var(--ink); border-radius: 30px;
  box-shadow: var(--comic-shadow);
  padding: 1.15rem 1.4rem 1.3rem;
  font-family: var(--comic-font); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(1.1rem, .95rem + 0.55vw, 1.4rem); line-height: 1.32;
  transform-origin: 0% 100%;
  opacity: 0; scale: .4; rotate: -6deg;
  transition: opacity 160ms, scale 380ms var(--ease-spring), rotate 380ms var(--ease-spring);
  cursor: pointer;
}
.bubble.is-on { opacity: 1; scale: 1; rotate: 0deg; }
.bubble.is-shout { border-radius: 8px; }
.bubble p { max-width: none; min-height: 1.3em; }
.bubble em { font-style: normal; color: var(--accent); }
/* tail pointing left toward Mini Me */
.bubble::before, .bubble::after {
  content: ""; position: absolute; width: 0; height: 0; border-style: solid;
}
.bubble::before { left: -26px; bottom: 18px; border-width: 12px 28px 12px 0; border-color: transparent var(--ink) transparent transparent; transform: skewY(22deg); }
.bubble::after  { left: -19px; bottom: 21px; border-width: 9px 22px 9px 0;  border-color: transparent #fff transparent transparent; transform: skewY(22deg); }
.bubble__next {
  position: absolute; right: 16px; bottom: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em;
  color: var(--text-muted); opacity: 0; transition: opacity 200ms;
}
.bubble.is-waiting .bubble__next { opacity: 1; animation: nudge 900ms ease-in-out infinite; }

/* ---------------- REPLY PANEL (user's side) ---------------- */
.reply {
  background: #fff; border: var(--comic-line) solid var(--ink); box-shadow: var(--comic-shadow);
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: var(--s-4);
  opacity: 0; translate: 0 18px; transition: opacity 220ms, translate 420ms var(--ease-spring);
}
.reply.is-on { opacity: 1; translate: 0 0; }
.reply__label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.reply__row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.reply .input { font-family: var(--comic-font); font-weight: 700; font-size: 1.3rem; border-bottom: 2px solid var(--ink); }
.reply__label, .reply__err, .reply__skip { font-family: var(--comic-font); font-weight: 700; letter-spacing: .04em; }
.reply__label { font-size: .85rem; }
.reply .input.is-wrong { animation: shiver 360ms linear; border-bottom-color: var(--spark); }
.reply__err { font-size: var(--fs-sm); color: var(--spark); min-height: 1.2em; margin-top: -6px; }
.reply__skip { font-size: var(--fs-sm); color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; padding: 0; align-self: flex-start; }
.reply__skip:hover { color: var(--text); }

.comic-btn {
  font-family: var(--sfx-font); font-size: 1.45rem; letter-spacing: .04em; line-height: 1; white-space: nowrap;
  padding: .6rem 1.15rem .5rem; color: var(--ink); background: #fff;
  border: var(--comic-line) solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background 120ms;
}
.comic-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.comic-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.comic-btn--blue { background: var(--accent); color: #fff; }
.comic-btn--red  { background: var(--spark); color: #fff; }
.comic-btn--big  { font-size: 1.9rem; padding: .75rem 1.6rem .6rem; }

/* ---------------- CLOSE-UP FACE PANEL ---------------- */
.face-panel {
  grid-area: face; justify-self: end; align-self: end;
  margin-bottom: calc(var(--mmh) * 0.5);
  width: clamp(9rem, 15vw, 13rem); aspect-ratio: 1;
  border: var(--comic-line) solid var(--ink); box-shadow: var(--comic-shadow);
  background: var(--accent); overflow: hidden; position: relative;
  opacity: 0; scale: .3; rotate: 12deg;
  transition: opacity 160ms, scale 420ms var(--ease-spring), rotate 420ms var(--ease-spring), background 300ms;
}
.face-panel.is-on { opacity: 1; scale: 1; rotate: -4deg; }
.face-panel img { position: absolute; left: 50%; top: 4%; width: 118%; max-width: none; translate: -50% 0; }
.face-panel::after { /* halftone dots */
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .25;
  background: radial-gradient(circle, rgba(0,0,0,.5) 1px, transparent 1.6px) 0 0 / 8px 8px;
}
.face-panel.is-pink { background: #FF8FB1; }
.face-panel.is-red  { background: var(--spark); }
.face-panel.is-ink  { background: var(--ink); }
.face-panel.is-green { background: #1F8A63; }
.face-panel.is-swap img { animation: face-swap 320ms var(--ease-spring); }

/* ---------------- FX LAYER ---------------- */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.fx--back { z-index: 2; }
.speedlines { position: absolute; inset: -10%; width: 120%; height: 120%; opacity: 0; }
.speedlines.is-on { animation: lines 900ms var(--ease-out) forwards; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.flash.is-on { animation: flash 420ms ease-out forwards; }
.puff {
  position: absolute; border-radius: 50%;
  background: #F4F5F7; border: 3px solid var(--ink);
  translate: -50% -50%; scale: 0;
}
.puff.is-on { animation: puff var(--d, 1100ms) var(--ease-out) forwards; }
.sfx {
  position: absolute; font-family: var(--sfx-font); color: #fff; line-height: .9;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink); white-space: nowrap;
  translate: -50% -50%; scale: 0; rotate: var(--r, -8deg);
  animation: sfx 1300ms var(--ease-spring) forwards;
}
.sfx--blue { color: var(--accent); }
.sfx--red { color: var(--spark); }
.particle { position: absolute; translate: -50% -50%; animation: float-up var(--d, 1400ms) var(--ease-out) forwards; }

/* ---------------- SUMMONING: seal, smoke, close-up, camera ---------------- */
.seal {
  position: absolute; left: 50%; bottom: -2px; width: 170%; aspect-ratio: 1;
  translate: -50% 50%; scale: 1 .26; pointer-events: none; z-index: -1; opacity: 0;
  visibility: visible; /* shows even while Mini Me is still hidden */
}
.seal svg { width: 100%; height: 100%; overflow: visible; }
.seal.is-on { opacity: 1; }
.seal.is-fade { transition: opacity 1.4s ease-out 0.6s; opacity: 0; }
.smoke { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.smoke__puff { position: absolute; transform: scale(0); will-change: transform, opacity; }
.smoke__inner {
  width: 100%; height: 100%; border-radius: 50%;
  /* anime smoke: bright top-left, cool grey shading toward bottom-right */
  background:
    radial-gradient(circle at 34% 30%, #FFFFFF 0 34%, rgba(255,255,255,0) 58%),
    radial-gradient(circle at 50% 50%, #F3F5F8 0 52%, #DCE1E9 78%, #C9D0DB 100%);
  box-shadow: inset -10px -14px 0 rgba(160,170,186,.18);
  rotate: var(--tilt, 0deg);
  animation: billow 2.4s ease-in-out infinite alternate;
}
@keyframes billow { from { scale: 1; translate: 0 0; } to { scale: 1.07; translate: 0 -4px; } }

.closeup { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.closeup__band {
  position: absolute; left: 0; right: 0; top: 50%; height: 0;
  translate: 0 -50%; overflow: hidden; background: #fff;
  border-block: 5px solid var(--ink);
  box-shadow: 0 0 0 100vmax rgba(17,17,17,.0);
  transition: height 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms;
}
.closeup.is-on .closeup__band { height: clamp(150px, 30vh, 280px); box-shadow: 0 0 0 100vmax rgba(17,17,17,.88); }
.closeup.is-off .closeup__band { height: 0; transition-duration: 200ms; }
.closeup__band img { position: absolute; left: 50%; top: 50%; width: max(100vw, 760px); max-width: none; transform: translate(-50%, -44%); }

.scene.is-camera .stage { animation: camera-out 1.8s cubic-bezier(.3,.6,.2,1); transform-origin: 50% 85%; }
@keyframes camera-out { from { scale: 1.14; translate: 0 3%; } to { scale: 1; translate: 0 0; } }

/* Skip button (top-right of the intro) */
.skip-intro { position: fixed; top: 14px; right: 14px; z-index: 20; font-size: 1.1rem; padding: .45rem .8rem .35rem; }

/* ---------------- END CARD (placeholder for the next chapter) ---------------- */
.endcard {
  position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; text-align: center;
  background: var(--halftone), var(--bg); padding: var(--gutter);
  opacity: 0; transition: opacity 600ms var(--ease-out);
}
.endcard.is-on { opacity: 1; }
.endcard h1 { font-size: var(--fs-2xl); }
.endcard p { margin: var(--s-4) auto 0; color: var(--text-soft); }
.endcard .row { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; margin-top: var(--s-6); }

/* ---------------- KEYFRAMES ---------------- */
@keyframes shake { 0%{translate:0 0} 20%{translate:-10px 6px} 40%{translate:9px -7px} 60%{translate:-7px -4px} 80%{translate:6px 5px} 100%{translate:0 0} }
@keyframes shake-soft { 0%,100%{translate:0 0} 25%{translate:-4px 0} 75%{translate:4px 0} }
@keyframes shiver { 0%,100%{translate:0 0} 20%{translate:-6px 0} 40%{translate:6px 0} 60%{translate:-4px 0} 80%{translate:4px 0} }
@keyframes jump { 0%{translate:0 0; scale:1 1} 18%{translate:0 0; scale:1.08 .9} 50%{translate:0 -60px; scale:.95 1.07} 82%{translate:0 0; scale:1.07 .92} 100%{translate:0 0; scale:1 1} }
@keyframes land { 0%{scale:1.18 .78} 55%{scale:.94 1.06} 100%{scale:1 1} }
@keyframes zip-out { 0%{translate:0 0} 25%{translate:-24px 0; scale:1.05 .95} 100%{translate:130vw 0; scale:1.3 .8} }
@keyframes dust { 0%{opacity:.9; scale:.3 .6} 100%{opacity:0; scale:2.2 1.4} }
@keyframes lines { 0%{opacity:0; scale:1.25; rotate:0deg} 15%{opacity:1} 70%{opacity:.85} 100%{opacity:0; scale:1; rotate:4deg} }
@keyframes flash { 0%{opacity:0} 15%{opacity:1} 100%{opacity:0} }
@keyframes puff {
  0%   { scale: 0; opacity: 1; }
  18%  { scale: 1; opacity: 1; }
  60%  { opacity: 1; }
  100% { scale: 1.25; opacity: 0; translate: calc(-50% + var(--dx, 0px)) calc(-50% + var(--dy, 0px)); }
}
@keyframes sfx { 0%{scale:0; opacity:1} 18%{scale:1.15} 30%{scale:1} 75%{opacity:1} 100%{scale:1.05; opacity:0; translate:-50% -90%} }
@keyframes float-up { 0%{opacity:0; scale:.3} 15%{opacity:1; scale:1} 100%{opacity:0; scale:1; translate:calc(-50% + var(--dx,0px)) calc(-50% + var(--dy,-120px)); rotate:var(--r,0deg)} }
@keyframes nudge { 0%,100%{translate:0 0} 50%{translate:3px 0} }
@keyframes face-swap { 0%{scale:.85; rotate:-6deg} 100%{scale:1; rotate:0} }

/* ---------------- MOBILE ---------------- */
@media (max-width: 52rem) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas: "talk" "mm";
    padding-bottom: 1.5rem; row-gap: 0;
  }
  .stage { --mmh: clamp(220px, 38vh, 340px); }
  .talk { align-self: start; margin: 4.5rem auto 0; width: min(100%, 24rem); justify-self: center; display: flex; flex-direction: column; gap: 2.25rem; }
  .talk .reply { position: static; width: auto; }
  .mm-wrap { justify-self: end; margin-right: 4%; }
  .bubble { transform-origin: 50% 100%; }
  .bubble::before { left: 64%; bottom: -28px; border-width: 28px 12px 0 12px; border-color: var(--ink) transparent transparent transparent; transform: translateX(-50%) skewX(-18deg); }
  .bubble::after  { left: 64%; bottom: -20px; border-width: 22px 9px 0 9px; border-color: #fff transparent transparent transparent; transform: translateX(-50%) skewX(-18deg); }
  .face-panel { position: absolute; left: var(--gutter); bottom: calc(1.5rem + var(--mmh) * 0.5); width: 6rem; margin: 0; z-index: 4; }
}

@media (prefers-reduced-motion: reduce) {
  .smoke__inner, .scene.is-camera .stage,
  .scene.is-shake, .scene.is-shake-soft, .mm-wrap.is-jump, .mm-wrap.is-shiver, .mm-wrap.is-land, .speedlines.is-on, .loader__rider { animation: none !important; }
}