/* ============================================================
   Vernast — Ozonbehandeling
   Aanvulling op kelder.css + verslag.css + vent.css.
   Bevat animaties (moleculen, diffusie) rond zuurstof/ozon.
   ============================================================ */

/* ---------- HERO: zwevende O3-moleculen ---------- */
.hero-media .ozonstage{position:relative;width:100%;height:440px;border-radius:var(--radius-lg);overflow:hidden;
  background:radial-gradient(120% 120% at 30% 20%,#123, #0a1622 60%, #060d16);box-shadow:0 30px 70px rgba(0,0,0,.4);}
.ozonstage .glow{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 55%,rgba(60,150,220,.28),transparent 70%);}
.mol{position:absolute;width:var(--s,64px);height:var(--s,64px);will-change:transform;}
@media (prefers-reduced-motion: no-preference){
  .mol{animation:molfloat var(--dur,9s) ease-in-out infinite alternate;}
}
@keyframes molfloat{from{transform:translate(0,0) rotate(0deg);}to{transform:translate(var(--dx,20px),var(--dy,-24px)) rotate(var(--dr,40deg));}}
/* een O3 molecuul = 3 bollen */
.mol .atom{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 30%,#7fd0ff,#2b7fc4 60%,#175a94);box-shadow:0 0 18px rgba(90,170,230,.55), inset 0 0 8px rgba(255,255,255,.35);}
.mol .a1{width:46%;height:46%;left:0;top:26%;}
.mol .a2{width:52%;height:52%;left:30%;top:0;}
.mol .a3{width:46%;height:46%;left:56%;top:30%;}
.mol .bond{position:absolute;height:5px;background:rgba(150,200,240,.5);top:42%;border-radius:3px;}
.mol .b1{left:16%;width:30%;transform:rotate(-24deg);transform-origin:left;}
.mol .b2{left:52%;width:30%;transform:rotate(24deg);transform-origin:left;}
.ozonstage .o3tag{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-family:var(--serif);font-style:italic;color:rgba(255,255,255,.9);font-size:15px;letter-spacing:.02em;}

/* schimmelsporen die geneutraliseerd worden */
.spore{position:absolute;width:var(--ss,40px);height:var(--ss,40px);}
.spore .body{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#a9e08a,#5f9e3e 55%,#3c6b26);
  box-shadow:0 0 14px rgba(120,190,90,.5), inset 0 0 6px rgba(255,255,255,.25);}
.spore .body::before,.spore .body::after{content:"";position:absolute;width:22%;height:22%;border-radius:50%;background:#5f9e3e;box-shadow:0 0 8px rgba(120,190,90,.5);}
.spore .body::before{left:-12%;top:30%;}
.spore .body::after{right:-10%;bottom:6%;}
.spore .zap{position:absolute;width:60%;height:60%;left:-90%;top:-70%;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#7fd0ff,#2b7fc4 62%,#175a94);
  box-shadow:0 0 14px rgba(90,170,230,.7);opacity:0;}
@media (prefers-reduced-motion: no-preference){
  .spore .body{animation:sporelife var(--sd,9s) ease-in-out infinite;}
  .spore .zap{animation:sporezap var(--sd,9s) ease-in-out infinite;}
}
@keyframes sporelife{
  0%{opacity:0;transform:scale(.4);}
  8%{opacity:1;transform:scale(1);}
  38%{opacity:1;transform:scale(1.04);filter:none;}
  46%{opacity:1;transform:scale(1.14);filter:brightness(1.9) hue-rotate(70deg);}
  58%{opacity:0;transform:scale(.1);filter:brightness(2.4) hue-rotate(110deg);}
  100%{opacity:0;transform:scale(.1);}
}
@keyframes sporezap{
  0%,28%{opacity:0;transform:translate(0,0);}
  36%{opacity:1;}
  44%{opacity:1;transform:translate(150%,120%) scale(1.05);}
  56%{opacity:0;transform:translate(170%,140%) scale(1.5);}
  100%{opacity:0;}
}
.ozonstage .o3tag b{font-style:normal;font-weight:800;color:#8fd0ff;}
.hero-media .float .n{font-size:26px;}

/* ---------- O2 -> O3 uitleg (moleculaire rij) ---------- */
.molrow{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,54px);flex-wrap:wrap;margin-top:52px;}
.molcard{display:flex;flex-direction:column;align-items:center;gap:16px;}
.molcard .disc{position:relative;width:150px;height:150px;border-radius:50%;background:radial-gradient(120% 120% at 35% 25%,#eef6ff,#dcecfb);border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow-sm);display:grid;place-items:center;}
.molcard .disc.dark{background:radial-gradient(120% 120% at 35% 25%,#16303f,#0c1c28);}
.sph{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 30%,#7fd0ff,#2b7fc4 62%,#175a94);box-shadow:0 4px 12px rgba(20,70,110,.35), inset 0 0 6px rgba(255,255,255,.4);}
@media (prefers-reduced-motion: no-preference){
  .molcard.spin .sphwrap{animation:spin 14s linear infinite;transform-origin:center;}
}
.sphwrap{position:relative;width:100%;height:100%;}
@keyframes spin{to{transform:rotate(360deg);}}
.molcard h3{font-size:17px;margin:0;}
.molcard .fx{font-family:var(--serif);font-style:italic;color:var(--text-dim);font-size:13.5px;}
.molarrow{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--red);}
.molarrow svg{width:40px;height:40px;}
.molarrow span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);max-width:90px;text-align:center;}
@media (max-width:640px){.molarrow svg{transform:rotate(90deg);}}

/* ---------- WAAROM SCHIMMEL TERUGKOMT — cyclus ---------- */
.cyc{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:52px;counter-reset:c;}
@media (max-width:820px){.cyc{grid-template-columns:1fr;}}
.cyc .step{position:relative;padding:30px 30px;}
.cyc .step:not(:last-child){border-right:1px solid rgba(255,255,255,.16);}
@media (max-width:820px){.cyc .step:not(:last-child){border-right:0;border-bottom:1px solid rgba(255,255,255,.16);}}
.cyc .step .num{font-family:'Poppins',var(--sans),sans-serif;font-style:normal;font-weight:700;font-size:40px;color:#F8FAFC;line-height:1;margin-bottom:12px;}
.cyc .step h3{color:#fff;font-size:19px;margin:0 0 8px;}
.cyc .step p{color:rgba(255,255,255,.8);font-size:14.5px;line-height:1.6;margin:0;}
.cyc-note{margin-top:26px;text-align:center;color:rgba(255,255,255,.75);font-size:14px;}

/* ---------- DIFFUSIE demo (ozon vult de ruimte) ---------- */
.diffuse{position:relative;width:100%;height:340px;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(180deg,#f7fbff,#eaf3fb);border:1px solid var(--line);box-shadow:var(--shadow-sm);}
.diffuse .room{position:absolute;inset:22px;border:2px dashed rgba(43,127,196,.35);border-radius:12px;}
.diffuse .src{position:absolute;left:36px;bottom:34px;width:46px;height:64px;border-radius:8px;background:linear-gradient(180deg,#2b3a47,#1b2732);box-shadow:0 6px 16px rgba(0,0,0,.25);}
.diffuse .src::after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:#8fd0ff;box-shadow:0 0 10px #8fd0ff;}
.diffuse .puff{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(120,190,235,.5),rgba(120,190,235,0) 70%);}
@media (prefers-reduced-motion: no-preference){
  .diffuse .puff{animation:puff var(--pd,6s) ease-out infinite;}
}
@keyframes puff{0%{transform:translate(0,0) scale(.3);opacity:0;}15%{opacity:.9;}100%{transform:translate(var(--px,320px),var(--py,-120px)) scale(2.4);opacity:0;}}
.diffuse .cap{position:absolute;right:20px;top:16px;font-size:12px;color:var(--text-dim);font-family:var(--serif);font-style:italic;max-width:180px;text-align:right;}

/* ---------- TOEPASSINGEN (waar zetten we het in) ---------- */
.appl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;}
@media (max-width:900px){.appl-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.appl-grid{grid-template-columns:1fr;}}
.appl{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;transition:transform .25s,box-shadow .25s;}
.appl:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.appl .ai{width:50px;height:50px;border-radius:13px;background:var(--red-soft);color:var(--red);display:inline-flex;align-items:center;justify-content:center;margin-bottom:15px;}
.appl .ai svg{width:25px;height:25px;}
.appl h3{font-size:17px;margin:0 0 8px;}
.appl p{font-size:14px;color:var(--text-mid);line-height:1.6;}

/* ---------- TOESTEL / techniek split ---------- */
.dev-note{font-size:12px;color:var(--text-dim);margin-top:14px;font-style:italic;}