/*
 * recipe-animated-2.css — styling for the extended Lane A animated-image recipes (batches 2-4).
 * Same contract as recipe-animated.css: every recipe is FAIL-OPEN (static layout with zero JS); the
 * enhanced rules are scoped under [data-apb-anim-on], the flag each behavior module sets ONLY when it
 * takes over (never under reduced-motion). apb-anim-* namespace; tokens from recipe-animated.css.
 */

/* ============ shared slideshow base (token: slideshow) ============ */
.apb-anim-show{position:relative;border-radius:var(--an-radius,14px);overflow:hidden;height:clamp(320px,54vh,560px);background:#0b0d12}
.apb-anim-slide{position:absolute;inset:0;margin:0;opacity:0}
.apb-anim-slide:first-child{opacity:1} /* static fallback: first slide */
.apb-anim-slide figcaption{position:absolute;left:18px;bottom:16px;z-index:3;color:#fff;font-weight:600;text-shadow:0 2px 12px rgba(0,0,0,.85)}
[data-apb-anim-on] .apb-anim-slide{opacity:0;transition:opacity .8s ease}
[data-apb-anim-on] .apb-anim-slide.is-active{opacity:1}
/* per-recipe transitions (active slide enters its own way) */
.apb-anim--kenburns .apb-anim-show,.apb-anim--cube .apb-anim-show,.apb-anim--fliptile .apb-anim-show,.apb-anim--tunnel .apb-anim-show,.apb-anim--origami .apb-anim-show{perspective:1400px}
[data-apb-anim-on].apb-anim--kenburns .apb-anim-slide.is-active img{animation:apb-anim-kb 6s ease-out forwards}
@keyframes apb-anim-kb{from{transform:scale(1)}to{transform:scale(1.14) translate(-2%,1%)}}
[data-apb-anim-on].apb-anim--clockwipe .apb-anim-slide.is-active{animation:apb-anim-cw .85s ease forwards}
@keyframes apb-anim-cw{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}
[data-apb-anim-on].apb-anim--cube .apb-anim-slide{transform-style:preserve-3d;backface-visibility:hidden}
[data-apb-anim-on].apb-anim--cube .apb-anim-slide.is-active{animation:apb-anim-cube .8s ease forwards}
@keyframes apb-anim-cube{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}
[data-apb-anim-on].apb-anim--venetian .apb-anim-slide.is-active{animation:apb-anim-wipe .85s ease forwards}
.apb-anim--venetian .apb-anim-slide::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 16px)}
@keyframes apb-anim-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
[data-apb-anim-on].apb-anim--shutter .apb-anim-slide.is-active{animation:apb-anim-shutter .8s ease forwards}
@keyframes apb-anim-shutter{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0 0 0 0)}}
[data-apb-anim-on].apb-anim--fliptile .apb-anim-slide{transform-style:preserve-3d}
[data-apb-anim-on].apb-anim--fliptile .apb-anim-slide.is-active{animation:apb-anim-fliptile .8s ease forwards}
@keyframes apb-anim-fliptile{from{transform:rotateX(-90deg)}to{transform:rotateX(0)}}
[data-apb-anim-on].apb-anim--glitch .apb-anim-slide.is-active{animation:apb-anim-glitch .55s steps(2) forwards}
@keyframes apb-anim-glitch{0%{opacity:1;filter:none;transform:translateX(0)}25%{filter:drop-shadow(5px 0 rgba(255,0,40,.8)) drop-shadow(-5px 0 rgba(0,200,255,.8));transform:translateX(-5px)}50%{transform:translateX(5px)}100%{filter:none;transform:none}}
[data-apb-anim-on].apb-anim--assemble .apb-anim-slide.is-active{animation:apb-anim-assemble .7s ease forwards}
@keyframes apb-anim-assemble{from{filter:blur(16px);transform:scale(1.1)}to{filter:blur(0);transform:none}}
[data-apb-anim-on].apb-anim--origami .apb-anim-slide{transform-origin:top}
[data-apb-anim-on].apb-anim--origami .apb-anim-slide.is-active{animation:apb-anim-origami .8s ease forwards}
@keyframes apb-anim-origami{from{transform:rotateX(-85deg)}to{transform:rotateX(0)}}
[data-apb-anim-on].apb-anim--tunnel .apb-anim-slide.is-active{animation:apb-anim-tunnel .8s ease forwards}
@keyframes apb-anim-tunnel{from{transform:translateZ(-700px) scale(.5);opacity:0}to{transform:translateZ(0) scale(1);opacity:1}}
.apb-anim--polaroid .apb-anim-show{background:#15171d}
.apb-anim--polaroid .apb-anim-slide{inset:auto;left:50%;top:50%;width:58%;height:68%;border:10px solid #fff;border-bottom-width:38px;border-radius:4px;box-shadow:0 18px 44px rgba(0,0,0,.45);transform:translate(-50%,-50%) rotate(calc((var(--i,0) - 2)*5deg))}
[data-apb-anim-on].apb-anim--polaroid .apb-anim-slide{opacity:1;z-index:1}
[data-apb-anim-on].apb-anim--polaroid .apb-anim-slide.is-active{z-index:5;animation:apb-anim-deal .6s ease}
@keyframes apb-anim-deal{from{transform:translate(-50%,-150%) rotate(18deg)}to{transform:translate(-50%,-50%) rotate(calc((var(--i,0) - 2)*5deg))}}

/* ============ ring (token: css-loop) ============ */
.apb-anim--ring .apb-anim-ring-spin{display:flex;gap:var(--an-gap,16px);overflow-x:auto;padding:8px 0}
.apb-anim--ring .apb-anim-ring-card{flex:0 0 200px;height:260px;border-radius:var(--an-radius,14px);overflow:hidden;margin:0}
[data-apb-anim-on].apb-anim--ring .apb-anim-ring{height:clamp(320px,50vh,520px);display:grid;place-items:center;perspective:1200px}
[data-apb-anim-on].apb-anim--ring .apb-anim-ring-spin{position:relative;width:200px;height:260px;display:block;overflow:visible;transform-style:preserve-3d;animation:apb-anim-spin 30s linear infinite}
[data-apb-anim-on].apb-anim--ring .apb-anim-ring-card{position:absolute;inset:0;flex:none;transform:rotateY(calc(var(--i)/var(--n)*360deg)) translateZ(330px);backface-visibility:hidden;box-shadow:0 14px 44px rgba(0,0,0,.4)}
[data-apb-anim-on].apb-anim--ring.is-paused .apb-anim-ring-spin{animation-play-state:paused}
@keyframes apb-anim-spin{to{transform:rotateY(360deg)}}

/* ============ orbit (token: css-loop) ============ */
.apb-anim--orbit .apb-anim-orbit{display:flex;flex-wrap:wrap;gap:var(--an-gap,16px);justify-content:center}
.apb-anim--orbit .apb-anim-orbit-item{flex:0 0 110px;height:110px;border-radius:50%;overflow:hidden;margin:0}
[data-apb-anim-on].apb-anim--orbit .apb-anim-orbit{position:relative;height:clamp(340px,52vh,520px);display:block;animation:apb-anim-spin 34s linear infinite}
[data-apb-anim-on].apb-anim--orbit .apb-anim-orbit-item{position:absolute;top:50%;left:50%;width:92px;height:92px;flex:none;transform:translate(-50%,-50%) rotate(calc(var(--i)/var(--n)*360deg)) translateY(clamp(-200px,-24vh,-150px))}
[data-apb-anim-on].apb-anim--orbit.is-paused .apb-anim-orbit{animation-play-state:paused}

/* ============ duotone wave (token: css-loop) ============ */
.apb-anim--duotone .apb-anim-duo{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.apb-anim--duotone .apb-anim-duo-cell{aspect-ratio:1;border-radius:8px;overflow:hidden;margin:0}
[data-apb-anim-on].apb-anim--duotone .apb-anim-duo-cell{animation:apb-anim-wave 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*-.12s)}
[data-apb-anim-on].apb-anim--duotone .apb-anim-duo-cell img{filter:saturate(.55) contrast(1.1)}
[data-apb-anim-on].apb-anim--duotone.is-paused .apb-anim-duo-cell{animation-play-state:paused}
@keyframes apb-anim-wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ============ badge (token: css-loop) ============ */
.apb-anim--badge .apb-anim-badge{position:relative;width:min(360px,80vw);aspect-ratio:1;margin:0 auto;color:#fff}
.apb-anim--badge .apb-anim-badge-img{position:absolute;inset:20%;border-radius:50%;overflow:hidden}
.apb-anim--badge .apb-anim-badge-disc{position:absolute;inset:0}
.apb-anim--badge .apb-anim-badge-disc span{position:absolute;left:50%;top:50%;font-weight:700;font-size:14px;letter-spacing:.04em;
  transform:rotate(calc(var(--i)/var(--n)*360deg)) translateY(clamp(-178px,-40vw,-130px))}
[data-apb-anim-on].apb-anim--badge .apb-anim-badge-disc{animation:apb-anim-spin 18s linear infinite}
[data-apb-anim-on].apb-anim--badge.is-paused .apb-anim-badge-disc{animation-play-state:paused}

/* ============ droste zoom (token: css-loop) ============ */
.apb-anim--droste .apb-anim-droste{position:relative;width:min(560px,86vw);aspect-ratio:4/3;margin:0 auto;border-radius:var(--an-radius,14px);overflow:hidden}
.apb-anim--droste .apb-anim-droste-layer{position:absolute;inset:0;opacity:0}
.apb-anim--droste .apb-anim-droste-layer:first-child{opacity:1}
.apb-anim--droste .apb-anim-droste-cap{position:absolute;left:24px;bottom:20px;z-index:6;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.8)}
[data-apb-anim-on].apb-anim--droste .apb-anim-droste-layer{opacity:1;animation:apb-anim-droste 8s linear infinite;animation-delay:calc(var(--i)*-1.6s)}
[data-apb-anim-on].apb-anim--droste.is-paused .apb-anim-droste-layer{animation-play-state:paused}
@keyframes apb-anim-droste{0%{transform:scale(.25);opacity:0}12%{opacity:1}100%{transform:scale(3);opacity:0}}

/* ============ floating collage (token: css-loop) ============ */
.apb-anim--collage .apb-anim-collage{position:relative;height:clamp(360px,56vh,560px)}
.apb-anim--collage .apb-anim-collage-item{position:absolute;transform:translate(-50%,-50%) rotate(var(--rot,0deg));aspect-ratio:4/3;border-radius:var(--an-radius,14px);overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.32);margin:0}
[data-apb-anim-on].apb-anim--collage .apb-anim-collage-item{animation:apb-anim-float 6s ease-in-out infinite;animation-delay:calc(var(--i)*-.7s)}
[data-apb-anim-on].apb-anim--collage.is-paused .apb-anim-collage-item{animation-play-state:paused}
@keyframes apb-anim-float{0%,100%{transform:translate(-50%,-50%) rotate(var(--rot,0deg))}50%{transform:translate(-50%,calc(-50% - 16px)) rotate(var(--rot,0deg))}}

/* ============ auto-scroll row / filmstrip (token: marquee-gallery) ============ */
.apb-anim--hoverrow .apb-anim-strip,.apb-anim--filmstrip .apb-anim-strip{overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.apb-anim-strip-row{display:flex;gap:var(--an-gap,16px);width:max-content}
.apb-anim-strip-cell{flex:0 0 auto;width:clamp(200px,24vw,300px);aspect-ratio:16/10;border-radius:var(--an-radius,14px);overflow:hidden;position:relative;margin:0}
.apb-anim-strip-cell figcaption{position:absolute;left:12px;bottom:10px;color:#fff;font-size:13px;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.8)}
[data-apb-anim-on].apb-anim--hoverrow .apb-anim-strip,[data-apb-anim-on].apb-anim--filmstrip .apb-anim-strip{overflow:hidden}
[data-apb-anim-on].apb-anim--hoverrow .apb-anim-strip-row,[data-apb-anim-on].apb-anim--filmstrip .apb-anim-strip-row{animation:apb-anim-mqL 40s linear infinite}
[data-apb-anim-on].is-paused .apb-anim-strip-row{animation-play-state:paused}
[data-apb-anim-on].apb-anim--hoverrow .apb-anim-strip:hover .apb-anim-strip-row{animation-play-state:paused}
.apb-anim--filmstrip .apb-anim-strip{-webkit-mask-image:radial-gradient(120% 100% at 50% 50%,#000 36%,rgba(0,0,0,.25) 70%);mask-image:radial-gradient(120% 100% at 50% 50%,#000 36%,rgba(0,0,0,.25) 70%)}

/* ============ liquid blob (token: css-loop) ============ */
.apb-anim--blob .apb-anim-blob{position:relative;width:min(560px,86vw);aspect-ratio:1;margin:0 auto;color:#fff}
.apb-anim--blob .apb-anim-blob-img{position:absolute;inset:0;border-radius:46% 54% 43% 57%/52% 44% 56% 48%;overflow:hidden}
.apb-anim--blob .apb-anim-blob-cap{position:absolute;left:8%;bottom:8%;z-index:3;max-width:60%;text-shadow:0 2px 16px rgba(0,0,0,.85)}
.apb-anim--blob .apb-anim-blob-cap h3{margin:0;font-size:clamp(22px,3vw,34px);font-weight:800}
[data-apb-anim-on].apb-anim--blob .apb-anim-blob-img{animation:apb-anim-blob 9s ease-in-out infinite}
[data-apb-anim-on].apb-anim--blob.is-paused .apb-anim-blob-img{animation-play-state:paused}
@keyframes apb-anim-blob{0%,100%{border-radius:46% 54% 43% 57%/52% 44% 56% 48%}33%{border-radius:60% 40% 55% 45%/45% 60% 40% 55%}66%{border-radius:40% 60% 50% 50%/60% 40% 55% 45%}}

/* ============ expanding panels (token: css-loop) ============ */
.apb-anim--accordion .apb-anim-acc{display:flex;gap:8px;height:clamp(320px,48vh,460px)}
.apb-anim--accordion .apb-anim-acc-panel{position:relative;flex:1;border-radius:var(--an-radius,14px);overflow:hidden;margin:0}
.apb-anim--accordion .apb-anim-acc-panel figcaption{position:absolute;left:14px;bottom:14px;color:#fff;font-weight:600;text-shadow:0 2px 12px rgba(0,0,0,.8)}
[data-apb-anim-on].apb-anim--accordion .apb-anim-acc-panel{transition:flex .5s cubic-bezier(.2,.7,.2,1)}
[data-apb-anim-on].apb-anim--accordion .apb-anim-acc:hover .apb-anim-acc-panel{flex:.6}
[data-apb-anim-on].apb-anim--accordion .apb-anim-acc-panel:hover{flex:3}

/* ============ radial fan deck (token: css-loop) ============ */
.apb-anim--fandeck .apb-anim-fan{position:relative;height:clamp(320px,48vh,460px);display:grid;place-items:center}
.apb-anim--fandeck .apb-anim-fan-card{position:absolute;width:clamp(150px,22vw,210px);aspect-ratio:3/4;border-radius:var(--an-radius,14px);overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.35);transform-origin:bottom center;margin:0}
[data-apb-anim-on].apb-anim--fandeck .apb-anim-fan-card{animation:apb-anim-fan 6s ease-in-out infinite}
[data-apb-anim-on].apb-anim--fandeck.is-paused .apb-anim-fan-card{animation-play-state:paused}
@keyframes apb-anim-fan{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(calc((var(--i) - var(--n)/2)*14deg)) translateY(-8px)}}

/* ============ marquee variants (token: marquee-gallery) ============ */
.apb-anim--mq-diagonal .apb-anim-mq{transform:rotate(-7deg) scale(1.14)}
.apb-anim--mq-vertical[data-apb-anim-on] .apb-anim-mq{flex-direction:row;height:clamp(360px,60vh,560px);
  -webkit-mask-image:linear-gradient(0deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(0deg,transparent,#000 8%,#000 92%,transparent)}
.apb-anim--mq-vertical .apb-anim-mq-row{flex-direction:column;width:auto;height:max-content}
.apb-anim--mq-vertical[data-apb-anim-on] .apb-anim-mq-row[data-apb-anim-mq="fwd"]{animation:apb-anim-mqU 42s linear infinite}
.apb-anim--mq-vertical[data-apb-anim-on] .apb-anim-mq-row[data-apb-anim-mq="rev"]{animation:apb-anim-mqD 48s linear infinite}
@keyframes apb-anim-mqU{to{transform:translateY(-50%)}}
@keyframes apb-anim-mqD{from{transform:translateY(-50%)}to{transform:translateY(0)}}

/* ============ swipe deck (token: swipe-deck) ============ */
.apb-anim--swipedeck .apb-anim-swipe{position:relative;height:clamp(360px,54vh,520px);display:grid;place-items:center}
.apb-anim--swipedeck .apb-anim-swipe-card{position:absolute;top:50%;left:50%;width:clamp(240px,32vw,340px);aspect-ratio:3/4;border-radius:var(--an-radius,14px);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.42);transform:translate(-50%,-50%);margin:0;background:#15171d;z-index:1}
.apb-anim--swipedeck .apb-anim-swipe-card:first-child{z-index:2} /* static fallback: first card on top */
.apb-anim--swipedeck .apb-anim-swipe-card figcaption{position:absolute;left:16px;bottom:14px;color:#fff;font-weight:600;text-shadow:0 2px 12px rgba(0,0,0,.8)}
[data-apb-anim-on].apb-anim--swipedeck .apb-anim-swipe{cursor:grab;touch-action:pan-y}
[data-apb-anim-on].apb-anim--swipedeck .apb-anim-swipe-card{transition:transform .3s ease,opacity .3s;will-change:transform}

/* ============ tilt spotlight grid (token: tilt-grid) ============ */
.apb-anim--tiltgrid .apb-anim-tilt{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--an-gap,16px)}
.apb-anim--tiltgrid .apb-anim-tilt-cell{position:relative;aspect-ratio:1;border-radius:var(--an-radius,14px);overflow:hidden;margin:0}
.apb-anim--tiltgrid .apb-anim-tilt-cell figcaption{position:absolute;left:12px;bottom:10px;color:#fff;font-size:13px;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.8)}
[data-apb-anim-on].apb-anim--tiltgrid .apb-anim-tilt{perspective:900px}
[data-apb-anim-on].apb-anim--tiltgrid .apb-anim-tilt-cell{transition:transform .15s ease;transform:rotateY(calc(var(--mx,0)*16deg)) rotateX(calc(var(--my,0)*-16deg))}
[data-apb-anim-on].apb-anim--tiltgrid .apb-anim-tilt-cell:hover{transform:rotateY(calc(var(--mx,0)*16deg)) rotateX(calc(var(--my,0)*-16deg)) scale(1.06)}

/* ============ poster wall (token: poster-wall) ============ */
.apb-anim--posterwall .apb-anim-wall{position:relative;height:clamp(380px,60vh,620px);overflow:auto;border-radius:var(--an-radius,14px);background:#0b0d12}
.apb-anim--posterwall .apb-anim-wall-track{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:12px;padding:12px;width:max-content}
.apb-anim--posterwall .apb-anim-wall-cell{aspect-ratio:3/4;border-radius:10px;overflow:hidden;margin:0}
[data-apb-anim-on].apb-anim--posterwall .apb-anim-wall{overflow:hidden;cursor:grab}
[data-apb-anim-on].apb-anim--posterwall .apb-anim-wall.is-grabbing{cursor:grabbing}
[data-apb-anim-on].apb-anim--posterwall .apb-anim-wall-track{will-change:transform}

/* ============ cursor trail (token: cursor-trail) ============ */
.apb-anim--cursortrail .apb-anim-cursor{position:relative;min-height:clamp(360px,56vh,560px);border-radius:var(--an-radius,14px);overflow:hidden;background:#0b0d12}
.apb-anim--cursortrail .apb-anim-cursor-bg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px}
.apb-anim--cursortrail .apb-anim-cursor-tile{aspect-ratio:1;border-radius:8px;overflow:hidden;margin:0}
.apb-anim--cursortrail .apb-anim-cursor-trail{position:absolute;width:160px;height:200px;object-fit:cover;border-radius:12px;transform:translate(-50%,-50%) scale(.5);opacity:0;pointer-events:none;will-change:transform,opacity;z-index:2}
[data-apb-anim-on].apb-anim--cursortrail .apb-anim-cursor{cursor:crosshair}
[data-apb-anim-on].apb-anim--cursortrail .apb-anim-cursor-bg{opacity:.18;filter:grayscale(1)}
[data-apb-anim-on].apb-anim--cursortrail .apb-anim-cursor-trail.is-pop{animation:apb-anim-pop .9s ease-out forwards}
@keyframes apb-anim-pop{0%{opacity:.95;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}

@media (max-width:760px){
  .apb-anim--duotone .apb-anim-duo{grid-template-columns:repeat(4,1fr)}
  .apb-anim--tiltgrid .apb-anim-tilt{grid-template-columns:repeat(2,1fr)}
  .apb-anim--accordion .apb-anim-acc{flex-direction:column;height:auto}
}

/* motion safety: neutralise the JS-triggered slide/transition animations under reduced motion
   (defence-in-depth — the behavior registry already honours reduce; this covers the CSS path).
   [class*="apb-anim--"] keeps specificity above the per-variant animation rules so no !important is needed. */
@media (prefers-reduced-motion:reduce){
  [data-apb-anim-on][class*="apb-anim--"] .apb-anim-slide.is-active,
  [data-apb-anim-on][class*="apb-anim--"] .apb-anim-slide.is-active img{animation:none}
}