/* Gut Feeling — Motion Design: lightweight, accessible, no animation libraries */
:root { --ease-spring: cubic-bezier(.2,.8,.2,1); --ease-soft: cubic-bezier(.22,1,.36,1); }

/* Ambient emerald glow: behind everything, not above the content. */
body::before {
  content: "";
  position: fixed;
  inset: -18%;
  pointer-events: none;
  z-index: 0;
  opacity: .65;
  background:
    radial-gradient(ellipse 28% 34% at 77% 18%, rgba(80,173,128,.20), transparent 75%),
    radial-gradient(ellipse 32% 38% at 14% 76%, rgba(36,141,113,.19), transparent 75%),
    radial-gradient(ellipse 25% 30% at 61% 91%, rgba(111,206,153,.11), transparent 76%);
  filter: blur(18px);
  animation: ambient-flow 22s ease-in-out infinite alternate;
}
.app-shell { position: relative; z-index: 1; }
@keyframes ambient-flow {
  0% { transform:translate3d(-1%,0,0) scale(1); }
  50% { transform:translate3d(2%,-2%,0) scale(1.09); }
  100% { transform:translate3d(-2%,2%,0) scale(1.04); }
}

/* Page transitions and scroll reveals are enabled by JS only when supported. */
.page.active { animation: page-arrive .42s var(--ease-soft) both; }
@keyframes page-arrive {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}
.motion-ready .motion-reveal {
  opacity: 0;
  transform:translateY(19px) scale(.987);
  transition:opacity .65s var(--ease-soft), transform .7s var(--ease-soft);
  transition-delay:var(--reveal-delay,0ms);
}
.motion-ready .motion-reveal.is-visible { opacity:1; transform:translateY(0) scale(1); }

/* Hero: living ecosystem — two slow orbits and suspended particles. */
.hero { isolation:isolate; }
.hero::after {
  content:"";
  position:absolute;
  z-index:0;
  width:365px;
  height:365px;
  right:0;
  top:-100px;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(160,245,198,.17),transparent 66%);
  animation:hero-pulse 7s ease-in-out infinite;
}
@keyframes hero-pulse {
  0%,100% { transform:scale(.9); opacity:.5; }
  50% { transform:scale(1.17); opacity:1; }
}
.hero-art {
  --parallax-x: 0px;
  --parallax-y: 0px;
  transform:translate3d(var(--parallax-x),var(--parallax-y),0);
  transition:transform .35s ease-out;
  will-change:transform;
}
.orbit-one { animation:orbit-one-spin 34s linear infinite; }
.orbit-two { animation:orbit-two-spin 45s linear infinite reverse; }
@keyframes orbit-one-spin { from { transform:rotate(-24deg); } to { transform:rotate(336deg); } }
@keyframes orbit-two-spin { from { transform:rotate(55deg); } to { transform:rotate(415deg); } }
.gut-shape { animation:gut-bob 6s ease-in-out infinite; }
@keyframes gut-bob {
  0%,100% { transform:translateY(0) rotate(-8deg); }
  50% { transform:translateY(-9px) rotate(-5deg); }
}
.float-dot { animation:particle-float 5s ease-in-out infinite; box-shadow:0 0 12px #c0f1d36b; }
.dot-b { animation-delay:-1.7s; animation-duration:6.2s; }
.dot-c { animation-delay:-3s; animation-duration:4.5s; }
@keyframes particle-float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-15px) scale(1.22)} }
.eyebrow-dot { box-shadow:0 0 0 0 rgba(178,241,198,.5); animation:status-pulse 3s ease-out infinite; }
@keyframes status-pulse { 0%{box-shadow:0 0 0 0 rgba(178,241,198,.45)} 65%,100%{box-shadow:0 0 0 8px rgba(178,241,198,0)} }
.hero h1 em {
  background:linear-gradient(100deg,#bcefc9 15%,#edffec 45%,#bcefc9 75%);
  background-size:200% auto;
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  animation:heading-shine 10s ease-in-out infinite;
}
@keyframes heading-shine { 0%,25%{background-position:100% 50%} 75%,100%{background-position:0 50%} }

/* Buttons and navigation: gentle feedback that also works with keyboard input. */
.primary-button,.small-primary,.round-arrow,.outline-button,.lesson-row button,.item-actions button {
  transition:transform .26s var(--ease-spring), box-shadow .26s ease, background .26s ease, border-color .26s ease;
}
.primary-button:hover,.small-primary:hover,.outline-button:hover,.lesson-row button:hover {
  transform:translateY(-2px);
  box-shadow:0 9px 24px rgba(0,21,15,.18);
}
.primary-button:active,.small-primary:active,.round-arrow:active,.outline-button:active { transform:scale(.97); }
.primary-button span { display:inline-block; transition:transform .26s var(--ease-spring); }
.primary-button:hover span { transform:translateX(4px); }
.round-arrow:hover { transform:translate(3px,-2px); box-shadow:0 5px 14px #0b503a26; }
.nav-link { position:relative; transition:background .22s ease,color .22s ease,transform .22s var(--ease-spring); }
.nav-link:hover { transform:translateX(3px); }
.nav-link.active::before {
  content:"";
  position:absolute;
  left:0;
  top:24%;
  height:52%;
  width:3px;
  background:#b5f5cf;
  border-radius:0 4px 4px 0;
  animation:nav-slide .25s var(--ease-spring) both;
}
@keyframes nav-slide { from{transform:scaleY(.1);opacity:0} to{transform:scaleY(1);opacity:1} }
.brand-mark { transition:transform .5s var(--ease-spring),box-shadow .3s ease; }
.brand:hover .brand-mark { transform:rotate(-10deg) scale(1.09); box-shadow:0 3px 20px #b9f0c580; }

/* Lift cards without jarring motion; keep content panels readable. */
.path-card,.topic-card,.lesson-row,.daily-card,.admin-item,.disclaimer-card {
  transition:transform .32s var(--ease-spring),box-shadow .32s ease,border-color .32s ease;
}
.path-card:hover,.topic-card:hover,.lesson-row:hover,.admin-item:hover {
  transform:translateY(-5px);
  box-shadow:0 19px 42px #001b1640;
}
.daily-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px #001b162b; }
.topic-card .topic-icon { transition:transform .35s var(--ease-spring); }
.topic-card:hover .topic-icon { transform:rotate(-9deg) scale(1.1); }
.topic-arrow { transition:transform .3s var(--ease-spring); display:inline-block; }
.topic-card:hover .topic-arrow { transform:translate(3px,-3px); }
.microbe { animation:microbe-float 5s ease-in-out infinite; }
.m2 { animation-delay:-2s; animation-duration:6s; }
.m3 { animation-delay:-3.1s; animation-duration:7s; }
.m4 { animation-delay:-1s; animation-duration:4.5s; }
@keyframes microbe-float { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-9px) rotate(8deg)} }

/* The progress ring is a true circular indicator and animates to the stored percentage. */
.progress-ring {
  --ring-progress:0%;
  position:relative;
  isolation:isolate;
  border:0;
  background:conic-gradient(#b4e9c9 var(--ring-progress),#286052 0);
  transition:--ring-progress 1.2s ease;
}
.progress-ring::before { content:""; position:absolute;inset:4px;background:#0a4036;border-radius:50%;z-index:-1; }
@property --ring-progress { syntax:"<percentage>"; inherits:false; initial-value:0%; }

/* Quiz answers, results and flashcards respond to interactions. */
.quiz-option { transition:transform .22s var(--ease-spring),box-shadow .22s ease,background .22s ease,border-color .22s ease; }
.quiz-option:not(:disabled):hover { transform:translateX(4px); box-shadow:0 4px 15px #164b3212; }
.quiz-option.correct { animation:answer-correct .38s var(--ease-spring) both; }
.quiz-option.wrong { animation:answer-wrong .38s ease both; }
@keyframes answer-correct { 0%{transform:scale(1)} 45%{transform:scale(1.018)} 100%{transform:scale(1)} }
@keyframes answer-wrong { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 65%{transform:translateX(4px)} }
.quiz-feedback { animation:feedback-in .42s var(--ease-spring) both; }
@keyframes feedback-in { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.flashcard {
  transition:transform .45s var(--ease-spring),box-shadow .35s ease,background .35s ease;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
.flashcard:hover { transform:translateY(-3px) rotateX(2deg); box-shadow:0 22px 45px #001c1838; }
.flashcard.is-flipping { animation:flip-bounce .5s var(--ease-spring); }
@keyframes flip-bounce { 0%{transform:rotateY(0) scale(1)} 50%{transform:rotateY(90deg) scale(.98)} 100%{transform:rotateY(0) scale(1)} }
.flashcard.flipped { border-color:#cbbf98; }
.quiz-celebration { position:relative; isolation:isolate; }
.quiz-spark { position:absolute; width:8px;height:8px;top:22px;left:52%;border-radius:50%;pointer-events:none;background:var(--spark-color,#bcefc9);animation:spark-out 950ms ease-out forwards; }
@keyframes spark-out { 0%{transform:translate(0,0) scale(.4);opacity:0} 20%{opacity:1} 100%{transform:translate(var(--spark-x),var(--spark-y)) scale(0);opacity:0} }

:where(button,a,input,textarea,select):focus-visible { outline:2px solid #8defb8;outline-offset:3px; }
:where(.topic-card,.quiz-option,.flashcard,.lesson-row button):focus-visible { outline-color:#126b52; }

/* Respect user accessibility preferences: all visuals remain usable without motion. */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-force-on) *,html:not(.motion-force-on) *::before,html:not(.motion-force-on) *::after { animation:none!important;transition-duration:0.01ms!important;scroll-behavior:auto!important; }
  html:not(.motion-force-on) .motion-ready .motion-reveal { opacity:1!important;transform:none!important; }
  html:not(.motion-force-on) .hero-art { transform:none!important; }
  html:not(.motion-force-on) .path-card:hover,html:not(.motion-force-on) .topic-card:hover,
  html:not(.motion-force-on) .lesson-row:hover,html:not(.motion-force-on) .daily-card:hover,
  html:not(.motion-force-on) .admin-item:hover,html:not(.motion-force-on) .nav-link:hover,
  html:not(.motion-force-on) .flashcard:hover,html:not(.motion-force-on) .primary-button:hover,
  html:not(.motion-force-on) .small-primary:hover,html:not(.motion-force-on) .outline-button:hover,
  html:not(.motion-force-on) .round-arrow:hover,
  html:not(.motion-force-on) .quiz-option:not(:disabled):hover { transform:none!important; }
}

/* Gut Feeling Motion v2 — unmistakable movement, no network libraries. */
:root { --motion-accent:#8ef3be; }
.hero { overflow:hidden; background-size:160% 160%; animation:emerald-breathe 9s ease-in-out infinite alternate; }
@keyframes emerald-breathe {
  0% { background-position:0% 50%; box-shadow:0 14px 36px #001e1b30; }
  100% { background-position:100% 50%; box-shadow:0 18px 48px #58c89d2c; }
}
.hero::before {
  content:""; position:absolute; inset:-125% -70%; z-index:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 43%,rgba(185,255,218,.09) 49%,transparent 56%);
  transform:translateX(-50%) rotate(-10deg);
  animation:hero-sweep 7s ease-in-out infinite;
}
@keyframes hero-sweep {
  0%, 23% { transform:translateX(-60%) rotate(-10deg); opacity:0; }
  40% { opacity:1; }
  72%, 100% { transform:translateX(65%) rotate(-10deg); opacity:0; }
}
.hero-copy,.hero-art { position:relative; z-index:1; }
.orbit-one { animation:orbit-one-spin 11s linear infinite; }
.orbit-two { animation:orbit-two-spin 16s linear infinite reverse; }
.gut-shape { animation:gut-bob 3.4s ease-in-out infinite; }
.dot-a { animation-duration:2.6s; }
.dot-b { animation-duration:3.2s; }
.dot-c { animation-duration:2.8s; }
.hero h1 em { animation-duration:4.5s; }
/* More visibly orbiting microbial specks */
.hero-art .bio-particle { position:absolute; display:block; width:12px; height:12px; border-radius:42% 58% 64% 36%; background:#baf4d4; border:2px solid #e6fff2; box-shadow:0 0 0 5px #a6e9c528,0 0 24px #9afac088; pointer-events:none; z-index:2; }
.hero-art .bio-particle.p1 { top:14%; left:22%; animation:bio-drift-a 4.3s ease-in-out infinite; }
.hero-art .bio-particle.p2 { top:32%; right:5%; width:9px;height:9px;animation:bio-drift-b 3.6s ease-in-out infinite -1.1s; }
.hero-art .bio-particle.p3 { bottom:23%; left:5%; width:9px;height:9px;background:#ffdb9b;animation:bio-drift-a 4.1s ease-in-out infinite -2s; }
.hero-art .bio-particle.p4 { bottom:14%; right:22%; width:7px;height:7px;animation:bio-drift-b 2.8s ease-in-out infinite -1s; }
@keyframes bio-drift-a { 0%,100% { transform:translate(0,0) rotate(0); opacity:.7; } 50% {transform:translate(14px,-22px) rotate(120deg);opacity:1;} }
@keyframes bio-drift-b { 0%,100% { transform:translate(0,0) rotate(0); opacity:1; } 50% {transform:translate(-15px,16px) rotate(-125deg);opacity:.65;} }
.art-caption-glint { display:inline-block;color:#ffdda0; animation:glint 1.6s ease-in-out infinite; }
@keyframes glint { 0%,100% { transform:rotate(0) scale(.7); opacity:.55; } 50% { transform:rotate(70deg) scale(1.4); opacity:1; } }
/* Animate newly revealed content without ever hiding the page when JS fails. */
.motion-ready .motion-reveal { opacity:1; transform:none; transition:none; }
.motion-ready .motion-reveal.is-visible { animation:content-arrive .65s cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--reveal-delay,0ms); }
@keyframes content-arrive { 0%{opacity:.35;transform:translateY(16px);} 100%{opacity:1;transform:translateY(0);} }
@media(max-width:760px){ .hero-art .bio-particle{opacity:.65;} }
@media(prefers-reduced-motion:reduce){
  html:not(.motion-force-on) .hero-art .bio-particle,html:not(.motion-force-on) .motion-live-dot{animation:none!important;}
}


/* Gut Feeling — emerald microbiome illustration (2026 update)
   New detailed, science-inspired microbial artwork, with independently moving
   orbit rings and particles. Does not interfere with text/layout customization. */
.hero-art {
  width: min(36vw, 370px);
  min-width: 288px;
  height: 288px;
  flex-shrink: 0;
  isolation: isolate;
  filter: drop-shadow(0 13px 16px rgba(0, 22, 17, .22));
}
.hero-art .microbiome-illustration {
  display: block;
  position: absolute;
  inset: -4% -7%;
  width: 114%;
  height: 108%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: .98;
  -webkit-mask-image: radial-gradient(ellipse 62% 63% at 50% 49%, black 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 63% at 50% 49%, black 58%, transparent 100%);
  animation: microbiome-float 7.5s ease-in-out infinite alternate;
}
@keyframes microbiome-float {
  0% { transform:translate3d(-4px,5px,0) rotate(-1deg) scale(.975); }
  48% { transform:translate3d(3px,-10px,0) rotate(1deg) scale(1.025); }
  100% { transform:translate3d(8px,4px,0) rotate(-.5deg) scale(1.015); }
}
.hero-art .orbit { z-index:1; border:1px solid rgba(184,247,202,.48); box-shadow:0 0 16px rgba(157,239,187,.12); }
.hero-art .orbit-one { width:100%;height:65%; }
.hero-art .orbit-two { width:72%;height:97%; }
.hero-art .float-dot { z-index:3; }
.hero-art .art-caption {
  bottom:-12px;
  z-index:4;
  color:#c9f5d9;
  text-shadow:0 2px 10px #00241d;
}
/* The same emerald microbes also appear in the foundations course card. */
.path-visual.visual-micro {
  background-image: linear-gradient(180deg,rgba(4,50,39,.04),rgba(3,30,23,.45)),url('assets/emerald-microbiome.webp');
  background-color:#0d5545;
  background-size:cover;
  background-position:center;
}
.path-visual.visual-micro .microbe { opacity:.36; border-color:#d1f9da; box-shadow:0 0 18px #c6ffe955; }
.path-visual.visual-micro .visual-label {
  color:#effff1;
  text-shadow:0 2px 7px #00251a;
  background:#06372ab8;
  padding:6px 9px;
  border-radius:7px;
}
@media(max-width:1050px){ .hero-art { width:285px; min-width:230px; height:270px; } }
@media(max-width:760px){
  .hero-art { position:absolute; right:-75px; min-width:0; width:265px;height:250px;opacity:.26; }
  .hero-copy { position:relative;z-index:3; }
  .hero-art .art-caption { display:none; }
}
@media(max-width:430px){.path-visual.visual-micro{background-position:center 44%;}}