/* Prelude — the Steward's invitation. Four cards over the canvas, before the
   world starts. Pure DOM/CSS; sequencing lives in js/prelude.js.
   Palette: near-black #0a0a0a · cream #f2ece1 · wax red #7d1f1f. */

#prelude{
  position:fixed;inset:0;z-index:55;   /* under #entry (60) so the entry screen fades out into card 1; over #hud (30) */
  background:#0a0a0a;color:#f2ece1;
  touch-action:none;user-select:none;-webkit-user-select:none;
  outline:none;
}

/* full-bleed film grain — inline SVG feTurbulence, stepped drift (film, not video) */
#prelude .pre-grain{
  position:absolute;inset:-20%;width:140%;height:140%;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.5;mix-blend-mode:overlay;
  animation:preGrainDrift 8s steps(10) infinite;
  z-index:1;
}
@keyframes preGrainDrift{
  0%{transform:translate(0,0)}
  10%{transform:translate(-4%,3%)}
  20%{transform:translate(3%,-5%)}
  30%{transform:translate(-2%,-3%)}
  40%{transform:translate(5%,2%)}
  50%{transform:translate(-5%,4%)}
  60%{transform:translate(2%,5%)}
  70%{transform:translate(4%,-2%)}
  80%{transform:translate(-3%,-4%)}
  90%{transform:translate(1%,3%)}
  100%{transform:translate(0,0)}
}

/* ---------------- cards ---------------- */
/* slow cross-fades, linear-ish ease — nothing that reads as "UI" */
#prelude .pre-card{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity 1.2s cubic-bezier(.4,0,.6,1);
  z-index:2;
}
#prelude .pre-card.on{opacity:1;pointer-events:auto}

/* CARD 1 — single line. CARD 4 — the title. Cream serif on near-black. */
#prelude .pre-card1 p{
  font-family:'EB Garamond',Georgia,serif;font-size:clamp(17px,2.3vw,24px);
  letter-spacing:.04em;color:#f2ece1;text-align:center;padding:0 28px;line-height:1.6;
}
#prelude .pre-card4 p{
  font-family:'EB Garamond',Georgia,serif;font-weight:600;
  font-size:clamp(46px,9vw,104px);letter-spacing:.14em;text-indent:.14em;
  color:#f2ece1;text-align:center;
}

/* ---------------- CARD 2 — the letter ---------------- */
#prelude .pre-card2{
  background:radial-gradient(ellipse at 50% 40%, #141414 0%, #0a0a0a 55%, #060606 100%);
  overflow-y:auto;padding:32px 0;
}
#prelude .pre-letterwrap{position:relative;margin:auto}

/* ambient shadow — its own blurred layer behind the paper */
#prelude .pre-lettershadow{
  position:absolute;inset:6% 3%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%, rgba(0,0,0,.85), rgba(0,0,0,0) 70%);
  filter:blur(30px);transform:translateY(24px);
  pointer-events:none;
}

#prelude .pre-letter{
  position:relative;
  width:min(560px,92vw);
  transform:rotate(-0.4deg);
  background:linear-gradient(135deg,#f4efe3,#ece4d2 60%,#efe8da);
  border-radius:2px 4px 1px 5px;              /* deliberately uneven — never square */
  box-shadow:
    0 45px 90px -25px rgba(0,0,0,.75),
    0 18px 34px -10px rgba(0,0,0,.55),
    inset 0 2px 0 rgba(255,255,255,.05),
    inset 0 0 70px 10px rgba(90,64,32,.10);   /* age vignette */
  padding:clamp(28px,6vw,56px) clamp(24px,7vw,58px) clamp(34px,7vw,52px);
  color:#2a2521;
}

/* paper grain — same turbulence, multiplied into the fibers */
#prelude .pre-papergrain{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.35;mix-blend-mode:multiply;
}

/* foxing — corner blooms + scattered spots, all one layer */
#prelude .pre-foxing{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(140px 120px at 0% 0%,    rgba(122,86,42,.16), rgba(122,86,42,0) 70%),
    radial-gradient(160px 140px at 100% 8%,  rgba(122,86,42,.11), rgba(122,86,42,0) 70%),
    radial-gradient(150px 150px at 6% 100%,  rgba(122,86,42,.13), rgba(122,86,42,0) 70%),
    radial-gradient(40px 34px at 22% 31%,  rgba(122,86,42,.08), rgba(122,86,42,0) 70%),
    radial-gradient(64px 52px at 71% 18%,  rgba(122,86,42,.06), rgba(122,86,42,0) 70%),
    radial-gradient(30px 30px at 58% 44%,  rgba(122,86,42,.10), rgba(122,86,42,0) 70%),
    radial-gradient(52px 44px at 87% 58%,  rgba(122,86,42,.07), rgba(122,86,42,0) 70%),
    radial-gradient(34px 40px at 12% 63%,  rgba(122,86,42,.09), rgba(122,86,42,0) 70%),
    radial-gradient(70px 56px at 44% 86%,  rgba(122,86,42,.06), rgba(122,86,42,0) 70%),
    radial-gradient(36px 30px at 66% 71%,  rgba(122,86,42,.08), rgba(122,86,42,0) 70%),
    radial-gradient(46px 46px at 33% 12%,  rgba(122,86,42,.07), rgba(122,86,42,0) 70%);
}

/* tri-fold creases — dark shadow edge into light highlight edge */
#prelude .pre-crease{
  position:absolute;left:0;right:0;height:9px;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(90,64,32,0) 0%, rgba(90,64,32,.10) 34%, rgba(60,44,24,.14) 48%,
    rgba(255,252,244,.28) 62%, rgba(255,252,244,0) 100%);
}
#prelude .pre-crease.pre-c1{top:37%}
#prelude .pre-crease.pre-c2{top:71%;height:8px}

/* the typed body */
#prelude .pre-body{position:relative;font-family:'Special Elite','Courier New',monospace;
  font-size:clamp(15px,1.7vw,17px);line-height:1.85;color:#2a2521}
#prelude .pre-p{margin:0 0 1.3em}
#prelude .pre-p.pre-key{margin:3.2em 0}   /* the line the whole game hangs on — whitespace only */
#prelude .pre-p .w{display:inline-block;white-space:nowrap}
#prelude .pre-p .c{display:inline-block}
#prelude .pre-sig{margin:2.4em 0 0;text-align:right}

/* footnote — the controls, typed small, clear of the seal */
#prelude .pre-foot{
  position:relative;margin-top:2.2em;max-width:62%;
  font-family:'Special Elite','Courier New',monospace;font-size:12px;line-height:1.8;
  color:rgba(42,37,33,.55);
  border-top:1px solid rgba(42,37,33,.18);padding-top:14px;
  opacity:0;transition:opacity 1.5s ease;
}
#prelude .pre-foot.on{opacity:1}

/* ---------------- the wax seal ---------------- */
#prelude .pre-seal{
  position:absolute;width:74px;height:74px;border-radius:50%;
  right:clamp(24px,7%,50px);bottom:clamp(4px,1.5vw,14px);
  transform:rotate(-8deg);
  background:radial-gradient(circle at 35% 30%, #9c3030, #7d1f1f 55%, #5c1414 100%);
  box-shadow:
    0 6px 14px rgba(0,0,0,.45),
    0 2px 4px rgba(0,0,0,.4),
    inset 0 2px 3px rgba(255,255,255,.18),
    inset 0 -3px 6px rgba(40,6,6,.55);
  display:flex;align-items:center;justify-content:center;
}
#prelude .pre-seal::before{                 /* inner emboss ring */
  content:'';position:absolute;inset:12px;border-radius:50%;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.22), inset 0 -2px 4px rgba(40,6,6,.5),
    0 1px 1px rgba(255,255,255,.12);
}
#prelude .pre-sealcracks{
  position:absolute;inset:0;border-radius:50%;opacity:.6;mix-blend-mode:multiply;
  background:
    linear-gradient(37deg,  transparent 46.5%, rgba(35,6,6,.5) 48%, transparent 49.5%),
    linear-gradient(122deg, transparent 30%,   rgba(35,6,6,.48) 31.4%, transparent 33%),
    linear-gradient(68deg,  transparent 63%,   rgba(35,6,6,.5) 64.5%, transparent 66%),
    linear-gradient(151deg, transparent 55%,   rgba(35,6,6,.45) 56.2%, transparent 58%),
    linear-gradient(95deg,  transparent 40%,   rgba(35,6,6,.5) 41.2%, transparent 43%);
}
#prelude .pre-sealcracks::after{
  content:'';position:absolute;inset:0;border-radius:50%;opacity:.35;mix-blend-mode:screen;
  background:
    linear-gradient(37deg,  transparent 49.5%, rgba(255,190,190,.6) 50.5%, transparent 52%),
    linear-gradient(122deg, transparent 33%,   rgba(255,190,190,.5) 34.2%, transparent 36%);
}
#prelude .pre-sealglyph{
  position:relative;font-family:'EB Garamond',Georgia,serif;font-weight:600;font-size:26px;
  color:#5c1414;
  text-shadow:0 1px 1px rgba(255,255,255,.25), 0 -1px 1px rgba(40,6,6,.6);
}

/* ---------------- skip ---------------- */
#prelude .pre-skip{
  position:absolute;right:18px;bottom:14px;z-index:3;
  appearance:none;background:transparent;border:none;cursor:pointer;
  font-family:'EB Garamond',Georgia,serif;font-size:12px;
  letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
  color:rgba(242,236,225,.34);
  padding:14px 16px;                        /* quiet, but a real tap target */
  opacity:0;pointer-events:none;transition:opacity 1s ease, color .3s;
}
#prelude .pre-skip.on{opacity:1;pointer-events:auto}
#prelude .pre-skip:hover,#prelude .pre-skip:focus-visible{color:rgba(242,236,225,.7);outline:none}

/* whole-overlay fade out into the game */
#prelude{transition:opacity 1.2s cubic-bezier(.4,0,.6,1)}
#prelude.pre-out{opacity:0;pointer-events:none}

/* reduced motion: hard cuts, same clock */
@media (prefers-reduced-motion: reduce){
  #prelude,#prelude .pre-card,#prelude .pre-foot,#prelude .pre-skip{transition:none !important}
  #prelude .pre-grain{animation:none}
}