/* Gut Feeling — Atmospheric homepage v3
   Full-bleed artwork with blurred airborne microbes behind the type.
   The calm sage page / student tools / customizer stay unchanged. */
:root { --scene-light:#e4ece0; --scene-mid:#9bbba5; --scene-dark:#143e30; }
.main {position:relative;isolation:isolate;}
/* A single landscape blends the header and hero together. */
.hero-atmosphere {
  position:absolute; top:0; left:0; right:0; height:535px;
  background:linear-gradient(105deg,#e7efe4 0%,#d8e8da 20%,#c1d7c4 38%,#84aa90 59%,#336e53 78%,#123b2e 100%);
  overflow:hidden; pointer-events:none; z-index:0;
  display:none;
}
.main:has(#page-home.active) > .hero-atmosphere {display:block;}
.hero-atmosphere::before {content:"";position:absolute;inset:-120px -20px;
 background:radial-gradient(ellipse 55% 78% at 10% 20%,rgba(255,255,246,.46),transparent 80%),
 radial-gradient(ellipse 38% 65% at 60% 48%,rgba(165,213,171,.20),transparent 79%),
 radial-gradient(ellipse 30% 54% at 97% 50%,rgba(5,48,35,.34),transparent 82%);
 z-index:1;}
/* Enlarged, defocused living community. It stretches behind the copy very softly. */
.hero-atmosphere .atmosphere-haze {
 position:absolute; width:1200px; height:800px; max-width:none; object-fit:cover;
 top:-175px; right:-165px; opacity:.26; filter:blur(28px) saturate(.92);
 -webkit-mask-image:radial-gradient(ellipse 66% 56% at 62% 49%,black 28%,transparent 100%);
 mask-image:radial-gradient(ellipse 66% 56% at 62% 49%,black 28%,transparent 100%);
 animation:atmo-breathe 18s ease-in-out infinite alternate;
}
@keyframes atmo-breathe { from{transform:translate3d(-25px,14px,0) scale(1.02)}to{transform:translate3d(19px,-18px,0) scale(1.1)} }
/* Diffused organisms float outward across the entire scene, INCLUDING behind the heading. */
.atmosphere-drifters {position:absolute;inset:0;z-index:2;pointer-events:none;}
.atmo-microbe {
 position:absolute;display:block;width:var(--w,36px);height:var(--h,17px);
 border-radius:52% / 60%;transform-origin:center;
 background:radial-gradient(ellipse at 35% 20%,#d6f2cb 0%,#86bc93 33%,#407c61 70%,#194c3d 100%);
 border:1px solid rgba(222,255,220,.36);
 box-shadow:inset 0 2px 4px #f2ffda85,0 0 18px rgba(96,171,121,.28);
 animation:microbe-outward var(--duration,16s) ease-in-out infinite;
 animation-delay:var(--delay,0s);
 will-change:opacity,transform;
}
.atmo-microbe::before {content:"";position:absolute;inset:24% 11%;border-radius:inherit;
 background:radial-gradient(circle at 25% 50%,#235b426b 0 14%,transparent 17%) 0 0 / 9px 7px;opacity:.65;}
.atmo-microbe.coccus{width:var(--w,19px);height:var(--w,19px);border-radius:50%;}
.atmo-microbe.curved{border-radius:70% 25% 65% 35%;}
.atmo-microbe.chain{width:var(--w,48px);height:var(--h,16px);border:0;box-shadow:none;
 background:radial-gradient(circle at 14% 52%,#aed9ab 0 14%,transparent 16%),radial-gradient(circle at 37% 50%,#68a380 0 16%,transparent 19%),radial-gradient(circle at 62% 48%,#bddfb0 0 16%,transparent 19%),radial-gradient(circle at 86% 48%,#4c9273 0 15%,transparent 18%);}
.atmo-microbe.chain::before{display:none;}
@keyframes microbe-outward {
 0%{opacity:0;transform:translate3d(var(--sx,0px),var(--sy,0px),0) rotate(var(--angle,24deg)) scale(.45);filter:blur(var(--blur,3px));}
 19%{opacity:var(--opacity,.33);}
 49%{opacity:calc(var(--opacity,.33) * .84);}
 83%{opacity:calc(var(--opacity,.33) * .44);}
 100%{opacity:0;transform:translate3d(var(--dx,95px),var(--dy,-70px),0) rotate(calc(var(--angle,24deg) + 80deg)) scale(1.22);filter:blur(calc(var(--blur,3px) + 2px));}
}
/* Large and soft behind text, more defined toward the illustration. */
.a1 {left:2%;top:9%;--w:73px;--h:24px;--angle:-31deg;--blur:10px;--opacity:.20;--dx:-130px;--dy:95px;--duration:24s;--delay:-8s;}
.a2 {left:34%;top:7%;--w:39px;--angle:17deg;--blur:8px;--opacity:.20;--dx:110px;--dy:-80px;--duration:21s;--delay:-11s;}
.a3 {left:16%;top:67%;--w:89px;--h:34px;--angle:36deg;--blur:10px;--opacity:.19;--dx:-150px;--dy:42px;--duration:23s;--delay:-15s;}
.a4 {left:41%;top:47%;--w:53px;--h:23px;--angle:-36deg;--blur:7px;--opacity:.20;--dx:-96px;--dy:87px;--duration:24s;--delay:-6s;}
.a5 {left:60%;top:8%;--w:40px;--h:17px;--angle:24deg;--blur:3px;--opacity:.34;--dx:-90px;--dy:-90px;--duration:16s;--delay:-7s;}
.a6 {left:82%;top:5%;--w:17px;--angle:0deg;--blur:2px;--opacity:.45;--dx:75px;--dy:-60px;--duration:15s;--delay:-5s;}
.a7 {left:92%;top:43%;--w:45px;--h:19px;--angle:-53deg;--blur:4px;--opacity:.35;--dx:127px;--dy:38px;--duration:18s;--delay:-12s;}
.a8 {left:52%;top:80%;--w:41px;--h:15px;--angle:63deg;--blur:6px;--opacity:.21;--dx:85px;--dy:100px;--duration:20s;--delay:-17s;}
.a9 {left:73%;top:83%;--w:66px;--h:18px;--angle:17deg;--blur:2px;--opacity:.35;--dx:100px;--dy:81px;--duration:19s;--delay:-13s;}
.a10{left:6%;top:90%;--w:37px;--h:15px;--angle:33deg;--blur:12px;--opacity:.17;--dx:-115px;--dy:85px;--duration:25s;--delay:-18s;}
.a11{left:55%;top:21%;--w:27px;--angle:3deg;--blur:4px;--opacity:.31;--dx:25px;--dy:-105px;--duration:20s;--delay:-4s;}
.a12{left:96%;top:8%;--w:63px;--h:23px;--angle:46deg;--blur:11px;--opacity:.20;--dx:110px;--dy:-38px;--duration:21s;--delay:-3s;}
.a13{left:31%;top:88%;--w:56px;--h:21px;--angle:-20deg;--blur:8px;--opacity:.19;--dx:-25px;--dy:95px;--duration:17s;--delay:-9s;}
.a14{left:78%;top:17%;--w:30px;--h:14px;--angle:-28deg;--blur:2px;--opacity:.36;--dx:55px;--dy:-85px;--duration:17s;--delay:-2s;}
.a15{left:26%;top:31%;--w:53px;--h:16px;--angle:74deg;--blur:9px;--opacity:.18;--dx:-76px;--dy:-88px;--duration:22s;--delay:-14s;}
.a16{left:88%;top:82%;--w:23px;--angle:5deg;--blur:4px;--opacity:.28;--dx:103px;--dy:72px;--duration:18s;--delay:-12s;}
/* Transparent top navigation lives inside the same visual scene. */
.main:has(#page-home.active) .topbar { background:transparent!important; border:0!important; box-shadow:none!important; }
.topbar {position:relative;z-index:4;}
.top-actions .small-primary{transition:background .25s,box-shadow .25s,transform .25s;}
.main:has(#page-home.active) .top-actions .small-primary{background:rgba(5,52,39,.66);border:1px solid rgba(186,233,203,.48);color:#f5fff7;border-radius:26px;padding:11px 22px;}
.main:has(#page-home.active) .top-actions .small-primary:hover{background:rgba(13,77,55,.9);box-shadow:0 8px 25px #052f2833;}
.main:has(#page-home.active) .top-actions .text-button{color:#f6fff7;}
.main:has(#page-home.active) .breadcrumb {color:#284c3a;}
.main:has(#page-home.active) .breadcrumb b {color:#184435;}
/* Hero illustration remains the focal point on the right; its softer copy extends behind the text. */
.main:has(#page-home.active) #page-home {position:relative;z-index:2;}
.main:has(#page-home.active) .hero {min-height:451px;background:transparent!important;box-shadow:none!important;margin:0 -54px;padding:41px 54px 48px;overflow:visible;animation:none!important;}
.main:has(#page-home.active) .hero::before {opacity:.23;}
.main:has(#page-home.active) .hero::after {opacity:.2;}
.main:has(#page-home.active) .hero-copy{z-index:4;max-width:650px;flex:1 1 53%;}
.main:has(#page-home.active) .hero-art{z-index:2;width:48%;max-width:620px;min-width:290px;height:392px;flex:0 1 48%;margin:-12px -15px -18px 0;filter:none;}
.main:has(#page-home.active) .hero-art .microbiome-illustration {inset:-16% -10%;width:118%;height:129%;object-fit:contain;opacity:.94;
 -webkit-mask-image:radial-gradient(ellipse 49% 50% at 50% 50%,#000 37%,rgba(0,0,0,.9) 62%,transparent 100%);
 mask-image:radial-gradient(ellipse 49% 50% at 50% 50%,#000 37%,rgba(0,0,0,.9) 62%,transparent 100%);}
.main:has(#page-home.active) .hero-art .orbit {opacity:.38;}
.main:has(#page-home.active) .hero-art .art-caption{bottom:5%;font-size:10px;color:#e7f1e7;letter-spacing:1.7px;text-shadow:0 2px 9px #174d38;}
/* Original 11 hero sprites now travel OUT from the cluster and fade into the atmosphere. */
.main:has(#page-home.active) .drifting-microbe{animation-name:microbe-escape;}
@keyframes microbe-escape {
 0% {opacity:0;transform:translate3d(0,0,0) rotate(var(--angle,-20deg)) scale(.6);filter:blur(1px);}
 22%{opacity:.75;filter:blur(.2px);}
 60%{opacity:.38;}
 100%{opacity:0;transform:translate3d(calc(var(--from-x,-20px) * -2.6),calc(var(--from-y,18px) * -3.2),0) rotate(calc(var(--angle,-20deg) + 55deg)) scale(1.13);filter:blur(6px);}
}
/* The clean, rounded white panel overlaps the scene, like the reference screenshot. */
.learning-surface{
 position:relative;z-index:5;margin:-7px -54px 0;padding:32px 54px 60px;
 background:linear-gradient(180deg,#fcfdf9 0%,#f9fbf7 100%);
 border-radius:24px 24px 0 0;box-shadow:0 -10px 38px rgba(7,46,32,.055);
 min-height:410px;
}
.learning-surface .welcome-row{margin:0 0 27px;}
.learning-surface .section-kicker{color:#4e9274;}
.learning-surface .progress-ring{background:#f7faf7;}
/* Keep customizer layout switches functional. */
html.layout-hero-left .main:has(#page-home.active) .hero {flex-direction:row-reverse;}
@media(max-width:1150px){
 .main:has(#page-home.active) .hero{margin:0 -27px;padding:40px 27px 48px;}
 .learning-surface{margin-left:-27px;margin-right:-27px;padding:30px 27px 55px;}
 .main:has(#page-home.active) .hero-art{min-width:260px;margin-right:-10px;}
}
@media(max-width:800px){
 .hero-atmosphere{height:525px;}
 .hero-atmosphere .atmosphere-haze{right:-360px;opacity:.22;}
 .main:has(#page-home.active) .hero{margin:0 -19px;padding:42px 27px 48px;min-height:441px;overflow:hidden;}
 .main:has(#page-home.active) .hero-art{position:absolute;right:-105px;top:60px;width:400px;max-width:none;min-width:0;height:340px;opacity:.34;}
 .main:has(#page-home.active) .hero-copy{max-width:660px;}
 .learning-surface{margin-left:-19px;margin-right:-19px;padding:27px 22px 50px;}
 .main:has(#page-home.active) .top-actions .text-button{color:#fcfff9;}
}
@media(max-width:520px){
 .hero-atmosphere{height:510px;}
 .main:has(#page-home.active) .hero{min-height:440px;padding:35px 19px 42px;}
 .main:has(#page-home.active) .hero-art{right:-180px;top:60px;opacity:.29;}
 .main:has(#page-home.active) .hero h1{font-size:clamp(35px,10vw,42px);}
 .atmo-microbe{opacity:.4;}
 .learning-surface{border-radius:22px 22px 0 0;padding:24px 19px 48px;}
 .main:has(#page-home.active) .top-actions .small-primary{padding:9px 10px;font-size:10px;}
}
/* Consistent typography even when previewing offline without Google Fonts. */
body{font-family:'DM Sans',Arial,sans-serif;}
:where(h1,h2,h3,.brand,.welcome-row h2,.path-info h3){font-family:Manrope,Arial,sans-serif;}
:where(button,.nav-link,.primary-button,.small-primary,.text-button,.customize-button,.outline-button,.round-arrow){font-family:'DM Sans',Arial,sans-serif;}