/* Lula Spore — Pink Rot
   Blush fungal luxury pop site, borrowing the cinematic one-page frame from NOXA
   and rotting it pink. */

:root {
  --bg: #070307;
  --bg-deep: #020102;
  --bg-card: rgba(24, 8, 15, 0.78);
  --bg-petal: #160810;
  --pink: #f6a0c8;
  --pink-hot: #ff4f9f;
  --pink-rot: #c93470;
  --mauve: #8f4965;
  --plum: #401926;
  --cream: #ffe7ee;
  --text: #ffeaf2;
  --text-dim: #d99aaa;
  --text-mute: #8f5d6c;
  --line: rgba(246, 160, 200, 0.18);
  --line-bright: rgba(246, 160, 200, 0.48);
  --shadow-pink: 0 0 60px rgba(255, 79, 159, .28);
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-title: 'Cinzel', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section-pad: clamp(3rem, 7vh, 5.5rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, audio { font: inherit; }
::selection { background: var(--pink-hot); color: #1a020b; }

.pink-bg { position: fixed; inset: 0; z-index: -3; overflow: hidden; background:
  radial-gradient(ellipse at 50% 12%, rgba(255, 117, 174, .20), transparent 44%),
  radial-gradient(ellipse at 16% 80%, rgba(201, 52, 112, .18), transparent 55%),
  radial-gradient(ellipse at 88% 52%, rgba(246, 160, 200, .10), transparent 50%),
  linear-gradient(180deg, #090308 0%, #020102 100%);
}
.rot-haze { position: absolute; inset: -20%; background:
  radial-gradient(circle at 50% 42%, transparent 0 24%, rgba(7,3,7,.62) 54%, #020102 100%),
  repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 70px);
  mix-blend-mode: screen; opacity: .55;
}
.spores { position:absolute; inset:0; opacity:.56; background-repeat: repeat; animation: float-spores 240s linear infinite; }
.spores-near { background-image:
  radial-gradient(2px 2px at 30px 40px, rgba(246,160,200,.75), transparent),
  radial-gradient(1px 1px at 100px 180px, rgba(255,255,255,.48), transparent),
  radial-gradient(2px 2px at 260px 90px, rgba(255,79,159,.54), transparent),
  radial-gradient(1px 1px at 430px 230px, rgba(246,160,200,.62), transparent),
  radial-gradient(1.5px 1.5px at 660px 120px, rgba(255,231,238,.50), transparent),
  radial-gradient(2px 2px at 900px 340px, rgba(201,52,112,.62), transparent); background-size: 980px 580px; }
.spores-far { background-image:
  radial-gradient(1px 1px at 80px 70px, rgba(255,255,255,.26), transparent),
  radial-gradient(1px 1px at 300px 340px, rgba(246,160,200,.30), transparent),
  radial-gradient(1px 1px at 700px 90px, rgba(255,79,159,.24), transparent); background-size: 1400px 820px; animation-duration: 520s; opacity:.38; }
@keyframes float-spores { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-1100px,0); } }

.topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display:flex; align-items:center; justify-content:space-between; padding: 1rem var(--gutter); background: rgba(7,3,7,.60); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.logo { display:flex; align-items:center; gap:.7rem; }
.logo-sigil { width: 30px; height: 30px; color: var(--pink); filter: drop-shadow(0 0 18px rgba(246,160,200,.45)); animation: slow-spin 36s linear infinite; }
.logo span { font-family: var(--font-title); font-size: 1.05rem; letter-spacing: .28em; font-weight: 700; }
.nav-links { display:flex; gap: 2rem; list-style: none; font: 700 .68rem/1 var(--font-mono); letter-spacing:.18em; text-transform:uppercase; color: var(--text-dim); }
.nav-links a { position:relative; transition: color .2s ease; }
.nav-links a:hover { color: var(--pink); }
.nav-links a::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background: var(--pink); transform: scaleX(0); transition: transform .25s ease; }
.nav-links a:hover::after { transform: scaleX(1); }
@keyframes slow-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .nav-links { display:none; } .logo span { font-size: .95rem; } }

.hero { position: relative; min-height: 92svh; display:flex; align-items:center; padding: 6rem var(--gutter) 3.2rem; overflow:hidden; }
.hero-backdrop { position:absolute; inset:0; z-index:-2; background:
  linear-gradient(90deg, rgba(7,3,7,.72), rgba(7,3,7,.44), rgba(7,3,7,.82)),
  url('images/pink-rot-system-board-02.jpg') center/cover no-repeat; opacity:.42; filter: saturate(1.15) contrast(1.1); transform: scale(1.04); }
.hero-orbit { position:absolute; top:50%; left:50%; width:min(80vmin,760px); aspect-ratio:1; transform:translate(-50%,-50%); color:var(--pink); opacity:.16; filter: drop-shadow(0 0 100px rgba(255,79,159,.42)); pointer-events:none; }
.hero-orbit svg { width:100%; height:100%; animation: slow-spin 110s linear infinite reverse; }
.hero-grid { position:relative; z-index:2; width:min(1280px, 100%); margin:0 auto; display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .72fr); gap: clamp(2rem, 6vw, 5rem); align-items:center; }
.hero-copy { max-width: 820px; }
.eyebrow { font: 700 .7rem/1.3 var(--font-mono); letter-spacing:.36em; text-transform:uppercase; color: var(--pink); margin-bottom: 1.25rem; }
.hero-title { font-family: var(--font-title); font-weight: 800; font-size: clamp(5rem, 15vw, 12.5rem); line-height:.78; letter-spacing:.01em; color:transparent; background: linear-gradient(180deg, #ffe8f0 0%, #ff9ac6 42%, #c93470 74%, #4b162c 100%); -webkit-background-clip:text; background-clip:text; filter: drop-shadow(0 0 45px rgba(255,79,159,.32)); text-transform:uppercase; }
.hero-subtitle { max-width: 620px; margin: 1.4rem 0 2rem; font: italic clamp(1.12rem, 2vw, 1.65rem)/1.45 var(--font-display); color: var(--cream); text-shadow: 0 0 24px rgba(0,0,0,.55); }
.hero-meta { display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom: 2rem; }
.hero-meta span, .button { border:1px solid var(--line-bright); background: rgba(255,160,200,.07); border-radius:999px; padding:.62rem .95rem; font:700 .65rem/1 var(--font-mono); letter-spacing:.18em; text-transform:uppercase; }
.hero-actions { display:flex; flex-wrap:wrap; gap: .85rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height: 44px; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { color:#210711; background: linear-gradient(135deg, #ffd6e5, #ff72ac 52%, #d93a7a); border-color: transparent; box-shadow: var(--shadow-pink); }
.button.ghost { color: var(--cream); }
.hero-card { position:relative; border:1px solid var(--line-bright); background: rgba(255,231,238,.045); padding:.75rem; box-shadow: 0 28px 90px rgba(0,0,0,.5), var(--shadow-pink); transform: rotate(1.5deg); }
.hero-card::before { content:""; position:absolute; inset:-12px; border:1px solid rgba(246,160,200,.12); z-index:-1; transform: rotate(-2deg); }
.hero-card img { width:100%; max-height: min(74vh, 780px); object-fit:cover; object-position:center; filter: saturate(1.08) contrast(1.02); }
.hero-card-caption { display:flex; justify-content:space-between; gap:1rem; padding:.75rem .25rem .1rem; color:var(--text-dim); font:700 .62rem/1.2 var(--font-mono); letter-spacing:.18em; text-transform:uppercase; }
.scroll-cue { position:absolute; bottom:1.7rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:.55rem; align-items:center; color: var(--text-mute); font:700 .58rem/1 var(--font-mono); letter-spacing:.3em; }
.scroll-cue i { display:block; width:1px; height:42px; background: linear-gradient(var(--pink), transparent); animation: pulse-line 1.8s ease-in-out infinite; }
@keyframes pulse-line { 50% { transform: scaleY(1.35); opacity: .5; } }
@media (max-width: 920px) { .hero-grid { grid-template-columns:1fr; } .hero-card { max-width: 560px; margin:0 auto; } }

.section-frame { position:relative; padding: var(--section-pad) 0; border-top:1px solid var(--line); }
.section-head { width:min(820px, calc(100% - var(--gutter)*2)); margin:0 auto 2.4rem; text-align:center; }
.section-title { font: 600 clamp(2.5rem, 6.8vw, 5.8rem)/.96 var(--font-display); letter-spacing:-.02em; color: var(--text); margin-bottom:1rem; }
.section-tagline { color: var(--text-dim); font: italic clamp(1rem, 1.8vw, 1.25rem)/1.5 var(--font-display); }
.album-layout, .split { width:min(1280px, calc(100% - var(--gutter)*2)); margin:0 auto; display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items:start; }
.cover-panel, .mycelium-art, .artifact-card { border:1px solid var(--line-bright); background: rgba(255,231,238,.04); padding:.55rem; box-shadow: 0 24px 70px rgba(0,0,0,.44); }
.cover-panel img, .mycelium-art img, .artifact-card img { width:100%; height:100%; object-fit:cover; }
figcaption { padding:.8rem .25rem .2rem; color: var(--text-mute); font: 700 .62rem/1.4 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; }
.album-notes { display:flex; flex-direction:column; gap:1rem; }
.note-card, .note-grid article { border:1px solid var(--line); background: var(--bg-card); backdrop-filter: blur(12px); }
.note-card { padding: clamp(1.2rem, 3vw, 2rem); }
.note-card.is-quote p { font: italic 600 clamp(2rem, 4.5vw, 4rem)/1.02 var(--font-display); color: var(--cream); }
.note-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1rem; }
.note-grid article { padding:1.1rem; }
.note-grid span { display:block; color: var(--pink); font:700 .62rem/1 var(--font-mono); letter-spacing:.18em; margin-bottom:.65rem; }
.note-grid strong { display:block; color:var(--cream); font-family:var(--font-display); font-size:1.35rem; line-height:1.05; margin-bottom:.5rem; }
.note-grid p, .concept-copy p { color: var(--text-dim); font-size:.98rem; }
@media (max-width: 900px) { .album-layout, .split { grid-template-columns:1fr; } .note-grid { grid-template-columns:1fr; } }

.tracklist-section { background: linear-gradient(180deg, rgba(64,25,38,.10), transparent 40%); }
.tracks { width:min(1080px, calc(100% - var(--gutter)*2)); margin:0 auto; list-style:none; display:flex; flex-direction:column; gap:.85rem; }
.track { position:relative; display:grid; grid-template-columns: 76px 1fr auto; gap:1rem; align-items:start; padding:1.15rem; border:1px solid var(--line); background: rgba(14,5,10,.78); box-shadow: 0 14px 44px rgba(0,0,0,.28); overflow:hidden; }
.track::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(246,160,200,.10), transparent 35%); opacity:0; transition:opacity .2s ease; }
.track:hover::before, .track.is-playing::before { opacity:1; }
.track-num { position:relative; font: 600 2.2rem/.9 var(--font-display); color: var(--pink); opacity:.86; }
.track-body { position:relative; }
.track h3 { font: 600 clamp(1.45rem, 3vw, 2.25rem)/1 var(--font-display); color: var(--cream); margin-bottom:.35rem; }
.track p { color: var(--text-dim); max-width: 720px; margin-bottom:.8rem; }
.track-tag { position:relative; justify-self:end; color:var(--pink); font:700 .7rem/1 var(--font-mono); letter-spacing:.16em; padding-top:.4rem; }
audio { width: min(620px, 100%); height: 38px; accent-color: var(--pink-hot); filter: sepia(.15) saturate(1.6); }
.track.is-title { border-color: rgba(255,79,159,.52); box-shadow: 0 0 45px rgba(255,79,159,.13); }
.track.is-aftercare { background: linear-gradient(90deg, rgba(255,231,238,.08), rgba(14,5,10,.76)); }
.cuts-panel { width:min(1080px, calc(100% - var(--gutter)*2)); margin:1.5rem auto 0; display:grid; grid-template-columns: .45fr 1fr; gap:1rem; padding:1.35rem; border:1px solid var(--line-bright); background: linear-gradient(135deg, rgba(255,79,159,.10), rgba(9,3,8,.86)); }
.cuts-panel h3 { font:600 clamp(2rem, 4vw, 3.6rem)/1 var(--font-display); }
.cuts { list-style:none; display:grid; gap:.75rem; }
.cuts li { display:grid; grid-template-columns: 44px 1fr auto; gap:.8rem; align-items:center; color:var(--cream); }
.cuts li audio { grid-column: 2 / -1; width:100%; }
.cuts span, .cuts em { color:var(--pink); font:700 .7rem/1 var(--font-mono); letter-spacing:.12em; font-style:normal; }
@media (max-width: 760px) { .track { grid-template-columns: 52px 1fr; } .track-tag { grid-column:2; justify-self:start; } .cuts-panel { grid-template-columns:1fr; } .cuts li { grid-template-columns: 36px 1fr auto; } }

.concept-section { background:
  linear-gradient(180deg, transparent, rgba(255,79,159,.06)),
  radial-gradient(ellipse at 30% 10%, rgba(246,160,200,.12), transparent 42%); }
.concept-copy { align-self:center; }
.concept-copy .section-title { margin-bottom:1.4rem; }
.concept-copy p { margin-bottom:1rem; font-size:1.04rem; }
.concept-pills { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.4rem; }
.concept-pills span { border:1px solid var(--line); color:var(--pink); padding:.45rem .65rem; font:700 .6rem/1 var(--font-mono); letter-spacing:.14em; }
.mycelium-art { transform: rotate(-1deg); }

.artifact-grid { width:min(1280px, calc(100% - var(--gutter)*2)); margin:0 auto; display:grid; grid-template-columns: 1.15fr .85fr; gap:1rem; }
.artifact-card.big { grid-row: span 2; }
.artifact-card { min-height: 280px; }
.artifact-card img { aspect-ratio: 5 / 4; }
.artifact-card.big img { aspect-ratio: 5 / 4; }
@media (max-width: 900px) { .artifact-grid { grid-template-columns:1fr; } .artifact-card.big { grid-row:auto; } }

.site-footer { padding: 3rem var(--gutter); display:flex; flex-direction:column; align-items:center; text-align:center; gap:.75rem; border-top:1px solid var(--line); background:#030103; }
.site-footer svg { width:48px; height:48px; color:var(--pink); filter: drop-shadow(0 0 24px rgba(246,160,200,.45)); }
.site-footer p { font: italic 1.35rem/1 var(--font-display); color:var(--cream); }
.site-footer span { color:var(--text-mute); font:700 .62rem/1.4 var(--font-mono); letter-spacing:.18em; }

.reveal { opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity:1; transform:none; }
}