/* ============================================================
   BASEBLOOM · Concept 02 — Depth & Material
   Abyssal blue dark · dichroic magenta/cyan/gold · liquid-metal flux
   ============================================================ */

:root {
  --ink:        #060d1a;   /* deep abyssal blue-black */
  --ink-2:      #0b1626;
  --porcelain:  #f0f6ff;   /* headings */
  --sage:       #a9b6c6;   /* body text */
  --sage-dim:   #66788c;   /* meta */
  --copper:     #ff4fae;   /* primary accent — hot magenta (was copper) */
  --copper-hi:  #5ee6ff;   /* secondary accent — ice cyan */
  --gold:       #ffd166;
  --hairline:   rgba(255,79,174,0.3);
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--sage);
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(255,79,174,0.32); color: var(--porcelain); }
a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #060907; }
::-webkit-scrollbar-thumb { background: #24302a; border-radius: 9px; border: 2px solid #060907; }
::-webkit-scrollbar-thumb:hover { background: var(--copper); }

/* generated liquid-metal flux (Higgsfield · Kling 3.0) — breathes behind the bloom */
.flux {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100vw; height: 100vh; object-fit: cover;
  opacity: 0.42; filter: saturate(1.15) brightness(0.85);
}

/* ---------- the 3D stage ---------- */
#stage {
  position: fixed; inset: 0; z-index: 1;
  width: 100vw; height: 100vh; display: block;
  touch-action: pan-y;              /* keep vertical scroll on touch; horizontal drag turns */
  cursor: grab;
}
body.dragging #stage { cursor: grabbing; }
body.dragging { user-select: none; -webkit-user-select: none; }

.webgl-fallback {
  position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, var(--ink-2), var(--ink) 70%);
  text-align: center; padding: 2rem;
}
.webgl-fallback p {
  font-family: "Marcellus", serif; font-size: clamp(1.05rem, 2.3vw, 1.4rem);
  color: var(--sage); line-height: 1.8;
}
.webgl-fallback a { color: var(--copper-hi); border-bottom: 1px solid var(--hairline); }

/* soft vertical haze so text bands stay readable over the scene */
.haze {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,13,26,0.55) 0%, transparent 18%, transparent 78%, rgba(6,13,26,0.7) 100%);
}

/* ---------- chrome ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 1.6rem;
  padding: clamp(1rem, 2.2vw, 1.6rem) clamp(1.2rem, 3.5vw, 2.8rem);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--porcelain); }
.brand-glyph { width: 26px; height: 26px; color: var(--copper); }
.brand-word {
  font-family: "Marcellus", serif; font-size: 0.95rem;
  letter-spacing: 0.38em; padding-left: 0.1em;
}
.topbar-note {
  margin-left: auto; font-size: 0.68rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--sage-dim);
}
.topbar-cta {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--copper-hi); padding: 0.55rem 1.1rem;
  border: 1px solid var(--hairline); border-radius: 999px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.topbar-cta:hover { background: var(--copper); color: var(--ink); }

/* interaction hint */
.hint {
  position: fixed; left: 50%; bottom: clamp(1.3rem, 4vh, 2.4rem); z-index: 30;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage-dim);
  padding: 0.55rem 1.15rem; border: 1px solid rgba(169,182,198,0.16);
  border-radius: 999px; background: rgba(6,13,26,0.55);
  backdrop-filter: blur(6px);
  transition: opacity 0.7s var(--ease);
}
.hint.hidden { opacity: 0; pointer-events: none; }
.hint-key { color: var(--copper-hi); font-weight: 400; }
.hint-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--sage-dim); }

/* ---------- scroll panels ---------- */
#flow { position: relative; z-index: 10; }

.stage-panel {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  padding: clamp(4.5rem, 10vh, 8rem) clamp(1.4rem, 6vw, 6.5rem);
}

.block { max-width: 34rem; }
.block-hero  { margin-right: auto; align-self: flex-end; padding-bottom: clamp(2rem, 8vh, 5rem); }
.block-right { margin-left: auto; }
.block-left  { margin-right: auto; }
.block-center{ margin: 0 auto; text-align: center; }

.kicker {
  font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--copper); margin-bottom: 1.4rem;
}

.hero-title {
  font-family: "Marcellus", serif; font-weight: 400;
  font-size: clamp(2.8rem, 7.5vw, 5.8rem); line-height: 1.02;
  color: var(--porcelain); letter-spacing: 0.01em; margin-bottom: 1.6rem;
}
.hero-title em { font-style: normal; color: var(--copper-hi); }

.section-title {
  font-family: "Marcellus", serif; font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.08;
  color: var(--porcelain); margin-bottom: 1.4rem;
}

.lede, .body-copy {
  font-size: clamp(0.98rem, 1.4vw, 1.1rem); max-width: 32rem;
}
.block-center .body-copy { margin: 0 auto 2rem; }

/* disciplines list */
.disciplines { list-style: none; margin-top: 2rem; display: flex; flex-direction: column; }
.disciplines li {
  display: flex; gap: 1.3rem; padding: 1.3rem 0;
  border-top: 1px solid var(--hairline);
}
.disciplines li:last-child { border-bottom: 1px solid var(--hairline); }
.d-num {
  font-family: "Marcellus", serif; color: var(--copper);
  font-size: 0.95rem; letter-spacing: 0.08em; padding-top: 0.2rem;
}
.disciplines h3 {
  font-family: "Marcellus", serif; font-weight: 400;
  font-size: 1.18rem; color: var(--porcelain); margin-bottom: 0.3rem;
}
.disciplines p { font-size: 0.92rem; color: var(--sage); max-width: 26rem; }

/* stats */
.stats {
  margin-top: 2.2rem; display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.4rem 2rem;
}
.stats div { border-top: 1px solid var(--hairline); padding-top: 0.8rem; }
.stats dt {
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage-dim); margin-bottom: 0.25rem;
}
.stats dd {
  font-family: "Marcellus", serif; font-size: 1.5rem; color: var(--copper-hi);
}

/* CTA */
.cta {
  display: inline-block;
  font-family: "Marcellus", serif; font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  letter-spacing: 0.06em; color: var(--porcelain);
  padding: 1rem 2.2rem; border: 1px solid var(--copper);
  border-radius: 999px;
  transition: background 0.5s var(--ease), color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.cta:hover {
  background: var(--copper); color: var(--ink);
  box-shadow: 0 0 44px -6px rgba(255,79,174,0.55);
}

/* reveal */
.block {
  opacity: 0; transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1.15s var(--ease);
}
.stage-panel.in-view .block { opacity: 1; transform: none; }

/* ---------- footer ---------- */
.foot {
  position: relative; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  padding: 1.8rem clamp(1.4rem, 6vw, 6.5rem) 2.4rem;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sage-dim);
  border-top: 1px solid rgba(255,79,174,0.14);
  background: linear-gradient(transparent, rgba(5,8,7,0.9));
}
.foot-right { margin-left: auto; color: var(--copper); }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .topbar-note { display: none; }
  .block { max-width: 100%; }
  .block-hero { align-self: flex-end; }
  .stage-panel { align-items: flex-end; padding: 5.5rem 1.3rem 4rem; }
  .stats { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .block { transition: opacity 0.4s ease; transform: none; }
}

/* ===== SECOND CUT — Porcelain & Gold (light) ===== */
:root { --ink:#efe9dc; --ink-2:#f7f2e8; --porcelain:#2b241c; --sage:#5c5344;
  --sage-dim:#8a7c66; --copper:#b98a3a; --copper-hi:#8a6425; --gold:#b98a3a;
  --hairline: rgba(90,70,40,0.28); }
body { background: var(--ink); }
.haze { background: linear-gradient(180deg, rgba(239,233,220,0.7) 0%, transparent 18%, transparent 78%, rgba(239,233,220,0.8) 100%); }
.webgl-fallback { background: radial-gradient(ellipse at 50% 40%, var(--ink-2), var(--ink) 70%); }
.hint { background: rgba(247,242,232,0.7); border-color: rgba(90,70,40,0.2); }