/* ============================================================
   CodebyCarter — calm.css
   Global "lower the volume" overrides. Loaded LAST so it wins
   the cascade. Doesn't remove features — just quiets them.
   ============================================================ */

/* === Freeze the "hue" keyframe so animated gradients stop shifting ===
   Many gradient backgrounds across the site use animation:hue Xs linear
   infinite. We keep them gradient — we just stop the shimmer. Calm. */
@keyframes hue{
  0%, 100% { background-position: 0% 50%; }
}

/* === Tighten chapter intros (80vh → 60vh, less padding) === */
.ch-intro{
  min-height:62vh !important;
  padding:110px 24px 60px !important;
}
.ch-intro-h{
  font-size:clamp(46px,8.5vw,108px) !important;
  margin-bottom:22px !important;
}
.ch-intro-sub{
  font-size:clamp(15px,1.5vw,18px) !important;
  margin-bottom:32px !important;
}
.ch-intro-edge--top{top:60px !important}
.ch-intro-edge--bottom{bottom:60px !important}

/* === Chapter outro: tighter, less padding === */
.ch-outro{
  padding:64px 24px 96px !important;
}

/* === Quieter chapter rail entrance pulse === */
.chrail-btn.is-active{
  /* keep highlight, but don't draw eye too aggressively */
  box-shadow:0 4px 14px -4px rgba(212,164,55,.30) !important;
}

/* === Calm the theme FAB pulse — keep one ring, slower === */
.theme-fab-pulse{
  animation-duration:3.4s !important;
}

/* === Calm the sticky-cta green pulse === */
.sticky-cta-pulse{
  animation-duration:3.2s !important;
}

/* === Quieter cursor trail (less noise) === */
.cursor-trail{
  opacity:.55 !important;
}

/* === Hide the floating scroll-orb (atmospheric noise) === */
.scroll-orb{
  display:none !important;
}

/* === Eyes: keep but make subtler === */
.eyes{top:18px !important}
.eye{
  width:34px !important;height:34px !important;
  border-width:2px !important;
  box-shadow:0 3px 10px rgba(0,0,0,.25) !important;
}
.eye-pupil{width:11px !important;height:11px !important}

/* === Per-slide reel orbs: lower opacity (less screaming) === */
.reel-slide::after{
  opacity:.20 !important;
  filter:blur(100px) !important;
}

/* === Reduce the "Try a different vibe" arrow auto-bob === */
.intro-scroll{opacity:.35 !important}

/* === Quickjump nudge: remove the auto-nudge animation === */
.qj-tile{
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease !important;
}

/* === Calm magnetic letter motion (less radius, gentler pull) ===
   This is read by creative.js via custom property if present;
   otherwise the JS uses its own defaults. */
:root{
  --magnet-radius:110;
  --magnet-strength:.22;
}

/* === Reduce-motion users get even more silence === */
@media (prefers-reduced-motion:reduce){
  .theme-fab-pulse,
  .sticky-cta-pulse,
  .scroll-orb,
  .ch-intro-scroll{
    animation:none !important;
    display:none !important;
  }
}

/* ============================================================
   CONTRAST FIXES — words shouldn't blend into backgrounds
   ============================================================ */

/* === Onyx (default — no data-theme): brighten the dark stop of the gold
   gradient so italic accents stay visible on onyx. Scoped to no-theme so
   other themes can use their own .ital gradient. === */
body:not([data-theme]) .ch-intro--hello .ch-intro-h .ital,
body:not([data-theme]) .ch-intro--watch .ch-intro-h .ital,
body:not([data-theme]) .ch-intro--play  .ch-intro-h .ital,
body:not([data-theme]) .ch-intro--talk  .ch-intro-h .ital{
  background:linear-gradient(135deg, #FFE8A0 0%, #E5BC54 50%, #B58620 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}

/* === OCEAN (luxe): cool-white text on deep navy, cyan italics === */
body[data-theme="luxe"] p,
body[data-theme="luxe"] li,
body[data-theme="luxe"] [class$="-sub"],
body[data-theme="luxe"] [class$="-p"],
body[data-theme="luxe"] .section-lead{
  color:rgba(240,244,250,.86) !important;
}
body[data-theme="luxe"] .ital{
  background:linear-gradient(135deg, #5BE0FA 0%, #2DA8E0 50%, #0D5BC8 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  filter:drop-shadow(0 0 10px rgba(45,168,224,.40));
}
body[data-theme="luxe"] .hero-sub{color:rgba(240,244,250,.82) !important}
body[data-theme="luxe"] em{color:#5BE0FA !important}

/* === PAPER (editorial): deep ink on warm white, terracotta accent === */
body[data-theme="editorial"] p,
body[data-theme="editorial"] li,
body[data-theme="editorial"] [class$="-sub"],
body[data-theme="editorial"] [class$="-p"]{
  color:#1A1A1A !important;
}
body[data-theme="editorial"] .ital{
  background:none !important;
  -webkit-background-clip:initial !important;background-clip:initial !important;
  -webkit-text-fill-color:#C04127 !important;color:#C04127 !important;
}

/* === CRIMSON: cream text on wine-black === */
body[data-theme="red"] .hero-sub{color:rgba(255,244,240,.85) !important}
body[data-theme="red"] em{color:#FF8090 !important}

/* ============================================================
   CHAPTER INTRO ITAL — per-theme gradient overrides
   The chapters.css base + my own calm rule are very specific
   (.ch-intro--play .ch-intro-h .ital). We need to match that
   specificity per theme so the italic accent ("yours",
   "website?", etc.) renders in the active theme's gradient.
   ============================================================ */

/* CRIMSON */
body[data-theme="red"] .ch-intro--hello .ch-intro-h .ital,
body[data-theme="red"] .ch-intro--watch .ch-intro-h .ital,
body[data-theme="red"] .ch-intro--play  .ch-intro-h .ital,
body[data-theme="red"] .ch-intro--talk  .ch-intro-h .ital{
  background:linear-gradient(135deg, #FF8090 0%, #DC143C 50%, #B91C1C 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  filter:drop-shadow(0 0 10px rgba(220,38,38,.40)) !important;
}

/* PAPER */
body[data-theme="editorial"] .ch-intro--hello .ch-intro-h .ital,
body[data-theme="editorial"] .ch-intro--watch .ch-intro-h .ital,
body[data-theme="editorial"] .ch-intro--play  .ch-intro-h .ital,
body[data-theme="editorial"] .ch-intro--talk  .ch-intro-h .ital{
  background:none !important;
  -webkit-background-clip:initial !important;background-clip:initial !important;
  -webkit-text-fill-color:#C04127 !important;color:#C04127 !important;
  filter:none !important;
}

/* OCEAN */
body[data-theme="luxe"] .ch-intro--hello .ch-intro-h .ital,
body[data-theme="luxe"] .ch-intro--watch .ch-intro-h .ital,
body[data-theme="luxe"] .ch-intro--play  .ch-intro-h .ital,
body[data-theme="luxe"] .ch-intro--talk  .ch-intro-h .ital{
  background:linear-gradient(135deg, #5BE0FA 0%, #2DA8E0 50%, #0D5BC8 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  filter:drop-shadow(0 0 10px rgba(45,168,224,.45)) !important;
}

/* === Chapter intro sub text: more visible across all themes === */
.ch-intro-sub{
  color:rgba(245,239,224,.78) !important;
}
.ch-intro-sub em{
  color:#FFE8A0 !important;
}

/* === The "Chapter 0X · of 04" eyebrow: brighter on onyx === */
.ch-intro-num{
  color:rgba(229,188,84,.78) !important;
}