/* =========================================================
   Agripoli v0.18 — Biofill & Biogenic motion visuals
   ========================================================= */

.pf-visual-block{
  margin: 0 0 34px;
  padding: clamp(22px, 3vw, 34px);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,252,248,.96));
  border: 1px solid rgba(47,185,128,.14);
  border-radius: 30px;
  box-shadow: 0 24px 70px rgba(23,52,43,.08);
  overflow: hidden;
  position: relative;
}
.pf-visual-block::before,
.pf-visual-block::after{
  content:"";
  position:absolute;
  inset:auto;
  border-radius:50%;
  pointer-events:none;
  background: radial-gradient(circle at center, rgba(47,185,128,.10), rgba(47,185,128,0));
}
.pf-visual-block::before{width:240px;height:240px;top:-70px;right:-40px;}
.pf-visual-block::after{width:180px;height:180px;left:-50px;bottom:-50px;}
.pf-visual-head{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(260px, .9fr);
  gap: 26px;
  align-items:start;
  margin-bottom: 26px;
}
.pf-mini-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--brand-dark);
}
.pf-mini-eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--brand), rgba(47,185,128,.15));
}
.pf-visual-copy h3{
  margin:0 0 12px;
  font-size: clamp(28px, 3vw, 38px);
  line-height:1.12;
  letter-spacing:-.03em;
}
.pf-visual-copy h3 em{font-style:normal;color:var(--brand-dark);}
.pf-visual-copy p{
  margin:0;
  max-width:62ch;
  color: var(--muted);
  line-height:1.7;
  font-size:15px;
}
.pf-value-pills{
  display:grid;
  gap:12px;
  align-content:start;
}
.pf-value-pills span,
.bg-meta-grid article{
  position:relative;
  padding:15px 16px 15px 44px;
  border-radius:18px;
  border:1px solid rgba(47,185,128,.14);
  background: rgba(255,255,255,.86);
  box-shadow:0 12px 32px rgba(23,52,43,.06);
  color:var(--ink);
  font-size:13px;
  line-height:1.45;
}
.pf-value-pills span::before,
.bg-meta-grid article::before{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  width:13px;
  height:13px;
  margin-top:-6.5px;
  border-radius:50%;
  background: radial-gradient(circle at center, var(--brand), #8be4bd);
  box-shadow:0 0 0 5px rgba(47,185,128,.12);
}

/* BIOFILL® application ecosystem */
.bf-network{
  position:relative;
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(290px,340px) minmax(220px,1fr);
  grid-template-areas:
    "lt center rt"
    "lm center rm"
    ". bottom .";
  align-items:center;
  gap:18px 28px;
  padding:14px 6px 6px;
}
.bf-center-stage{grid-area:center; position:relative; display:flex; align-items:center; justify-content:center; min-height:318px;}
.bf-center-ring{
  position:absolute;
  inset:22px;
  border-radius:50%;
  border:1.5px dashed rgba(47,185,128,.24);
  background: radial-gradient(circle at center, rgba(47,185,128,.08), rgba(47,185,128,.01) 55%, rgba(255,255,255,0) 70%);
}
.bf-powder-core{
  position:relative;
  z-index:2;
  width:min(100%, 280px);
  aspect-ratio:1/1;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(237,249,243,.96));
  border:1px solid rgba(47,185,128,.18);
  box-shadow:0 20px 60px rgba(23,52,43,.12), inset 0 1px 0 rgba(255,255,255,.88);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.bf-powder-icon{width:100%; max-width:156px; margin-bottom:10px; filter:drop-shadow(0 12px 20px rgba(23,52,43,.10));}
.bf-powder-icon svg{display:block; width:100%; height:auto;}
.bf-center-label{display:flex; flex-direction:column; gap:2px; text-align:center;}
.bf-center-label span{font-size:12px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:var(--brand-dark);}
.bf-center-label strong{font-size:16px; line-height:1.35; color:var(--ink);}
.bf-connectors{position:absolute; inset:0; pointer-events:none; z-index:1;}
.bf-connector{
  position:absolute;
  left:50%; top:50%;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(47,185,128,.06), rgba(47,185,128,.40), rgba(47,185,128,.10));
  transform-origin:left center;
  opacity:0;
}
.bf-connector::after{
  content:"";
  position:absolute;
  top:50%; left:0;
  width:12px; height:12px;
  margin-top:-6px;
  border-radius:50%;
  background: radial-gradient(circle at center, #fff 5%, var(--brand) 52%, #8be4bd 100%);
  box-shadow:0 0 0 4px rgba(47,185,128,.10);
  opacity:0;
}
.bf-connector.c-left-top{width:145px; transform: rotate(-166deg);}
.bf-connector.c-left-middle{width:150px; transform: rotate(166deg);}
.bf-connector.c-right-top{width:145px; transform: rotate(-14deg);}
.bf-connector.c-right-middle{width:150px; transform: rotate(14deg);}
.bf-connector.c-bottom{width:118px; transform: rotate(90deg);}
.bf-sector-card{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:92px;
  padding:18px 18px 18px 16px;
  border-radius:22px;
  border:1px solid rgba(47,185,128,.14);
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 40px rgba(23,52,43,.07);
  opacity:0;
  transform:translateY(18px) scale(.96);
}
.bf-sector-card strong{display:block; font-size:15px; margin-bottom:4px; color:var(--ink);}
.bf-sector-card span{display:block; font-size:12.8px; line-height:1.45; color:var(--muted);}
.bf-sector-icon{
  width:54px; height:54px; flex:0 0 54px;
  display:grid; place-items:center;
  border-radius:16px;
  background:linear-gradient(180deg, #f4fcf8, #e8f8f0);
  color:var(--brand-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92);
}
.bf-sector-icon svg{width:30px;height:30px;}
.card-left-top{grid-area:lt;} .card-left-middle{grid-area:lm;} .card-right-top{grid-area:rt;} .card-right-middle{grid-area:rm;} .card-bottom{grid-area:bottom; max-width:370px; justify-self:center;}

/* BIOGENIC® flow */
.bg-meta-grid{display:grid; gap:12px; align-content:start;}
.bg-meta-grid article{padding-right:18px;}
.bg-meta-grid strong{display:block; font-size:13px; margin-bottom:4px;}
.bg-meta-grid span{display:block; font-size:12.8px; color:var(--muted); line-height:1.45;}
.bg-flow-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr) 76px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.bg-stage{
  position:relative;
  min-height:280px;
  padding:24px 20px 20px;
  border-radius:28px;
  border:1px solid rgba(47,185,128,.14);
  background:rgba(255,255,255,.94);
  box-shadow:0 18px 48px rgba(23,52,43,.07);
  display:flex;
  flex-direction:column;
  gap:18px;
  opacity:0;
  transform:translateY(20px) scale(.97);
}
.bg-stage-visual{
  min-height:140px;
  border-radius:22px;
  background:linear-gradient(180deg,#f6fbf8,#edf8f2);
  border:1px solid rgba(47,185,128,.10);
  position:relative;
  overflow:hidden;
}
.bg-stage-copy h4{margin:0 0 8px; font-size:18px;}
.bg-stage-copy p{margin:0; font-size:13.5px; line-height:1.6; color:var(--muted);}
.bg-stage-index{display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:28px; margin-bottom:10px; padding:0 10px; border-radius:999px; background:#e9f8f0; color:var(--brand-dark); font-size:11px; font-weight:800; letter-spacing:.10em;}
.bg-visual-powder{display:flex; align-items:flex-end; justify-content:center;}
.bg-powder-mound{position:absolute; left:50%; bottom:28px; width:116px; height:74px; margin-left:-58px; background:radial-gradient(circle at 45% 20%, #fff 0, #f5fbf7 42%, #e4f6ec 90%); clip-path:polygon(50% 0, 70% 28%, 85% 54%, 100% 100%, 0 100%, 15% 54%, 30% 28%); filter:drop-shadow(0 14px 18px rgba(23,52,43,.10));}
.bg-powder-mound::after{content:""; position:absolute; left:-28px; right:-28px; bottom:-10px; height:18px; border-radius:50%; background:rgba(47,185,128,.10);}
.bg-powder-dot{position:absolute; width:10px; height:10px; border-radius:50%; background:#8be4bd; opacity:.85;}
.bg-powder-dot.d1{left:34%; top:34%;} .bg-powder-dot.d2{left:56%; top:24%; width:14px; height:14px;} .bg-powder-dot.d3{left:64%; top:42%; width:8px; height:8px; background:#2fb980;}
.bg-visual-polymer{display:grid; place-items:center; grid-template-columns:repeat(3, 40px); align-content:center; justify-content:center; gap:12px; padding:26px;}
.bg-pellet{display:block; width:32px; height:24px; border-radius:14px 14px 12px 12px; background:linear-gradient(180deg, #ffffff, #dff3e8); border:1px solid rgba(47,185,128,.16); box-shadow:0 6px 14px rgba(23,52,43,.08);} 
.bg-pellet::after{content:""; display:block; width:11px; height:11px; margin:6px auto 0; border-radius:50%; border:2px solid rgba(47,185,128,.35);}
.bg-visual-product{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; padding:18px; align-content:center;}
.bg-product-tile{display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px; padding:10px; border-radius:16px; background:#fff; border:1px solid rgba(47,185,128,.14); box-shadow:0 10px 20px rgba(23,52,43,.05); color:var(--ink); font-size:12.5px; font-weight:700; line-height:1.35;}
.bg-flow-arrow{position:relative; height:110px; opacity:0;}
.bg-arrow-line{position:absolute; left:10px; right:22px; top:50%; height:4px; transform:translateY(-50%) scaleX(.2); transform-origin:left center; border-radius:999px; background:linear-gradient(90deg, rgba(47,185,128,.15), rgba(47,185,128,.7));}
.bg-arrow-head{position:absolute; top:50%; right:8px; width:14px; height:14px; margin-top:-7px; border-right:3px solid var(--brand-dark); border-bottom:3px solid var(--brand-dark); transform:rotate(-45deg) scale(.5); opacity:0;}
.bg-arrow-dot{position:absolute; top:50%; left:12px; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:radial-gradient(circle at center, #fff 10%, var(--brand) 52%, #8be4bd 100%); box-shadow:0 0 0 4px rgba(47,185,128,.10); opacity:0;}

/* sequential visibility */
.js .js-sequence.is-visible .bf-sector-card,
.js .js-sequence.is-visible .bg-stage,
.js .js-sequence.is-visible .bg-flow-arrow,
.js .js-sequence.is-visible .bf-connector{opacity:1;}
.js .js-sequence.is-visible .bf-sector-card,
.js .js-sequence.is-visible .bg-stage{transform:none; transition:opacity .65s cubic-bezier(.2,.75,.2,1), transform .65s cubic-bezier(.2,.75,.2,1);} 
.js .js-sequence.is-visible .bf-sector-card.card-left-top{transition-delay:.08s;} 
.js .js-sequence.is-visible .bf-sector-card.card-right-top{transition-delay:.18s;} 
.js .js-sequence.is-visible .bf-sector-card.card-left-middle{transition-delay:.28s;} 
.js .js-sequence.is-visible .bf-sector-card.card-right-middle{transition-delay:.38s;} 
.js .js-sequence.is-visible .bf-sector-card.card-bottom{transition-delay:.48s;} 
.js .js-sequence.is-visible .bf-connector{transition:opacity .55s ease;} 
.js .js-sequence.is-visible .bf-connector.c-left-top{transition-delay:.12s;} 
.js .js-sequence.is-visible .bf-connector.c-right-top{transition-delay:.22s;} 
.js .js-sequence.is-visible .bf-connector.c-left-middle{transition-delay:.32s;} 
.js .js-sequence.is-visible .bf-connector.c-right-middle{transition-delay:.42s;} 
.js .js-sequence.is-visible .bf-connector.c-bottom{transition-delay:.52s;} 
.js .js-sequence.is-visible .bf-connector::after{opacity:1; animation:bf-energy 2.4s linear infinite;}
.js .js-sequence.is-visible .bg-stage.stage-powder{transition-delay:.08s;} 
.js .js-sequence.is-visible .bg-flow-arrow:nth-child(2){transition-delay:.24s;} 
.js .js-sequence.is-visible .bg-stage.stage-polymer{transition-delay:.38s;} 
.js .js-sequence.is-visible .bg-flow-arrow:nth-child(4){transition-delay:.54s;} 
.js .js-sequence.is-visible .bg-stage.stage-product{transition-delay:.68s;} 
.js .js-sequence.is-visible .bg-flow-arrow{transition:opacity .35s ease;}
.js .js-sequence.is-visible .bg-flow-arrow .bg-arrow-line{animation:bg-arrow-reveal .6s cubic-bezier(.2,.8,.2,1) forwards;}
.js .js-sequence.is-visible .bg-flow-arrow:nth-child(2) .bg-arrow-line{animation-delay:.28s;} 
.js .js-sequence.is-visible .bg-flow-arrow:nth-child(4) .bg-arrow-line{animation-delay:.58s;} 
.js .js-sequence.is-visible .bg-flow-arrow .bg-arrow-head{animation:bg-arrow-head .3s ease forwards;}
.js .js-sequence.is-visible .bg-flow-arrow:nth-child(2) .bg-arrow-head{animation-delay:.72s;} 
.js .js-sequence.is-visible .bg-flow-arrow:nth-child(4) .bg-arrow-head{animation-delay:1.00s;} 
.js .js-sequence.is-visible .bg-flow-arrow .bg-arrow-dot{opacity:1; animation:bg-arrow-travel 1.5s linear infinite;}
.js .js-sequence.is-visible .bg-flow-arrow:nth-child(2) .bg-arrow-dot{animation-delay:.7s;} 
.js .js-sequence.is-visible .bg-flow-arrow:nth-child(4) .bg-arrow-dot{animation-delay:1.02s;} 
.js .js-sequence.is-visible .bg-stage-visual{animation:pf-soft-float 7s ease-in-out infinite;}
.js .js-sequence.is-visible .bg-stage.stage-polymer .bg-pellet{animation:pf-pellet-breath 2.8s ease-in-out infinite;}
.js .js-sequence.is-visible .bg-stage.stage-polymer .p2{animation-delay:.12s;} .js .js-sequence.is-visible .bg-stage.stage-polymer .p3{animation-delay:.24s;} .js .js-sequence.is-visible .bg-stage.stage-polymer .p4{animation-delay:.36s;} .js .js-sequence.is-visible .bg-stage.stage-polymer .p5{animation-delay:.48s;} .js .js-sequence.is-visible .bg-stage.stage-polymer .p6{animation-delay:.60s;}
.js .js-sequence.is-visible .bg-stage.stage-product .bg-product-tile{animation:pf-product-reveal .72s cubic-bezier(.2,1.2,.4,1) both;}
.js .js-sequence.is-visible .bg-stage.stage-product .bg-product-tile:nth-child(1){animation-delay:.86s;} 
.js .js-sequence.is-visible .bg-stage.stage-product .bg-product-tile:nth-child(2){animation-delay:.94s;} 
.js .js-sequence.is-visible .bg-stage.stage-product .bg-product-tile:nth-child(3){animation-delay:1.02s;} 
.js .js-sequence.is-visible .bg-stage.stage-product .bg-product-tile:nth-child(4){animation-delay:1.10s;} 

@keyframes bf-energy{0%{transform:translateX(0) scale(.82);opacity:0;}15%{opacity:1;}85%{opacity:1;}100%{transform:translateX(calc(100% - 10px)) scale(1.05);opacity:0;}}
@keyframes bg-arrow-reveal{0%{transform:translateY(-50%) scaleX(.2);opacity:.12;}100%{transform:translateY(-50%) scaleX(1);opacity:1;}}
@keyframes bg-arrow-head{0%{opacity:0;transform:rotate(-45deg) scale(.5);}100%{opacity:1;transform:rotate(-45deg) scale(1);}}
@keyframes bg-arrow-travel{0%{transform:translateX(0);opacity:0;}12%{opacity:1;}88%{opacity:1;}100%{transform:translateX(calc(100% - 22px));opacity:0;}}
@keyframes pf-soft-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes pf-pellet-breath{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-4px) scale(1.04);}}
@keyframes pf-product-reveal{0%{opacity:0;transform:translateY(14px) scale(.94);}100%{opacity:1;transform:none;}}

@media (max-width: 1120px){
  .pf-visual-head{grid-template-columns:1fr;}
  .bf-network{grid-template-columns:1fr;grid-template-areas:"center" "lt" "rt" "lm" "rm" "bottom";gap:14px;}
  .bf-center-stage{min-height:260px;}
  .bf-connectors{display:none;}
  .card-bottom{max-width:none;justify-self:stretch;}
  .bg-flow-shell{grid-template-columns:1fr 62px 1fr 62px 1fr;}
}
@media (max-width: 860px){
  .bg-flow-shell{grid-template-columns:1fr;gap:16px;}
  .bg-flow-arrow{height:44px;}
  .bg-arrow-line{left:50%; right:auto; top:6px; width:4px; height:calc(100% - 14px); transform:translateX(-50%) scaleY(.2); transform-origin:center top; background:linear-gradient(180deg, rgba(47,185,128,.15), rgba(47,185,128,.72));}
  .bg-arrow-head{left:50%; right:auto; top:auto; bottom:3px; margin:0 0 0 -7px; transform:rotate(45deg) scale(.5);}
  .bg-arrow-dot{left:50%; top:8px; margin:0 0 0 -6px;}
  .js .js-sequence.is-visible .bg-flow-arrow .bg-arrow-line{animation:bg-arrow-reveal-vertical .6s cubic-bezier(.2,.8,.2,1) forwards;}
  .js .js-sequence.is-visible .bg-flow-arrow .bg-arrow-head{animation:bg-arrow-head-vertical .3s ease forwards;}
  .js .js-sequence.is-visible .bg-flow-arrow .bg-arrow-dot{animation:bg-arrow-travel-vertical 1.5s linear infinite;}
}
@keyframes bg-arrow-reveal-vertical{0%{transform:translateX(-50%) scaleY(.2);opacity:.12;}100%{transform:translateX(-50%) scaleY(1);opacity:1;}}
@keyframes bg-arrow-head-vertical{0%{opacity:0;transform:rotate(45deg) scale(.5);}100%{opacity:1;transform:rotate(45deg) scale(1);}}
@keyframes bg-arrow-travel-vertical{0%{transform:translateY(0);opacity:0;}12%{opacity:1;}88%{opacity:1;}100%{transform:translateY(calc(100% - 18px));opacity:0;}}

@media (max-width: 640px){
  .pf-visual-block{padding:18px 16px; border-radius:24px;}
  .pf-visual-copy h3{font-size: clamp(24px, 8vw, 32px);}
  .pf-value-pills{grid-template-columns:1fr;}
  .bf-sector-card{padding:14px; min-height:84px;}
  .bf-sector-icon{width:48px;height:48px;flex-basis:48px;}
  .bf-center-stage{min-height:225px;}
  .bf-powder-core{width:min(100%,220px);}
  .bg-stage{min-height:unset; padding:20px 16px 18px;}
  .bg-stage-visual{min-height:120px;}
  .bg-visual-product{grid-template-columns:1fr 1fr;}
}

@media (prefers-reduced-motion: reduce){
  .pf-visual-block *, .pf-visual-block::before, .pf-visual-block::after{animation:none!important; transition:none!important;}
  .bf-sector-card, .bg-stage, .bg-flow-arrow, .bf-connector{opacity:1!important; transform:none!important;}
  .bg-arrow-line{transform:none!important; opacity:1!important;}
  .bg-arrow-head{opacity:1!important; transform:rotate(-45deg)!important;}
}