/* scroll.css — Ancient Scroll component styles.
   The window between the rollers — parchment is clipped to here. Insets
   are SMALLER than the rollerSize so the parchment tucks BEHIND each
   roller (the roller, rendered on top, hides the parchment's flat edge
   and the visible portion looks like it curves around the cylinder). */

.scl-outer {
  display: inline-block;
  position: relative;
  font-family: 'IM Fell English', Georgia, serif;
}

.scl {
  position: relative;
  margin: 0 auto;
  transition:
    width var(--scl-dur, 1.4s) cubic-bezier(.22, .61, .36, 1),
    height var(--scl-dur, 1.4s) cubic-bezier(.22, .61, .36, 1);
}

.scl-h { display: flex; align-items: center; }

.scl-window {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}
.scl-v .scl-window {
  left: 14px; right: 14px;
  top: calc(var(--rollerSize) * .42);
  bottom: calc(var(--rollerSize) * .42);
}
.scl-h .scl-window {
  top: 14px; bottom: 14px;
  left: calc(var(--rollerSize) * .42);
  right: calc(var(--rollerSize) * .42);
}

/* Aging — only LARGE, soft radial gradients with their darker stop well
   past the parchment bounds (radius >100%, transparent >100%) so no stain
   terminates inside the visible area. No linear-gradient and no inset
   box-shadow — those introduce rectangular geometry the eye reads as digital. */
.scl-parchment {
  position: absolute;
  inset: 6px 4px;
  background:
    radial-gradient(140% 110% at 28% 22%, rgba(255, 235, 180, .26), transparent 75%),
    radial-gradient(160% 130% at 78% 88%, rgba(90, 55, 18, .22), transparent 80%),
    radial-gradient(120% 90% at 90% 10%, rgba(80, 50, 16, .10), transparent 85%),
    var(--p-mid);
  pointer-events: auto;
}

/* SVG noise overlay — width/height:100% is REQUIRED — without it SVG elements
   default to their intrinsic 300×150, leaving a visible dark rectangle. */
.scl-grain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  mix-blend-mode: multiply; opacity: .32; pointer-events: none;
}
.scl-fibers {
  position: absolute; inset: 0; width: 100%; height: 100%;
  mix-blend-mode: multiply; opacity: .5; pointer-events: none;
}

/* Curl shadow where the parchment disappears behind each roller. */
.scl-curl { position: absolute; left: 0; right: 0; height: 38px; pointer-events: none; }
.scl-curl-top {
  top: 0;
  background: linear-gradient(to bottom,
    rgba(35, 18, 4, .85) 0%, rgba(50, 28, 8, .55) 28%,
    rgba(70, 40, 12, .22) 60%, transparent 100%);
}
.scl-curl-bot {
  bottom: 0;
  background: linear-gradient(to top,
    rgba(35, 18, 4, .85) 0%, rgba(50, 28, 8, .55) 28%,
    rgba(70, 40, 12, .22) 60%, transparent 100%);
}
.scl-h .scl-curl { top: 0; bottom: 0; left: auto; right: auto; width: 38px; height: auto; }
.scl-h .scl-curl-top {
  left: 0;
  background: linear-gradient(to right,
    rgba(35, 18, 4, .85) 0%, rgba(50, 28, 8, .55) 28%,
    rgba(70, 40, 12, .22) 60%, transparent 100%);
}
.scl-h .scl-curl-bot {
  right: 0;
  background: linear-gradient(to left,
    rgba(35, 18, 4, .85) 0%, rgba(50, 28, 8, .55) 28%,
    rgba(70, 40, 12, .22) 60%, transparent 100%);
}

/* Content — fades + slides in once the scroll is nearly open. */
.scl-content {
  position: absolute; inset: 0;
  padding: var(--contentPad, 32px);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--ink, #3b2410);
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
  transition-delay: 0s;
  pointer-events: auto;
}
.scl[data-open="1"] .scl-content {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--scl-dur, 1.4s) * .55);
}

/* Rollers — z-index keeps them above the parchment so the parchment's
   flat edge tucks behind them. */
.scl-roller { position: absolute; pointer-events: auto; z-index: 2; }
.scl-v .scl-roller { left: -12px; right: -12px; height: var(--rollerSize); }
.scl-v .scl-roller-top { top: 0; }
.scl-v .scl-roller-bot { bottom: 0; }
.scl-h .scl-roller { top: -12px; bottom: -12px; width: var(--rollerSize); }
.scl-h .scl-roller-top { left: 0; }
.scl-h .scl-roller-bot { right: 0; }

.scl-rod {
  position: absolute; inset: 8px 18px;
  border-radius: 50% / 100%;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, .45) 0%,
    var(--w-edge) 6%, var(--w-mid) 22%, var(--w-hi) 48%,
    var(--w-mid) 74%, var(--w-edge) 94%,
    rgba(0, 0, 0, .45) 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 230, 180, .18),
    inset 0 -3px 6px rgba(0, 0, 0, .35),
    0 4px 10px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.scl-h .scl-rod {
  inset: 18px 8px;
  background: linear-gradient(to right,
    rgba(0, 0, 0, .45) 0%,
    var(--w-edge) 6%, var(--w-mid) 22%, var(--w-hi) 48%,
    var(--w-mid) 74%, var(--w-edge) 94%,
    rgba(0, 0, 0, .45) 100%);
}

.scl-grain-rod {
  position: absolute; inset: 0; width: 100%; height: 100%;
  mix-blend-mode: multiply; opacity: .55;
  will-change: transform;
  transition: transform var(--scl-dur, 1.4s) cubic-bezier(.22, .61, .36, 1);
}

.scl-ring {
  position: absolute;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, .55), rgba(255, 220, 170, .25) 40%, rgba(0, 0, 0, .55));
}
.scl-v .scl-ring {
  top: 8px; bottom: 8px; width: 6px;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .4);
}
.scl-v .scl-ring-l { left: 24px; }
.scl-v .scl-ring-r { right: 24px; }
.scl-h .scl-ring {
  left: 8px; right: 8px; height: 6px;
  background: linear-gradient(to right,
    rgba(0, 0, 0, .55), rgba(255, 220, 170, .25) 40%, rgba(0, 0, 0, .55));
}
.scl-h .scl-ring-l { top: 24px; }
.scl-h .scl-ring-r { bottom: 24px; }

.scl-cap {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe8a8, #b48a3a 55%, #5e3f10 100%);
  box-shadow:
    inset 0 -2px 4px rgba(40, 20, 0, .6),
    inset 0 1px 1px rgba(255, 255, 220, .6),
    0 2px 4px rgba(0, 0, 0, .45);
}
.scl-v .scl-cap { top: 50%; width: 18px; height: 18px; transform: translateY(-50%); }
.scl-v .scl-cap-l { left: -2px; }
.scl-v .scl-cap-r { right: -2px; }
.scl-h .scl-cap { left: 50%; width: 18px; height: 18px; transform: translateX(-50%); }
.scl-h .scl-cap-t { top: -2px; }
.scl-h .scl-cap-b { bottom: -2px; }

/* Parchment palettes */
.scl[data-parch="aged"]   { --p-hi:#f1ddae; --p-mid:#d4b377; --p-lo:#a8814a; --ink:#3a2410; }
.scl[data-parch="ivory"]  { --p-hi:#fbf0d4; --p-mid:#ead7a8; --p-lo:#c9a974; --ink:#3a2410; }
.scl[data-parch="vellum"] { --p-hi:#e6cf94; --p-mid:#c19e5e; --p-lo:#8e6432; --ink:#2a1808; }
.scl[data-parch="dark"]   { --p-hi:#9b7741; --p-mid:#6d4a23; --p-lo:#3b240e; --ink:#f4e4c3; }

/* Wood palettes */
.scl[data-wood="walnut"]   { --w-hi:#7a4a22; --w-mid:#4a2810; --w-edge:#1f0e05; }
.scl[data-wood="oak"]      { --w-hi:#a07442; --w-mid:#6e4923; --w-edge:#2e1a09; }
.scl[data-wood="ebony"]    { --w-hi:#3a2a22; --w-mid:#1d130d; --w-edge:#0a0604; }
.scl[data-wood="rosewood"] { --w-hi:#864734; --w-mid:#52271c; --w-edge:#240e09; }

/* Content typography helpers (optional — author content can override). */
.scroll-title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px);
  margin: 0 0 6px;
  text-align: center; color: inherit; letter-spacing: .04em;
}
.scroll-rule {
  height: 1px; margin: 0 auto 14px; width: 60%;
  background: linear-gradient(to right, transparent, currentColor, transparent);
  opacity: .4;
}
.scroll-body {
  margin: 0 0 14px;
  font-size: clamp(14px, 1.4vw, 17px); line-height: 1.55;
  text-align: center; color: inherit; text-wrap: pretty;
}
.scroll-sig {
  margin: 6px 0 0; text-align: right; font-style: italic; font-size: 13px;
  color: inherit; opacity: .7;
}
.scroll-salutation {
  display: block; text-align: left;
  margin: 0 0 1em;
  font-size: clamp(14px, 1.4vw, 17px); line-height: 1.55;
  color: inherit;
}
.scroll-body.letter-body {
  text-align: left;
}
#scroll-note .scroll-sig {
  font-size: 16px; font-weight: 600;
}

/* =====================================================================
   WAX SEAL BUTTON — from Ancient Scroll demo (seal-button styles only)
   ===================================================================== */
.seal {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: rgba(244, 228, 195, .85); font-family: inherit;
}
.seal-inner {
  position: relative; width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #d44a3a 0%, #8a1f12 55%, #4a0a05 100%);
  box-shadow:
    inset 0 -6px 12px rgba(0, 0, 0, .55),
    inset 0 3px 4px rgba(255, 200, 180, .35),
    0 6px 14px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(0, 0, 0, .4);
  transition: transform .25s cubic-bezier(.3, .7, .4, 1), box-shadow .25s;
  display: grid; place-items: center;
}
.seal:hover .seal-inner {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    inset 0 -6px 12px rgba(0, 0, 0, .55),
    inset 0 3px 4px rgba(255, 200, 180, .45),
    0 10px 20px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(0, 0, 0, .4),
    0 0 30px rgba(220, 90, 70, .35);
}
.seal:active .seal-inner { transform: translateY(1px) scale(.98); }
.seal-mark {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 24px;
  color: #fde0c0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  mix-blend-mode: overlay;
  transition: transform .4s cubic-bezier(.3, .7, .4, 1);
}
.seal.is-open .seal-mark { transform: rotate(180deg); }
.seal-ring {
  position: absolute; inset: 6px; border-radius: 50%;
  border: 1px dashed rgba(255, 220, 180, .35);
  pointer-events: none;
}
.seal-label {
  font-family: 'IM Fell English SC', serif;
  letter-spacing: .18em; font-size: 11px; text-transform: uppercase;
  color: rgba(244, 228, 195, .7);
}