/* SodaFarm world layer: scenery supports the content; it never becomes the content. */
:root{
  --world-sky:#eaf7f3;
  --world-ivory:#fffef9;
  --world-mint:#f1faf5;
  --world-blue:#f3fafb;
  --world-line:#dbe8e1;
}

body.home-page{background:var(--world-ivory)}
main{overflow:hidden}
.site-header{background:rgba(252,253,249,.88);backdrop-filter:blur(16px) saturate(1.05)}

/* Hero: one full-bleed SodaFarm scene, not an image card behind the mascot. */
.hero-renewal{
  isolation:isolate;
  width:100%;
  max-width:none;
  margin:0;
  min-height:650px;
  padding-top:62px;
  padding-bottom:84px;
  padding-left:max(24px,calc((100vw - 1180px)/2));
  padding-right:max(24px,calc((100vw - 1180px)/2));
  background:url('/assets/sodafarm-hero-scene-v2.png') center center / cover no-repeat;
}
.hero-renewal::before{
  display:none;
}
.hero-renewal::after{display:none}
.hero-landscape{display:none}
.hero-renewal .hero-copy,.hero-renewal .hero-art{z-index:2}
.hero-renewal .hero-copy{padding-bottom:35px}
.hero-wordmark-image{width:min(365px,100%);height:142px;margin:-12px 0 -9px}
.hero-renewal .lead{max-width:420px;color:#315a61;font-size:16px;line-height:1.78}
.hero-renewal .hero-open{margin-top:16px;color:#7b6124}
.hero-renewal .server-play{position:relative;overflow:hidden;background:#176b73}
.hero-renewal .server-play::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.16) 45%,transparent 65%);transform:translateX(-130%);transition:transform .55s ease}
.hero-renewal .server-play:hover::after{transform:translateX(130%)}
.hero-art-renewal{height:430px;align-self:end}
.hero-art-renewal .hero-sky,.hero-art-renewal .hero-field,.hero-art-renewal .hero-sign{display:none!important}
/* The mascot source is portrait and transparent. Never inherit the old square
   `object-fit:cover` rule here: that crops it into a fake image tile. */
.hero-art-renewal>img{
  width:290px!important;
  height:390px!important;
  right:7%!important;
  top:30px!important;
  object-fit:contain!important;
  object-position:center bottom!important;
}

/* Every scroll step receives a barely perceptible change in air and terrain. */
.farm-life-renewal,.news,.faq{position:relative;isolation:isolate}
.farm-life-renewal{
  margin-bottom:0;
  padding-top:108px;
  padding-bottom:108px;
  background:var(--world-ivory);
  box-shadow:0 0 0 100vmax var(--world-ivory);
  clip-path:inset(0 -100vmax);
}
.farm-life-renewal::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:210px;
  height:94px;
  right:-124px;
  top:52px;
  opacity:.18;
  background:radial-gradient(ellipse at 20% 100%,#77b48d 0 12%,transparent 13%),radial-gradient(ellipse at 47% 100%,#8bc59b 0 18%,transparent 19%),radial-gradient(ellipse at 78% 100%,#b9dca9 0 14%,transparent 15%);
}
.farm-life-renewal::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:calc((1160px - 100vw)/2);
  right:calc((1160px - 100vw)/2);
  bottom:-1px;
  height:28px;
  background:radial-gradient(100% 100% at 50% 0,transparent 49%,var(--world-mint) 50%) 50% 0/100% 100% no-repeat;
}
.farm-life-renewal .farm-life-copy{padding-top:25px}
.farm-life-editorial .farm-feature{transition:border-color .2s ease,color .2s ease,transform .2s ease!important}
.farm-life-editorial .farm-feature:hover{transform:translateX(4px)!important}

.why-soda{
  position:relative;
  z-index:1;
  margin-top:0;
  margin-bottom:0;
  padding-top:62px;
  padding-bottom:62px;
  border-radius:0;
  background:#173f45;
  box-shadow:0 0 0 100vmax #173f45;
  clip-path:inset(0 -100vmax);
}
.why-soda::after{
  content:"";
  position:absolute;
  inset:0 calc((1160px - 100vw)/2);
  z-index:-1;
  opacity:.42;
  background:radial-gradient(45% 85% at 8% 105%,#276b67 0%,transparent 72%),radial-gradient(38% 70% at 100% -16%,#2b726c 0%,transparent 74%);
}
.loop-steps{position:relative}
.loop-steps:before{top:36px!important;border-top:1px dashed rgba(180,235,223,.7)!important}
.loop-steps li{position:relative}
.loop-steps li::after{content:"";position:absolute;width:5px;height:5px;top:34px;right:-2px;border-radius:50%;background:#b4e4d8;box-shadow:0 0 0 4px rgba(180,228,216,.08)}
.loop-steps li:last-child::after{display:none}
.loop-steps span{color:#c0eee3!important}
.loop-steps p{color:#d5e6e2!important}

.news{
  max-width:none;
  padding:102px max(24px,calc((100% - 1160px)/2)) 104px;
  background:var(--world-mint);
  box-shadow:0 0 0 100vmax var(--world-mint);
  clip-path:inset(0 -100vmax);
}
.news .section-head,.news .news-grid{max-width:1160px;margin-left:auto;margin-right:auto}
.news .section-head{position:relative}
.news .section-head::after{content:"";position:absolute;width:82px;height:28px;right:185px;top:-10px;opacity:.4;background:radial-gradient(closest-side,#a9ded0 98%,transparent 100%) 0 9px/32px 18px no-repeat,radial-gradient(closest-side,#a9ded0 98%,transparent 100%) 21px 0/38px 27px no-repeat,radial-gradient(closest-side,#a9ded0 98%,transparent 100%) 52px 10px/30px 17px no-repeat}
.news-card{background:rgba(255,254,251,.88)!important}
.news-card.featured{background:#e5f5ed!important}
.news-card:hover{box-shadow:none!important;border-color:#9bc9c0!important;transform:translateY(-3px)}

.faq{
  max-width:none;
  padding:100px max(24px,calc((100% - 900px)/2)) 104px;
  background:var(--world-blue);
  box-shadow:0 0 0 100vmax var(--world-blue);
  clip-path:inset(0 -100vmax);
}
.faq .section-head,.faq-list{max-width:900px;margin-left:auto;margin-right:auto}
.faq-list details{transition:background .18s ease,padding .18s ease}
.faq-list details:hover{background:rgba(255,255,255,.45)!important}

.community-renewal{margin-top:0!important}
footer{background:#eef2eb!important}

@media(max-width:720px){
  .hero-renewal{min-height:620px;padding:35px 20px 57px;background-position:58% center;background-size:auto 100%}
  .hero-renewal .hero-copy{padding-bottom:18px}
  .hero-wordmark-image{width:285px;height:122px;margin:-10px 0 -7px}
  .hero-art-renewal{height:265px;margin-top:7px}
  .hero-art-renewal>img{width:190px!important;height:270px!important;right:12%!important;top:18px!important;object-fit:contain!important;object-position:center bottom!important}
  .farm-life-renewal{padding:72px 20px 70px}
  .farm-life-renewal::after{height:18px}
  .why-soda{margin:0!important;padding:52px 24px 48px;border-radius:0!important;box-shadow:0 0 0 100vmax #173f45}
  .why-soda .loop-steps{margin-top:18px}
  .loop-steps li::after{display:none}
  .news{padding:72px 20px 74px}
  .news .section-head::after{display:none}
  .faq{padding:72px 20px 74px}
}

@media(prefers-reduced-motion:no-preference){
  .hero-landscape{animation:hero-landscape-breathe 9s ease-in-out infinite}
  .farm-life-renewal::before{animation:field-sway 8s ease-in-out infinite}
}
@keyframes hero-landscape-breathe{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
@keyframes field-sway{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}}
