/*
 * recipe-animated.css — styling for Lane A animated-image recipes (APB_Section_Recipes_Animated).
 * Every section is FAIL-OPEN: the default rules render a usable static gallery with zero JS. The
 * enhanced rules are scoped under [data-apb-anim-on], a flag each behavior module sets ONLY when it
 * actually takes over (not when it bails for reduced-motion) — so without JS, with the module blocked,
 * OR under prefers-reduced-motion, the static layout is what ships.
 * apb-anim-* namespace; tokens fall back to safe literals so this works on any recipe page.
 */
.apb-anim{--an-radius:var(--apb-rx-radius,14px);--an-gap:16px;--an-card:clamp(220px,28vw,340px)}
.apb-anim .apb-anim-head{max-width:62ch;margin:0 auto clamp(20px,4vh,40px);text-align:center}
.apb-anim .apb-anim-head h2{font-size:clamp(24px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;margin:0}
.apb-anim .apb-anim-head .apb-rx-eyebrow{margin:0 0 8px}
.apb-anim img{display:block;width:100%;height:100%;object-fit:cover}

/* ============ COVERFLOW ============ */
.apb-anim--coverflow .apb-anim-stage{position:relative}
/* static fallback: horizontal scroll-snap row */
.apb-anim--coverflow .apb-anim-track{display:flex;gap:var(--an-gap);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px 0;-webkit-overflow-scrolling:touch}
.apb-anim--coverflow .apb-anim-card{flex:0 0 var(--an-card);aspect-ratio:3/4;scroll-snap-align:center;position:relative;
  margin:0;border-radius:var(--an-radius);overflow:hidden;border:1px solid var(--apb-rx-line,rgba(0,0,0,.08));box-shadow:0 18px 50px rgba(0,0,0,.22)}
.apb-anim--coverflow .apb-anim-card figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:#fff;
  font-weight:600;font-size:15px;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.apb-anim--coverflow .apb-anim-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.6))}
.apb-anim .apb-anim-ctrl{display:none;justify-content:center;gap:10px;margin-top:24px}
.apb-anim .apb-anim-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--apb-rx-line,rgba(0,0,0,.14));background:var(--apb-rx-surface,#fff);
  color:inherit;cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:transform .15s,box-shadow .2s}
.apb-anim .apb-anim-btn:hover{box-shadow:0 6px 18px rgba(0,0,0,.16)}
.apb-anim .apb-anim-btn:active{transform:scale(.92)}
/* enhanced: 3D coverflow — JS positions cards absolutely */
.apb-anim--coverflow[data-apb-anim-on] .apb-anim-stage{height:clamp(340px,50vh,540px);perspective:1600px;cursor:grab}
.apb-anim--coverflow[data-apb-anim-on] .apb-anim-stage.is-grabbing{cursor:grabbing}
.apb-anim--coverflow[data-apb-anim-on] .apb-anim-track{position:absolute;inset:0;display:block;overflow:visible;
  transform-style:preserve-3d;padding:0}
.apb-anim--coverflow[data-apb-anim-on] .apb-anim-card{position:absolute;top:50%;left:50%;width:var(--an-card);
  flex:none;will-change:transform,opacity}
.apb-anim--coverflow[data-apb-anim-on] .apb-anim-ctrl{display:flex}

/* ============ MARQUEE GALLERY ============ */
.apb-anim--marquee .apb-anim-mq{display:flex;flex-direction:column;gap:var(--an-gap);overflow:hidden;
  -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--marquee .apb-anim-mq-row{display:flex;gap:var(--an-gap);width:max-content}
.apb-anim--marquee .apb-anim-mq-cell{flex:0 0 auto;width:clamp(200px,24vw,300px);aspect-ratio:16/10;border-radius:var(--an-radius);
  overflow:hidden;border:1px solid var(--apb-rx-line,rgba(0,0,0,.08))}
/* static fallback: a scrollable strip (no animation) */
.apb-anim--marquee .apb-anim-mq{overflow-x:auto}
/* enhanced: seamless opposed scroll */
.apb-anim--marquee[data-apb-anim-on] .apb-anim-mq{overflow:hidden}
.apb-anim--marquee[data-apb-anim-on] .apb-anim-mq-row[data-apb-anim-mq="fwd"]{animation:apb-anim-mqL 42s linear infinite}
.apb-anim--marquee[data-apb-anim-on] .apb-anim-mq-row[data-apb-anim-mq="rev"]{animation:apb-anim-mqR 48s linear infinite}
.apb-anim--marquee[data-apb-anim-on].is-paused .apb-anim-mq-row{animation-play-state:paused}
.apb-anim--marquee[data-apb-anim-on] .apb-anim-mq:hover .apb-anim-mq-row{animation-play-state:paused}
@keyframes apb-anim-mqL{to{transform:translateX(-50%)}}
@keyframes apb-anim-mqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ============ BEFORE / AFTER ============ */
.apb-anim--beforeafter .apb-anim-ba{position:relative;border-radius:var(--an-radius);overflow:hidden;
  border:1px solid var(--apb-rx-line,rgba(0,0,0,.1));height:clamp(320px,52vh,560px);-webkit-user-select:none;user-select:none}
.apb-anim--beforeafter .apb-anim-ba-img{position:absolute;inset:0}
.apb-anim--beforeafter .apb-anim-ba-after{clip-path:inset(0 0 0 50%)} /* static: split at centre */
.apb-anim--beforeafter .apb-anim-ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:3;
  box-shadow:0 0 14px rgba(0,0,0,.5)}
.apb-anim--beforeafter .apb-anim-ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;
  border-radius:50%;background:rgba(15,15,17,.7);border:1px solid #fff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
.apb-anim--beforeafter .apb-anim-ba-tag{position:absolute;bottom:16px;z-index:4;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(15,15,17,.6);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 13px}
.apb-anim--beforeafter .apb-anim-ba-tag--l{left:16px}.apb-anim--beforeafter .apb-anim-ba-tag--r{right:16px}
.apb-anim--beforeafter[data-apb-anim-on] .apb-anim-ba{cursor:ew-resize}

/* ============ SPOTLIGHT ============ */
.apb-anim--spotlight .apb-anim-sp{position:relative;border-radius:var(--an-radius);overflow:hidden;
  border:1px solid var(--apb-rx-line,rgba(0,0,0,.1));height:clamp(340px,56vh,600px)}
.apb-anim--spotlight .apb-anim-sp-base,.apb-anim--spotlight .apb-anim-sp-reveal{position:absolute;inset:0}
/* static fallback: just show the full-colour image (reveal layer on top, no mask) */
.apb-anim--spotlight .apb-anim-sp-base{display:none}
.apb-anim--spotlight .apb-anim-sp-cap{position:absolute;left:clamp(20px,4vw,44px);bottom:clamp(22px,4vh,48px);z-index:3;color:#fff;
  max-width:42ch;text-shadow:0 2px 16px rgba(0,0,0,.85)}
.apb-anim--spotlight .apb-anim-sp-cap h3{font-size:clamp(22px,3.2vw,38px);font-weight:800;margin:0}
.apb-anim--spotlight .apb-anim-sp-cap p{margin:6px 0 0;color:#e4e4e7}
/* enhanced: duotone base + masked reveal beam (JS drives the mask position) */
.apb-anim--spotlight[data-apb-anim-on] .apb-anim-sp-base{display:block}
.apb-anim--spotlight[data-apb-anim-on] .apb-anim-sp-base img{filter:grayscale(1) brightness(.34) contrast(1.05)}
.apb-anim--spotlight[data-apb-anim-on] .apb-anim-sp-reveal{
  -webkit-mask-image:radial-gradient(circle 150px at 50% 50%,#000 0,#000 60%,transparent 72%);
  mask-image:radial-gradient(circle 150px at 50% 50%,#000 0,#000 60%,transparent 72%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;will-change:-webkit-mask-position,mask-position}

/* ============ DOCK MAGNIFY ============ */
.apb-anim--dock .apb-anim-dock{overflow-x:auto;-webkit-overflow-scrolling:touch}
.apb-anim--dock .apb-anim-dock-rail{display:flex;align-items:center;gap:14px;padding:30px 6vw;width:max-content;margin:0 auto}
.apb-anim--dock .apb-anim-dock-item{flex:0 0 auto;width:clamp(90px,11vw,150px);aspect-ratio:3/4;border-radius:var(--an-radius);
  overflow:hidden;border:1px solid var(--apb-rx-line,rgba(0,0,0,.1));transform-origin:center bottom;box-shadow:0 14px 40px rgba(0,0,0,.2)}
.apb-anim--dock[data-apb-anim-on] .apb-anim-dock{overflow:hidden;cursor:none}
.apb-anim--dock[data-apb-anim-on] .apb-anim-dock-item{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .apb-anim--marquee[data-apb-anim-on] .apb-anim-mq-row{animation:none}
}
@media (max-width:760px){
  .apb-anim{--an-card:clamp(180px,62vw,240px)}
}