/* ==========================================================================
   Monolith — Wolf Yoga Co. case study
   The page breathes between the studio's two states: the white daylight
   den and the black-box practice room (body bg morphs per section, from
   js/pages/wolf-yoga.js). The hero is the sign itself — the one-stroke
   wolf igniting like real neon — and a small breath orb keeps time in
   the corner. Relies on site.css for resets, nav/footer bones, keyframes.
   ========================================================================== */

html { background: #0B0B0D; }
body {
  background: #0B0B0D;
  color: #EFEDE7;
  transition: background-color 0.9s ease;
}

/* adaptive chrome: the header reads the section behind it (toggled from
   js/pages/wolf-yoga.js) — dark over the black box, bone over the den.
   Starts dark, like the hero. */
header.mono-nav {
  background: rgba(11,11,13,0.92); border-bottom: 1px solid rgba(239,237,231,0.07);
  transition: background-color 0.5s ease, border-color 0.5s ease;
}
header.mono-nav .mono-word, header.mono-nav nav a { transition: color 0.35s ease; }
header.mono-nav nav a.is-current { color: #FFFFFF; }
header.mono-nav.wf-light { background: rgba(242,239,233,0.94); border-bottom-color: rgba(15,15,15,0.1); }
header.mono-nav.wf-light .mono-word, header.mono-nav.wf-light nav a { color: #77726A; }
header.mono-nav.wf-light .mono-word:hover, header.mono-nav.wf-light nav a:hover { color: #16161A; }
header.mono-nav.wf-light nav a.is-current { color: #16161A; }
.mono-burger span { transition: transform 0.4s cubic-bezier(0.5,0.15,0.15,1), opacity 0.2s ease, background-color 0.35s ease !important; }
footer.mono-foot { border-top: 1px solid rgba(239,237,231,0.14); }

.wf-cursor { color: #9FE8FF; animation: blink 1.2s steps(1) infinite; }

.wf-wrap { max-width: 1240px; margin: 0 auto; padding: 0 80px; box-sizing: border-box; }

/* ============ breath orb ============ */
.wf-breath {
  position: fixed; right: 26px; bottom: 26px; z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
}
.wf-breath-orb {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: #F4FBFF;
  box-shadow: 0 0 12px rgba(190,235,255,0.9), 0 0 34px rgba(150,220,255,0.5);
  will-change: transform, opacity;
}
.wf-breath-label {
  font-family: 'VCR OSD Mono', monospace; font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(150,160,170,0.75);
}

/* ============ hero ============ */
/* overflow clip: the neon's halo (.wf-neon-glow, 130% wide) otherwise
   pokes past the viewport on phones and opens a horizontal scroll */
.wf-hero { padding: 60px 0 84px; overflow: hidden; }
.wf-kick { font-family: 'VCR OSD Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #6E6E74; }
.wf-kick a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.wf-kick a:hover { color: #9FE8FF; }

.wf-neon-stage { position: relative; margin: 72px auto 0; width: min(100%, 680px); text-align: center; }
.wf-neon-glow {
  position: absolute; left: 50%; top: 42%; width: 130%; height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(120,200,255,0.16) 0%, rgba(120,200,255,0.05) 45%, transparent 70%);
  pointer-events: none;
}
.wf-neon {
  position: relative; display: block; width: 100%; height: auto;
  filter: drop-shadow(0 0 6px rgba(210,245,255,0.95)) drop-shadow(0 0 22px rgba(150,225,255,0.65)) drop-shadow(0 0 70px rgba(110,195,255,0.35));
  animation: wfIgnite 2.3s steps(1, end) 0.3s both;
}
.wf-neon-sub {
  position: relative; display: block; margin-top: 26px;
  font-size: 15px; font-weight: 500; letter-spacing: 0.5em; text-indent: 0.5em;
  color: rgba(239,237,231,0.85); text-transform: uppercase;
  animation: fadein 1s ease 2.7s both;
}
@keyframes wfIgnite {
  0% { opacity: 0.04; } 5% { opacity: 0.5; } 7% { opacity: 0.08; }
  11% { opacity: 0.65; } 13% { opacity: 0.12; } 17% { opacity: 0.85; }
  19% { opacity: 0.3; } 24% { opacity: 1; } 31% { opacity: 0.55; }
  33%, 100% { opacity: 1; }
}
.wf-hero-hint {
  margin: 56px 0 0; text-align: center;
  font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #55555C;
}

.wf-dek { max-width: 580px; margin: 72px auto 0; text-align: center; font-size: 20px; line-height: 1.5; color: rgba(239,237,231,0.8); }

.wf-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 88px; padding-top: 26px; border-top: 1px solid rgba(239,237,231,0.18); }
.wf-meta-item { display: flex; flex-direction: column; gap: 8px; }
.wf-meta-label { font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #6E6E74; }
.wf-meta-val { font-size: 15px; line-height: 1.45; color: #EFEDE7; }

/* ============ sections ============ */
.wf-section { padding: clamp(84px, 9vw, 136px) 0 clamp(36px, 4vw, 56px); }
.wf-grid { display: grid; grid-template-columns: minmax(220px, 0.8fr) 1.6fr; gap: 52px; align-items: start; }

.wf-rail { border-top: 1px solid rgba(20,20,24,0.35); padding-top: 18px; }
.wf-num { display: block; font-family: 'VCR OSD Mono', monospace; font-size: clamp(26px, 2.6vw, 40px); line-height: 1; color: #16161A; }
.wf-num-neon { color: #9FE8FF; text-shadow: 0 0 14px rgba(159,232,255,0.55); }
.wf-h {
  margin: 16px 0 0; font-weight: 500; font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2; letter-spacing: 0.24em; text-transform: uppercase; color: #16161A;
}
.wf-h-light { color: #EFEDE7; }
.wf-section[data-bg="#0B0B0D"] .wf-rail, .wf-outro .wf-rail { border-top-color: rgba(239,237,231,0.25); }

.wf-copy { max-width: 620px; padding-top: 14px; }
.wf-lead { margin: 0 0 20px; font-size: clamp(21px, 2vw, 26px); line-height: 1.42; color: #16161A; }
.wf-body { margin: 0; font-size: 16.5px; line-height: 1.6; color: #56524A; }
.wf-lead-light { color: #EFEDE7; }
.wf-body-light { color: rgba(239,237,231,0.66); }
.wf-lead em, .wf-body em { font-style: normal; border-bottom: 1px solid currentColor; }

/* ============ captions ============ */
.wf-cap {
  display: flex; justify-content: space-between; gap: 24px; margin-top: 14px;
  font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8B867C;
}
.wf-cap-light { color: rgba(239,237,231,0.45); }

/* ============ figures ============ */
.wf-markplate { max-width: 860px; margin: clamp(48px, 6vw, 76px) auto 0; padding: 0 80px; }
.wf-markplate img { display: block; width: min(100%, 560px); margin: 0 auto; height: auto; }

.wf-feature { max-width: 1240px; margin: clamp(44px, 5vw, 68px) auto 0; padding: 0 80px; }
.wf-feature img { display: block; width: 100%; height: auto; }

.wf-duo {
  max-width: 1240px; margin: clamp(44px, 5vw, 68px) auto 0; padding: 0 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 44px); align-items: start;
}
.wf-duo-uneven { grid-template-columns: 0.72fr 1.28fr; }
.wf-fig { margin: 0; }
.wf-fig img { display: block; width: 100%; height: auto; }

.wf-trio {
  max-width: 1240px; margin: clamp(44px, 5vw, 68px) auto 0; padding: 0 80px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(20px, 2.5vw, 36px); align-items: start;
}
.wf-fig-lamp { align-self: end; }

/* dark-section images get a faint glow lift so they sit in the room */
.wf-section[data-bg="#0B0B0D"] .wf-fig img,
.wf-section[data-bg="#0B0B0D"] .wf-feature img { box-shadow: 0 24px 70px rgba(0,0,0,0.55); }

/* ============ outro — the sign switches on one last time ============ */
.wf-outro { padding: clamp(110px, 13vw, 180px) 0 110px; text-align: center; overflow: hidden; }

.wf-outro-stage { position: relative; width: min(440px, 74%); margin: 0 auto; }
.wf-outro-glow {
  position: absolute; left: 50%; top: 50%; width: 170%; height: 210%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(120,200,255,0.18) 0%, rgba(120,200,255,0.06) 45%, transparent 70%);
  opacity: 0; transition: opacity 1.6s ease 0.7s; pointer-events: none;
}
.wf-outro-neon {
  position: relative; display: block; width: 100%; height: auto; opacity: 0.05;
  filter: drop-shadow(0 0 6px rgba(210,245,255,0.95)) drop-shadow(0 0 24px rgba(150,225,255,0.65)) drop-shadow(0 0 74px rgba(110,195,255,0.35));
}
/* .is-lit is added by wolf-yoga.js when the outro enters view: the tube
   stutters awake (same ignition as the hero), then hums forever */
.wf-outro-neon.is-lit { animation: wfIgnite 2s steps(1, end) both, wfHum 7s ease-in-out 2.2s infinite; }
.wf-outro-stage.is-lit .wf-outro-glow { opacity: 1; }
@keyframes wfHum { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }

.wf-outro-line {
  margin: 72px 0 0; font-weight: 500; font-size: clamp(24px, 3.6vw, 46px); line-height: 1.65;
  letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; color: #F2FAFF;
}
.wf-neon-text {
  text-shadow: 0 0 8px rgba(190,235,255,0.8), 0 0 26px rgba(140,215,255,0.45), 0 0 62px rgba(110,195,255,0.28);
  animation: wfHum 5.5s ease-in-out infinite;
}
.wf-neon-text-2 { color: #DFF5FF; animation-delay: 2.7s; }
.wf-outro-hint {
  margin: 46px 0 0; font-family: 'VCR OSD Mono', monospace; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #55555C;
}
.wf-next { display: inline-block; margin-top: 56px; font-family: 'VCR OSD Mono', monospace; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #9FE8FF; text-decoration: none; }
.wf-next:hover { text-shadow: 0 0 12px rgba(159,232,255,0.6); }

/* ============ reveal ============ */
[data-reveal] { opacity: 0.05; transform: translateY(22px); transition: opacity 0.9s cubic-bezier(0.33,1,0.68,1), transform 0.9s cubic-bezier(0.33,1,0.68,1); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ============ mobile ============ */
@media (max-width: 900px) {
  .wf-wrap, .wf-markplate, .wf-feature, .wf-duo, .wf-trio { padding-left: 22px; padding-right: 22px; }
  .wf-grid { grid-template-columns: 1fr; gap: 26px; }
  .wf-meta { grid-template-columns: 1fr 1fr; gap: 22px; }
  .wf-trio { grid-template-columns: 1fr 1fr; }
  .wf-fig-lamp { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .wf-hero { padding-top: 36px; }
  .wf-meta { grid-template-columns: 1fr; }
  .wf-duo, .wf-duo-uneven, .wf-trio { grid-template-columns: 1fr; }
  .wf-breath { right: 18px; bottom: 18px; }
  .wf-dek { text-align: left; }
  .wf-outro-line { letter-spacing: 0.2em; text-indent: 0.2em; font-size: 22px; }
}