/* ============================================================
   HOME SKINS -- founder-controlled skins for the default web look (data-theme="home").  Set by lib/site-skin.js.
     html[data-skin="classic"]   today's BlvckMeta Home (nothing in this file applies)
     html[data-skin="campus"]    light mode = HOMEROOM (notebook paper, ink, gold, yearbook)  |  dark mode = THE DEN (brick, purple + gold LED)
     html[data-skin="takeover"]  advertiser takeover: sponsor art behind the panel, sponsor accent on pills, "presented by" ribbon
   Every rule is scoped to [data-theme="home"][data-skin=...], so user-picked themes are never touched.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Graduate&family=Caveat:wght@600;700&display=swap");

/* ---------- shared: Porch welcome banner ---------- */
#bm-skin-banner { display: none; }
html[data-theme="home"][data-skin-route="porch"]:is([data-skin="campus"], [data-skin="takeover"]) #bm-skin-banner {
  display: block; position: relative; margin: 22px 28px 0; height: 210px; border-radius: 22px; overflow: hidden; isolation: isolate;
  animation: skin-rise .7s cubic-bezier(.2, 1.4, .4, 1) both;
}
.bm-skin-banner-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; z-index: -2; }
.bm-skin-banner-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, 0) 100%); }
.bm-skin-banner-body { position: absolute; left: 26px; right: 26px; bottom: 22px; display: flex; align-items: flex-end; gap: 16px; color: #fff; }
.bm-skin-crest { width: 74px; height: 74px; flex: none; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); animation: skin-pop .8s .15s cubic-bezier(.2, 1.6, .4, 1) both; }
.bm-skin-kicker { display: block; font: 400 11px Graduate, Georgia, serif; letter-spacing: 3px; opacity: .92; }
.bm-skin-title { margin: 6px 0 4px; font: 400 clamp(22px, 3vw, 34px)/1.05 Graduate, Georgia, serif; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.bm-skin-sub { display: block; font: 700 22px/1 Caveat, cursive; opacity: .95; }
.bm-skin-cta { display: inline-block; margin-top: 10px; padding: 10px 18px; border-radius: 999px; background: var(--skin-accent, #fff); color: var(--skin-on-accent, #111); font: 800 14px var(--home-font); text-decoration: none; transition: transform .15s ease; }
.bm-skin-cta:active { transform: scale(.95); }
.bm-skin-led { position: absolute; left: 8%; right: 8%; bottom: 0; height: 3px; border-radius: 3px; animation: skin-pulse 4.5s ease-in-out infinite; }

/* ---------- shared motion (the "Flash" feel) ---------- */
@keyframes skin-rise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes skin-pop { 0% { opacity: 0; transform: scale(.4) rotate(-12deg); } 100% { opacity: 1; transform: none; } }
@keyframes skin-pulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes skin-slide { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes skin-wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-2.5deg); } 60% { transform: rotate(2deg); } }
html[data-theme="home"][data-skin="campus"] #home-left .hn-item { animation: skin-slide .45s cubic-bezier(.2, 1.3, .4, 1) both; }
html[data-theme="home"][data-skin="campus"] #home-left .hn-nav > :nth-child(1) { animation-delay: .04s; }
html[data-theme="home"][data-skin="campus"] #home-left .hn-nav > :nth-child(2) { animation-delay: .08s; }
html[data-theme="home"][data-skin="campus"] #home-left .hn-nav > :nth-child(3) { animation-delay: .12s; }
html[data-theme="home"][data-skin="campus"] #home-left .hn-nav > :nth-child(4) { animation-delay: .16s; }
html[data-theme="home"][data-skin="campus"] #home-left .hn-nav > :nth-child(5) { animation-delay: .20s; }
html[data-theme="home"][data-skin="campus"] #home-left .hn-nav > :nth-child(6) { animation-delay: .24s; }
html[data-theme="home"][data-skin="campus"] #home-left .hn-nav > :nth-child(n+7) { animation-delay: .28s; }
html[data-theme="home"][data-skin="campus"] .bm-post-card { animation: skin-rise .5s cubic-bezier(.2, 1.2, .4, 1) both; transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), box-shadow .25s ease; }
html[data-theme="home"][data-skin="campus"] .bm-post-card:hover { transform: translateY(-3px) rotate(-.25deg); }
html[data-theme="home"][data-skin="campus"] :is(.bm-button, .bm-button-primary, .bm-button-ghost, .hn-create, .hl-btn, .hn-mode-btn):active { transform: scale(.94, .9); transition: transform .08s ease; }
html[data-theme="home"][data-skin="campus"] .hn-brand:hover .hn-brand-mark { animation: skin-wiggle .5s ease; }

/* ==========================================================
   CAMPUS · LIGHT = HOMEROOM
   ========================================================== */
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) {
  --hr-ink: #141414; --hr-gold: #D4A63C; --hr-gold-text: #8A6420; --hr-pencil: #F2C230; --hr-margin: #E05A5A; --hr-rule: rgba(84, 138, 214, .20);
  --home-panel: #FFFFFF;
  --home-panel-glass: rgba(255, 255, 255, .92);
  --home-pill: #141414; --home-on-pill: #FFFFFF;
  --home-gold: #D4A63C;
  --home-tint-blue: #EEF3FF; --home-tint-cream: #FFF6DA; --home-tint-pink: #FFEDEF; --home-tint-mint: #EAF7EF;
  --home-shadow: 0 2px 0 #E6E1D4, 0 22px 50px rgba(60, 50, 20, .12);
  --bm-accent-text: #8A6420;
}
/* the page is a sheet of notebook paper */
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]),
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) body {
  background-color: #FBFAF6;
  background-image:
    linear-gradient(90deg, transparent 72px, rgba(224, 90, 90, .45) 72px, rgba(224, 90, 90, .45) 74px, transparent 74px),
    repeating-linear-gradient(#FBFAF6 0 31px, var(--hr-rule) 31px 32px);
  background-attachment: fixed;
}
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .bm-home-shell { border: 1.5px solid var(--hr-ink); position: relative; overflow: visible; }
/* masking tape on the panel's top corners */
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .bm-home-shell::before,
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .bm-home-shell::after {
  content: ""; position: absolute; top: -12px; width: 120px; height: 28px; background: rgba(242, 194, 48, .55); z-index: 5; pointer-events: none;
}
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .bm-home-shell::before { left: 36px; transform: rotate(-4deg); }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .bm-home-shell::after { right: 36px; transform: rotate(3deg); }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) #home-left { border-radius: var(--home-r-xl) 0 0 var(--home-r-xl); }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hn-brand-word b,
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .bm-tab-header-title,
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-hero h1,
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-word b { font-family: Graduate, Georgia, serif; font-weight: 400; letter-spacing: .06em; }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .bm-tab-header-title { text-transform: uppercase; position: relative; display: inline-block; }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .bm-tab-header-title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; border-radius: 4px; background: var(--hr-pencil);
  transform-origin: left; animation: skin-draw .7s .2s cubic-bezier(.3, 1.2, .4, 1) both;
}
@keyframes skin-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hn-item.is-active { background: var(--hr-ink); color: #fff; box-shadow: inset 0 -3px 0 var(--hr-gold); }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .bm-card,
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .bm-post-card { border: 1px solid #E6E1D4; box-shadow: 0 1px 0 #E6E1D4, 0 8px 18px rgba(60, 50, 20, .06); }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-kicker { font-family: Caveat, cursive; font-size: 20px; font-weight: 700; background: var(--home-tint-cream); }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-panel { border: 1.5px solid var(--hr-ink); }
/* banner = taped yearbook photo */
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) #bm-skin-banner { border-radius: 6px; border: 10px solid #fff; box-shadow: 0 0 0 1px #E6E1D4, 0 14px 30px rgba(0, 0, 0, .14); transform: rotate(-.4deg); overflow: visible; }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) #bm-skin-banner::before {
  content: ""; position: absolute; top: -20px; left: 50%; width: 110px; height: 26px; margin-left: -55px; background: rgba(242, 194, 48, .6); transform: rotate(-2deg); z-index: 3;
}
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) #bm-skin-banner .bm-skin-banner-media,
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) #bm-skin-banner .bm-skin-banner-shade { border-radius: 2px; }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .bm-skin-led { display: none; }

/* ==========================================================
   CAMPUS · DARK = THE DEN
   ========================================================== */
html[data-theme="home"][data-skin="campus"][data-mode="dark"] {
  --den-purple: #7B3FE4; --den-gold: #D4A63C;
  --bm-bg: #0B0A10; --bm-card: #16131F; --bm-card-hover: #1E1A2A;
  --bm-accent: #D4A63C; --bm-accent-glow: rgba(123, 63, 228, .45);
  --home-page-a: #0B0A10; --home-page-b: #120E1C; --home-page-c: #140F08;
  --home-panel: #110F17; --home-panel-glass: rgba(17, 15, 23, .9);
  --home-pill: #D4A63C; --home-on-pill: #111114;
  --home-tint-blue: #1A1630; --home-tint-cream: #241D10; --home-tint-pink: #24142A; --home-tint-mint: #12221B;
  --home-shadow: 0 0 0 1px rgba(123, 63, 228, .35), 0 0 60px rgba(123, 63, 228, .18), 0 30px 80px rgba(0, 0, 0, .65);
}
/* brick wall lit by LED strips */
html[data-theme="home"][data-skin="campus"][data-mode="dark"],
html[data-theme="home"][data-skin="campus"][data-mode="dark"] body {
  background-color: #0B0A10;
  background-image:
    radial-gradient(900px 380px at 0% 0%, rgba(212, 166, 60, .16), transparent 65%),
    radial-gradient(1100px 520px at 100% 6%, rgba(123, 63, 228, .24), transparent 65%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 72px);
  background-attachment: fixed;
}
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .bm-home-shell { position: relative; overflow: visible; border-color: rgba(123, 63, 228, .35); }
/* gold LED strip along the top edge of the panel */
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .bm-home-shell::before {
  content: ""; position: absolute; top: -1px; left: 6%; right: 6%; height: 3px; border-radius: 3px; background: var(--den-gold);
  box-shadow: 0 0 16px 3px rgba(212, 166, 60, .7); animation: skin-pulse 4.5s ease-in-out infinite; z-index: 5; pointer-events: none;
}
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hn-brand-word b,
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .bm-tab-header-title,
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-hero h1,
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-word b { font-family: Graduate, Georgia, serif; font-weight: 400; letter-spacing: .06em; }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .bm-tab-header-title { text-transform: uppercase; text-shadow: 0 0 14px rgba(123, 63, 228, .7); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hn-item.is-active { background: rgba(123, 63, 228, .18); color: #fff; box-shadow: 0 0 0 1px var(--den-purple), 0 0 18px rgba(123, 63, 228, .5); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .bm-card,
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .bm-post-card { background: rgba(255, 255, 255, .035); border: 1px solid rgba(123, 63, 228, .22); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .bm-post-card:hover { box-shadow: 0 0 22px rgba(123, 63, 228, .3); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-panel { box-shadow: var(--home-shadow); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] #bm-skin-banner { box-shadow: 0 0 0 1px rgba(123, 63, 228, .4), 0 0 40px rgba(123, 63, 228, .25); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .bm-skin-led { background: var(--den-purple); box-shadow: 0 0 18px 4px rgba(123, 63, 228, .8); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .bm-skin-sub { font-family: var(--home-font); font-size: 14px; font-weight: 600; }

/* ==========================================================
   TAKEOVER (advertiser, MySpace-style)
   ========================================================== */
#bm-skin-bg { display: none; }
html[data-theme="home"][data-skin="takeover"] #bm-skin-bg { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.bm-skin-bg-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
html[data-theme="home"][data-skin="takeover"],
html[data-theme="home"][data-skin="takeover"] body { background: transparent; }
html[data-theme="home"][data-skin="takeover"]:has(#bm-skin-bg) { background-color: #000; }
html[data-theme="home"][data-skin="takeover"] {
  --home-pill: var(--skin-accent, #111114);
  --home-on-pill: var(--skin-on-accent, #FFFFFF);
}
html[data-theme="home"][data-skin="takeover"] .bm-home-shell { box-shadow: 0 30px 90px rgba(0, 0, 0, .45); }
@media (min-width: 1101px) { html[data-theme="home"][data-skin="takeover"] .bm-layout { max-width: 1280px; padding-top: 40px; } }   /* leave the sponsor art visible around the panel */
html[data-theme="home"][data-skin="takeover"] .hn-item.is-active { background: var(--skin-accent, var(--home-pill)); color: var(--skin-on-accent, var(--home-on-pill)); }
#bm-skin-ribbon { display: none; }
html[data-theme="home"][data-skin="takeover"] #bm-skin-ribbon {
  display: block; position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: 60;
  padding: 6px 16px; border-radius: 999px; background: rgba(0, 0, 0, .72); color: #fff; font: 600 12px var(--home-font, sans-serif);
  backdrop-filter: blur(8px); animation: skin-rise .6s .3s both;
}
#bm-skin-ribbon a { color: inherit; text-decoration: none; }
#bm-skin-ribbon b { color: var(--skin-accent, #fff); }

/* ---------- phone ---------- */
@media (max-width: 700px) {
  html[data-theme="home"][data-skin-route="porch"]:is([data-skin="campus"], [data-skin="takeover"]) #bm-skin-banner { margin: 14px 12px 0; height: 170px; }
  .bm-skin-crest { width: 54px; height: 54px; }
  .bm-skin-banner-body { left: 16px; right: 16px; bottom: 14px; }
  .bm-skin-kicker { font-size: 9px; letter-spacing: 1.5px; }
  .bm-skin-title { font-size: 19px; }
  .bm-skin-sub { font-size: 17px; }
  html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]),
  html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) body { background-image: repeating-linear-gradient(#FBFAF6 0 31px, var(--hr-rule) 31px 32px); }
  html[data-theme="home"][data-skin="campus"] .bm-home-shell::before,
  html[data-theme="home"][data-skin="campus"] .bm-home-shell::after { display: none; }
  html[data-theme="home"][data-skin="takeover"] #bm-skin-ribbon { top: auto; bottom: 74px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="home"][data-skin] *, html[data-theme="home"][data-skin] *::before, html[data-theme="home"][data-skin] *::after,
  #bm-skin-banner, #bm-skin-ribbon { animation: none !important; transition: none !important; }
}

/* ==========================================================
   FOUNDER SWITCHER SHEET (views/site-skin-admin.js) -- works under any theme
   ========================================================== */
.bm-skin-admin { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); }
.bsa-card { width: min(720px, 100%); max-height: 92vh; overflow-y: auto; background: #FFFFFF; color: #111114; border-radius: 22px; padding: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif; animation: skin-rise .35s cubic-bezier(.2, 1.3, .4, 1) both; }
.bsa-head { display: flex; justify-content: space-between; align-items: center; font-size: 20px; }
.bsa-x { border: 0; background: #F1F1F4; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; cursor: pointer; }
.bsa-p { margin: 8px 0 14px; font-size: 13.5px; line-height: 1.5; color: rgba(17, 17, 20, .72); }
.bsa-skins { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bsa-skin { text-align: left; padding: 14px; border-radius: 16px; border: 2px solid #E4E4EA; background: #FAFAFC; cursor: pointer; display: flex; flex-direction: column; gap: 6px; font: inherit; color: inherit; transition: transform .15s ease, border-color .15s ease; }
.bsa-skin:hover { transform: translateY(-2px); }
.bsa-skin.on { border-color: #111114; box-shadow: 0 0 0 3px rgba(212, 166, 60, .45); }
.bsa-skin small { color: rgba(17, 17, 20, .7); line-height: 1.4; }
.bsa-sw { display: flex; gap: 4px; } .bsa-sw i { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .12); }
.bsa-sec { margin-top: 18px; padding-top: 14px; border-top: 1px solid #ECECF0; }
.bsa-toggle { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.bsa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bsa-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: rgba(17, 17, 20, .75); }
.bsa-f input { padding: 10px 12px; border-radius: 10px; border: 1px solid #D9D9E0; font: 500 14px inherit; color: #111114; background: #fff; }
.bsa-err { min-height: 18px; margin-top: 10px; color: #B3261E; font-size: 13px; font-weight: 600; }
.bsa-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.bsa-btn { padding: 11px 20px; border-radius: 999px; font: 800 14px inherit; cursor: pointer; border: 1px solid #D9D9E0; }
.bsa-btn.ghost { background: #fff; color: #111114; width: auto; height: auto; font-size: 14px; }
.bsa-btn.solid { background: #111114; color: #fff; border-color: #111114; }
.bsa-btn:disabled { opacity: .6; cursor: progress; }
@media (max-width: 600px) { .bsa-skins, .bsa-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   COVER VIEWER (views/cover-viewer.js): full-screen cover with sound, any theme
   ========================================================== */
.bm-cover-viewer { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, .92); display: grid; place-items: center; animation: skin-rise .3s ease both; }
.bm-cover-viewer .bcv-media { max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; object-fit: contain; }
.bm-cover-viewer .bcv-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 16px; }
.bm-cover-viewer .bcv-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .55); color: #fff; font-size: 20px; cursor: pointer; }
.bm-cover-viewer .bcv-btn:focus-visible { outline: 3px solid #D4A63C; outline-offset: 2px; }

/* ==========================================================
   SIGNED-OUT HOMEPAGE (.hl-page) -- CAMPUS
   ========================================================== */
#bm-skin-hero-bg, #bm-skin-strip, #bm-skin-ticker { display: none; }
@keyframes skin-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes skin-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes skin-dust { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-420px) scale(1.1); opacity: 0; } }
@keyframes skin-ring { to { transform: rotate(360deg); } }
@keyframes skin-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* shared ticker */
html[data-theme="home"][data-skin="campus"] #bm-skin-ticker { display: block; overflow: hidden; margin: 28px -48px 0; padding: 14px 0; white-space: nowrap; }
.bm-skin-ticker-track { display: inline-flex; gap: 28px; align-items: center; animation: skin-ticker 28s linear infinite; padding-left: 28px; }
.bm-skin-ticker-track span { font: 400 20px Graduate, Georgia, serif; letter-spacing: 4px; }
.bm-skin-ticker-track b { font-size: 14px; }
html[data-theme="home"][data-skin="campus"] .hl-feature { animation: skin-rise .6s cubic-bezier(.2, 1.2, .4, 1) both; }
html[data-theme="home"][data-skin="campus"] .hl-feature:nth-child(2) { animation-delay: .06s; } html[data-theme="home"][data-skin="campus"] .hl-feature:nth-child(3) { animation-delay: .12s; }
html[data-theme="home"][data-skin="campus"] .hl-feature:nth-child(4) { animation-delay: .18s; } html[data-theme="home"][data-skin="campus"] .hl-feature:nth-child(5) { animation-delay: .24s; }
html[data-theme="home"][data-skin="campus"] .hl-feature:nth-child(6) { animation-delay: .30s; } html[data-theme="home"][data-skin="campus"] .hl-feature:nth-child(7) { animation-delay: .36s; }
html[data-theme="home"][data-skin="campus"] .hl-feature:nth-child(8) { animation-delay: .42s; }
html[data-theme="home"][data-skin="campus"] .hl-hero-copy > * { animation: skin-rise .7s cubic-bezier(.2, 1.3, .4, 1) both; }
html[data-theme="home"][data-skin="campus"] .hl-hero-copy > :nth-child(2) { animation-delay: .08s; } html[data-theme="home"][data-skin="campus"] .hl-hero-copy > :nth-child(3) { animation-delay: .16s; }
html[data-theme="home"][data-skin="campus"] .hl-hero-copy > :nth-child(4) { animation-delay: .24s; } html[data-theme="home"][data-skin="campus"] .hl-hero-copy > :nth-child(5) { animation-delay: .32s; }
html[data-theme="home"][data-skin="campus"] .hl-auth { animation: skin-rise .8s .2s cubic-bezier(.2, 1.3, .4, 1) both; }

/* ---------------- THE DEN (dark) ---------------- */
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-panel { padding-top: 0; overflow: hidden; background: #0E0C14; }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-hero { position: relative; isolation: isolate; margin: 0 -48px; padding: 96px 48px 72px; min-height: 640px; }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] #bm-skin-hero-bg { display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.bm-skin-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; transform: scale(1.04); }
.bm-skin-hero-shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(10, 8, 16, .94) 0%, rgba(10, 8, 16, .72) 42%, rgba(10, 8, 16, .35) 70%, rgba(10, 8, 16, .55) 100%),
  linear-gradient(180deg, rgba(14, 12, 20, 0) 55%, #0E0C14 100%); }
.bm-skin-hero-led { position: absolute; left: 6%; right: 6%; height: 3px; border-radius: 3px; animation: skin-pulse 4.5s ease-in-out infinite; }
.bm-skin-hero-led.top { top: 0; background: #D4A63C; box-shadow: 0 0 18px 4px rgba(212, 166, 60, .75); }
.bm-skin-hero-led.bottom { bottom: 0; background: #7B3FE4; box-shadow: 0 0 22px 5px rgba(123, 63, 228, .8); animation-delay: -2.2s; }
.bm-skin-dust { position: absolute; inset: 0; pointer-events: none; }
.bm-skin-dust i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 226, 160, .8); filter: blur(.5px); animation: skin-dust 9s linear infinite; }
.bm-skin-dust i:nth-child(1) { left: 6%; animation-delay: 0s; } .bm-skin-dust i:nth-child(2) { left: 14%; animation-delay: 1.2s; width: 3px; height: 3px; }
.bm-skin-dust i:nth-child(3) { left: 22%; animation-delay: 4s; } .bm-skin-dust i:nth-child(4) { left: 31%; animation-delay: 2.4s; width: 2px; height: 2px; }
.bm-skin-dust i:nth-child(5) { left: 39%; animation-delay: 6s; } .bm-skin-dust i:nth-child(6) { left: 47%; animation-delay: 3.3s; background: rgba(184, 146, 255, .8); }
.bm-skin-dust i:nth-child(7) { left: 55%; animation-delay: 7.1s; } .bm-skin-dust i:nth-child(8) { left: 63%; animation-delay: .7s; width: 3px; height: 3px; }
.bm-skin-dust i:nth-child(9) { left: 71%; animation-delay: 5.2s; background: rgba(184, 146, 255, .8); } .bm-skin-dust i:nth-child(10) { left: 78%; animation-delay: 2s; }
.bm-skin-dust i:nth-child(11) { left: 84%; animation-delay: 8s; width: 2px; height: 2px; } .bm-skin-dust i:nth-child(12) { left: 90%; animation-delay: 4.6s; }
.bm-skin-dust i:nth-child(13) { left: 95%; animation-delay: 1.8s; } .bm-skin-dust i:nth-child(14) { left: 51%; animation-delay: 6.6s; width: 3px; height: 3px; }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-kicker { background: rgba(123, 63, 228, .18); color: #fff; border: 1px solid rgba(123, 63, 228, .55); box-shadow: 0 0 16px rgba(123, 63, 228, .4); letter-spacing: 2px; text-transform: uppercase; font-size: 12px; }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-kicker::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #FF3B6B; box-shadow: 0 0 10px #FF3B6B; animation: skin-blink 1.6s ease-in-out infinite; vertical-align: 1px; }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-hero h1 {
  background: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 38%, #F2D27A 50%, #FFFFFF 62%, #FFFFFF 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: skin-shimmer 6s linear infinite, skin-rise .7s both;
  filter: drop-shadow(0 0 22px rgba(123, 63, 228, .55)); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-lede { color: rgba(244, 241, 234, .86); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-btn-solid { box-shadow: 0 0 0 1px rgba(212, 166, 60, .6), 0 10px 30px rgba(212, 166, 60, .35); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-btn-solid:hover { box-shadow: 0 0 0 1px #F2D27A, 0 0 36px rgba(212, 166, 60, .7); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-btn-ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); backdrop-filter: blur(6px); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-store-link { background: rgba(255, 255, 255, .08); backdrop-filter: blur(6px); }
/* sign-in card: dark glass inside a spinning gold/purple ring light */
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-auth { position: relative; background: rgba(16, 13, 26, .72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 0; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); overflow: hidden; isolation: isolate; }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-auth::before { content: ""; position: absolute; inset: -60%; z-index: -2; background: conic-gradient(from 0deg, #D4A63C, #7B3FE4, #D4A63C, #7B3FE4, #D4A63C); animation: skin-ring 10s linear infinite; }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-auth::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: calc(var(--home-r-xl) - 2px); background: rgba(16, 13, 26, .94); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-auth .bm-input { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-auth .bm-input:focus { border-color: #7B3FE4; box-shadow: 0 0 0 3px rgba(123, 63, 228, .35); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] #bm-skin-ticker { background: linear-gradient(90deg, #120E1C, #1A1230, #120E1C); border-top: 1px solid rgba(123, 63, 228, .4); border-bottom: 1px solid rgba(212, 166, 60, .35); margin-top: 0; }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .bm-skin-ticker-track span { color: #F2D27A; text-shadow: 0 0 12px rgba(212, 166, 60, .7); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .bm-skin-ticker-track b { color: #B892FF; text-shadow: 0 0 10px #7B3FE4; }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-preview h2 { font-family: Graduate, Georgia, serif; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-feature,
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-sample-card { position: relative; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-feature::before,
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-sample-card::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 2px; border-radius: 2px; background: var(--led, #7B3FE4); box-shadow: 0 0 14px 2px var(--led, #7B3FE4); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-tint-blue { --led: #7B3FE4; } html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-tint-cream { --led: #D4A63C; }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-tint-pink { --led: #FF4F9A; } html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-tint-mint { --led: #3DDC97; }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-feature:hover { transform: translateY(-4px); box-shadow: 0 0 28px color-mix(in srgb, var(--led) 45%, transparent); border-color: color-mix(in srgb, var(--led) 55%, transparent); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-feature-ic { background: rgba(255, 255, 255, .06); box-shadow: 0 0 16px color-mix(in srgb, var(--led) 35%, transparent); }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-top .hl-btn-solid { box-shadow: 0 0 22px rgba(212, 166, 60, .45); }

/* ---------------- HOMEROOM (light) ---------------- */
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-panel {
  position: relative; background-color: #FFFFFF;
  background-image: linear-gradient(90deg, transparent 54px, rgba(224, 90, 90, .5) 54px, rgba(224, 90, 90, .5) 56px, transparent 56px), repeating-linear-gradient(#FFFFFF 0 31px, rgba(84, 138, 214, .16) 31px 32px);
  border: 1.5px solid #141414; overflow: visible; }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) #bm-skin-strip { display: block; margin: -12px 0 40px; }
.bm-skin-strip-photo { position: relative; margin: 0 auto; max-width: 1040px; padding: 14px 14px 52px; background: #fff; box-shadow: 0 0 0 1px #E6E1D4, 0 22px 44px rgba(60, 50, 20, .18); transform: rotate(-.8deg); animation: skin-drop .9s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes skin-drop { from { opacity: 0; transform: translateY(-30px) rotate(-4deg); } to { opacity: 1; transform: rotate(-.8deg); } }
.bm-skin-strip-media { display: block; width: 100%; height: clamp(220px, 34vw, 400px); object-fit: cover; background-size: cover; background-position: center; }
.bm-skin-strip-photo figcaption { position: absolute; left: 22px; bottom: 10px; font: 700 30px/1 Caveat, cursive; color: #141414; }
.bm-skin-strip-crest { display: none; position: absolute; right: -26px; bottom: -30px; width: 128px; height: 128px; transform: rotate(10deg); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .28)); animation: skin-pop .9s .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.bm-skin-tape { position: absolute; top: -14px; width: 140px; height: 32px; background: rgba(242, 194, 48, .62); z-index: 2; }
.bm-skin-tape.l { left: 40px; transform: rotate(-6deg); } .bm-skin-tape.r { right: 60px; transform: rotate(5deg); }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-kicker { background: #F2C230; color: #141414; font: 700 22px Caveat, cursive; transform: rotate(-2deg); padding: 4px 16px; }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-hero h1 { position: relative; color: #141414; }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-hero h1::after { content: ""; position: absolute; left: 0; bottom: -10px; width: 62%; height: 6px; border-radius: 6px; background: #F2C230; transform-origin: left; animation: skin-draw .9s .5s cubic-bezier(.3, 1.2, .4, 1) both; }
/* sign-in card = an index card with tape */
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-auth { position: relative; background-color: #FFFFFF; border-radius: 6px; transform: rotate(.8deg);
  background-image: linear-gradient(#FFFFFF 0 64px, rgba(224, 90, 90, .55) 64px 66px, transparent 66px), repeating-linear-gradient(transparent 0 31px, rgba(84, 138, 214, .14) 31px 32px);
  box-shadow: 0 0 0 1px #E6E1D4, 0 20px 40px rgba(60, 50, 20, .16); }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-auth::before { content: ""; position: absolute; top: -14px; left: 50%; width: 120px; height: 28px; margin-left: -60px; background: rgba(242, 194, 48, .62); transform: rotate(-3deg); }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) #bm-skin-ticker { background: #141414; transform: rotate(-.6deg); margin: 36px -60px 0; }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .bm-skin-ticker-track span { color: #FFFFFF; }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .bm-skin-ticker-track b { color: #F2C230; }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-preview h2 { font-family: Graduate, Georgia, serif; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; }
/* feature cards = sticky notes */
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-feature,
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-sample-card { border-radius: 3px; box-shadow: 0 10px 18px rgba(60, 50, 20, .12); position: relative; }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-feature:nth-child(odd) { transform: rotate(-1.4deg); } html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-feature:nth-child(even) { transform: rotate(1.2deg); }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-feature:hover { transform: rotate(0) translateY(-6px) scale(1.02); box-shadow: 0 18px 30px rgba(60, 50, 20, .18); }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-tint-blue { background: #DCEBFF; } html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-tint-cream { background: #FFF1A8; }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-tint-pink { background: #FFD9E2; } html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-tint-mint { background: #D5F5E3; }
html[data-theme="home"][data-skin="campus"]:not([data-mode="dark"]) .hl-feature h3 { font: 700 26px/1 Caveat, cursive; }

@media (max-width: 820px) {
  html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-hero { margin: 0 -30px; padding: 72px 30px 48px; min-height: 0; }
  html[data-theme="home"][data-skin="campus"] #bm-skin-ticker { margin-left: -30px; margin-right: -30px; }
}
@media (max-width: 600px) {
  html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-hero { margin: 0 -18px; padding: 56px 18px 36px; }
  html[data-theme="home"][data-skin="campus"] #bm-skin-ticker { margin-left: -18px; margin-right: -18px; }
  .bm-skin-strip-crest { width: 84px; height: 84px; right: -10px; bottom: -22px; }
  .bm-skin-strip-photo figcaption { font-size: 22px; }
  .bm-skin-ticker-track span { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-skin-ticker-track, .bm-skin-dust i, .bm-skin-hero-led { animation: none !important; }
  html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-auth::before { animation: none !important; }
}

/* ==========================================================
   "FLASH" MOTION LAYER -- signed-out homepage, campus skin (both modes)
   html[data-skin-anim="on"] is set by lib/site-skin.js ("calm" on reduced motion / Save-Data)
   ========================================================== */
#bm-skin-brand, #bm-skin-mascot { display: none; }
html[data-theme="home"][data-skin="campus"] #bm-skin-brand { display: flex; align-items: center; gap: 22px; margin: 0 0 18px; }

/* --- the two-sided coin --- */
.bm-coin-wrap { position: relative; width: 168px; height: 168px; flex: none; }
.bm-coin { position: relative; width: 100%; height: 100%; perspective: 900px; cursor: pointer; z-index: 2; background: none; border: 0; padding: 0; animation: bm-coin-in 1s cubic-bezier(.2, 1.6, .4, 1) both; }
.bm-coin-inner { position: absolute; inset: 0; transform-style: preserve-3d; animation: bm-coin-flip 6s 1s cubic-bezier(.65, 0, .25, 1) infinite; }
.bm-coin-inner.spin-now { animation: bm-coin-fast 1s cubic-bezier(.2, .9, .3, 1); }
.bm-coin-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bm-coin-face img { width: 100%; height: 100%; display: block; }
.bm-coin-face.front { transform: translateZ(4.2px); }
.bm-coin-face.back { transform: rotateY(180deg) translateZ(4.2px); }
/* the rim: stacked gold discs give the coin real thickness when it turns edge-on */
.bm-coin-edge { position: absolute; inset: 1.5%; border-radius: 50%; transform: translateZ(var(--z));
  background: radial-gradient(circle, #6E5112 0 60%, #B98A2C 66%, #F2D27A 71%, #8E6A1C 76%, #4A360B 82%); }
/* gloss: a fixed curved highlight, like lacquer */
.bm-coin-gloss { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(120% 70% at 30% 12%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 32%, transparent 48%),
              radial-gradient(90% 60% at 75% 100%, rgba(0, 0, 0, .35), transparent 60%); mix-blend-mode: screen; }
/* sheen: a bright band of light that sweeps across the face as the coin turns (synced to the flip) */
.bm-coin-sheen { position: absolute; inset: -10%; border-radius: 50%; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .0) 38%, rgba(255, 255, 255, .95) 48%, rgba(255, 247, 214, .8) 52%, rgba(255, 255, 255, 0) 62%, transparent 70%);
  background-size: 300% 100%; background-position: 120% 0; animation: bm-sheen 6s 1s cubic-bezier(.65, 0, .25, 1) infinite; }
.bm-coin-face.back .bm-coin-sheen { mix-blend-mode: soft-light; }
@keyframes bm-sheen { 0%, 22% { background-position: 120% 0; } 38% { background-position: -20% 0; } 50%, 72% { background-position: 120% 0; } 88% { background-position: -20% 0; } 100% { background-position: 120% 0; } }
/* halo: warm glow that breathes, brightest when the coin is edge-on */
.bm-coin-glow { position: absolute; inset: -18%; border-radius: 50%; z-index: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(242, 210, 122, .55) 0%, rgba(212, 166, 60, .25) 38%, transparent 68%); animation: bm-glow 6s 1s ease-in-out infinite; }
html[data-mode="dark"] .bm-coin-glow { background: radial-gradient(circle, rgba(242, 210, 122, .6) 0%, rgba(123, 63, 228, .35) 40%, transparent 70%); }
@keyframes bm-glow { 0%, 25%, 55%, 75%, 100% { opacity: .55; transform: scale(1); } 40%, 90% { opacity: 1; transform: scale(1.12); } }
/* flash: a star-glint pops on the rim at each edge-on moment */
.bm-coin-flash { position: absolute; left: 50%; top: 14%; width: 46px; height: 46px; margin-left: -23px; z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0 8%, rgba(255, 255, 255, .0) 30%), conic-gradient(from 0deg, transparent 0 40deg, rgba(255, 255, 255, .95) 45deg, transparent 50deg 130deg, rgba(255, 255, 255, .95) 135deg, transparent 140deg 220deg, rgba(255, 255, 255, .95) 225deg, transparent 230deg 310deg, rgba(255, 255, 255, .95) 315deg, transparent 320deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%);
  animation: bm-flash 6s 1s ease-out infinite; }
@keyframes bm-flash { 0%, 36%, 46%, 86%, 96%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 40%, 90% { opacity: 1; transform: scale(1.3) rotate(45deg); } }
@keyframes bm-coin-flip { 0%, 30% { transform: rotateY(0) translateY(0); } 40% { transform: rotateY(90deg) translateY(-14px); } 50%, 80% { transform: rotateY(180deg) translateY(0); } 90% { transform: rotateY(270deg) translateY(-14px); } 100% { transform: rotateY(360deg) translateY(0); } }
@keyframes bm-coin-fast { from { transform: rotateY(0) scale(1); } 50% { transform: rotateY(540deg) scale(1.12); } to { transform: rotateY(720deg) scale(1); } }
@keyframes bm-coin-in { from { opacity: 0; transform: scale(.2) rotate(-200deg); } to { opacity: 1; transform: none; } }
/* Flash-classic rotating starburst behind the coin */
.bm-coin-rays { position: absolute; inset: -46%; z-index: 1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(242, 210, 122, .55) 0deg 7deg, transparent 7deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: skin-ring 22s linear infinite, skin-pulse 3.2s ease-in-out infinite; }
html[data-mode="dark"] .bm-coin-rays { background: repeating-conic-gradient(from 0deg, rgba(123, 63, 228, .6) 0deg 7deg, transparent 7deg 22.5deg); }
.bm-spark { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; z-index: 3; pointer-events: none; background: var(--h);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: bm-spark .9s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes bm-spark { from { transform: translate(0, 0) scale(.4) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1.3) rotate(220deg); opacity: 0; } }

/* --- script logo writes itself in --- */
.bm-script { width: min(320px, 46vw); height: auto; clip-path: inset(-20% 100% -20% -5%); animation: bm-write 1.6s .5s cubic-bezier(.6, 0, .2, 1) forwards, bm-float 5s 2.2s ease-in-out infinite; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25)); }
@keyframes bm-write { to { clip-path: inset(-20% -5% -20% -5%); } }
@keyframes bm-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(0deg); } }
html[data-mode="dark"] .bm-script { filter: drop-shadow(0 0 18px rgba(212, 166, 60, .55)); }

/* --- headline: letters fly in, then a slow wave --- */
.hl-hero h1 .bm-w { display: inline-block; white-space: nowrap; }
.hl-hero h1 .bm-ch { display: inline-block; animation: bm-ch-in .7s calc(var(--i) * 32ms + .3s) cubic-bezier(.2, 1.7, .4, 1) both, bm-ch-wave 5s calc(var(--i) * 70ms + 2.6s) ease-in-out infinite; }
@keyframes bm-ch-in { from { opacity: 0; transform: translateY(-90px) rotate(-30deg) scale(.4); } to { opacity: 1; transform: none; } }
@keyframes bm-ch-wave { 0%, 82%, 100% { transform: translateY(0); } 88% { transform: translateY(-10px) rotate(-4deg); } 94% { transform: translateY(2px); } }
/* the Den headline: letters glow and flash gold as the wave passes (per-letter, since the shimmer gradient can't span transformed letters) */
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-hero h1:has(.bm-ch) { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #FFFFFF; animation: none; filter: none; }
html[data-theme="home"][data-skin="campus"][data-mode="dark"] .hl-hero h1 .bm-ch { text-shadow: 0 0 18px rgba(123, 63, 228, .75); animation: bm-ch-in .7s calc(var(--i) * 32ms + .3s) cubic-bezier(.2, 1.7, .4, 1) both, bm-ch-wave-den 5s calc(var(--i) * 70ms + 2.6s) ease-in-out infinite; }
@keyframes bm-ch-wave-den { 0%, 82%, 100% { transform: translateY(0); color: #FFFFFF; } 88% { transform: translateY(-10px) rotate(-4deg); color: #F2D27A; text-shadow: 0 0 22px rgba(212, 166, 60, .95); } 94% { transform: translateY(2px); } }

/* --- buttons: pulse ring + springy press --- */
html[data-theme="home"][data-skin="campus"] .hl-hero .hl-btn-solid { position: relative; }
html[data-theme="home"][data-skin="campus"] .hl-hero .hl-btn-solid::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; border: 2px solid currentColor; opacity: 0; animation: bm-ring 2.4s 2s ease-out infinite; color: #D4A63C; }
@keyframes bm-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
html[data-theme="home"][data-skin="campus"] .hl-btn:hover { transform: translateY(-2px) scale(1.04); }
html[data-theme="home"][data-skin="campus"] .hl-btn:active { transform: scale(.92, .86); transition-duration: .06s; }

/* --- 3D tilt + scroll reveal --- */
html[data-skin-anim="on"][data-skin="campus"] .hl-features, html[data-skin-anim="on"][data-skin="campus"] .hl-sample, html[data-skin-anim="on"][data-skin="campus"] .hl-hero { perspective: 1100px; }
html[data-skin-anim="on"][data-skin="campus"] .bm-tilt { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(10px) !important; transition: transform .12s ease-out !important; }
html[data-skin-anim="on"][data-skin="campus"] :is(.hl-feature, .hl-sample-card, .hl-preview h2, .hl-preview-sub):not(.is-in) { opacity: 0; transform: translateY(60px) rotate(-3deg) scale(.92); animation: none; }
html[data-skin-anim="on"][data-skin="campus"] :is(.hl-feature, .hl-sample-card, .hl-preview h2, .hl-preview-sub).is-in { animation: bm-pop-in .75s cubic-bezier(.2, 1.5, .4, 1) both; }
html[data-skin-anim="on"][data-skin="campus"] .hl-feature.is-in:nth-child(4n+2), html[data-skin-anim="on"][data-skin="campus"] .hl-sample-card.is-in:nth-child(2) { animation-delay: .08s; }
html[data-skin-anim="on"][data-skin="campus"] .hl-feature.is-in:nth-child(4n+3), html[data-skin-anim="on"][data-skin="campus"] .hl-sample-card.is-in:nth-child(3) { animation-delay: .16s; }
html[data-skin-anim="on"][data-skin="campus"] .hl-feature.is-in:nth-child(4n) { animation-delay: .24s; }
@keyframes bm-pop-in { 0% { opacity: 0; transform: translateY(60px) rotate(-3deg) scale(.92); } 70% { opacity: 1; transform: translateY(-6px) rotate(.6deg) scale(1.02); } 100% { opacity: 1; } }
/* feature icons bob */
html[data-skin-anim="on"][data-skin="campus"] .hl-feature-ic { animation: bm-bob 3s ease-in-out infinite; }
html[data-skin-anim="on"][data-skin="campus"] .hl-feature:nth-child(even) .hl-feature-ic { animation-delay: -1.5s; }
@keyframes bm-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-6deg); } }
/* hero video drifts with the pointer (Den) */
html[data-skin-anim="on"] .bm-skin-hero-media { transform: scale(1.08) translate(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -12px)); transition: transform .4s ease-out; }
html[data-skin-anim="on"] #bm-skin-brand .bm-coin-wrap { transform: translate(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 8px)); transition: transform .3s ease-out; }

/* --- the panther pops up in the corner and waves --- */
html[data-theme="home"][data-skin="campus"] #bm-skin-mascot { display: block; position: fixed; left: 18px; bottom: 0; z-index: 50; width: 150px; animation: bm-peek 1s 1.4s cubic-bezier(.2, 1.6, .4, 1) both; }
.bm-mascot-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.bm-mascot-btn img { display: block; width: 100%; height: auto; transform-origin: 50% 100%; animation: bm-wave 4s 2.6s ease-in-out infinite; filter: drop-shadow(0 -4px 18px rgba(0, 0, 0, .35)); }
html[data-mode="dark"] .bm-mascot-btn img { filter: drop-shadow(0 0 22px rgba(123, 63, 228, .7)); }
.bm-mascot-bubble { position: absolute; left: 30%; top: -34px; white-space: nowrap; padding: 8px 14px; border-radius: 18px 18px 18px 4px; background: #FFFFFF; z-index: 2; color: #111114; font: 800 14px var(--home-font, sans-serif); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); animation: bm-bubble 4s 2.6s ease-in-out infinite; }
@keyframes bm-peek { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes bm-wave { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(-7deg); } 72% { transform: rotate(6deg); } 78% { transform: rotate(-5deg); } 84% { transform: rotate(3deg); } }
@keyframes bm-bubble { 0%, 55%, 100% { opacity: 0; transform: scale(.6) translateY(8px); } 62%, 92% { opacity: 1; transform: none; } }

@media (max-width: 820px) {
  .bm-coin-wrap { width: 120px; height: 120px; }
  html[data-theme="home"][data-skin="campus"] #bm-skin-mascot { width: 96px; left: 8px; }
  .bm-mascot-bubble { font-size: 12px; padding: 6px 10px; }
}
@media (max-width: 600px) { html[data-theme="home"][data-skin="campus"] #bm-skin-brand { gap: 12px; } .bm-coin-wrap { width: 96px; height: 96px; } }

/* calm: nothing moves, everything visible */
html[data-skin-anim="calm"] :is(.bm-coin-inner, .bm-coin-sheen, .bm-coin-glow, .bm-coin-flash, .bm-coin-rays, .bm-script, .bm-ch, .bm-mascot-btn img, .bm-mascot-bubble, #bm-skin-mascot, .hl-feature-ic, .hl-btn-solid::after) { animation: none !important; }
html[data-skin-anim="calm"] .bm-script { clip-path: none; }
html[data-skin-anim="calm"] .bm-mascot-bubble { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bm-coin-inner, .bm-coin-sheen, .bm-coin-glow, .bm-coin-flash, .bm-coin-rays, .bm-script, .hl-hero h1 .bm-ch, .bm-mascot-btn img, .bm-mascot-bubble, #bm-skin-mascot, .hl-feature-ic { animation: none !important; }
  .bm-script { clip-path: none !important; } .bm-mascot-bubble { opacity: 1; }
}

/* ==========================================================
   BM ICONS (lib/bm-icons.js) -- two-tone, glossy gold, animated
   ========================================================== */
svg .ic-s { fill: currentColor; opacity: .14; }
svg .ic-a { fill: #D4A63C; fill: url(#bm-gold) #D4A63C; }
svg .ic-glow { animation: bmi-glow 2.6s ease-in-out infinite; }
svg .ic-blink { animation: bmi-blink 1.4s ease-in-out infinite; }
svg .ic-dot { animation: bmi-dot 1.4s ease-in-out infinite; } svg .ic-dot:nth-of-type(2) { animation-delay: .18s; } svg .ic-dot:nth-of-type(3) { animation-delay: .36s; }
svg .ic-wave, svg .ic-swing, svg .ic-fan, svg .ic-spin, svg .ic-beat, svg .ic-float { transform-box: fill-box; transform-origin: center; }
svg .ic-swing { transform-box: view-box; }
svg .ic-spin { transform-box: view-box; }
svg .ic-fan { transform-box: view-box; transform-origin: 12px 20px; }
@keyframes bmi-glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes bmi-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes bmi-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-1.6px); } }
@keyframes bmi-swing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-11deg); } 60% { transform: rotate(7deg); } 80% { transform: rotate(-4deg); } }
@keyframes bmi-wave { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes bmi-fan { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg) translateX(-1px); } }
@keyframes bmi-spin { to { transform: rotate(180deg); } }
@keyframes bmi-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } }
@keyframes bmi-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.8px); } }
@keyframes bmi-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
/* hover (or the active nav item) wakes each icon's own move */
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible, .is-active) svg .ic-swing { animation: bmi-swing 1s ease-in-out; }
:is(.hn-item, .hb-item, .hl-feature, .bm-ic-host):is(:hover, :focus-visible) svg .ic-wave { animation: bmi-wave 1.1s ease-out infinite; }
:is(.hn-item, .hb-item, .hl-feature, .bm-ic-host):is(:hover, :focus-visible) svg .ic-wave2 { animation-delay: .35s; }
:is(.hn-item, .hb-item, .hl-feature, .bm-ic-host):is(:hover, :focus-visible) svg .ic-fan { animation: bmi-fan 1.2s cubic-bezier(.3, 1.5, .5, 1) infinite; }
:is(.hn-item, .hb-item, .hl-feature, .bm-ic-host):is(:hover, :focus-visible) svg .ic-spin { animation: bmi-spin 1.2s cubic-bezier(.5, 0, .3, 1) infinite; }
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible, .is-active) svg .ic-beat { animation: bmi-beat 1.2s ease-in-out infinite; }
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) svg .ic-float { animation: bmi-float 1.1s ease-in-out infinite; }
:is(.hn-item, .hb-item, .hl-feature, .bm-ic-host):is(:hover, :focus-visible, .is-active) svg .ic-draw { stroke-dasharray: 40; animation: bmi-draw 1.2s ease-out both; }
/* the whole icon pops a little on hover */
:is(.hn-item, .hb-item, .hn-create) .hn-ic { transition: transform .35s cubic-bezier(.2, 1.8, .4, 1); }
:is(.hn-item, .hb-item, .hn-create):hover .hn-ic { transform: scale(1.18) rotate(-6deg); }
/* gold reads on the active (dark pill) nav item and in dark mode: keep the soft tint lighter there */
.hn-item.is-active svg .ic-s, html[data-mode="dark"] svg .ic-s { opacity: .2; }
/* homepage feature icons: big, glossy, on a glowing tile */
.hl-feature-ic .bmx-ic { width: 34px; height: 34px; }
html[data-theme="home"][data-skin="campus"] .hl-feature-ic { width: 58px; height: 58px; border-radius: 18px; }
html[data-theme="home"] .hl-feature-ic { color: var(--bm-text-primary); }
@media (prefers-reduced-motion: reduce) { svg :is(.ic-glow, .ic-blink, .ic-dot, .ic-wave, .ic-swing, .ic-fan, .ic-spin, .ic-beat, .ic-float, .ic-draw) { animation: none !important; } }

/* ---------- icon sets by mode: Homeroom (playful) in light, The Den (premium monoline) in dark ---------- */
svg .v-den { display: none; }
html[data-mode="dark"] svg .v-den { display: inline; }
html[data-mode="dark"] svg .v-hr { display: none; }
svg .dg { stroke: #D4A63C; stroke: url(#bm-gold) #D4A63C; }
svg .df { fill: #D4A63C; fill: url(#bm-gold) #D4A63C; }
/* premium motion: gold lines draw themselves in on hover / when active; the active item gets a soft gold bloom */
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible, .is-active) svg .v-den .dl { stroke-dasharray: 60; animation: bmi-draw-den 1.1s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes bmi-draw-den { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
html[data-mode="dark"] .hn-item.is-active .hn-ic, html[data-mode="dark"] .hl-feature:hover .bmx-ic { filter: drop-shadow(0 0 6px rgba(212, 166, 60, .55)); }
html[data-mode="dark"] :is(.hn-item, .hb-item, .hn-create):hover .hn-ic { transform: scale(1.1); }

/* ---------- ICON MOTION on hover + selection (both sets) ---------- */
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host) { --ih: 0; }
svg .v-den :is(.dx-r, .dx-l, .dx-spin, .dx-rot, .dx-x, .dx-bob, .dx-drop, .dx-sweep, .dx-tip, .dx-dot, .dx-back, .df) { transform-box: fill-box; transform-origin: center; }
svg .v-den .dx-tip { transform-box: view-box; transform-origin: 12px 4px; }
/* THE DEN: the whole icon re-traces itself in gold, then the gold detail pops */
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) svg .v-den [pathLength],
:is(.hn-item, .hb-item).is-active svg .v-den [pathLength] { stroke-dasharray: 1; animation: dx-trace .9s cubic-bezier(.6, 0, .2, 1) both; }
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) svg .v-den .df,
:is(.hn-item, .hb-item).is-active svg .v-den .df { animation: dx-pop .6s .55s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes dx-trace { 0% { stroke-dashoffset: 1; opacity: .35; } 25% { opacity: 1; } 100% { stroke-dashoffset: 0; } }
@keyframes dx-pop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
/* per-icon signature moves (hover / focus) */
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) svg .v-den .dx-r { animation: dx-r .9s cubic-bezier(.3, 1.5, .5, 1) both; }
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) svg .v-den .dx-l { animation: dx-l .9s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes dx-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.6px); } }
@keyframes dx-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-1.6px); } }
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) svg .v-den .dx-spin { animation: dx-spin 1.1s cubic-bezier(.5, 0, .2, 1) both, dx-trace .9s both; }
@keyframes dx-spin { from { transform: rotate(-90deg) scale(.6); } to { transform: rotate(0) scale(1); } }
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) svg .v-den .dx-rot { animation: dx-rot .6s cubic-bezier(.4, 1.6, .5, 1) both; }
@keyframes dx-rot { from { transform: rotate(-90deg); } to { transform: rotate(0); } }
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) svg .v-den .dx-x { animation: dx-x .9s ease-in-out infinite; }
@keyframes dx-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) svg .v-den .dx-bob { animation: dx-bob .8s ease-in-out infinite; }
@keyframes dx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) svg .v-den .dx-drop { animation: dx-drop .7s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes dx-drop { from { transform: translateY(-4px) scaleY(.4); } to { transform: none; } }
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) svg .v-den .dx-sweep { animation: dx-sweep 1.4s ease-in-out infinite; }
@keyframes dx-sweep { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1.2px, -.8px); } 75% { transform: translate(1.2px, .6px); } }
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) svg .v-den .dx-tip { animation: dx-tip 1.2s ease-in-out both; }
@keyframes dx-tip { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(9deg); } 65% { transform: rotate(-6deg); } }
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) svg .v-den .dx-dot { animation: dx-dot .9s ease-in-out infinite; }
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) svg .v-den .dx-dot:nth-child(2) { animation-delay: .12s; }
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) svg .v-den .dx-dot:nth-child(3) { animation-delay: .24s; }
@keyframes dx-dot { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-2px); } }
:is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) svg .v-den .dx-back { animation: dx-back 1s cubic-bezier(.3, 1.5, .5, 1) both, dx-trace .9s both; }
@keyframes dx-back { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.2px, -1.2px); } }
/* selected item: soft gold breathing */
html[data-mode="dark"] :is(.hn-item, .hb-item).is-active .hn-ic { animation: dx-breathe 2.8s ease-in-out infinite; }
@keyframes dx-breathe { 0%, 100% { filter: drop-shadow(0 0 3px rgba(212, 166, 60, .35)); } 50% { filter: drop-shadow(0 0 9px rgba(212, 166, 60, .8)); } }

/* HOMEROOM: springy bounce-and-tilt on hover, a happy hop when selected */
html:not([data-mode="dark"]) :is(.hn-item, .hb-item, .hl-feature, .hn-create, .bm-ic-host):is(:hover, :focus-visible) :is(.hn-ic, .bmx-ic) { animation: hr-boing .7s cubic-bezier(.3, 1.8, .4, 1); }
html:not([data-mode="dark"]) :is(.hn-item, .hb-item).is-active .hn-ic { animation: hr-hop .6s cubic-bezier(.3, 1.8, .4, 1); }
@keyframes hr-boing { 0% { transform: scale(1) rotate(0); } 30% { transform: scale(1.25, .85) rotate(-8deg); } 60% { transform: scale(.92, 1.12) rotate(5deg); } 100% { transform: scale(1.12) rotate(-4deg); } }
@keyframes hr-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-5px) rotate(-6deg); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  svg .v-den *, :is(.hn-ic, .bmx-ic) { animation: none !important; }
}