/* Lab: drie proeven rond "vertragen". Alles op transform/opacity, dus vloeiend op telefoon. */
.lab-tag{position:fixed;left:50%;top:calc(78px + 10px);transform:translateX(-50%);z-index:55;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:lowercase;color:var(--matcha);background:rgba(43,43,34,.55);backdrop-filter:blur(6px);padding:7px 12px;border-radius:999px;pointer-events:none}

/* ---------- 1. ADEM ---------- */
.lab-adem .hero-bg img{animation-duration:36s}
.lab-adem .hero-bg>:nth-child(2) img{animation-delay:12s}.lab-adem .hero-bg>:nth-child(3){animation-delay:24s}
.lab-adem .wordmark{animation:breathe 9s ease-in-out infinite;transform-origin:50% 60%}
@keyframes breathe{0%,100%{transform:scale(1);letter-spacing:.02em}50%{transform:scale(1.045);letter-spacing:.06em}}
.halo{position:absolute;left:50%;top:50%;width:min(78vw,520px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-52%);z-index:1;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(213,228,192,.35),0 0 80px rgba(213,228,192,.08);animation:halo 9s ease-in-out infinite}
.halo::before{content:"";position:absolute;inset:-14%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(213,228,192,.16);animation:halo 9s ease-in-out infinite;animation-delay:-.6s}
@keyframes halo{0%,100%{transform:translate(-50%,-52%) scale(.86);opacity:.55}50%{transform:translate(-50%,-52%) scale(1.06);opacity:1}}
.adem-cue{font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:lowercase;color:var(--matcha);height:18px;margin:-6px 0 22px;position:relative;width:100%;white-space:nowrap}
.adem-cue span{position:absolute;left:0;right:0;opacity:0;animation:cue 9s ease-in-out infinite}
.adem-cue span:nth-child(2){animation-delay:4.5s}
@keyframes cue{0%,45%{opacity:0}8%,37%{opacity:.9}50%,100%{opacity:0}}
.lab-adem.holding *{animation-play-state:paused!important}
.lab-adem .hold-hint{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:lowercase;color:rgba(213,228,192,.75);z-index:2}
@media (min-width:901px){.lab-adem .hold-hint{bottom:28px}}

/* ---------- 2. RIPPLE ---------- */
.lab-ripple .hero-bg img{animation:none;opacity:0}
.lab-ripple .hero-bg>:first-child img{opacity:1;transform:scale(1.04)}
.lab-ripple canvas.ripples{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}
.lab-ripple .hero-in{pointer-events:none}
.lab-ripple .hero-in a{pointer-events:auto}
.lab-ripple .ripple-hint{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:lowercase;color:rgba(213,228,192,.75);z-index:2}

/* ---------- 3. LICHT ---------- */
.lab-licht .hero-bg img{animation:none;opacity:0}
.lab-licht .hero-bg>:first-child img{opacity:1;transform:scale(1.06);transition:transform .2s linear}
.lab-licht .hero-bg::before{background:radial-gradient(60% 50% at var(--lx,70%) var(--ly,20%),rgba(255,246,214,.28),rgba(72,74,30,.0) 60%),rgba(72,74,30,.26);transition:background-position .6s}
.lab-licht .hero-bg::after{opacity:.9}
.grain{position:absolute;inset:-50%;width:200%;height:200%;z-index:2;pointer-events:none;opacity:.10;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}}
.greet{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:lowercase;color:var(--matcha);margin-bottom:22px;display:inline-flex;gap:10px;align-items:center}
.greet i{width:7px;height:7px;border-radius:50%;background:#B9E39A;box-shadow:0 0 0 0 rgba(185,227,154,.6);animation:pulse 2.6s ease-out infinite}
.greet i.closed{background:#E0B98A;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(185,227,154,.55)}100%{box-shadow:0 0 0 12px rgba(185,227,154,0)}}
.lab-licht .wordmark{transition:transform .25s ease-out}
.lab-licht .ph img{will-change:transform}
@media (prefers-reduced-motion:reduce){.halo,.wordmark,.adem-cue span,.grain{animation:none!important}}