/* DeepSense Circadian Education Animations — V1.2
 * Native SVG + CSS animations. No framework or external dependency.
 */

.circadian-learning {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(228,196,134,.2), transparent 24rem),
    radial-gradient(circle at 88% 80%, rgba(22,161,162,.14), transparent 28rem),
    linear-gradient(180deg, #f9faf8 0%, #f3f7f6 100%);
}

.circadian-learning-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2rem, 5vw, 4.5rem);
}

.circadian-learning-note {
  padding: 1.15rem 1.2rem;
  border: 1px solid rgba(10,30,61,.12);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.78);
  color: var(--ink-700);
  box-shadow: var(--shadow-xs);
}

.circadian-learning-note strong {
  display: block;
  margin-bottom: .4rem;
  color: var(--ink-950);
}

.circadian-learning-note a { color: var(--teal-900); }

.circadian-story-list {
  display: grid;
  gap: clamp(1.3rem, 3vw, 2.2rem);
}

.circadian-story {
  --story-accent: var(--gold-500);
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(280px, .84fr);
  align-items: stretch;
  min-height: 440px;
  overflow: hidden;
  border: 1px solid rgba(10,30,61,.1);
  border-radius: clamp(1.25rem, 3vw, 2.2rem);
  background: rgba(255,255,255,.92);
  box-shadow: 0 20px 60px rgba(6,21,46,.08);
}

.circadian-story:nth-child(even) { grid-template-columns: minmax(280px, .84fr) minmax(0, 1.16fr); }
.circadian-story:nth-child(even) .circadian-story-visual { order: 2; }
.circadian-story[data-tone="teal"] { --story-accent: var(--teal-500); }
.circadian-story[data-tone="navy"] { --story-accent: #4d79ba; }

.circadian-story-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: clamp(.8rem, 2vw, 1.5rem);
  background:
    radial-gradient(circle at 52% 45%, rgba(228,196,134,.1), transparent 40%),
    linear-gradient(145deg, #06152e, #0a2846 72%, #0d3f54);
}

.circadian-story-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 90%);
}

.circadian-story-visual svg {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 410px;
  overflow: visible;
}

.circadian-story-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3.25rem);
}

.circadian-story-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--story-accent) 50%, white);
  border-radius: 50%;
  background: color-mix(in srgb, var(--story-accent) 12%, white);
  color: var(--ink-950);
  font-size: .82rem;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}

.circadian-story-copy h3 { font-size: clamp(1.55rem, 2.4vw, 2.35rem); }
.circadian-story-copy .lede { margin-top: 1rem; font-size: clamp(1rem, 1.2vw, 1.14rem); }
.circadian-story-takeaway {
  margin-top: 1.15rem;
  padding-left: 1rem;
  border-left: 3px solid var(--story-accent);
  color: var(--ink-800);
  font-weight: 660;
}

.circadian-story-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  margin-top: 1.35rem;
}

.circadian-control {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  min-height: 2.45rem;
  padding: .55rem .8rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink-900);
  font-size: .78rem;
  font-weight: 720;
  line-height: 1;
  transition: border-color var(--duration), transform var(--duration) var(--ease-out), box-shadow var(--duration);
}
.circadian-control:hover { border-color: var(--ink-700); transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.circadian-control svg { width: 1rem; height: 1rem; }

.circadian-sources {
  margin-top: 1rem;
  border-top: 1px solid var(--ink-100);
  padding-top: .9rem;
  color: var(--ink-600);
  font-size: .8rem;
}
.circadian-sources summary {
  width: fit-content;
  color: var(--teal-900);
  cursor: pointer;
  font-weight: 720;
}
.circadian-sources ol { margin: .75rem 0 0; padding-left: 1.25rem; }
.circadian-sources li + li { margin-top: .45rem; }
.circadian-sources a { color: var(--ink-800); }

.circadian-disclaimer {
  margin-top: clamp(1.5rem, 4vw, 3rem);
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(164,111,27,.2);
  border-radius: var(--radius-md);
  background: rgba(246,234,208,.44);
  color: var(--ink-700);
  font-size: .86rem;
}

/* Shared SVG presentation */
.circadian-story .svg-label {
  fill: rgba(255,255,255,.86);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 720;
  letter-spacing: .02em;
}
.circadian-story .svg-small {
  fill: rgba(255,255,255,.62);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
}
.circadian-story .svg-micro {
  fill: rgba(255,255,255,.54);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.circadian-story .svg-gold { fill: #e4c486; }
.circadian-story .svg-teal { fill: #63d5cf; }
.circadian-story .svg-line { stroke: rgba(255,255,255,.25); }
.circadian-story .svg-line-gold { stroke: #e4c486; }
.circadian-story .svg-line-teal { stroke: #63d5cf; }
.circadian-story .circadian-motion {
  animation-play-state: paused !important;
  transform-box: fill-box;
  transform-origin: center;
}
.circadian-story.is-running:not(.is-paused) .circadian-motion { animation-play-state: running !important; }
.circadian-story.is-reduced .circadian-control[data-animation-toggle],
.circadian-story.is-reduced .circadian-control[data-animation-restart] { display: none; }

/* Shared motion primitives */
@keyframes circPulse {
  0%, 100% { opacity: .35; scale: .88; }
  45%, 60% { opacity: 1; scale: 1.12; }
}
@keyframes circGlow {
  0%, 100% { opacity: .28; scale: .94; }
  50% { opacity: .85; scale: 1.08; }
}
@keyframes circRotate { to { rotate: 360deg; } }
@keyframes circRotateBack { to { rotate: -360deg; } }
@keyframes circDash { to { stroke-dashoffset: -140; } }
@keyframes circDraw {
  0%, 8% { stroke-dashoffset: var(--path-length, 800); opacity: .2; }
  42%, 82% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: calc(var(--path-length, 800) * -1); opacity: .2; }
}
@keyframes circTravelX {
  0%, 10% { translate: 0 0; opacity: 0; }
  18% { opacity: 1; }
  75% { opacity: 1; }
  90%, 100% { translate: var(--travel-x, 260px) 0; opacity: 0; }
}
@keyframes circTravelY {
  0%, 10% { translate: 0 0; opacity: 0; }
  18% { opacity: 1; }
  75% { opacity: 1; }
  90%, 100% { translate: 0 var(--travel-y, 170px); opacity: 0; }
}
@keyframes circFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
@keyframes circFade {
  0%, 18%, 100% { opacity: .18; }
  36%, 72% { opacity: 1; }
}
@keyframes circShiftRight {
  0%, 25%, 100% { translate: 0 0; }
  48%, 76% { translate: 28px 0; }
}
@keyframes circShiftLeft {
  0%, 25%, 100% { translate: 0 0; }
  48%, 76% { translate: -28px 0; }
}
@keyframes circRise {
  0%, 12%, 100% { translate: 0 20px; opacity: .2; }
  42%, 78% { translate: 0 0; opacity: 1; }
}
@keyframes circScaleIn {
  0%, 15%, 100% { scale: .76; opacity: .15; }
  42%, 78% { scale: 1; opacity: 1; }
}
@keyframes circSweep {
  0% { rotate: -110deg; }
  55%, 100% { rotate: 110deg; }
}
@keyframes circHand {
  0%, 8% { rotate: -95deg; }
  88%, 100% { rotate: 265deg; }
}
@keyframes circHandShort {
  0%, 8% { rotate: -25deg; }
  88%, 100% { rotate: 95deg; }
}
@keyframes circBlink {
  0%, 80%, 100% { opacity: 1; }
  83%, 88% { opacity: .15; }
}
@keyframes circLock {
  0%, 16%, 100% { translate: 0 -14px; opacity: .2; }
  38%, 76% { translate: 0 0; opacity: 1; }
}
@keyframes circWavePhase {
  0%, 20%, 100% { translate: 0 0; opacity: .45; }
  46%, 74% { translate: var(--phase-shift, 28px) 0; opacity: 1; }
}

/* Animation 1: network of clocks */
.clock-network .light-ray { animation: circDash 4s linear infinite; stroke-dasharray: 8 12; }
.clock-network .signal-dot { --travel-x: 255px; animation: circTravelX 4.8s var(--ease-soft) infinite; }
.clock-network .scn-core { animation: circPulse 3.2s var(--ease-soft) infinite; }
.clock-network .scn-halo { animation: circGlow 3.2s var(--ease-soft) infinite; }
.clock-network .network-ring { animation: circRotate 16s linear infinite; }
.clock-network .organ-link { animation: circDash 5.4s linear infinite; stroke-dasharray: 5 10; }
.clock-network .organ-node { animation: circFloat 4.2s var(--ease-soft) infinite; animation-delay: var(--delay, 0s); }
.clock-network .organ-hand { animation: circHandShort 8s var(--ease-soft) infinite; animation-delay: var(--delay, 0s); }

/* Animation 2: alignment vs misalignment */
.alignment-story .aligned-wave { --path-length: 620; stroke-dasharray: 620; stroke-dashoffset: 620; animation: circDraw 8s linear infinite; }
.alignment-story .misaligned-wave { animation: circWavePhase 8s var(--ease-soft) infinite; animation-delay: var(--delay, 0s); }
.alignment-story .sync-scan { --travel-x: 250px; animation: circTravelX 8s linear infinite; }
.alignment-story .warning-pulse { animation: circPulse 4s var(--ease-soft) infinite; }
.alignment-story .marker-shift { animation: circShiftRight 8s var(--ease-soft) infinite; }

/* Animation 3: metabolism */
.metabolism-story .meal-pulse { animation: circPulse 5.8s var(--ease-soft) infinite; }
.metabolism-story .clock-hand-long { animation: circHand 12s linear infinite; }
.metabolism-story .clock-hand-short { animation: circHandShort 12s linear infinite; }
.metabolism-story .curve-morning,
.metabolism-story .curve-evening { stroke-dasharray: 500; stroke-dashoffset: 500; animation: circDraw 9s linear infinite; }
.metabolism-story .curve-evening { animation-delay: .7s; }
.metabolism-story .glucose-dot { --travel-x: 238px; animation: circTravelX 9s linear infinite; }
.metabolism-story .response-bar { animation: circRise 9s var(--ease-soft) infinite; animation-delay: var(--delay, 0s); }

/* Animation 4: light */
.light-story .morning-ray { animation: circDash 4.6s linear infinite; stroke-dasharray: 7 12; }
.light-story .evening-ray { animation: circDash 4.6s linear infinite reverse; stroke-dasharray: 7 12; }
.light-story .morning-shift { animation: circShiftLeft 8s var(--ease-soft) infinite; }
.light-story .evening-shift { animation: circShiftRight 8s var(--ease-soft) infinite; }
.light-story .melatonin-curve { animation: circShiftRight 8s var(--ease-soft) infinite; }
.light-story .screen-glow { animation: circGlow 3s var(--ease-soft) infinite; }
.light-story .sun-glow { animation: circGlow 3.4s var(--ease-soft) infinite; }

/* Animation 5: sleep two-process */
.sleep-story .process-s,
.sleep-story .process-c { stroke-dasharray: 760; stroke-dashoffset: 760; animation: circDraw 10s linear infinite; }
.sleep-story .process-c { animation-delay: .55s; }
.sleep-story .sleep-window { animation: circFade 10s var(--ease-soft) infinite; }
.sleep-story .now-line { --travel-x: 475px; animation: circTravelX 10s linear infinite; }
.sleep-story .moon-float { animation: circFloat 4.4s var(--ease-soft) infinite; }
.sleep-story .sleep-pulse { animation: circPulse 4s var(--ease-soft) infinite; }

/* Animation 6: daily anchors */
.anchor-story .clock-ring { animation: circRotate 24s linear infinite; }
.anchor-story .clock-hand { animation: circHand 12s linear infinite; }
.anchor-story .anchor-pin { animation: circLock 8s var(--ease-soft) infinite; animation-delay: var(--delay, 0s); }
.anchor-story .anchor-halo { animation: circPulse 8s var(--ease-soft) infinite; animation-delay: var(--delay, 0s); }
.anchor-story .chronotype-early { animation: circShiftLeft 9s var(--ease-soft) infinite; }
.anchor-story .chronotype-late { animation: circShiftRight 9s var(--ease-soft) infinite; }
.anchor-story .sequence-line { animation: circDash 6s linear infinite; stroke-dasharray: 6 10; }

@media (max-width: 940px) {
  .circadian-learning-intro { grid-template-columns: 1fr; align-items: start; }
  .circadian-story,
  .circadian-story:nth-child(even) { grid-template-columns: 1fr; }
  .circadian-story:nth-child(even) .circadian-story-visual { order: 0; }
  .circadian-story-visual { min-height: 360px; }
}

@media (max-width: 620px) {
  .circadian-story { min-height: auto; border-radius: 1.25rem; }
  .circadian-story-visual { min-height: 280px; padding: .45rem; }
  .circadian-story-copy { padding: 1.35rem 1.2rem 1.5rem; }
  .circadian-story-visual svg { max-height: 310px; }
  .circadian-story .svg-label { font-size: 16px; }
  .circadian-story .svg-small { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .circadian-story .circadian-motion { animation: none !important; }
  .circadian-story .circadian-control[data-animation-toggle],
  .circadian-story .circadian-control[data-animation-restart] { display: none; }
}

@media print {
  .circadian-learning { background: #fff; }
  .circadian-story { display: block; break-inside: avoid; box-shadow: none; }
  .circadian-story-visual { min-height: 320px; background: #06152e !important; print-color-adjust: exact; }
  .circadian-story-controls { display: none; }
}