/* ==========================================================================
   theme.css: the ruined-castle layer, loaded last on every page.

   - Stone: a faint masonry texture behind every page.
   - Walls: crenellated header edge and crumbling wall tops between bands.
   - Ivy: vines generated by js/ui/ornaments.js, grown on scroll.
   - Reveal: scroll-in motion for sections and cards (js/ui/reveal.js).
   - Intro: the hero-silhouette opening (js/ui/intro.js).
   Motion is skipped when the visitor prefers reduced motion or turns it
   off in Settings (:root[data-reduce-motion='true']).
   ========================================================================== */

:root {
  --stone:
    /* grain */
    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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    /* masonry courses */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='120'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.32' stroke-width='1.5'%3E%3Cpath d='M0 .75h260M0 60.75h260M90 0v60M220 0v60M30 60v60M160 60v60'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.025'%3E%3Cpath d='M0 2.25h260M0 62.25h260'/%3E%3C/g%3E%3C/svg%3E");
}
/* ---------- Stone ---------- */
body { background-color: var(--bg); background-image: var(--stone); }

/* Gold on dark reads like gilt lettering; give headings a carved edge. */
h1, h2, .hero-title, .how-title { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 -1px 0 rgba(255, 236, 190, 0.04); }

/* Ivy sprig before section kickers. */
.section-kicker::before { content: ''; width: 22px; height: 14px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M1 10C6 7 12 9 21 4' fill='none' stroke='%235d7a3e' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M8 8C6 4 8 1 10 1c0 3 1 5-2 7zM14 6c1-4 4-5 6-4-1 3-3 4-6 4zM4 10C1 8 1 5 2 4c2 1 3 3 2 6z' fill='%2386a35a'/%3E%3C/svg%3E") no-repeat center / contain; }

/* ---------- Header: battlements ---------- */
.site-header { background: rgba(12, 11, 9, 0.96); border-bottom: 0; }
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -9px;
  height: 10px;
  background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='10'%3E%3Cpath d='M0 0h72v3H58v7H44V3H28v7H14V3H0z'/%3E%3C/svg%3E") repeat-x 0 0 / 72px 10px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='10'%3E%3Cpath d='M0 0h72v3H58v7H44V3H28v7H14V3H0z'/%3E%3C/svg%3E") repeat-x 0 0 / 72px 10px;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.site-header.is-overlay { background: transparent; }
.site-header.is-overlay::after { opacity: 0; }
.site-header.is-overlay.is-scrolled { background: rgba(12, 11, 9, 0.96); }
.site-header.is-overlay.is-scrolled::after { opacity: 1; }
.brand-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; color: var(--accent); }
.brand img { width: 26px; height: 26px; }
.nav-link { font-family: var(--font-display); letter-spacing: 0.12em; font-weight: 600; }
.nav-link[aria-current='page'] { border-bottom-color: var(--accent); }

/* ---------- Crumbling wall tops between bands ---------- */
/* Each band paints its own broken battlement over the band above it. */
.wall-top, .site-footer { position: relative; }
/* Band colours (opaque, with the stone texture laid over them). */
.ticker { --wall-color: #0d0c0a; background-color: #0d0c0a; }
.catalogue { --wall-color: #1a1814; background-color: #1a1814; }
.how { --wall-color: #12110e; background-color: #12110e; }
.gallery { --wall-color: #0d0c0a; background-color: #0d0c0a; }
.news { --wall-color: #12110e; background-color: #12110e; }
.site-footer { --wall-color: #0a0908; background-color: #0a0908; }
.ticker, .catalogue, .how, .gallery, .news, .site-footer { background-image: var(--stone); border-top: 0 !important; border-bottom: 0 !important; }
.wall-top::before, .site-footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -15px;
  height: 16px;
  background: var(--wall-color, var(--bg));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='16' preserveAspectRatio='none'%3E%3Cpath d='M0 16V6h22V2h26v4h18V5h3V1h24v6h20V8l4-3 6 2 5-4 3 3h4v4h22V2h25v6h19V3h24v6h20l3 2 4-3 5 2 6-1 4 3h10V2h25v6h19V1h25v7h20V3h24v6h18l4-2 3 3 6-2 5 3 2-1h6V2h25v6h20V2h24v6h19V3h25v5h20V2h24v6h18V3h20v13z'/%3E%3C/svg%3E") repeat-x 0 0 / 640px 16px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='16' preserveAspectRatio='none'%3E%3Cpath d='M0 16V6h22V2h26v4h18V5h3V1h24v6h20V8l4-3 6 2 5-4 3 3h4v4h22V2h25v6h19V3h24v6h20l3 2 4-3 5 2 6-1 4 3h10V2h25v6h19V1h25v7h20V3h24v6h18l4-2 3 3 6-2 5 3 2-1h6V2h25v6h20V2h24v6h19V3h25v5h20V2h24v6h18V3h20v13z'/%3E%3C/svg%3E") repeat-x 0 0 / 640px 16px;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Ivy ---------- */
.vine { position: absolute; pointer-events: none; overflow: visible; z-index: 2; }
.vine-stem { fill: none; stroke: var(--ivy-dark); stroke-linecap: round; }
.vine-stem.is-thin { stroke: var(--ivy); }
.vine-leaf { transform-box: fill-box; transform-origin: 50% 100%; }
.vine-leaf.l1 { fill: var(--ivy); }
.vine-leaf.l2 { fill: var(--ivy-dark); }
.vine-leaf.l3 { fill: var(--ivy-light); }
.vine.is-animated .vine-stem { stroke-dashoffset: var(--len); transition: stroke-dashoffset 1800ms cubic-bezier(.3, .6, .25, 1); }
.vine.is-animated .vine-leaf { transform: scale(0); transition: transform 520ms cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--t0) * 1500ms + 200ms); }
.vine.is-animated.is-grown .vine-stem { stroke-dashoffset: 0; }
.vine.is-animated.is-grown .vine-leaf { transform: scale(1); }
/* Scroll-linked vines (the How it works route) are driven by --grow. */
.vine.is-scrubbed .vine-stem { stroke-dashoffset: calc(var(--len) * (1 - var(--grow, 0))); transition: none; }
.vine.is-scrubbed .vine-leaf { transform: scale(0); transition: transform 420ms cubic-bezier(.3, 1.6, .5, 1); }
.vine.is-scrubbed .vine-leaf.is-on { transform: scale(1); }

/* ---------- Scroll reveal ---------- */
:root.has-reveal .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms ease, transform 850ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--ri, 0) * 75ms);
}
:root.has-reveal .reveal.reveal-rise { transform: translateY(34px) rotate(-0.6deg); }
:root.has-reveal .reveal.reveal-carve { transform: none; clip-path: inset(0 100% 0 0); transition: opacity 500ms ease, clip-path 1100ms cubic-bezier(.6, .1, .2, 1); }
:root.has-reveal .reveal.is-revealed { opacity: 1; transform: none; clip-path: inset(0 -2% 0 0); }

/* ---------- Hero ruins ---------- */
.hero-ruins {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: min(58%, 420px);
  z-index: 0;
  pointer-events: none;
  transform: translate3d(0, var(--parallax, 0px), 0);
}
.hero-ruins svg { width: 100%; height: 100%; }
.hero-ruins .ruin-far { fill: #19170f; }
.hero-ruins .ruin-near { fill: #201d16; }
.hero-ruins .ruin-window { fill: #0f0e0b; }
.hero > *:not(.hero-ruins) { position: relative; z-index: 1; }

/* Hanging edge vines would crowd narrow screens. */
@media (max-width: 720px) { .vine.is-edge { display: none; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root.has-reveal .reveal { opacity: 1; transform: none; clip-path: none; transition: none; }
  .vine.is-animated .vine-stem, .vine.is-scrubbed .vine-stem { stroke-dashoffset: 0; transition: none; }
  .vine.is-animated .vine-leaf, .vine.is-scrubbed .vine-leaf { transform: none; transition: none; }
  .hero-ruins { transform: none; }
}
:root[data-reduce-motion='true'].has-reveal .reveal { opacity: 1; transform: none; clip-path: none; transition: none; }
:root[data-reduce-motion='true'] .vine .vine-stem { stroke-dashoffset: 0 !important; transition: none; }
:root[data-reduce-motion='true'] .vine .vine-leaf { transform: none !important; transition: none; }
:root[data-reduce-motion='true'] .hero-ruins { transform: none; }

/* ==========================================================================
   Intro: a treasure map. A trail inks its way to the X, then a gust tears
   the map into scraps that blow away (drawn by js/ui/intro.js).
   html.intro-on is set by the inline gate in <head> (once per visit).
   ========================================================================== */
:root.intro-on { overflow: hidden; }
/* Cover the page until the intro script mounts, so the site never flashes. */
:root.intro-on:not(.intro-mounted) body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #e6cf9b;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #e6cf9b;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.intro-cam {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  opacity: var(--fade, 0);
  will-change: transform;
}
.intro-base { position: absolute; }
.intro-ink { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-ink { overflow: visible; }
.intro-ink .x-mark { transform-box: fill-box; transform-origin: center; transform: scale(calc(1 + var(--stamp, 0) * 0.18)); }
.intro-shards { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }

/* During the gust the scraps are all that is left; the site shows through. */
.intro.is-blowing { background: transparent; }
.intro.is-blowing .intro-cam { display: none; }
.intro.is-blowing .intro-shards { display: block; }
.intro.is-fading { opacity: 0; transition: opacity 240ms ease; }

.intro-skip {
  position: absolute;
  right: 20px; bottom: 18px;
  padding: 6px 12px;
  border: 1px solid rgba(74, 53, 32, 0.45);
  border-radius: 2px;
  background: rgba(241, 225, 182, 0.8);
  color: #3a2814;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.intro-skip:focus-visible { outline: 2px solid #4a3520; outline-offset: 2px; }
.intro.is-blowing .intro-skip { display: none; }