/* =============================================
   M⊗ØN'S HAŁØ — MOONS HALO EDITION
   Copper Neon · Cinematic Bronze · Nocturnal Rose
   Palette extracted from artwork:
     Void dark:     #090404 / #120807 / #1A0E0C
     Smoky maroon:  #24110F / #351814 / #4A211D
     Bronze/copper: #8F5547 / #A56A58 / #B97A65
     Amber neon:    #D28A6F / #E09B7D / #F0B090
     Rose-white:    #F4C9B2 / #F7D8C7 / #FFF1E8
     Shadow black:  #050202 / #0D0605
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ── ROOT VARIABLES ── */
:root {
  /* Core void darks — deep smoky maroon blacks */
  --mo-void:      #050202;
  --mo-deep:      #0D0605;
  --mo-abyss:     #0A0404;
  --mo-shadow:    #160A08;
  --mo-maroon:    #1E0D0B;
  --mo-smoke-dk:  #2A1210;
  --mo-soot:      #351814;

  /* Copper / bronze neon spectrum — matching artwork */
  --mo-copper:    #8F5547;
  --mo-bronze:    #A56A58;
  --mo-warm:      #B97A65;
  --mo-amber:     #C98C75;
  --mo-neon:      #D28A6F;
  --mo-hot:       #E09B7D;
  --mo-glow:      #F0B090;
  --mo-bright:    #F4C9B2;
  --mo-white:     #FFF1E8;

  /* Rose-gold metallic — from artwork highlight */
  --mo-rose:      #C4826A;
  --mo-petal:     #E0A88C;
  --mo-blush:     #F2CAAE;

  /* Smoky maroon mid-tones */
  --mo-mid:       #4A211D;
  --mo-ember:     #7A3828;

  /* Text */
  --mo-text:      #F2EDE6;
  --mo-smoke:     rgba(240,176,144,.55);
  --mo-dim:       rgba(180,120,100,.38);

  /* Fonts */
  --font-display: 'Bebas Neue', sans-serif;
  --font-sub:     'Orbitron', sans-serif;
  --font-body:    'Rajdhani', sans-serif;
  --font-mono:    'Space Mono', monospace;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ════════════════════════════════════════
   MOON PORTAL INTRO — COPPER ECLIPSE
   ════════════════════════════════════════ */
.mo-portal {
  position: fixed; inset: 0; z-index: 50000;
  background: radial-gradient(ellipse at 50% 55%,
    #160a08 0%, #0d0504 40%, #050202 100%);
  overflow: hidden; pointer-events: all;
}
body.mo-portal-open { overflow: hidden; }

.mo-portal-stars {
  position: absolute; inset: 0;
  pointer-events: none;
}

/* ── ECLIPSE ── */
.mo-eclipse {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 280px; height: 280px;
  animation: moEclipseEntrance 1.2s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes moEclipseEntrance {
  from { transform: translate(-50%,-50%) scale(0.3); opacity: 0; }
  to   { transform: translate(-50%,-50%) scale(1);   opacity: 1; }
}

/* Copper halo rings — cinematic rose-bronze */
.mo-eclipse-halo {
  position: absolute; border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  border-style: solid;
}
.mo-eclipse-halo-1 {
  width: 340px; height: 340px;
  border-width: 2.5px;
  border-color: rgba(210,138,111,.85);
  box-shadow:
    0 0 8px   rgba(240,176,144,.7),
    0 0 22px  rgba(210,138,111,.55),
    0 0 55px  rgba(180,100,70,.3),
    0 0 110px rgba(143,85,71,.15),
    inset 0 0 20px rgba(224,155,125,.1);
  animation: moHaloRotate1 12s linear infinite, moHaloPulseIn 2.8s ease-in-out infinite alternate;
}
.mo-eclipse-halo-2 {
  width: 400px; height: 400px;
  border-width: 1.5px;
  border-color: rgba(196,130,106,.38);
  box-shadow: 0 0 24px rgba(196,130,106,.2), 0 0 60px rgba(160,95,70,.1);
  animation: moHaloRotate2 20s linear infinite reverse;
}
.mo-eclipse-halo-3 {
  width: 468px; height: 468px;
  border-width: 1px;
  border-color: rgba(160,100,80,.22);
  border-style: dashed;
  box-shadow: 0 0 35px rgba(143,85,71,.08);
  animation: moHaloRotate1 38s linear infinite;
}
/* 4th outer bloom ring */
.mo-eclipse-halo-4 {
  width: 520px; height: 520px;
  border-width: .5px;
  border-color: rgba(130,75,60,.1);
  border-style: dotted;
  animation: moHaloRotate2 55s linear infinite;
}
@keyframes moHaloRotate1 {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes moHaloRotate2 {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes moHaloPulseIn {
  from { box-shadow: 0 0 5px rgba(200,130,100,.45), 0 0 18px rgba(180,100,80,.25); }
  to   { box-shadow: 0 0 18px rgba(250,185,155,.9), 0 0 55px rgba(224,155,125,.65), 0 0 110px rgba(200,130,100,.3), 0 0 200px rgba(143,85,71,.12); }
}

/* Orbiting sparks on halo ring */
.mo-eclipse-sparks {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 340px; height: 340px;
  animation: moHaloRotate1 8s linear infinite;
}
.mo-espark {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,225,190,1) 0%, rgba(224,155,125,.5) 50%, transparent 75%);
  box-shadow: 0 0 8px rgba(224,155,125,.8);
}
.mo-espark-1 { width:8px;height:8px; top:-4px;   left:50%;   transform:translateX(-50%); }
.mo-espark-2 { width:5px;height:5px; top:15%;     right:3%;   }
.mo-espark-3 { width:6px;height:6px; bottom:5%;   left:18%;   }
.mo-espark-4 { width:4px;height:4px; bottom:20%;  right:8%;   }
.mo-espark-5 { width:7px;height:7px; top:38%;     left:-3.5%; }
.mo-espark-6 { width:4px;height:4px; top:8%;      left:25%;   }

/* Planet core — deeper smoky maroon */
.mo-eclipse-planet {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%,
    #321510 0%, #200c08 22%,
    #140806 45%, #0a0403 70%, #050202 100%);
  overflow: hidden;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.9),
    inset 0 -8px 30px rgba(143,85,71,.06);
}

/* Smoky nebula texture on planet — deeper maroon clouds */
.mo-planet-galaxy {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(ellipse 40% 30% at 35% 38%,
      rgba(160,75,55,.15) 0%, transparent 65%),
    radial-gradient(ellipse 25% 18% at 62% 28%,
      rgba(185,110,80,.09) 0%, transparent 60%),
    radial-gradient(ellipse 20% 20% at 50% 70%,
      rgba(100,45,30,.08) 0%, transparent 55%);
  animation: moGalaxyShimmer 5s ease-in-out infinite alternate;
}
@keyframes moGalaxyShimmer {
  from { opacity: .5; }
  to   { opacity: 1; }
}

/* Copper cracks on planet — rose-bronze neon */
.mo-planet-crack {
  position: absolute;
  top: 20%; left: 55%;
  width: 5px; height: 60%;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(196,130,106,.6) 15%,
    rgba(224,155,125,1) 45%,
    rgba(200,120,90,.75) 70%,
    transparent 100%);
  filter: blur(1.8px);
  clip-path: polygon(40% 0%,60% 0%,65% 15%,75% 25%,55% 40%,70% 55%,50% 70%,60% 85%,45% 100%,35% 100%,50% 85%,38% 68%,56% 52%,42% 38%,60% 22%,45% 10%);
  animation: moCrackGlow 2.5s ease-in-out infinite alternate;
}
.mo-crack-2 {
  top: 30%; left: 30%; height: 40%;
  transform: rotate(30deg);
  opacity: .6;
}
@keyframes moCrackGlow {
  from { opacity: .5; filter: blur(2.5px); }
  to   { opacity: 1;  filter: blur(1.5px); }
}

/* Copper corona around planet edge — brighter rose-bronze rim */
.mo-eclipse-corona {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 282px; height: 282px; border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 0 2px rgba(210,138,111,.65),
    0 0 12px 5px rgba(224,155,125,.65),
    0 0 32px 10px rgba(196,120,85,.35),
    0 0 70px 18px rgba(160,90,65,.18),
    0 0 140px 30px rgba(120,60,45,.08);
  pointer-events: none;
  animation: moCoronaPulse 2.8s ease-in-out infinite alternate;
}
@keyframes moCoronaPulse {
  from { box-shadow: 0 0 0 2px rgba(185,110,80,.5), 0 0 9px 3px rgba(200,130,100,.5), 0 0 22px 6px rgba(170,100,70,.24), 0 0 55px 12px rgba(140,80,55,.1); }
  to   { box-shadow: 0 0 0 3px rgba(240,180,145,.85), 0 0 22px 7px rgba(230,165,130,.72), 0 0 60px 16px rgba(210,138,111,.38), 0 0 130px 28px rgba(180,100,70,.18); }
}

/* ── SHATTER SHARDS ── */
.mo-shards {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 1;
}
.mo-shard {
  position: absolute;
  background: radial-gradient(ellipse at center,
    #1e0d0b 0%, #110605 45%, #060302 80%, #020101 100%);
  box-shadow: inset 0 0 40px rgba(0,0,0,.92);
  transition: transform 0.75s cubic-bezier(0.55,0,1,0.45),
              opacity 0.5s ease;
}
.mo-shard::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow:
    0 0 16px rgba(210,138,111,.28),
    0 0 6px  rgba(240,176,144,.14);
  background: linear-gradient(135deg,
    rgba(224,155,125,.04) 0%, transparent 60%);
}
.mo-shard-tl { top:0; left:0; width:52%; height:55%; clip-path:polygon(0 0,100% 0,70% 100%,0 80%); }
.mo-shard-tr { top:0; right:0; width:52%; height:55%; clip-path:polygon(0 0,100% 0,100% 80%,30% 100%); }
.mo-shard-bl { bottom:0; left:0; width:52%; height:55%; clip-path:polygon(0 20%,70% 0,100% 100%,0 100%); }
.mo-shard-br { bottom:0; right:0; width:52%; height:55%; clip-path:polygon(30% 0,100% 20%,100% 100%,0 100%); }
.mo-shard-t  { top:0; left:25%; width:50%; height:30%; clip-path:polygon(10% 0,90% 0,75% 100%,25% 100%); }
.mo-shard-b  { bottom:0; left:25%; width:50%; height:30%; clip-path:polygon(25% 0,75% 0,90% 100%,10% 100%); }
.mo-shard-l  { top:25%; left:0; width:30%; height:50%; clip-path:polygon(0 10%,100% 25%,100% 75%,0 90%); }
.mo-shard-r  { top:25%; right:0; width:30%; height:50%; clip-path:polygon(0 25%,100% 10%,100% 90%,0 75%); }

/* Shard scatter */
.mo-portal.mo-shattering .mo-shard-tl { transform:translate(-120%,-120%) rotate(-25deg); opacity:0; }
.mo-portal.mo-shattering .mo-shard-tr { transform:translate(120%,-120%)  rotate(25deg);  opacity:0; }
.mo-portal.mo-shattering .mo-shard-bl { transform:translate(-120%,120%)  rotate(-20deg); opacity:0; }
.mo-portal.mo-shattering .mo-shard-br { transform:translate(120%,120%)   rotate(20deg);  opacity:0; }
.mo-portal.mo-shattering .mo-shard-t  { transform:translateY(-140%)      rotate(5deg);   opacity:0; }
.mo-portal.mo-shattering .mo-shard-b  { transform:translateY(140%)       rotate(-5deg);  opacity:0; }
.mo-portal.mo-shattering .mo-shard-l  { transform:translateX(-140%)      rotate(-10deg); opacity:0; }
.mo-portal.mo-shattering .mo-shard-r  { transform:translateX(140%)       rotate(10deg);  opacity:0; }

/* ── PORTAL TEXT ── */
.mo-portal-text {
  position: absolute; bottom: 12%; left: 50%;
  transform: translateX(-50%);
  text-align: center; z-index: 3;
  width: 90%; max-width: 600px;
  animation: moPortalTextIn 1.4s ease forwards;
  animation-delay: .5s; opacity: 0;
}
@keyframes moPortalTextIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.mo-portal-label {
  font-family: var(--font-mono); font-size: .52rem;
  letter-spacing: .4em; text-transform: uppercase;
  color: rgba(200,130,100,.55); margin-bottom: 14px;
}
.mo-portal-name {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 5.5rem);
  font-weight: 900; letter-spacing: .1em; line-height: .88;
  font-style: italic;
  background: linear-gradient(145deg,
    #7a3828 0%, #a05038 12%,
    #c47850 26%, #d28a6f 40%,
    #e09b7d 52%, #f4c9b2 65%,
    #e7b29a 78%, #c47850 90%, #a05038 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(210,138,111,.65));
  animation: moPortalNameGlow 3.5s ease-in-out infinite alternate;
  margin-bottom: 10px;
}
@keyframes moPortalNameGlow {
  from { filter: drop-shadow(0 0 18px rgba(200,130,100,.45)); }
  to   { filter: drop-shadow(0 0 55px rgba(240,176,144,.9)) drop-shadow(0 0 110px rgba(210,138,111,.3)); }
}
/* Japanese subtitle in portal */
.mo-portal-jp {
  font-family: var(--font-mono); font-size: .58rem;
  color: rgba(200,130,100,.55);
  letter-spacing: .3em; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.mo-portal-jp::before, .mo-portal-jp::after {
  content: ''; display: block; width: 38px; height: 1px;
  background: rgba(200,130,100,.35);
}
.mo-portal-sub {
  font-family: var(--font-mono); font-size: .52rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(154,130,120,.45); margin-bottom: 32px;
}

/* Enter button — cinematic copper neon bevel */
.mo-portal-enter {
  position: relative;
  font-family: var(--font-sub); font-size: .6rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(244,201,178,.92); cursor: pointer;
  padding: 14px 38px;
  border: 1px solid rgba(210,138,111,.45);
  background: linear-gradient(135deg,
    rgba(14,6,5,.8) 0%, rgba(26,12,10,.7) 100%);
  backdrop-filter: blur(12px);
  display: inline-flex; align-items: center; gap: 10px;
  transition: all .3s;
  animation: moEnterPulse 2.4s ease-in-out infinite alternate;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.mo-portal-enter:hover {
  color: #fff1e8;
  border-color: rgba(240,176,144,.75);
  box-shadow: 0 0 36px rgba(210,138,111,.45), 0 0 80px rgba(160,90,65,.18);
  background: linear-gradient(135deg,
    rgba(30,12,10,.85) 0%, rgba(45,20,15,.75) 100%);
}
@keyframes moEnterPulse {
  from { box-shadow: 0 0 8px rgba(196,120,85,.18); }
  to   { box-shadow: 0 0 30px rgba(210,138,111,.55), 0 0 65px rgba(160,90,65,.15); }
}
.mo-pe-ring {
  position: absolute; inset: -6px;
  border: 1px solid rgba(200,130,100,.22);
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  animation: moPeRingExpand 2.5s ease-out infinite;
}
.mo-pe-ring-2 { animation-delay: 1.25s; }
@keyframes moPeRingExpand {
  0%   { inset: -4px;  opacity: .55; }
  100% { inset: -20px; opacity: 0; }
}

/* ── COPPER BURST on enter ── */
.mo-portal-burst {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 0; height: 0; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,230,200,1) 0%,
    rgba(224,155,125,.92) 18%,
    rgba(180,100,70,.65) 40%,
    rgba(120,60,40,.25)  65%,
    transparent          80%);
  opacity: 0; pointer-events: none;
  transition: none;
}
.mo-portal-burst.mo-burst-active {
  transition: width .6s ease-out, height .6s ease-out, opacity .5s ease-out;
  width: 250vmax; height: 250vmax; opacity: 1;
}

/* ── EXIT STATE ── */
.mo-portal.mo-portal-done {
  opacity: 0;
  transition: opacity .5s ease .25s;
  pointer-events: none;
}

/* Mobile */
@media (max-width: 480px) {
  .mo-eclipse { width: 200px; height: 200px; }
  .mo-eclipse-halo-1 { width: 240px; height: 240px; }
  .mo-eclipse-halo-2 { width: 280px; height: 280px; }
  .mo-eclipse-halo-3 { width: 320px; height: 320px; }
  .mo-eclipse-planet { width: 185px; height: 185px; }
  .mo-eclipse-corona { width: 202px; height: 202px; }
  .mo-eclipse-sparks { width: 240px; height: 240px; }
  .mo-portal-name { font-size: clamp(1.6rem, 10vw, 3.5rem); }
  .mo-portal-text { bottom: 8%; }
}

/* ════════════════════════════════════════
   END PORTAL CSS
   ════════════════════════════════════════ */

body.moon-body {
  background: var(--mo-void);
  color: var(--mo-text);
  font-family: var(--font-body);
  overflow-x: hidden;
  cursor: none;
  /* Very subtle warm maroon base tint matching artwork */
  background-image: radial-gradient(
    ellipse 120% 80% at 70% 20%,
    rgba(36,17,15,.45) 0%,
    transparent 65%
  );
}
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ════════════════════════════════════════
   FIXED CANVASES
   ════════════════════════════════════════ */
#moonBg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
#moonRings {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  opacity: .35;
}

/* ════════════════════════════════════════
   NOISE GRAIN OVERLAY
   ════════════════════════════════════════ */
.mo-noise {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: .032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: moNoiseAnim 0.08s steps(1) infinite;
}
@keyframes moNoiseAnim {
  0%   { background-position: 0 0; }
  25%  { background-position: -50px -25px; }
  50%  { background-position: 25px 50px; }
  75%  { background-position: -25px 75px; }
  100% { background-position: 50px -50px; }
}

/* ════════════════════════════════════════
   CUSTOM CURSOR — EMBER
   ════════════════════════════════════════ */
.mo-cursor {
  position: fixed;
  width: 8px; height: 8px;
  background: radial-gradient(circle, #f4c9b2 0%, #d28a6f 60%, #a05038 100%);
  border-radius: 50%;
  pointer-events: none; z-index: 99999;
  transform: translate(-50%,-50%);
  box-shadow:
    0 0 10px rgba(240,176,144,.95),
    0 0 28px rgba(210,138,111,.55),
    0 0 55px rgba(160,90,65,.2);
  transition: transform .08s ease;
}
.mo-cursor-ring {
  position: fixed;
  width: 30px; height: 30px;
  border: 1px solid rgba(210,138,111,.5);
  border-radius: 50%;
  pointer-events: none; z-index: 99998;
  transform: translate(-50%,-50%);
  transition: left .12s ease, top .12s ease;
  box-shadow: 0 0 8px rgba(180,100,70,.15);
}

/* ════════════════════════════════════════
   BACK NAV
   ════════════════════════════════════════ */
.mo-back {
  position: fixed; top: 24px; left: 28px;
  z-index: 1000;
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(200,130,100,.55);
  display: flex; align-items: center; gap: 8px;
  transition: color .25s;
}
.mo-back:hover { color: #e09b7d; }

/* ════════════════════════════════════════
   HERO — MOONS HALO CINEMATIC
   ════════════════════════════════════════ */
.mo-hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  z-index: 2;
}

/* Full-bleed artwork */
.mo-hero-img {
  position: absolute; inset: 0;
  background-image: url('../images/moon-cover.jpg');
  background-size: cover;
  background-position: center top;
  transform: scale(1.06);
  transition: transform .1s ease-out;
  will-change: transform;
  /* Subtle warm tint to unify with artwork */
  filter: brightness(.92) saturate(1.1) contrast(1.04);
}

/* Layered overlay — deeper maroon left, heavy bottom fade */
.mo-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(5,2,2,.92) 0%,
      rgba(22,10,8,.78) 28%,
      rgba(18,8,7,.45) 52%,
      rgba(12,5,4,.15) 75%,
      transparent 100%),
    linear-gradient(to top,
      rgba(5,2,2,1)    0%,
      rgba(9,4,3,.88)  18%,
      rgba(5,2,2,.55)  42%,
      rgba(5,2,2,.12)  65%,
      transparent      85%),
    radial-gradient(ellipse 60% 50% at 65% 40%,
      rgba(36,17,15,.22) 0%, transparent 65%);
}

/* The copper neon arc — sweeping comet trail matching artwork diagonal sweep */
.mo-copper-arc {
  position: absolute;
  bottom: -25%; left: -8%;
  width: 88%; height: 95%;
  border-radius: 50%;
  background: conic-gradient(
    from 192deg,
    transparent 0deg,
    rgba(160,90,65,.0)  22deg,
    rgba(196,120,85,.6) 50deg,
    rgba(224,155,125,1) 68deg,
    rgba(240,185,155,.95) 76deg,
    rgba(224,155,125,.8) 88deg,
    rgba(196,120,85,.4) 110deg,
    rgba(160,90,65,.0)  140deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(transparent 60%, black 61%);
  mask: radial-gradient(transparent 60%, black 61%);
  filter: blur(1.2px);
  pointer-events: none;
  animation: moCopperArcDrift 16s ease-in-out infinite alternate;
  z-index: 1;
}
/* Secondary softer arc */
.mo-copper-arc-2 {
  position: absolute;
  bottom: -20%; left: -3%;
  width: 78%; height: 82%;
  border-radius: 50%;
  background: conic-gradient(
    from 198deg,
    transparent 0deg,
    rgba(143,85,71,.0)  35deg,
    rgba(175,108,85,.38) 62deg,
    rgba(210,138,111,.55) 78deg,
    rgba(175,108,85,.38) 96deg,
    rgba(143,85,71,.0)  128deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(transparent 58%, black 59%);
  mask: radial-gradient(transparent 58%, black 59%);
  filter: blur(4px);
  pointer-events: none;
  animation: moCopperArcDrift 24s ease-in-out infinite alternate-reverse;
  z-index: 1;
}
/* Faint third arc for depth */
.mo-copper-arc-3 {
  position: absolute;
  bottom: -35%; left: -12%;
  width: 96%; height: 105%;
  border-radius: 50%;
  background: conic-gradient(
    from 188deg,
    transparent 0deg,
    rgba(120,65,50,.0)  40deg,
    rgba(143,85,71,.18) 72deg,
    rgba(180,110,80,.28) 85deg,
    rgba(143,85,71,.18) 102deg,
    rgba(120,65,50,.0)  135deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(transparent 63%, black 64%);
  mask: radial-gradient(transparent 63%, black 64%);
  filter: blur(6px);
  pointer-events: none;
  animation: moCopperArcDrift 30s ease-in-out infinite alternate;
  z-index: 1;
  opacity: .65;
}
@keyframes moCopperArcDrift {
  from { transform: rotate(-5deg) scaleX(.96); }
  to   { transform: rotate(5deg)  scaleX(1.04); }
}

/* Glow orbs — warm copper/rose halos matching artwork light sources */
.mo-glow-orb {
  position: absolute;
  top: 38%; right: 30%;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(240,185,150,.9) 0%,
    rgba(210,138,111,.55) 35%,
    rgba(180,100,70,.22)  60%,
    transparent           80%);
  filter: blur(18px);
  animation: moOrbPulse 3s ease-in-out infinite alternate;
  pointer-events: none; z-index: 1;
}
/* Second smaller orb — like a city light flare from artwork */
.mo-glow-orb-2 {
  position: absolute;
  top: 55%; right: 18%;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(200,130,100,.7) 0%,
    rgba(160,90,65,.3)  50%,
    transparent          75%);
  filter: blur(10px);
  animation: moOrbPulse 4.2s ease-in-out infinite alternate-reverse;
  pointer-events: none; z-index: 1;
}
@keyframes moOrbPulse {
  from { transform: scale(1);    opacity: .5; }
  to   { transform: scale(1.45); opacity: 1; }
}

/* Hero content */
.mo-hero-content {
  position: relative; z-index: 3;
  max-width: 1200px; margin: 0 auto;
  padding: 0 56px 100px;
  width: 100%;
}

.mo-hero-eyebrow {
  font-family: var(--font-mono); font-size: .52rem;
  letter-spacing: .42em; text-transform: uppercase;
  color: rgba(200,130,100,.5); margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.mo-hero-eyebrow::before {
  content: ''; display: block; width: 22px; height: 1px;
  background: rgba(200,130,100,.4);
}

/* Main name — bold italic condensed metallic copper rose */
.mo-hero-name {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 10vw, 9.5rem);
  font-weight: 900; font-style: italic;
  line-height: .86; letter-spacing: .05em;
  background: linear-gradient(148deg,
    #7a3828 0%,
    #a86048 10%,
    #c47850 22%,
    #d28a6f 36%,
    #e09b7d 50%,
    #f4c9b2 62%,
    #e7b29a 72%,
    #c47850 84%,
    #8f5547 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 45px rgba(224,155,125,.8));
  animation: moHeroNameGlow 2.8s ease-in-out infinite alternate;
  margin-bottom: 8px;
}
@keyframes moHeroNameGlow {
  from { filter: drop-shadow(0 0 28px rgba(196,120,85,.6)); }
  to   { filter: drop-shadow(0 0 70px rgba(250,195,165,1)) drop-shadow(0 0 150px rgba(210,138,111,.4)); }
}

/* Japanese subtitle */
.mo-hero-jp {
  font-family: var(--font-mono); font-size: .65rem;
  color: rgba(200,130,100,.5);
  letter-spacing: .35em; margin-bottom: 22px;
  display: flex; align-items: center; gap: 16px;
}
.mo-hero-jp::before, .mo-hero-jp::after {
  content: ''; display: block; flex: 0 0 48px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,130,100,.4), transparent);
}

/* Role ornament */
.mo-hero-ornament {
  display: inline-flex; align-items: center;
  gap: 14px; margin-bottom: 20px;
}
.mo-hero-ornament-inner {
  font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(180,120,100,.6);
  border-left: 2px solid rgba(200,130,100,.4);
  padding-left: 12px;
}

/* Role tags */
.mo-hero-roles {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 26px;
}
.mo-role-tag {
  font-family: var(--font-mono); font-size: .5rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(200,130,100,.75);
  border: 1px solid rgba(200,130,100,.22);
  padding: 5px 14px;
  background: rgba(200,130,100,.05);
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}

.mo-hero-quote {
  font-family: var(--font-body); font-size: 1rem;
  color: rgba(240,176,144,.55);
  border-left: 2px solid rgba(200,130,100,.35);
  padding-left: 16px;
  max-width: 520px; line-height: 1.7;
  margin-bottom: 40px;
  font-style: italic;
}

/* CTA buttons */
.mo-hero-ctas {
  display: flex; flex-wrap: wrap; gap: 16px;
}
.mo-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sub); font-size: .58rem;
  letter-spacing: .22em; text-transform: uppercase;
  padding: 14px 32px;
  border: none; cursor: pointer;
  transition: all .3s; position: relative;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.mo-btn-fire {
  background: linear-gradient(135deg,
    #5a2518 0%, #8a4030 28%,
    #b06040 55%, #c87850 75%, #e09b7d 100%);
  color: #fff1e8;
  box-shadow: 0 0 32px rgba(210,138,111,.5), 0 4px 22px rgba(143,85,71,.35);
}
.mo-btn-fire:hover {
  box-shadow: 0 0 55px rgba(224,155,125,.8), 0 4px 35px rgba(200,130,100,.5);
  transform: translateY(-2px);
}
.mo-btn-ghost {
  background: rgba(200,130,100,.06);
  color: rgba(224,155,125,.85);
  border: 1px solid rgba(200,130,100,.35);
  backdrop-filter: blur(8px);
}
.mo-btn-ghost:hover {
  background: rgba(200,130,100,.14);
  border-color: rgba(224,155,125,.65);
  color: #f4c9b2;
  box-shadow: 0 0 28px rgba(200,130,100,.25);
}

/* Scroll indicator */
.mo-scroll {
  position: absolute; bottom: 36px; right: 56px;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px; z-index: 3;
}
.mo-scroll-line {
  width: 1px; height: 55px;
  background: linear-gradient(to bottom, rgba(200,130,100,.6), transparent);
  animation: moScrollLine 2s ease-in-out infinite;
}
@keyframes moScrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ════════════════════════════════════════
   SECTION BASE
   ════════════════════════════════════════ */
.mo-section {
  position: relative; z-index: 2;
  padding: 100px 0;
}
.mo-container {
  max-width: 1200px; margin: 0 auto;
  padding: 0 56px;
}
@media (max-width: 768px) {
  .mo-container { padding: 0 24px; }
  .mo-hero-content { padding: 0 24px 80px; }
}

/* Separator */
.mo-sep {
  height: 1px; position: relative; z-index: 2;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200,130,100,.0)  5%,
    rgba(200,130,100,.35) 30%,
    rgba(224,155,125,.55) 50%,
    rgba(200,130,100,.35) 70%,
    rgba(200,130,100,.0)  95%,
    transparent 100%);
}

/* Labels & titles */
.mo-label {
  font-family: var(--font-mono); font-size: .52rem;
  letter-spacing: .42em; text-transform: uppercase;
  color: rgba(200,130,100,.5); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.mo-label::before {
  content: ''; display: block; width: 18px; height: 1px;
  background: rgba(200,130,100,.4);
}
.mo-section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.8rem);
  letter-spacing: .06em; font-style: italic;
  line-height: 1.05;
  color: var(--mo-text);
  margin-bottom: 56px;
}
.mo-section-title em {
  font-style: normal;
  background: linear-gradient(135deg, #d28a6f, #f4c9b2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Scroll reveal */
.mo-reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.mo-reveal.visible { opacity: 1; transform: none; }

/* ════════════════════════════════════════
   ABOUT SECTION
   ════════════════════════════════════════ */
.mo-about-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px; align-items: center;
}
@media (max-width: 900px) {
  .mo-about-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* Artwork frame — with rose-copper metallic border glow */
.mo-artwork-frame {
  position: relative;
  border: 1px solid rgba(210,138,111,.28);
  box-shadow:
    0 0 0 1px rgba(160,90,65,.12),
    0 12px 60px rgba(143,85,71,.25),
    0 0 120px rgba(120,60,45,.12);
}
.mo-artwork-frame img {
  width: 100%;
  filter: brightness(.9) saturate(1.18) contrast(1.02);
}
.mo-corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: rgba(200,130,100,.7);
  border-style: solid;
}
.mo-corner-tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.mo-corner-tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.mo-corner-bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.mo-corner-br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.mo-artwork-frame::after {
  content: '';
  position: absolute; inset: -24px; z-index: -1;
  background: radial-gradient(ellipse at center,
    rgba(210,138,111,.22) 0%,
    rgba(143,85,71,.10) 45%,
    transparent 70%);
  pointer-events: none;
}
.mo-artwork-badge {
  font-family: var(--font-mono); font-size: .48rem;
  letter-spacing: .32em; text-transform: uppercase;
  color: rgba(200,130,100,.55);
  border-top: 1px solid rgba(200,130,100,.18);
  padding: 12px 16px; text-align: center;
  background: rgba(200,130,100,.04);
}

.mo-about-text p {
  font-size: 1.05rem; line-height: 1.8;
  color: rgba(240,176,144,.65);
  margin-bottom: 20px;
}
.mo-about-text strong { color: #e09b7d; font-weight: 600; }
.mo-about-text em     { color: rgba(224,155,125,.8); font-style: italic; }

/* Stats */
.mo-stats {
  display: flex; gap: 40px; margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid rgba(200,130,100,.14);
}
.mo-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem; font-style: italic;
  background: linear-gradient(135deg, #d28a6f, #f4c9b2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1; margin-bottom: 4px;
}
.mo-stat-lbl {
  font-family: var(--font-mono); font-size: .47rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(180,120,100,.45);
}

/* ════════════════════════════════════════
   QUOTE BLOCK
   ════════════════════════════════════════ */
.mo-quote-block {
  position: relative; z-index: 2;
  padding: 90px 0;
  background: linear-gradient(155deg,
    rgba(30,13,11,.55) 0%,
    rgba(5,2,2,.0) 45%,
    rgba(22,10,8,.35) 100%);
  overflow: hidden;
}
.mo-quote-block::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(200,130,100,.35) 30%,
    rgba(224,155,125,.55) 50%,
    rgba(200,130,100,.35) 70%, transparent);
}
.mo-quote-block::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(200,130,100,.35) 30%,
    rgba(224,155,125,.55) 50%,
    rgba(200,130,100,.35) 70%, transparent);
}
.mo-quote-mark {
  font-family: var(--font-display);
  font-size: 8rem; font-style: italic;
  color: rgba(200,130,100,.07);
  line-height: .7;
  position: absolute; top: 20px; left: 44px;
  pointer-events: none;
}
.mo-big-quote {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2.8vw, 2.1rem);
  font-weight: 300; line-height: 1.55;
  color: rgba(240,176,144,.75);
  margin-bottom: 22px;
}
.mo-quote-glow {
  background: linear-gradient(135deg,
    #c47850 0%, #d28a6f 35%,
    #f0b090 65%, #f4c9b2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 16px rgba(224,155,125,.65));
}
.mo-quote-attr {
  font-family: var(--font-mono); font-size: .52rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(200,130,100,.4);
}

/* ════════════════════════════════════════
   MUSIC / TRACK LIST
   ════════════════════════════════════════ */
.mo-player-embed {
  background: rgba(26,14,12,.7);
  border: 1px solid rgba(200,130,100,.15);
  padding: 28px; margin-bottom: 20px;
  position: relative;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
}
.mo-player-label {
  font-family: var(--font-mono); font-size: .48rem;
  letter-spacing: .32em; text-transform: uppercase;
  color: rgba(200,130,100,.45);
  text-align: center; margin-bottom: 22px;
}

.mo-track-list { display: flex; flex-direction: column; gap: 10px; }
.mo-track {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  border: 1px solid rgba(200,130,100,.1);
  background: rgba(26,14,12,.5);
  cursor: pointer;
  transition: background .25s, border-color .25s;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.mo-track:hover {
  background: linear-gradient(90deg,
    rgba(210,138,111,.1) 0%, rgba(160,90,65,.05) 100%);
  border-color: rgba(210,138,111,.38);
  box-shadow: inset 2px 0 0 rgba(210,138,111,.5);
}
.mo-track.active {
  background: linear-gradient(90deg,
    rgba(210,138,111,.14) 0%, rgba(160,90,65,.06) 100%);
  border-color: rgba(240,176,144,.5);
  box-shadow: inset 2px 0 0 rgba(240,176,144,.7);
}
.mo-track.locked { cursor: default; opacity: .5; }
.mo-track-num {
  font-family: var(--font-mono); font-size: .5rem;
  color: rgba(200,130,100,.4); width: 20px; text-align: center;
}
.mo-track-title {
  font-family: var(--font-sub); font-size: .75rem;
  letter-spacing: .14em; color: var(--mo-text); flex: 1;
}
.mo-track-feat {
  font-family: var(--font-mono); font-size: .45rem;
  color: rgba(200,130,100,.5);
}
.mo-track-tags { display: flex; gap: 6px; }
.mo-tag {
  font-family: var(--font-mono); font-size: .4rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(200,130,100,.6);
  border: 1px solid rgba(200,130,100,.2);
  padding: 3px 8px;
}
.mo-track-duration {
  font-family: var(--font-mono); font-size: .48rem;
  color: rgba(180,120,100,.4);
}
.mo-lock-icon {
  color: rgba(200,130,100,.35); font-size: .7rem;
}

/* Player embed box */
#moPlayerEmbed {
  display: none;
  margin-top: 20px;
}

/* ════════════════════════════════════════
   CRAFT GRID
   ════════════════════════════════════════ */
.mo-craft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.mo-craft-card {
  background: linear-gradient(145deg,
    rgba(30,13,11,.75) 0%, rgba(18,8,6,.55) 100%);
  border: 1px solid rgba(200,130,100,.13);
  padding: 32px 28px;
  transition: border-color .3s, background .3s, transform .3s, box-shadow .3s;
  position: relative; overflow: hidden;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
.mo-craft-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent, rgba(200,130,100,.5) 50%, transparent);
  opacity: 0; transition: opacity .3s;
}
.mo-craft-card:hover {
  border-color: rgba(224,155,125,.42);
  background: linear-gradient(145deg,
    rgba(200,130,100,.1) 0%, rgba(143,85,71,.06) 100%);
  transform: translateY(-5px);
  box-shadow: 0 8px 40px rgba(143,85,71,.18);
}
.mo-craft-card:hover::before { opacity: 1; }
.mo-craft-icon {
  width: 44px; height: 44px;
  background: rgba(200,130,100,.1);
  border: 1px solid rgba(200,130,100,.2);
  display: flex; align-items: center; justify-content: center;
  color: #d28a6f; font-size: 1.1rem;
  margin-bottom: 18px;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
.mo-craft-card h4 {
  font-family: var(--font-sub); font-size: .75rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--mo-text); margin-bottom: 10px;
}
.mo-craft-card p {
  font-size: .9rem; line-height: 1.7;
  color: rgba(180,120,100,.55);
}

/* ════════════════════════════════════════
   CONNECT
   ════════════════════════════════════════ */
.mo-connect-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px; align-items: start;
}
@media (max-width: 900px) {
  .mo-connect-grid { grid-template-columns: 1fr; gap: 48px; }
}
.mo-connect-grid h3 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-style: italic; letter-spacing: .06em;
  color: var(--mo-text); margin-bottom: 18px;
}
.mo-connect-grid h3 em {
  font-style: normal;
  background: linear-gradient(135deg, #d28a6f, #f4c9b2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mo-connect-grid p {
  font-size: 1rem; line-height: 1.75;
  color: rgba(200,130,100,.5); margin-bottom: 28px;
}
.mo-socials {
  display: flex; gap: 14px; flex-wrap: wrap;
}
.mo-social {
  width: 42px; height: 42px;
  border: 1px solid rgba(200,130,100,.25);
  display: flex; align-items: center; justify-content: center;
  color: rgba(200,130,100,.7); font-size: 1rem;
  transition: all .25s;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
.mo-social:hover {
  background: rgba(200,130,100,.12);
  color: #e09b7d;
  border-color: rgba(224,155,125,.55);
  box-shadow: 0 0 18px rgba(200,130,100,.3);
}
.mo-connect-link {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(200,130,100,.1);
  margin-bottom: 12px;
  background: rgba(26,14,12,.5);
  transition: all .25s;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.mo-connect-link:hover {
  background: rgba(200,130,100,.08);
  border-color: rgba(200,130,100,.3);
}
.mo-connect-link-icon {
  width: 36px; height: 36px;
  background: rgba(200,130,100,.1);
  border: 1px solid rgba(200,130,100,.2);
  display: flex; align-items: center; justify-content: center;
  color: #d28a6f; font-size: .9rem; flex-shrink: 0;
}
.mo-connect-link-label {
  display: block;
  font-family: var(--font-mono); font-size: .46rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(200,130,100,.45);
}
.mo-connect-link-val {
  display: block;
  font-family: var(--font-body); font-size: .9rem;
  color: rgba(240,176,144,.75);
}

/* ════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════ */
.mo-footer {
  position: relative; z-index: 2;
  padding: 60px 0 40px;
  border-top: 1px solid rgba(200,130,100,.14);
  background: linear-gradient(to bottom,
    rgba(9,4,3,.92) 0%, rgba(5,2,2,1) 100%);
  text-align: center;
}
.mo-footer-logo {
  font-family: var(--font-display);
  font-size: 1.6rem; font-style: italic;
  letter-spacing: .22em;
  color: rgba(200,130,100,.5);
  margin-bottom: 16px;
}
.mo-footer-logo span { color: rgba(224,155,125,.8); }
.mo-footer-copy {
  font-family: var(--font-mono); font-size: .46rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(180,120,100,.28); margin-bottom: 24px;
}
.mo-footer-links {
  display: flex; justify-content: center;
  gap: 32px; flex-wrap: wrap;
}
.mo-footer-link {
  font-family: var(--font-mono); font-size: .48rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(200,130,100,.4);
  transition: color .25s;
}
.mo-footer-link:hover { color: #e09b7d; }

/* ════════════════════════════════════════
   SPARK PARTICLES
   ════════════════════════════════════════ */
.mo-spark {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 9999;
  animation: moSparkFade .5s ease forwards;
}
@keyframes moSparkFade {
  from { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  to   { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); }
}

/* ════════════════════════════════════════
   TRACK PLAY ICON
   ════════════════════════════════════════ */
.mo-track-play {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(210,138,111,.3);
  background: rgba(210,138,111,.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--mo-hot);
  font-size: .7rem;
  transition: all .25s;
}
.mo-track:hover .mo-track-play {
  background: rgba(210,138,111,.18);
  border-color: rgba(240,176,144,.55);
  color: var(--mo-bright);
  box-shadow: 0 0 14px rgba(210,138,111,.35);
}

/* Quote span colors */
.mo-q-fire {
  color: var(--mo-hot);
  filter: drop-shadow(0 0 10px rgba(210,138,111,.6));
}
.mo-q-halo {
  background: linear-gradient(135deg, #c47850 0%, #e09b7d 45%, #f4c9b2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(224,155,125,.65));
}

/* ════════════════════════════════════════
   METALLIC ROSE DECORATIVE ELEMENTS
   ════════════════════════════════════════ */
.mo-rose-bloom {
  position: absolute; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(224,155,125,.12) 0%,
    rgba(180,100,70,.06)  45%,
    transparent 70%);
  filter: blur(22px);
  animation: moRoseBreath 5s ease-in-out infinite alternate;
}
@keyframes moRoseBreath {
  from { transform: scale(1); opacity: .5; }
  to   { transform: scale(1.3); opacity: 1; }
}

/* Music section dark bg enhancement */
.mo-music-bg {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(22,10,8,.35) 20%,
    rgba(14,6,5,.5)  60%,
    transparent 100%);
}