/* ═══════════════════════════════════════════════════════════════════════════
   SHANGRI-LA COMMUNITY — bespoke guild page
   A hidden-valley sanctuary: deep jade dark, gold-leaf deco linework, mist,
   lotus + sun motifs. Display: Newsreader · Body: Manrope · Mono: JetBrains.
   All rules are scoped under .sl-root so nothing bleeds into site chrome.
   ═══════════════════════════════════════════════════════════════════════════ */

.sl-root {
  /* surfaces — twilight indigo/plum, drawn from the hero illustration (image 1) */
  --sl-ink:    #1a1622;
  --sl-bg:     #221d2e;
  --sl-panel:  #2a2336;
  --sl-panel-2:#332a42;
  --sl-line:   rgba(217,177,90,.16);
  --sl-line-2: rgba(217,177,90,.30);

  /* dusk accents — terracotta + clay + gold (the hero's warm masonry) */
  --sl-jade:   #a36b5a;   /* terracotta (kept var name for component reuse) */
  --sl-jade-lo:#3b2528;   /* deep clay shadow */
  --sl-jade-hi:#bc8e7d;   /* warm clay */
  --sl-gold:   #d9b15a;
  --sl-gold-2: #f0d089;
  --sl-gold-3: #b88f3f;
  --sl-mist:   #f4eee4;

  /* ink */
  --sl-text:   #ece6ef;
  --sl-soft:   #c2b3c4;
  --sl-mute:   #8d7f97;
  --sl-faint:  #5d5168;

  /* fonts */
  --sl-disp: 'Newsreader', Georgia, serif;
  --sl-body: 'Manrope', system-ui, sans-serif;
  --sl-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* motion + geometry */
  --sl-ease: cubic-bezier(.22,.78,.27,1);
  --sl-ease-expo: cubic-bezier(.16,1,.3,1);
  --sl-rad: 16px;
  --sl-maxw: 1240px;
  --sl-gutter: clamp(20px, 5vw, 64px);

  position: relative;
  color: var(--sl-text);
  font-family: var(--sl-body);
  line-height: 1.7;
  isolation: isolate;
  /* Consistent grayscale smoothing across the whole page. The ink-wash heading
     wipe uses mask-image, which forces those headings onto their own compositing
     layer where the browser drops from subpixel to grayscale AA — making masked
     headings look fuzzier than surrounding text. Forcing grayscale everywhere
     makes all text match (and reads crisper on this dark backdrop). */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── page atmosphere: jade blooms + faint gold dust ─────────────────────── */
.sl-root::before {
  content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(1100px 700px at 78% -10%, rgba(31,111,99,.20), transparent 60%),
    radial-gradient(900px 760px at 6% 6%, rgba(217,177,90,.07), transparent 62%),
    radial-gradient(1400px 900px at 50% 120%, rgba(14,59,52,.45), transparent 70%),
    var(--sl-ink);
}

.sl-root *,
.sl-root *::before,
.sl-root *::after { box-sizing: border-box; }

.sl-root img { display: block; max-width: 100%; }

/* ── scroll reveal ──────────────────────────────────────────────────────── */
.sl-root .sl-reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--sl-ease), transform .9s var(--sl-ease);
}
.sl-root .sl-reveal.is-in { opacity: 1; transform: none; }
.sl-root .sl-reveal[data-d="1"] { transition-delay: .08s; }
.sl-root .sl-reveal[data-d="2"] { transition-delay: .16s; }
.sl-root .sl-reveal[data-d="3"] { transition-delay: .24s; }
.sl-root .sl-reveal[data-d="4"] { transition-delay: .32s; }

/* ── entrance hold ────────────────────────────────────────────────────────
   The observer marks the hero's reveals `.is-in` on load — but the hero is at
   the top of the page, so that cascade plays behind the closed gate and the
   arrival moment is wasted. While the gate is up, this higher-specificity rule
   pins the hero reveals back to their hidden state (and adds a soft blur). When
   the gate lifts, JS flips data-sl-gate to "open", the rule stops matching, and
   `.is-in` takes over — so the valley FOCUSES IN as the gate blurs OUT. */
.sl-hero .sl-reveal {
  transition: opacity .9s var(--sl-ease), transform .9s var(--sl-ease), filter .9s var(--sl-ease);
}
.sl-root[data-sl-gate="up"] .sl-hero .sl-reveal {
  opacity: 0; transform: translateY(30px); filter: blur(6px);
}

/* ─────────────────────────────────────────────────────────────────────────
   SHARED PRIMITIVES
   ───────────────────────────────────────────────────────────────────────── */
.sl-wrap { max-width: var(--sl-maxw); margin: 0 auto; padding-inline: var(--sl-gutter); }

.sl-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sl-mono); font-size: 11px; letter-spacing: .32em;
  text-transform: uppercase; color: var(--sl-gold);
}
.sl-kicker::before,
.sl-kicker--center::after {
  content: ''; width: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sl-gold));
  opacity: .7;
}
.sl-kicker--center { justify-content: center; }
.sl-kicker--center::after { background: linear-gradient(90deg, var(--sl-gold), transparent); }

.sl-h2 {
  font-family: var(--sl-disp); font-weight: 500;
  font-size: clamp(28px, 4vw, 46px); line-height: 1.12; letter-spacing: -.01em;
  margin: 18px 0 0; color: var(--sl-mist);
}
.sl-h2 em { font-style: italic; color: var(--sl-gold-2); }

.sl-lead {
  font-family: var(--sl-disp); font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.55; color: var(--sl-text); font-weight: 400;
}

/* lotus / sun emblem ornament (no flanking rules — clean glyph only) */
.sl-emblem {
  display: flex; align-items: center; justify-content: center;
  color: var(--sl-gold); margin: 0 auto;
}
.sl-emblem__mark { font-size: 20px; letter-spacing: .4em; opacity: .85; }

/* deco gold corner brackets (applied to .sl-bracket containers) */
.sl-bracket { position: relative; }
.sl-bracket::before, .sl-bracket::after {
  content: ''; position: absolute; width: 22px; height: 22px;
  border: 1px solid var(--sl-line-2); pointer-events: none;
}
.sl-bracket::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.sl-bracket::after  { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────────────────── */
.sl-hero {
  position: relative; min-height: min(92vh, 880px);
  display: flex; flex-direction: column; justify-content: flex-end;
  width: 100vw; margin-left: calc(50% - 50vw);
  padding: clamp(120px, 16vh, 200px) var(--sl-gutter) clamp(54px, 8vh, 96px);
  overflow: hidden; isolation: isolate;
}
.sl-hero__bg {
  position: absolute; inset: 0; z-index: -3;
  background: var(--sl-jade-lo) center 34% / cover no-repeat;
  animation: slDrift 36s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes slDrift { from { transform: scale(1.02); } to { transform: scale(1.09); } }

/* layered scrim — legibility left, resolves to page color at the bottom seam */
.sl-hero__scrim {
  position: absolute; inset: 0; z-index: -2; background:
    linear-gradient(180deg, rgba(6,16,14,.46) 0%, rgba(6,16,14,.10) 26%, rgba(6,16,14,.58) 66%, var(--sl-ink) 100%),
    radial-gradient(1200px 680px at 14% 120%, rgba(31,111,99,.42), transparent 60%),
    linear-gradient(90deg, rgba(6,16,14,.84) 0%, rgba(6,16,14,.36) 40%, transparent 70%);
}
/* faint gold dust + grain over the hero photo */
.sl-hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(240,208,137,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 50%, rgba(240,208,137,.25), transparent 60%),
    radial-gradient(2px 2px at 45% 70%, rgba(240,208,137,.30), transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 22%, rgba(240,208,137,.22), transparent 60%);
}

.sl-hero__inner { position: relative; z-index: 2; max-width: 760px; }

.sl-hero__crest {
  width: clamp(78px, 11vw, 116px); height: auto; margin-bottom: 26px;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.55));
}
/* ── brass-medallion crest: relief + pointer-tracked rim-light + slow breathe.
   The rim-light angle follows --sl-rx/--sl-ry (set by JS on pointer move). */
.sl-hero__crest--medallion {
  position: relative; border-radius: 50%; padding: 0;
  --sl-rx: 50%; --sl-ry: 30%;
  filter:
    drop-shadow(0 10px 30px rgba(0,0,0,.55))
    drop-shadow(0 0 14px rgba(217,177,90,.18));
  animation: slCrestBreathe 7s ease-in-out infinite;
}
.sl-hero__crest-wrap {
  position: relative; display: inline-grid; place-items: center; margin-bottom: 26px;
  border-radius: 50%;
}
.sl-hero__crest-wrap::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at var(--sl-rx, 50%) var(--sl-ry, 30%),
    rgba(240,208,137,.55), rgba(217,177,90,.10) 42%, transparent 68%);
  opacity: .9; transition: opacity .4s var(--sl-ease); mix-blend-mode: screen;
}
@keyframes slCrestBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.sl-hero__kicker { margin-bottom: 22px; }
.sl-hero__title {
  font-family: var(--sl-disp); font-weight: 500;
  font-size: clamp(46px, 9vw, 104px); line-height: .98; letter-spacing: -.015em;
  margin: 0; color: var(--sl-mist);
  text-shadow: 0 2px 40px rgba(0,0,0,.5);
}
.sl-hero__title em { font-style: italic; color: var(--sl-gold-2); }

/* ── editorial title: oversized, overlapping, gold "La" breaking the baseline
   on a subtle diagonal. Reads as a magazine masthead, not a centered template. */
.sl-hero__title--editorial {
  display: inline-flex; align-items: flex-start; flex-wrap: wrap;
  column-gap: clamp(8px, 1.4vw, 20px); line-height: .82;
  text-shadow: 0 2px 40px rgba(0,0,0,.5);
}
.sl-hero__title--editorial .sl-hero__title-a {
  font-size: clamp(48px, 11vw, 132px); letter-spacing: -.03em;
}
.sl-hero__title--editorial .sl-hero__title-b {
  font-style: italic; color: var(--sl-gold-2);
  font-size: clamp(58px, 13.5vw, 168px); letter-spacing: -.02em;
  transform: translateY(.16em) rotate(-3.5deg);
  transform-origin: left bottom;
  text-shadow: 0 6px 44px rgba(217,177,90,.32);
}
@media (max-width: 600px) {
  .sl-hero__title--editorial .sl-hero__title-b { transform: translateY(.08em) rotate(-3deg); }
}
.sl-hero__sub {
  margin: 24px 0 0; max-width: 580px;
  font-family: var(--sl-disp); font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.6; color: var(--sl-soft);
}
.sl-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

/* buttons */
.sl-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 99px;
  font-family: var(--sl-body); font-weight: 600; font-size: 14px;
  letter-spacing: .02em; transition: all .3s var(--sl-ease); cursor: pointer;
}
.sl-btn .arr { transition: transform .3s var(--sl-ease); }
.sl-btn:hover .arr { transform: translateX(5px); }
.sl-btn--gold {
  background: linear-gradient(135deg, var(--sl-gold-2), var(--sl-gold));
  color: #1a1408; box-shadow: 0 8px 30px rgba(217,177,90,.28);
}
.sl-btn--gold:hover { box-shadow: 0 12px 40px rgba(217,177,90,.42); transform: translateY(-2px); }
.sl-btn--ghost {
  background: rgba(244,239,226,.04); color: var(--sl-mist);
  border: 1px solid var(--sl-line-2);
}
.sl-btn--ghost:hover { border-color: var(--sl-gold); background: rgba(217,177,90,.10); }

/* scroll cue */
.sl-hero__scroll {
  position: relative; z-index: 2; align-self: center; margin-top: clamp(40px, 6vh, 72px);
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--sl-mono); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--sl-mute);
}
.sl-hero__scroll-icon {
  width: 1px; height: 40px; background: linear-gradient(180deg, var(--sl-gold), transparent);
  animation: slScroll 2.4s var(--sl-ease) infinite;
}
@keyframes slScroll { 0%,100%{ opacity:.3; transform: scaleY(.7); } 50%{ opacity:1; transform: scaleY(1); } }

/* ─────────────────────────────────────────────────────────────────────────
   MANIFESTO
   ───────────────────────────────────────────────────────────────────────── */
.sl-manifesto { padding: clamp(80px, 12vh, 150px) 0 clamp(40px, 6vh, 80px); text-align: center; }
.sl-manifesto__inner { max-width: 760px; margin: 0 auto; }
.sl-manifesto .sl-lead { margin-top: 26px; }
.sl-manifesto__body {
  margin-top: 22px; color: var(--sl-soft); font-size: 17px; line-height: 1.85;
}
.sl-manifesto__sign {
  margin-top: 34px; font-family: var(--sl-disp); font-style: italic;
  font-size: 20px; color: var(--sl-gold-2);
}

/* ─────────────────────────────────────────────────────────────────────────
   FOUNDING MARK
   ───────────────────────────────────────────────────────────────────────── */
.sl-found {
  display: flex; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 56px);
  flex-wrap: wrap; padding: clamp(46px, 7vh, 80px) 0; text-align: center;
}
.sl-found__year {
  font-family: var(--sl-disp); font-weight: 500; line-height: 1;
  font-size: clamp(58px, 11vw, 132px);
  background: linear-gradient(180deg, var(--sl-gold-2), var(--sl-gold-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sl-found__label {
  max-width: 280px; text-align: left;
  font-family: var(--sl-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sl-mute); line-height: 1.7;
}
.sl-found__label b { display: block; color: var(--sl-text); font-size: 15px; letter-spacing: .04em; margin-bottom: 4px; }

/* ─────────────────────────────────────────────────────────────────────────
   THE GUILDS
   ───────────────────────────────────────────────────────────────────────── */
.sl-guilds { padding: clamp(70px, 10vh, 130px) 0; }
.sl-guilds__head { text-align: center; max-width: 640px; margin: 0 auto clamp(44px, 6vh, 72px); }
.sl-guilds__head p { margin-top: 16px; color: var(--sl-soft); }

.sl-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.sl-card {
  position: relative; padding: 30px 28px 28px; border-radius: var(--sl-rad);
  background: linear-gradient(165deg, var(--sl-panel-2), var(--sl-panel));
  border: 1px solid var(--sl-line);
  overflow: hidden; transition: transform .4s var(--sl-ease), border-color .4s var(--sl-ease), box-shadow .4s var(--sl-ease);
}
.sl-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px 200px at 80% -10%, rgba(217,177,90,.16), transparent 60%);
  transition: opacity .4s var(--sl-ease);
}
.sl-card:hover {
  transform: translateY(-5px); border-color: var(--sl-line-2);
  box-shadow: 0 22px 50px rgba(0,0,0,.4);
}
.sl-card:hover::after { opacity: 1; }

.sl-card__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.sl-card__glyph {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 11px;
  display: grid; place-items: center; font-size: 20px; color: var(--sl-gold-2);
  background: rgba(217,177,90,.08); border: 1px solid var(--sl-line);
}
.sl-card__tag {
  font-family: var(--sl-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 99px; border: 1px solid var(--sl-line-2); color: var(--sl-soft);
}
.sl-card__tag--trade { color: var(--sl-gold-2); border-color: rgba(217,177,90,.5); background: rgba(217,177,90,.06); }
.sl-card__name { font-family: var(--sl-disp); font-size: 24px; font-weight: 500; color: var(--sl-mist); margin: 0; }
.sl-card__role { margin: 8px 0 0; font-size: 14px; color: var(--sl-soft); }
.sl-card__meta {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sl-line);
  font-family: var(--sl-mono); font-size: 12px; letter-spacing: .04em; color: var(--sl-mute);
}
.sl-card__meta b { color: var(--sl-gold-2); }

/* ─────────────────────────────────────────────────────────────────────────
   PvE STATICS
   ───────────────────────────────────────────────────────────────────────── */
.sl-pve {
  position: relative; padding: clamp(70px, 10vh, 130px) 0;
  width: 100vw; margin-left: calc(50% - 50vw);
}
.sl-pve::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, transparent, rgba(63,94,126,.22) 40%, transparent),
    radial-gradient(900px 400px at 50% 50%, rgba(79,113,150,.14), transparent 70%);
}
.sl-pve__inner { max-width: var(--sl-maxw); margin: 0 auto; padding-inline: var(--sl-gutter); text-align: center; }
.sl-pve__head { max-width: 660px; margin: 0 auto; }
.sl-pve__head p { margin-top: 16px; color: var(--sl-soft); }
.sl-statics { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: clamp(36px, 5vh, 56px); }
.sl-static {
  position: relative; min-width: 240px; flex: 1 1 240px; max-width: 340px;
  padding: 28px 26px; border-radius: var(--sl-rad); text-align: left;
  background: linear-gradient(165deg, rgba(16,47,40,.7), rgba(12,36,31,.7));
  border: 1px solid var(--sl-line-2); backdrop-filter: blur(6px);
}
.sl-static__icon { font-size: 22px; color: var(--sl-gold-2); }
.sl-static__name { font-family: var(--sl-disp); font-size: 22px; color: var(--sl-mist); margin: 14px 0 6px; }
.sl-static__desc { font-size: 14px; color: var(--sl-soft); margin: 0; }
.sl-static__badge {
  display: inline-block; margin-top: 14px;
  font-family: var(--sl-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sl-gold-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOUSES GALLERY — a grid of member homes (placeholder shell until linked)
   ═══════════════════════════════════════════════════════════════════════════ */
.sl-gallery { padding: clamp(70px, 10vh, 130px) 0; }
.sl-gallery__head { text-align: center; max-width: 640px; margin: 0 auto clamp(40px, 6vh, 64px); }
.sl-gallery__head p { margin-top: 16px; color: var(--sl-soft); }
.sl-gallery__grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.sl-house {
  position: relative; display: block; border-radius: var(--sl-rad); overflow: hidden;
  background: linear-gradient(165deg, var(--sl-panel-2), var(--sl-panel));
  border: 1px solid var(--sl-line);
  transition: transform .4s var(--sl-ease), border-color .4s var(--sl-ease), box-shadow .4s var(--sl-ease);
  text-decoration: none; color: inherit;
}
.sl-house:hover {
  transform: translateY(-5px); border-color: var(--sl-line-2);
  box-shadow: 0 22px 50px rgba(0,0,0,.4);
}
.sl-house__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(420px 220px at 50% 30%, rgba(217,177,90,.08), transparent 60%), var(--sl-jade-lo);
}
.sl-house__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sl-ease); }
.sl-house:hover .sl-house__media img { transform: scale(1.05); }
.sl-house__placeholder { font-size: 46px; color: var(--sl-gold-2); opacity: .5; }
.sl-house__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(6,16,14,.55));
}
.sl-house__body {
  position: relative; display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 16px 18px;
}
.sl-house__title { font-family: var(--sl-disp); font-size: 18px; font-weight: 500; color: var(--sl-mist); margin: 0; }
.sl-house__owner { font-family: var(--sl-mono); font-size: 11px; color: var(--sl-mute); white-space: nowrap; }
.sl-gallery__foot { text-align: center; margin-top: clamp(32px, 5vh, 52px); }

/* ─────────────────────────────────────────────────────────────────────────
   JOIN
   ───────────────────────────────────────────────────────────────────────── */
.sl-join { padding: clamp(80px, 12vh, 150px) 0 clamp(70px, 10vh, 130px); }
.sl-join__card {
  position: relative; max-width: 880px; margin: 0 auto; text-align: center;
  padding: clamp(46px, 7vw, 80px) clamp(28px, 6vw, 72px); border-radius: 24px;
  background: linear-gradient(160deg, var(--sl-panel-2), var(--sl-panel));
  border: 1px solid var(--sl-line-2); overflow: hidden;
}
.sl-join__card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(600px 320px at 50% -20%, rgba(217,177,90,.14), transparent 60%);
}
.sl-join__card > * { position: relative; z-index: 1; }
.sl-join__title { font-family: var(--sl-disp); font-size: clamp(28px, 4.4vw, 48px); font-weight: 500; color: var(--sl-mist); margin: 18px 0 0; }
.sl-join__title em { font-style: italic; color: var(--sl-gold-2); }
.sl-join__sub { margin: 18px auto 0; max-width: 520px; color: var(--sl-soft); }
.sl-join__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .sl-hero { min-height: 84vh; }
  .sl-hero__actions .sl-btn { flex: 1 1 100%; justify-content: center; }
  .sl-found { gap: 18px; }
  .sl-found__label { text-align: center; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THREE.JS SCENE CANVAS
   A fixed, behind-everything canvas holding the procedural pagoda + trees.
   Sits above the radial atmosphere (::before, z-index:-3) but below content.
   ═══════════════════════════════════════════════════════════════════════════ */
.sl-scene {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  opacity: 0; transition: opacity 1.6s var(--sl-ease);
}
.sl-scene.is-ready { opacity: 1; }
.sl-scene canvas { display: block; width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   DAY THEME — luminous sakura (white paper, pink blossom, deep gold)
   Toggled by [data-sl-theme="day"] on .sl-root. All the same --sl-* tokens
   are simply re-pointed, so every component recolors with no markup change.
   ═══════════════════════════════════════════════════════════════════════════ */
.sl-root[data-sl-theme="day"] {
  --sl-ink:    #f4eee4;
  --sl-bg:     #efe7da;
  --sl-panel:  #fbf7ef;
  --sl-panel-2:#fffdf8;
  --sl-line:   rgba(168,116,124,.18);
  --sl-line-2: rgba(176,116,86,.34);

  --sl-jade:   #cf8597;   /* sakura mid */
  --sl-jade-lo:#f0dad9;   /* pale blossom wash */
  --sl-jade-hi:#e2a7b3;
  --sl-gold:   #b07f3a;
  --sl-gold-2: #caa256;
  --sl-gold-3: #8c6228;
  --sl-mist:   #2a2018;   /* dark ink for headings on light */

  --sl-text:   #3a2f28;
  --sl-soft:   #6c5a4e;
  --sl-mute:   #968577;
  --sl-faint:  #c2b3a4;
}

/* day atmosphere: warm paper + blossom haze instead of jade blooms */
.sl-root[data-sl-theme="day"]::before {
  background:
    radial-gradient(1100px 700px at 78% -10%, rgba(207,133,151,.22), transparent 60%),
    radial-gradient(900px 760px at 6% 6%, rgba(202,162,86,.10), transparent 62%),
    radial-gradient(1400px 900px at 50% 120%, rgba(240,218,217,.6), transparent 70%),
    var(--sl-ink);
}

/* On day theme the hero scrim should brighten, not darken, the photo seam. */
.sl-root[data-sl-theme="day"] .sl-hero__scrim {
  background:
    linear-gradient(180deg, rgba(244,238,228,.30) 0%, rgba(244,238,228,.05) 26%, rgba(244,238,228,.55) 70%, var(--sl-ink) 100%),
    radial-gradient(1200px 680px at 14% 120%, rgba(207,133,151,.40), transparent 60%),
    linear-gradient(90deg, rgba(244,238,228,.78) 0%, rgba(244,238,228,.30) 40%, transparent 70%);
}
.sl-root[data-sl-theme="day"] .sl-hero__title,
.sl-root[data-sl-theme="day"] .sl-hero__sub { text-shadow: 0 2px 30px rgba(255,255,255,.5); }
.sl-root[data-sl-theme="day"] .sl-btn--gold { color: #fff; box-shadow: 0 8px 30px rgba(176,127,58,.28); }
.sl-root[data-sl-theme="day"] .sl-static { backdrop-filter: blur(6px); background: linear-gradient(165deg, rgba(255,255,255,.7), rgba(251,247,239,.7)); }

/* a softer, slower theme crossfade for the big tokens */
.sl-root,
.sl-root .sl-card,
.sl-root .sl-static,
.sl-root .sl-join__card,
.sl-root .sl-hero__scrim { transition: background-color .7s var(--sl-ease), color .7s var(--sl-ease), border-color .7s var(--sl-ease); }

/* ═══════════════════════════════════════════════════════════════════════════
   FLOATING CONTROLS DOCK — sound + theme toggles, bottom-right
   ═══════════════════════════════════════════════════════════════════════════ */
.sl-dock {
  position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px);
  z-index: 60; display: flex; gap: 10px; align-items: center;
}
.sl-dock__btn {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--sl-panel) 86%, transparent);
  border: 1px solid var(--sl-line-2); color: var(--sl-gold-2);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  transition: transform .3s var(--sl-ease), border-color .3s var(--sl-ease), color .3s var(--sl-ease);
}
.sl-dock__btn:hover { transform: translateY(-3px); border-color: var(--sl-gold); }
.sl-dock__btn svg { width: 20px; height: 20px; }
.sl-dock__btn .sl-ico-on,
.sl-dock__btn .sl-ico-off { display: none; }
.sl-dock__btn[data-state="on"]  .sl-ico-on  { display: block; }
.sl-dock__btn[data-state="off"] .sl-ico-off { display: block; }
/* sound button pulses softly while playing */
.sl-dock__btn--sound[data-state="on"] { animation: slPulse 3.2s var(--sl-ease) infinite; }
@keyframes slPulse {
  0%,100% { box-shadow: 0 8px 28px rgba(0,0,0,.28); }
  50%     { box-shadow: 0 8px 28px rgba(0,0,0,.28), 0 0 0 6px rgba(217,177,90,.10); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTRANCE GATE (custom loader) — a lotus/mandala threshold + audio opt-in
   ═══════════════════════════════════════════════════════════════════════════ */
.sl-gate {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; text-align: center; padding: 24px;
  background:
    radial-gradient(900px 600px at 50% 35%, rgba(31,111,99,.28), transparent 60%),
    radial-gradient(1200px 800px at 50% 120%, rgba(14,59,52,.5), transparent 70%),
    #06100e;
  transition: opacity 1.1s var(--sl-ease), visibility 1.1s var(--sl-ease),
              transform 1.1s var(--sl-ease), filter 1.1s var(--sl-ease);
}
/* Rack-focus exit: the gate scales forward and blurs out while the sharp hero
   (the same banner image) resolves behind it — passing through the gate into
   the valley, rather than a flat crossfade. */
.sl-gate.is-gone { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.06); filter: blur(5px); }

/* Gate content lifts away first (faster than the backdrop), so the eye is led
   up and out as the valley comes into focus. */
.sl-gate.is-gone > .sl-gate__mandala,
.sl-gate.is-gone > .sl-gate__tagline,
.sl-gate.is-gone > .sl-gate__brand,
.sl-gate.is-gone > .sl-gate__enter,
.sl-gate.is-gone > .sl-gate__hint {
  opacity: 0; transform: translateY(-16px);
  transition: opacity .5s var(--sl-ease), transform .6s var(--sl-ease);
}

/* the hero banner, dimmed and slowly drifting behind the loader content */
.sl-gate__banner {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: center 40% / cover no-repeat;
  opacity: .32; filter: saturate(.92);
  animation: slGateZoom 18s ease-in-out infinite alternate;
}
@keyframes slGateZoom { from { transform: scale(1.04); } to { transform: scale(1.12); } }
.sl-gate__banner-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(900px 600px at 50% 35%, rgba(31,111,99,.30), transparent 60%),
    radial-gradient(1200px 800px at 50% 120%, rgba(14,59,52,.55), transparent 70%),
    linear-gradient(180deg, rgba(6,16,14,.55), rgba(6,16,14,.78));
}
.sl-gate > .sl-gate__mandala,
.sl-gate > .sl-gate__tagline,
.sl-gate > .sl-gate__brand,
.sl-gate > .sl-gate__enter,
.sl-gate > .sl-gate__hint { position: relative; z-index: 2; }

.sl-gate__mandala { position: relative; width: 132px; height: 132px; color: var(--sl-gold); }
.sl-gate__ring {
  position: absolute; inset: 0; border: 1px solid var(--sl-line-2); border-radius: 50%;
  border-top-color: var(--sl-gold-2);
  animation: slSpin 2.8s linear infinite;
}
.sl-gate__ring:nth-child(2) { inset: 16px; border-top-color: transparent; border-right-color: var(--sl-gold-2); animation-duration: 3.8s; animation-direction: reverse; }
.sl-gate__ring:nth-child(3) { inset: 32px; border-top-color: transparent; border-left-color: var(--sl-gold-2); animation-duration: 2.2s; }
@keyframes slSpin { to { transform: rotate(360deg); } }
.sl-gate__lotus {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 34px; color: var(--sl-gold-2);
  animation: slBreathe 3.6s var(--sl-ease) infinite;
}
.sl-gate__crest {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px;
  object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
  animation: slBreathe 3.6s var(--sl-ease) infinite;
}
@keyframes slBreathe { 0%,100% { transform: scale(.92); opacity: .85; } 50% { transform: scale(1.04); opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL PROGRESS BAR — a thin gold meridian along the top of the viewport
   ═══════════════════════════════════════════════════════════════════════════ */
.sl-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--sl-gold-3), var(--sl-gold-2), var(--sl-gold));
  box-shadow: 0 0 12px rgba(217,177,90,.6);
  will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION DOT-NAV — vertical waypoint rail on the left
   ═══════════════════════════════════════════════════════════════════════════ */
.sl-dotnav {
  position: fixed; left: clamp(12px, 2.4vw, 26px); top: 50%; transform: translateY(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: 16px;
}
.sl-dotnav__dot {
  position: relative; width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--sl-line-2); background: transparent;
  transition: all .35s var(--sl-ease);
}
.sl-dotnav__dot::after {
  content: attr(data-label); position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-family: var(--sl-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sl-soft);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--sl-ease);
  background: color-mix(in srgb, var(--sl-panel) 88%, transparent);
  padding: 4px 9px; border-radius: 6px; border: 1px solid var(--sl-line);
}
.sl-dotnav__dot:hover { border-color: var(--sl-gold); transform: scale(1.2); }
.sl-dotnav__dot:hover::after { opacity: 1; }
.sl-dotnav__dot.is-active {
  background: var(--sl-gold-2); border-color: var(--sl-gold-2);
  box-shadow: 0 0 0 4px rgba(217,177,90,.14);
}
@media (max-width: 860px) { .sl-dotnav { display: none; } }

.sl-gate__brand {
  font-family: var(--sl-disp); font-size: clamp(30px, 6vw, 52px); font-weight: 500;
  letter-spacing: .01em; color: var(--sl-mist); margin: 0;
}
.sl-gate__brand em { font-style: italic; color: var(--sl-gold-2); }
.sl-gate__tagline {
  font-family: var(--sl-mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--sl-mute); margin: 0;
}
.sl-gate__enter {
  margin-top: 6px; padding: 15px 34px; border-radius: 99px;
  font-family: var(--sl-body); font-weight: 600; font-size: 15px; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--sl-gold-2), var(--sl-gold)); color: #1a1408;
  box-shadow: 0 10px 34px rgba(217,177,90,.3); cursor: pointer;
  transition: transform .3s var(--sl-ease), box-shadow .3s var(--sl-ease);
  opacity: 0; transform: translateY(12px); animation: slGateRise .7s var(--sl-ease) .5s forwards;
}
.sl-gate__enter:hover { transform: translateY(-2px); box-shadow: 0 14px 44px rgba(217,177,90,.45); }
@keyframes slGateRise { to { opacity: 1; transform: none; } }
.sl-gate__hint {
  font-family: var(--sl-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sl-faint);
  opacity: 0; animation: slGateRise .7s var(--sl-ease) .8s forwards;
}
.sl-gate__sub { display: inline-flex; align-items: center; gap: 7px; }
.sl-gate__sub svg { width: 13px; height: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SAKURA PETALS — drifting CSS petals (used in day theme, light in night)
   Lightweight: a handful of elements, transform-only animation.
   ═══════════════════════════════════════════════════════════════════════════ */
.sl-petals { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sl-petal {
  position: absolute; top: -6vh; width: 12px; height: 12px;
  /* red/pink to match the tree blossoms (#d86a84 → #b84452) */
  background: radial-gradient(circle at 30% 30%, #e98fa8, #b84452);
  border-radius: 80% 0 80% 0; opacity: .0;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12));
  animation: slFall linear infinite;
}
.sl-root[data-sl-theme="night"] .sl-petal { background: radial-gradient(circle at 30% 30%, #d86a84, #9e2f3e); }
@keyframes slFall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .8; }
  100% { transform: translateY(112vh) translateX(18vw) rotate(420deg); opacity: 0; }
}
.sl-petal:nth-child(1) { left: 8%;  animation-duration: 13s; animation-delay: 0s;   transform: scale(.8); }
.sl-petal:nth-child(2) { left: 22%; animation-duration: 17s; animation-delay: 3s;   width: 9px; height: 9px; }
.sl-petal:nth-child(3) { left: 38%; animation-duration: 11s; animation-delay: 1.5s; }
.sl-petal:nth-child(4) { left: 54%; animation-duration: 19s; animation-delay: 5s;   width: 14px; height: 14px; }
.sl-petal:nth-child(5) { left: 68%; animation-duration: 14s; animation-delay: 2.5s; }
.sl-petal:nth-child(6) { left: 80%; animation-duration: 16s; animation-delay: 6.5s; width: 10px; height: 10px; }
.sl-petal:nth-child(7) { left: 91%; animation-duration: 12s; animation-delay: 4s; }
.sl-petal:nth-child(8) { left: 47%; animation-duration: 20s; animation-delay: 8s;  width: 8px; height: 8px; }

/* ─────────────────────────────────────────────────────────────────────────
   TIER-1 / TIER-3 ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────── */

/* ── community stats strip (counters animate up on reveal) ── */
.sl-stats { padding: clamp(32px, 6vh, 64px) 0; }
.sl-stats__row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  max-width: 900px; margin: 0 auto;
}
.sl-stat {
  text-align: center; padding: 22px 14px; border-radius: var(--sl-rad);
  background: linear-gradient(165deg, var(--sl-panel-2), var(--sl-panel));
  border: 1px solid var(--sl-line);
}
.sl-stat__num {
  display: block; font-family: var(--sl-disp); font-weight: 500;
  font-size: clamp(34px, 5vw, 54px); line-height: 1; color: var(--sl-gold-2);
  font-variant-numeric: tabular-nums;
}
.sl-stat__label {
  display: block; margin-top: 10px; font-family: var(--sl-mono);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--sl-soft);
}
@media (max-width: 600px) { .sl-stats__row { grid-template-columns: repeat(2, 1fr); } }

/* ── guild card: lantern-lit hover (warm glow blooms behind the glyph) ── */
.sl-card__glyph { transition: color .4s var(--sl-ease), box-shadow .4s var(--sl-ease), background .4s var(--sl-ease); }
.sl-card:hover .sl-card__glyph {
  color: var(--sl-gold-2);
  background: radial-gradient(circle at 50% 40%, rgba(240,208,137,.32), rgba(217,177,90,.10) 60%, transparent);
  box-shadow: 0 0 22px rgba(240,208,137,.30), inset 0 0 12px rgba(240,208,137,.18);
}
.sl-card:hover .sl-card__tag--trade {
  border-color: var(--sl-gold-2); box-shadow: 0 0 14px rgba(217,177,90,.18);
}

/* ── animated placeholder ornament for empty house cards ── */
.sl-house__placeholder {
  animation: slOrnamentBreathe 4.5s ease-in-out infinite;
  text-shadow: 0 0 24px rgba(217,177,90,.22);
}
@keyframes slOrnamentBreathe {
  0%,100% { opacity: .4; transform: scale(1) rotate(0deg); }
  50%     { opacity: .62; transform: scale(1.08) rotate(8deg); }
}
.sl-house { transform-style: preserve-3d; will-change: transform; }
.sl-house__media img, .sl-house__placeholder { will-change: transform; }

/* ── ink-wash heading wipe (sumi-e brush reveal for section h2s) ── */
.sl-root .sl-h2.sl-reveal {
  -webkit-mask-image: linear-gradient(100deg, #000 0 30%, rgba(0,0,0,.15) 55%, #000 80%);
          mask-image: linear-gradient(100deg, #000 0 30%, rgba(0,0,0,.15) 55%, #000 80%);
  -webkit-mask-size: 240% 100%; mask-size: 240% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: opacity .9s var(--sl-ease), transform .9s var(--sl-ease),
              -webkit-mask-position 1.1s var(--sl-ease), mask-position 1.1s var(--sl-ease);
}
.sl-root .sl-h2.sl-reveal.is-in {
  -webkit-mask-position: 0 0; mask-position: 0 0;
}

/* ── dot-nav focus parity: labels surface on keyboard focus + gold ring ── */
.sl-dotnav__dot:focus-visible {
  outline: none; border-color: var(--sl-gold-2);
  box-shadow: 0 0 0 4px rgba(217,177,90,.30); transform: scale(1.2);
}
.sl-dotnav__dot:focus-visible::after { opacity: 1; }

/* ── theme toggle: sun rises / moon sets along a small arc ── */
.sl-dock__btn--theme { display: grid; place-items: center; overflow: hidden; }
.sl-dock__btn--theme .sl-ico-on,
.sl-dock__btn--theme .sl-ico-off {
  display: block; grid-area: 1 / 1; transition: transform .5s var(--sl-ease), opacity .5s var(--sl-ease);
}
/* night state shows moon settled centre, sun parked below-left */
.sl-dock__btn--theme[data-state="on"] .sl-ico-on  { transform: translate(0,0) rotate(0deg); opacity: 1; }
.sl-dock__btn--theme[data-state="on"] .sl-ico-off { transform: translate(-14px,16px) rotate(-60deg); opacity: 0; }
/* day state shows sun risen centre, moon arced away up-right */
.sl-dock__btn--theme[data-state="off"] .sl-ico-off { transform: translate(0,0) rotate(0deg); opacity: 1; }
.sl-dock__btn--theme[data-state="off"] .sl-ico-on  { transform: translate(14px,-16px) rotate(60deg); opacity: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .sl-hero { min-height: 84vh; }
  .sl-hero__actions .sl-btn { flex: 1 1 100%; justify-content: center; }
  .sl-found { gap: 18px; }
  .sl-found__label { text-align: center; max-width: none; }
  .sl-dock__btn { width: 42px; height: 42px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sl-root .sl-reveal { opacity: 1; transform: none; transition: none; }
  .sl-hero__bg { animation: none; }
  .sl-hero__scroll-icon { animation: none; }
  .sl-btn:hover { transform: none; }
  .sl-card:hover { transform: none; }
  .sl-petals { display: none; }
  .sl-gate__ring, .sl-gate__lotus { animation: none; }
  .sl-dock__btn--sound[data-state="on"] { animation: none; }
  /* Entrance transition: strip scale/blur/translate motion (these selectors
     match the entrance rules above and come later in source, so they win on
     equal specificity). Plain opacity fades are retained — acceptable under
     reduced-motion — so the gate still dissolves and the hero still appears. */
  .sl-gate__banner { animation: none; }
  .sl-gate.is-gone { transform: none; filter: none; }
  .sl-gate.is-gone > .sl-gate__mandala,
  .sl-gate.is-gone > .sl-gate__tagline,
  .sl-gate.is-gone > .sl-gate__brand,
  .sl-gate.is-gone > .sl-gate__enter,
  .sl-gate.is-gone > .sl-gate__hint { transform: none; }
  .sl-root[data-sl-gate="up"] .sl-hero .sl-reveal { opacity: 1; transform: none; filter: none; }
  /* Tier-1/3 additions: kill the new ambient animations and reveal the
     ink-wash headings fully (higher-specificity selectors, placed last so
     they win). The scene's mountain/parallax/bird motion is JS-gated upstream
     (the whole scene early-returns under reduced-motion), so nothing here. */
  .sl-hero__crest--medallion { animation: none; }
  .sl-hero__crest-wrap::before { display: none; }
  .sl-house__placeholder { animation: none; }
  .sl-dock__btn--theme .sl-ico-on,
  .sl-dock__btn--theme .sl-ico-off { transition: none; }
  .sl-root .sl-h2.sl-reveal,
  .sl-root .sl-h2.sl-reveal.is-in {
    -webkit-mask-image: none; mask-image: none;
    transition: none;
  }
}