/* ============================================================
   calm-vagus.css — keeps the warm, airy paper brand, and adds
   the living vagus-nerve motif: an anatomy hero, drifting
   glimmers, a faint flowing nerve thread, and a breathing pacer.
   Loads AFTER styles.css (reuses its tokens). LIGHT theme.
   ============================================================ */

:root { --gold: #e9a13c; --gold-soft: #f3c878; --gold-deep: #c8801f; }

/* ---------- Ambient flowing nerve thread (fixed, faint) ---------- */
.nerve-amb { position: fixed; top: 0; right: 7%; height: 100vh; width: 220px; z-index: 0; pointer-events: none; opacity: .55; }
.nerve-amb .base { fill: none; stroke: rgba(214,160,82,.30); stroke-width: 2.2; }
.nerve-amb .pulse { fill: none; stroke: var(--gold-soft); stroke-width: 2.6; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(233,161,60,.8)); stroke-dasharray: 70 1200; animation: nervePulse 9s linear infinite; }
.nerve-amb .node { fill: var(--gold-soft); filter: drop-shadow(0 0 7px rgba(233,161,60,.8)); animation: nodePulse 5s ease-in-out infinite; }
.nerve-amb .node.n2 { animation-delay: 1.6s; } .nerve-amb .node.n3 { animation-delay: 3.1s; }
@keyframes nervePulse { from { stroke-dashoffset: 1270; } to { stroke-dashoffset: 0; } }
@keyframes nodePulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 1100px) { .nerve-amb { display: none; } }

/* keep content above the thread */
.site-header, main, .footer { position: relative; z-index: 2; }

/* ---------- Anatomy hero ---------- */
.vhero { position: relative; padding: 170px 0 80px; overflow: hidden; }
.vhero .hero-wash {
  position: absolute; inset: 0; z-index: 0; filter: blur(8px);
  background:
    radial-gradient(closest-side at 80% 30%, rgba(233,161,60,.26), transparent 66%),
    radial-gradient(closest-side at 92% 70%, rgba(192,118,74,.16), transparent 70%),
    radial-gradient(closest-side at 8% 16%, rgba(124,154,130,.26), transparent 70%);
}
.vhero .container { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; position: relative; z-index: 2; }
.vhero .hero-copy { max-width: 840px; margin: 0 auto; text-align: center; }
.vhero h1 { font-size: clamp(2.9rem, 6vw, 4.7rem); line-height: 1.02; margin: 22px 0 0; letter-spacing: -.015em; }
.vhero h1 .hl { color: var(--clay); font-style: italic; }
.vhero h1 .lit {
  font-style: italic;
  background: linear-gradient(100deg, var(--gold-deep), var(--gold) 55%, #b85f2f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vhero p.sub { margin: 24px auto 0; font-size: 1.22rem; color: var(--ink-soft); line-height: 1.6; max-width: 620px; }
.vhero .hero-cta { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.vhero .hero-rating {
  margin-top: 26px; display: inline-flex; align-items: center; gap: 12px;
  background: var(--paper-card); border: 1px solid var(--line); border-radius: 100px;
  padding: 9px 18px 9px 14px; box-shadow: 0 10px 26px -18px rgba(44,58,51,.5);
}
.vhero .hero-rating .stars { color: var(--amber); font-size: 16px; letter-spacing: 2px; line-height: 1; }
.vhero .hero-rating .rtext { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.vhero .hero-rating .rtext b { color: var(--ink); }

/* traffic-light cue in place of the old figure */
.hero-figcue { display: flex; flex-direction: column; align-items: center; gap: 13px; margin-top: 34px; }
.hero-figcue .dots { display: inline-flex; gap: 14px; }
.hero-figcue .dots i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 -3px 6px rgba(0,0,0,.2); }
.hero-figcue .dg { background: radial-gradient(circle at 38% 32%,#8fdcb0,#5fb487 55%,#3f8c63); }
.hero-figcue .dy { background: radial-gradient(circle at 38% 32%,#f4dd8b,#e6c156 55%,#c79f33); }
.hero-figcue .dr { background: radial-gradient(circle at 38% 32%,#f0a08e,#d86b53 55%,#b94e38); }
.hero-figcue .fc-line { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--sage-deep); }

/* the figure */
.anatomy { position: relative; display: flex; justify-content: center; align-items: center; min-height: 540px; }
.anatomy .glow-halo {
  position: absolute; width: 78%; height: 86%; border-radius: 50%;
  background: radial-gradient(circle, rgba(233,161,60,.34), rgba(233,161,60,.10) 45%, transparent 70%);
  filter: blur(26px); animation: heroHalo 7s ease-in-out infinite; z-index: 0;
}
@keyframes heroHalo { 0%,100% { opacity: .8; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
.anatomy img {
  position: relative; z-index: 2; height: 560px; width: auto; max-width: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 86%, transparent 100%);
  filter: drop-shadow(0 24px 40px rgba(44,58,51,.22));
}
.anatomy .float-tag {
  position: absolute; z-index: 3; background: rgba(251,248,242,.86); border: 1px solid rgba(214,160,82,.4);
  backdrop-filter: blur(6px); color: var(--ink); border-radius: 100px; padding: 9px 15px;
  font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 12px 30px -14px rgba(44,58,51,.5);
}
.anatomy .ft-1 { top: 14%; left: 0; animation: floaty 6s ease-in-out infinite; }
.anatomy .ft-2 { bottom: 16%; right: 0; animation: floaty 6s ease-in-out infinite 2.4s; }
.anatomy .float-tag .pip { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 9px var(--gold); }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* drifting glimmer particles (hero) */
.glimmers { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.glimmers i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #fff3d6, rgba(233,161,60,.5) 60%, transparent);
  animation: glimRise linear infinite;
}
@keyframes glimRise {
  0% { transform: translateY(20px) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: .9; }
  100% { transform: translateY(-120px) scale(1); opacity: 0; }
}

/* ---------- Breathing pacer (light) ---------- */
.breathe-stage { text-align: center; }
.breathe-wrap { position: relative; width: min(320px, 78vw); aspect-ratio: 1; margin: 38px auto 0; display: grid; place-items: center; }
.breathe-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(214,160,82,.35); }
.breathe-ring.r2 { inset: 12%; border-color: rgba(124,154,130,.3); }
.breathe-halo { position: absolute; width: 86%; height: 86%; border-radius: 50%;
  background: radial-gradient(circle, rgba(233,161,60,.34), transparent 66%); animation: breathe 16s ease-in-out infinite; }
.breathe-orb {
  width: 44%; height: 44%; border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #fbe3a6, var(--gold) 56%, var(--gold-deep));
  box-shadow: 0 0 50px -6px rgba(233,161,60,.65), inset 0 -10px 24px rgba(150,90,10,.35);
  animation: breathe 16s ease-in-out infinite;
}
@keyframes breathe {
  0% { transform: scale(.62); } 25% { transform: scale(1.0); } 37.5% { transform: scale(1.0); }
  87.5% { transform: scale(.62); } 100% { transform: scale(.62); }
}
.breathe-label { position: relative; z-index: 3; font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: #6b4410; font-weight: 600; }
.breathe-cap { margin-top: 28px; color: var(--ink-faint); font-size: 14px; font-weight: 600; letter-spacing: .04em; }

/* ---------- Vagus mid-page feature (light, uses the figure) ---------- */
.vfeature-l { background: var(--paper-2); position: relative; overflow: hidden; }
.vfeature-l .container { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.vfeature-l .vf-media { position: relative; display: flex; justify-content: center; }
.vfeature-l .vf-media .glow-halo { position: absolute; width: 80%; height: 80%; border-radius: 50%; background: radial-gradient(circle, rgba(233,161,60,.3), transparent 66%); filter: blur(24px); animation: heroHalo 8s ease-in-out infinite; }
.vfeature-l .vf-media img { position: relative; z-index: 2; width: 300px; max-width: 80%; border-radius: 8px;
  box-shadow: var(--shadow-cover), 0 0 54px -12px rgba(233,161,60,.5); transform: rotate(-2deg); transition: transform .5s var(--ease); }
.vfeature-l .vf-media:hover img { transform: rotate(0) translateY(-6px); }
.vbenefits { list-style: none; margin: 22px 0 28px; display: grid; gap: 13px; }
.vbenefits li { display: flex; gap: 13px; align-items: flex-start; }
.vbenefits .vchip { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; background: var(--amber-tint); border: 1px solid rgba(214,160,82,.35); }
.vbenefits .vt { color: var(--ink-soft); font-size: 15.5px; line-height: 1.45; }
.vbenefits .vt b { color: var(--ink); display: block; }

/* ---------- Original vagus-nerve illustration (hero) ---------- */
.anatomy .nerve-art { width: 100%; max-width: 470px; height: auto; position: relative; z-index: 2; overflow: visible; }
.nerve-art .nervegrp { animation: nerveBreathe 6.5s ease-in-out infinite; }
@keyframes nerveBreathe { 0%,100% { opacity: .9; } 50% { opacity: 1; } }
.nerve-art .nerve-pulse { stroke: #fff4d6; stroke-width: 5.5; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 7px rgba(246,207,134,.95)); stroke-dasharray: 56 1700; animation: nerveFlow 6.5s linear infinite; }
@keyframes nerveFlow { from { stroke-dashoffset: 1756; } to { stroke-dashoffset: 0; } }
.nerve-art .nn { animation: nodePulse 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.nerve-art .nn.h2 { animation-delay: 1.1s; }
.nerve-art .nn.h3 { animation-delay: 2.2s; }
.nerve-art .heart { animation: heartBeat 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes heartBeat { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: .95; transform: scale(1.14); } }

@media (max-width: 980px) {
  .vhero { padding: 140px 0 60px; }
  .vhero .container { grid-template-columns: 1fr; gap: 24px; }
  .anatomy { order: -1; min-height: 420px; }
  .anatomy img { height: 420px; }
  .vfeature-l .container { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .vfeature-l .vf-media { order: -1; }
  .vbenefits li { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .nerve-amb .pulse, .nerve-amb .node, .glow-halo, .breathe-orb, .breathe-halo, .float-tag, .glimmers i,
  .nerve-art .nervegrp, .nerve-art .nerve-pulse, .nerve-art .nn, .nerve-art .heart { animation: none !important; }
}