/* ============================================================
   D STYLEZ ART — "ILLUSION" RESKIN
   Op-art inspired: hypnotic repeating patterns, radiating
   sunbursts, drifting checkerboards, electric colorways.
   CSS-only. Mobile-first. No libraries, no heavy assets.
   Content, links, prices and routes are untouched — this
   file alone carries the whole visual direction.
   ============================================================ */
:root {
  --black: #0c0614;          /* deep violet-black (page base) */
  --white: #ffffff;
  --paper: #140b26;          /* dark panel */
  --accent: #f5b301;         /* brand gold */
  --accent-dark: #ffd34d;    /* bright gold — readable on dark */
  --gray: #b9a8d9;           /* muted lavender (secondary text) */
  --line: #0c0614;
  --ink: #f2ecff;            /* primary text */
  --purple: #8b2ff7;
  --magenta: #ff2fb3;
  --cyan: #22e6ff;
  --rainbow: linear-gradient(90deg, var(--purple), var(--magenta), var(--cyan), var(--accent));
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  background: var(--black);
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  /* faint op-art texture: ripple rings + warped diagonal lines */
  background-image:
    repeating-radial-gradient(circle at 50% 12%, rgba(255,47,179,0.055) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(115deg, rgba(34,230,255,0.03) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(65deg, rgba(139,47,247,0.03) 0 2px, transparent 2px 42px);
}
/* Slow-spinning hypnotic ray wheel fixed behind everything —
   the "seems to move" pull-the-eye-in layer. */
body::before {
  content: "";
  position: fixed; inset: -55%;
  z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(139,47,247,0.075) 0deg 5deg,
    transparent 5deg 10deg,
    rgba(255,47,179,0.05) 10deg 13deg,
    transparent 13deg 20deg
  );
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 68%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 68%);
  animation: illusion-spin 140s linear infinite;
  will-change: transform;
}
@keyframes illusion-spin { to { transform: rotate(360deg); } }

img, video { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--magenta); color: #fff; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12,6,20,0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--white);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem 1.1rem;
}
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--rainbow); background-size: 300% 100%;
  animation: stripe-slide 14s linear infinite;
}
@keyframes stripe-slide { to { background-position: 300% 0; } }
.nav .wordmark {
  font-weight: 900; letter-spacing: 0.14em; font-size: 1.05rem;
  text-decoration: none; color: #fff;
  text-shadow: 0 0 18px rgba(139,47,247,0.8);
  white-space: nowrap; flex-shrink: 0;
}
.nav .wordmark span {
  background: linear-gradient(90deg, var(--accent), var(--magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav .wordmark .sigil-logo {
  height: 2.2rem; width: 2.2rem; border-radius: 50%;
  vertical-align: middle; margin-right: 0.5rem;
  box-shadow: 0 0 12px rgba(212,175,55,0.6);
}

.nav-links { display: flex; gap: 1rem; }
.nav-links a {
  color: var(--white); text-decoration: none; font-weight: 700;
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em;
  transition: color 0.2s, text-shadow 0.2s;
}
.nav-links a:hover { color: var(--cyan); text-shadow: 0 0 12px rgba(34,230,255,0.9); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: #0a0512; color: var(--white);
  text-align: center; padding: 3.4rem 1.2rem 3rem;
}
/* Radiating illusion sunburst behind the hero copy */
.hero::before {
  content: ""; position: absolute; inset: -60%;
  background: repeating-conic-gradient(
    from 0deg at 50% 44%,
    var(--magenta) 0deg 4deg,
    var(--purple) 4deg 8deg,
    var(--cyan) 8deg 12deg,
    transparent 12deg 20deg
  );
  opacity: 0.30;
  -webkit-mask-image: radial-gradient(circle at 50% 44%, #000 0%, transparent 60%);
  mask-image: radial-gradient(circle at 50% 44%, #000 0%, transparent 60%);
  animation: illusion-spin 70s linear infinite reverse;
  will-change: transform;
}
/* Warped ripple rings layered over the rays */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(
    circle at 50% 44%,
    transparent 0 26px,
    rgba(12,6,20,0.55) 26px 30px
  );
}
.hero > * { position: relative; z-index: 1; }
.hero .kicker {
  display: inline-block;
  background: linear-gradient(90deg, var(--magenta), var(--purple));
  color: #fff;
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.75rem; padding: 0.4rem 1rem; border-radius: 999px; margin-bottom: 1.2rem;
  box-shadow: 0 0 20px rgba(255,47,179,0.55);
}
.hero h1 {
  font-size: clamp(2.4rem, 9vw, 4.5rem); font-weight: 900;
  letter-spacing: 0.08em; line-height: 1.05; margin-bottom: 0.9rem;
  color: #fff;
  text-shadow: 0 0 34px rgba(139,47,247,0.9), 0 4px 0 rgba(0,0,0,0.55);
}
/* ART shimmers through the brand colorways */
.hero h1 .gold {
  background: linear-gradient(90deg, var(--accent), var(--magenta), var(--cyan), var(--accent));
  background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 7s linear infinite;
  text-shadow: none;
  filter: drop-shadow(0 0 22px rgba(255,47,179,0.65));
}
@keyframes shimmer { to { background-position: 300% center; } }
.hero .tagline {
  font-size: 1.25rem; font-weight: 700; color: var(--cyan);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.4rem;
  text-shadow: 0 0 16px rgba(34,230,255,0.8);
}
.hero p.lede { max-width: 34rem; margin: 0 auto 1.8rem; color: #d9cdf2; }
.btn-row { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.9rem; padding: 0.85rem 1.6rem;
  border: 3px solid transparent; border-radius: 0;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold {
  background: linear-gradient(135deg, #ffd34d, var(--accent) 55%, #ff8a00);
  color: #1c1002;
  box-shadow: 0 0 22px rgba(245,179,1,0.5);
}
.btn-gold:hover {
  background: linear-gradient(135deg, #ffe08a, #ffc93c 55%, #ff9d1f);
  color: #1c1002;
  box-shadow: 0 0 34px rgba(245,179,1,0.75);
}
.btn-ghost {
  background: rgba(34,230,255,0.06); color: #fff;
  border: 2px solid var(--cyan);
  box-shadow: inset 0 0 14px rgba(34,230,255,0.18), 0 0 14px rgba(34,230,255,0.25);
}
.btn-ghost:hover { background: rgba(34,230,255,0.16); color: var(--cyan); border-color: var(--cyan); }
.btn-dark {
  background: linear-gradient(135deg, #2a1650, #170b30);
  color: #fff; border: 2px solid var(--purple);
}
.btn-dark:hover {
  border-color: var(--magenta); color: #fff;
  background: linear-gradient(135deg, #3a1d6e, #1d0e38);
  box-shadow: 0 0 22px rgba(255,47,179,0.55);
}

/* ---------- sections ---------- */
.wrap { max-width: 62rem; margin: 0 auto; padding: 2.6rem 1.2rem; }
.section-title {
  font-size: 1.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 0.4rem; color: #fff;
  text-shadow: 0 0 24px rgba(139,47,247,0.55);
}
.section-title .bar {
  display: block; width: 4.5rem; height: 6px; margin-top: 0.5rem;
  background: var(--rainbow); background-size: 200% 100%;
  animation: bar-slide 9s linear infinite;
  box-shadow: 0 0 12px rgba(255,47,179,0.6);
}
@keyframes bar-slide { to { background-position: 200% 0; } }
.section-sub { color: var(--gray); margin-bottom: 1.6rem; max-width: 38rem; }

/* ---------- cards ---------- */
.cards { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
.card {
  background: linear-gradient(160deg, #1c102f, #120a20);
  border: 2px solid rgba(139,47,247,0.55);
  box-shadow: 0 0 0 rgba(0,0,0,0), 0 10px 30px rgba(0,0,0,0.5);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--accent);
  box-shadow: 0 0 34px rgba(245,179,1,0.45), 0 18px 40px rgba(0,0,0,0.6);
}
.card img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-bottom: 2px solid rgba(139,47,247,0.55); background: #fff;
}
.card-body { padding: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.card-body h3 { font-size: 1.25rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; }
.card-body .meta {
  font-size: 0.85rem; font-weight: 700; color: var(--accent-dark);
  text-transform: uppercase; letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(245,179,1,0.4);
}
.card-body p { font-size: 0.95rem; color: #d9cdf2; }
.card-body p strong { color: #fff; }
.card-body a:not(.btn) { color: var(--cyan); }
.card-body .btn { margin-top: auto; align-self: flex-start; }

/* ---------- feature band : drifting op-art checkerboard ---------- */
.band {
  background-color: #120826;
  background-image: repeating-conic-gradient(rgba(255,47,179,0.10) 0% 25%, transparent 0% 50%);
  background-size: 54px 54px;
  animation: checker-drift 26s linear infinite;
  color: var(--white);
  border-top: 1px solid rgba(139,47,247,0.4);
  border-bottom: 1px solid rgba(139,47,247,0.4);
}
@keyframes checker-drift { to { background-position: 54px 54px; } }
.band .wrap { display: grid; gap: 1.6rem; }
@media (min-width: 720px) { .band .wrap { grid-template-columns: 1fr 1fr; align-items: center; } }
.band h2 {
  font-size: 1.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 0.8rem; color: #fff;
  text-shadow: 0 0 26px rgba(255,47,179,0.7);
}
.band h2 .gold {
  background: linear-gradient(90deg, var(--accent), var(--magenta), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.band p { color: #e2d6f7; margin-bottom: 1rem; }
.band ul { list-style: none; margin-bottom: 1.4rem; }
.band ul li { padding: 0.35rem 0; font-weight: 700; color: #f2ecff; }
.band ul li::before { content: "▸ "; color: var(--magenta); text-shadow: 0 0 10px rgba(255,47,179,0.9); }
/* Golden-ticket note — light by design so it pops off the dark */
.qr-note {
  border: 2px dashed #b96f00; border-radius: 6px;
  padding: 1rem 1.2rem;
  font-size: 0.9rem; color: #22140a;
  background: linear-gradient(135deg, #ffe9ad, #ffd34d);
  box-shadow: 0 0 26px rgba(245,179,1,0.4);
}
.qr-note strong { color: #22140a; }
.qr-note code { color: #a3126e; font-weight: 700; }
/* Normalize legacy inline-styled notes on alive pages (HTML untouched):
   keeps the golden-ticket look readable on the dark theme. */
.qr-note[style] {
  color: #22140a !important;
  background: linear-gradient(135deg, #ffe9ad, #ffd34d) !important;
}

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery figure {
  background: #150c28; border: 2px solid rgba(139,47,247,0.55);
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.gallery figure:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--accent);
  box-shadow: 0 0 28px rgba(245,179,1,0.45);
}
.gallery img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #fff; }
.gallery figcaption {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.45rem 0.6rem; color: #fff;
  background: linear-gradient(90deg, var(--purple), var(--magenta));
}

/* ---------- alive page ---------- */
.video-shell {
  background: var(--black);
  border: 3px solid var(--magenta);
  box-shadow: 0 0 30px rgba(255,47,179,0.45), 8px 8px 0 #2a1650;
}
.video-shell video { width: 100%; }
.carousel-track { position: relative; }
.carousel-track video { display: none; }
.carousel-track video:first-child { display: block; }
.carousel-nav {
  display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  padding: 0.6rem; background: rgba(0,0,0,0.55);
}
.carousel-prev, .carousel-next {
  background: var(--magenta); color: #fff; border: none; border-radius: 50%;
  width: 2.2rem; height: 2.2rem; font-size: 1.4rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.carousel-prev:hover, .carousel-next:hover { background: var(--purple); }
.carousel-dots { display: flex; gap: 0.5rem; }
.carousel-dot {
  width: 0.8rem; height: 0.8rem; border-radius: 50%;
  background: rgba(255,255,255,0.35); border: none; cursor: pointer; padding: 0;
}
.carousel-dot.active { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }
.fact-list { display: grid; gap: 0.7rem; margin: 1.4rem 0; }
.fact {
  background: #150c28; border: 1px solid rgba(34,230,255,0.3);
  border-left: 4px solid var(--cyan);
  padding: 0.8rem 1rem; font-size: 0.95rem; color: #efe8ff;
}
.fact strong { text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-dark); }

/* ---------- alive hub grids (book-grid / book-card) ---------- */
.book-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .book-grid { grid-template-columns: repeat(3, 1fr); } }
.book-card {
  display: block; text-decoration: none;
  background: linear-gradient(160deg, #1c102f, #120a20);
  border: 2px solid rgba(139,47,247,0.55);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.book-card:hover {
  transform: translateY(-4px);
  border-color: var(--magenta);
  box-shadow: 0 0 24px rgba(255,47,179,0.45);
}
.book-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #fff; }
.book-card-body { padding: 0.8rem 0.9rem; }
.book-card-body h3 { color: #fff; font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; }
.book-card-body p { color: var(--gray); font-size: 0.85rem; }

/* ---------- contact ---------- */
.contact-box {
  background: linear-gradient(160deg, #1d1132, #100722);
  border: 2px solid var(--purple);
  box-shadow: 0 0 30px rgba(139,47,247,0.35), 6px 6px 0 #2a1650;
  padding: 1.6rem;
}
.contact-box h3 { font-size: 1.2rem; font-weight: 900; text-transform: uppercase; margin-bottom: 0.6rem; color: #fff; }
.contact-box p { color: #d9cdf2; }
.contact-box .email {
  font-size: 1.15rem; font-weight: 900; word-break: break-all;
  background: linear-gradient(90deg, var(--accent), var(--magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pill-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.pill {
  border: 1px solid var(--purple); padding: 0.35rem 0.9rem;
  font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;
  background: rgba(139,47,247,0.14); color: #e6d9ff; border-radius: 999px;
}

/* ---------- footer ---------- */
footer {
  position: relative;
  background: #08040f; color: var(--white);
  text-align: center; padding: 2.2rem 1.2rem 2rem;
}
footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--rainbow); background-size: 300% 100%;
  animation: stripe-slide 14s linear infinite;
}
footer .wordmark {
  font-weight: 900; letter-spacing: 0.14em; font-size: 1.1rem; margin-bottom: 0.4rem;
  color: #fff; text-shadow: 0 0 18px rgba(139,47,247,0.8);
}
footer .wordmark span {
  background: linear-gradient(90deg, var(--accent), var(--magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
footer p { font-size: 0.85rem; color: #b9a8d9; }
footer .handles { margin: 0.8rem 0; font-weight: 700; }
footer .handles a {
  color: var(--accent-dark); text-decoration: none; margin: 0 0.5rem;
  transition: color 0.2s, text-shadow 0.2s;
}
footer .handles a:hover { color: var(--cyan); text-shadow: 0 0 12px rgba(34,230,255,0.9); }

/* ---------- battle cinema : full-bleed alive video (2026-09-28) ---------- */
.battle-cinema { position: relative; min-height: 92vh; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.battle-cinema video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.battle-shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,3,14,0.55) 0%, rgba(8,3,14,0) 30%, rgba(8,3,14,0) 55%, rgba(8,3,14,0.82) 100%); }
.battle-copy { padding-bottom: 3.2rem; }
.battle-copy h2 { font-size: clamp(2rem, 8vw, 3.4rem); font-weight: 900; letter-spacing: 0.04em; color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.85), 0 0 46px rgba(255,122,26,0.55); margin-bottom: 0.7rem; }
.battle-copy h2 .gold { color: #f5b301; }
.battle-copy p { max-width: 34rem; color: #f4ecff; font-weight: 600; text-shadow: 0 1px 14px rgba(0,0,0,0.9); margin-bottom: 1.3rem; }
@media (min-width: 900px) { .battle-cinema { min-height: 88vh; } }

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Ambient sound toggle (2026-09-28) ---------- */
#snd-toggle{position:fixed;right:18px;bottom:18px;z-index:9999;width:52px;height:52px;border-radius:50%;background:rgba(12,6,20,.82);border:1px solid #f5b301;color:#fff;font-size:22px;line-height:1;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 0 18px rgba(245,179,1,.35);transition:transform .2s ease;display:flex;align-items:center;justify-content:center}
#snd-toggle:hover{transform:scale(1.08)}
#snd-toggle:focus-visible{outline:2px solid #22e6ff;outline-offset:3px}

/* ---------- Artist portrait in story section ---------- */
.artist-portrait{float:left;max-width:220px;margin:0 1.5rem 1rem 0;text-align:center}
.artist-portrait img,.artist-portrait video{width:100%;border-radius:12px;border:2px solid #c9a227;display:block}
.artist-portrait figcaption{font-size:.85rem;color:#8a8a8a;margin-top:.4rem}
@media (max-width:640px){
  .artist-portrait{float:none;max-width:250px;margin:0 auto 1.2rem}
}

/* ---------- Mobile nav fix (2026-10-03) ---------- */
@media (max-width:640px){
  .nav{padding:.7rem .8rem;gap:.6rem}
  .nav .wordmark{font-size:.85rem;letter-spacing:.1em}
  .nav-links{gap:.6rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nav-links a{font-size:.72rem;white-space:nowrap}
}

/* ---------- Email capture (2026-10-16) ---------- */
.email-band{background:linear-gradient(135deg,#1a0b2e 0%,#2d1152 50%,#0f0518 100%);border-top:2px solid #f5b301;border-bottom:2px solid #f5b301}
.email-form{display:flex;flex-direction:column;gap:.8rem;max-width:26rem}
.email-form input[type=text],.email-form input[type=email]{padding:.9rem 1.1rem;font-size:1rem;border-radius:10px;border:2px solid #4a2a7a;background:#0f0518;color:#fff;width:100%}
.email-form input:focus{outline:none;border-color:#f5b301;box-shadow:0 0 12px rgba(245,179,1,.35)}
.email-form .btn{align-self:flex-start;cursor:pointer;border:none;font-family:inherit}
.form-note{min-height:1.4rem;color:#f5b301;font-weight:700;font-size:.95rem}

/* ---------- Testimonials (2026-10-16) ---------- */
.t-quote{font-size:1.05rem;font-style:italic;line-height:1.6;color:#f2ecff}
.t-name{margin-top:1rem;color:#f5b301;font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem}
.t-name span{color:#8a8a8a;font-weight:400;text-transform:none;letter-spacing:0}

/* ============================================================
   HOMEPAGE MOTION PACK (2026-10-17)
   1. Hero breathe (slow Ken Burns-style scale) + floating gold particles
   2. Scroll reveal — .reveal/.in-view driven by the inline
      IntersectionObserver script on index.html
   3. Gold sheen sweep on section headings + footer wordmark
   4. (Card/gallery hover upgrades applied to the rules above.)
   CSS + vanilla JS only. prefers-reduced-motion is covered by the
   global rule above and the script's matchMedia check.
   ============================================================ */

/* ---------- 1. hero breathe layer ---------- */
.hero .hero-breathe,
.hero .hero-particles {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.hero-breathe {
  inset: -8%;
  background: radial-gradient(circle at 50% 42%,
    rgba(245,179,1,0.16) 0%,
    rgba(139,47,247,0.10) 42%,
    transparent 68%);
  animation: hero-breathe 20s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero-breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* ---------- 1b. floating gold particles (CSS only) ---------- */
.hero-particles { overflow: hidden; }
.hero-particles i {
  position: absolute; bottom: -12px; border-radius: 50%;
  background: radial-gradient(circle, #ffe9ad 0%, #f5b301 55%, rgba(245,179,1,0) 100%);
  filter: blur(0.6px);
  opacity: 0;
  animation: particle-rise linear infinite;
  will-change: transform, opacity;
}
@keyframes particle-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  8%   { opacity: var(--o, 0.7); }
  85%  { opacity: var(--o, 0.7); }
  100% { transform: translate3d(var(--sway, 0px), -560px, 0); opacity: 0; }
}
/* 15 particles — varied lane, size, speed, delay, drift, opacity */
.hero-particles i:nth-child(1)  { left: 4%;  width: 5px; height: 5px; --o: .8;  --sway: -24px; animation-duration: 11s; animation-delay: 0s; }
.hero-particles i:nth-child(2)  { left: 11%; width: 3px; height: 3px; --o: .55; --sway: 18px;  animation-duration: 14s; animation-delay: 2.5s; }
.hero-particles i:nth-child(3)  { left: 18%; width: 7px; height: 7px; --o: .9;  --sway: -10px; animation-duration: 9s;  animation-delay: 1s; }
.hero-particles i:nth-child(4)  { left: 26%; width: 4px; height: 4px; --o: .65; --sway: 30px;  animation-duration: 16s; animation-delay: 5s; }
.hero-particles i:nth-child(5)  { left: 33%; width: 6px; height: 6px; --o: .75; --sway: -32px; animation-duration: 12s; animation-delay: 3.2s; }
.hero-particles i:nth-child(6)  { left: 41%; width: 3px; height: 3px; --o: .5;  --sway: 12px;  animation-duration: 18s; animation-delay: 7s; }
.hero-particles i:nth-child(7)  { left: 48%; width: 8px; height: 8px; --o: .95; --sway: -16px; animation-duration: 10s; animation-delay: 0.6s; }
.hero-particles i:nth-child(8)  { left: 55%; width: 4px; height: 4px; --o: .6;  --sway: 26px;  animation-duration: 13s; animation-delay: 4.1s; }
.hero-particles i:nth-child(9)  { left: 62%; width: 5px; height: 5px; --o: .7;  --sway: -28px; animation-duration: 15s; animation-delay: 8s; }
.hero-particles i:nth-child(10) { left: 69%; width: 3px; height: 3px; --o: .5;  --sway: 8px;   animation-duration: 17s; animation-delay: 1.8s; }
.hero-particles i:nth-child(11) { left: 76%; width: 6px; height: 6px; --o: .85; --sway: -14px; animation-duration: 11.5s; animation-delay: 6.3s; }
.hero-particles i:nth-child(12) { left: 83%; width: 4px; height: 4px; --o: .6;  --sway: 22px;  animation-duration: 14.5s; animation-delay: 2.2s; }
.hero-particles i:nth-child(13) { left: 89%; width: 7px; height: 7px; --o: .8;  --sway: -20px; animation-duration: 12.5s; animation-delay: 9s; }
.hero-particles i:nth-child(14) { left: 94%; width: 3px; height: 3px; --o: .55; --sway: 14px;  animation-duration: 16.5s; animation-delay: 3.7s; }
.hero-particles i:nth-child(15) { left: 97%; width: 5px; height: 5px; --o: .7;  --sway: -8px;  animation-duration: 13.5s; animation-delay: 5.5s; }

/* ---------- 2. scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* ---------- 3. gold sheen sweep on headings ---------- */
.section-title,
footer .wordmark {
  background: linear-gradient(100deg,
    #ffffff 32%, #ffd34d 45%, #fff8e1 50%, #ffd34d 55%, #ffffff 68%);
  background-size: 280% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: gold-sheen 4s ease-in-out infinite alternate;
}
@keyframes gold-sheen {
  from { background-position: 0% center; }
  to   { background-position: 100% center; }
}