/* ==========================================================================
   OLS KIT · olk-fx.css — effect library (batch 2+). Opt-in per template via html[data-olk-fx="..."]
   and markup/classes written by apply.py (see README "Effects"). No background-attachment:fixed anywhere:
   backdrops use position:sticky, scroll-linked values come from olk-fx.js (--p vars) or CSS
   scroll-driven animations (animation-timeline) where supported. Everything degrades to a static
   layout under prefers-reduced-motion (html.olk-rm).
   ========================================================================== */

/* ---------- progress: scroll progress bar ---------- */
.olk-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1250;pointer-events:none;transform-origin:0 50%;
  transform:scaleX(var(--olk-sp,0));background:linear-gradient(90deg,var(--k-accent),var(--k-primary,var(--k-accent)),var(--k-accent2,var(--k-accent)))}
@supports (animation-timeline: scroll()){.olk-progress.olk-sda{animation:olkGrow 1ms linear both;animation-timeline:scroll(root block)}}
@keyframes olkGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- backdrop: still photo pinned behind, neighbouring sections scroll over it ---------- */
.olk-bd{--in:0px;--dwell:28svh;position:relative;z-index:0;height:calc(var(--in) + var(--dwell) + 200svh);margin-top:calc(-1 * var(--in));
  background:var(--k-dark,#111);contain:paint}
.olk-bd[data-in]{--in:100svh}
.olk-bd-pin{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.olk-bd-media{position:absolute;inset:0;overflow:hidden}
.olk-bd-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.olk-bd-prev{position:relative;z-index:2}
.olk-bd-next{position:relative;z-index:2;margin-top:-100svh!important}
.olk-bd-sheet{border-radius:clamp(18px,3vw,34px) clamp(18px,3vw,34px) 0 0;box-shadow:0 -28px 60px -20px rgba(0,0,0,.45)}
.olk-bd-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(28px,6vw,84px);padding-bottom:calc(clamp(40px,8vw,96px) + var(--mbar-h,0px));
  max-width:min(980px,100%);color:#fff;opacity:calc(1 - var(--pc,0) * 1.6);transform:translate3d(0,calc(var(--pc,0) * -48px),0)}
.olk-bd-kick{display:inline-flex;align-items:center;gap:10px;font:600 12px/1.2 var(--k-body);letter-spacing:.22em;text-transform:uppercase;color:var(--k-accent)}
.olk-bd-kick::before{content:"";width:34px;height:1px;background:currentColor}
.olk-bd-line{margin:.35em 0 0;font-family:var(--k-head);font-weight:600;font-size:clamp(32px,5.4vw,76px);line-height:1.02;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.olk-bd-pin::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--k-dark,#000) 30%,transparent) 0%,transparent 30%,transparent 45%,color-mix(in srgb,var(--k-dark,#000) 78%,transparent) 100%)}
.olk-bd[data-v=window]{background:var(--k-bg,#fff)}
.olk-bd[data-v=window] .olk-bd-media{clip-path:inset(calc((1 - var(--pw,1)) * 13%) calc((1 - var(--pw,1)) * 11%) round calc((1 - var(--pw,1)) * 36px))}
.olk-bd[data-v=window] .olk-bd-media img{transform:scale(calc(1.18 - var(--pw,1) * .18))}
.olk-bd[data-v=window] .olk-bd-pin::after{opacity:var(--pw,1)}
.olk-bd[data-v=dim] .olk-bd-media img{transform:scale(calc(1.1 - var(--pc,0) * .1));filter:brightness(calc(1 - var(--pc,0) * .6))}
.olk-bd[data-v=kb] .olk-bd-media img{opacity:0;transform:scale(var(--z,1.12)) translate3d(var(--tx,0),0,0);will-change:opacity,transform}
.olk-bd[data-v=kb] .olk-bd-media img:first-child{opacity:1}
.olk-bd[data-v=kb] .olk-bd-dots{position:absolute;right:clamp(18px,4vw,48px);top:50%;z-index:3;display:flex;flex-direction:column;gap:10px;transform:translateY(-50%)}
.olk-bd[data-v=kb] .olk-bd-dots i{width:6px;height:28px;border-radius:6px;background:rgba(255,255,255,.35);overflow:hidden;position:relative}
.olk-bd[data-v=kb] .olk-bd-dots i::after{content:"";position:absolute;inset:0;background:var(--k-accent);transform-origin:50% 0;transform:scaleY(var(--d,0))}
/* batch 3 variants: portal (zoom through a round window), blur (softens as it is covered), tilt (falls back in 3D),
   split (two photos drift in opposite directions), duo (duotone wash grows), mono (black & white floods into colour) */
.olk-bd[data-v=portal]{background:var(--k-bg,#fff)}
.olk-bd[data-v=portal] .olk-bd-media{clip-path:circle(calc(12% + var(--pw,1) * 64%) at 50% 52%)}
.olk-bd[data-v=portal] .olk-bd-media img{transform:scale(calc(1.4 - var(--pw,1) * .4))}
.olk-bd[data-v=portal] .olk-bd-pin::after{opacity:var(--pw,1)}
.olk-bd[data-v=portal] .olk-bd-cap{opacity:calc(min(1,(var(--pw,1) - .7) * 3.4) - var(--pc,0) * 1.6)}
.olk-bd[data-v=blur] .olk-bd-media img{filter:blur(calc(var(--pc,0) * 14px)) brightness(calc(1 - var(--pc,0) * .3));transform:scale(calc(1.04 + var(--pc,0) * .1))}
.olk-bd[data-v=tilt] .olk-bd-pin{perspective:1100px;background:var(--k-dark,#111)}
.olk-bd[data-v=tilt] .olk-bd-media{transform-origin:50% 100%;transform:rotateX(calc(var(--pc,0) * 18deg)) scale(calc(1 - var(--pc,0) * .16));border-radius:calc(var(--pc,0) * 44px)}
.olk-bd[data-v=split] .olk-bd-media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,.9vw,12px);background:var(--k-dark,#111)}
.olk-bd[data-v=split] .olk-bd-media img{position:relative;inset:auto;height:120%;transform:translate3d(0,calc(var(--p,0) * -16%),0)}
.olk-bd[data-v=split] .olk-bd-media img:nth-child(2){transform:translate3d(0,calc(-16% + var(--p,0) * 16%),0)}
.olk-bd[data-v=duo] .olk-bd-media::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--k-primary,var(--k-accent)),var(--k-accent));mix-blend-mode:color;opacity:calc(.12 + var(--p,0) * .7)}
.olk-bd[data-v=duo] .olk-bd-media img{filter:grayscale(calc(var(--p,0) * .9)) contrast(1.06)}
.olk-bd[data-v=mono] .olk-bd-media img{filter:grayscale(max(0,1 - var(--p,0) * 1.7)) contrast(calc(1.12 - var(--p,0) * .12))}
html.olk-rm .olk-bd .olk-bd-media,html.olk-rm .olk-bd .olk-bd-media img{transform:none!important;filter:none!important;clip-path:none!important}
/* hero variant: the hero itself stays put while the following section slides over it like a sheet */
.olk-bdh{position:relative}
.olk-bdh > .olk-bdh-hero{position:sticky!important;top:var(--olk-bdh-top,0px);z-index:0}
.olk-bdh > .olk-bdh-hero::after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;background:var(--k-dark,#000);opacity:calc(var(--hp,0) * .6)}
.olk-bdh > .olk-bdh-hero > *{transform:translate3d(0,calc(var(--hp,0) * -6vh),0) scale(calc(1 - var(--hp,0) * .04))}
.olk-bdh > :not(.olk-bdh-hero){position:relative;z-index:2}
.olk-bdh-glass{background:color-mix(in srgb,var(--k-dark,#111) 72%,transparent)!important;-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border-top:1px solid rgba(255,255,255,.14)}
@media (max-width:768px){.olk-bdh-glass{background:color-mix(in srgb,var(--k-dark,#111) 94%,transparent)!important;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- curtain: hero opens like a curtain / envelope on load ---------- */
.olk-has-curtain{position:relative}
.olk-curtain{position:absolute;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.olk-curtain i{position:absolute;display:block;background:var(--k-dark,#111);will-change:transform}
.olk-curtain i::after{content:"";position:absolute;background:var(--k-accent,#c8a96e)}
.olk-curtain[data-v=split] i{top:0;bottom:0;width:50.4%}
.olk-curtain[data-v=split] i:first-child{left:0;animation:olkCurL 1.25s cubic-bezier(.77,0,.18,1) .35s both}
.olk-curtain[data-v=split] i:last-child{right:0;animation:olkCurR 1.25s cubic-bezier(.77,0,.18,1) .35s both}
.olk-curtain[data-v=split] i:first-child::after{right:0;top:0;bottom:0;width:2px}
.olk-curtain[data-v=envelope] i{left:0;right:0;height:50.4%}
.olk-curtain[data-v=envelope] i:first-child{top:0;animation:olkCurU 1.2s cubic-bezier(.77,0,.18,1) .3s both}
.olk-curtain[data-v=envelope] i:last-child{bottom:0;animation:olkCurD 1.2s cubic-bezier(.77,0,.18,1) .3s both}
.olk-curtain[data-v=envelope] i:first-child::after{left:0;right:0;bottom:0;height:3px;background:repeating-linear-gradient(90deg,var(--k-accent) 0 18px,transparent 18px 26px,var(--k-primary,#8b3a2e) 26px 44px,transparent 44px 52px)}
@keyframes olkCurL{to{transform:translate3d(-101%,0,0)}}
@keyframes olkCurR{to{transform:translate3d(101%,0,0)}}
@keyframes olkCurU{to{transform:translate3d(0,-101%,0)}}
@keyframes olkCurD{to{transform:translate3d(0,101%,0)}}
.olk-curtain-img{animation:olkCurImg 2.2s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes olkCurImg{from{transform:scale(1.14)}to{transform:scale(1)}}

/* ---------- words: split-text heading reveal ---------- */
.olk-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .02em .1em;margin:-.06em -.02em -.1em}
.olk-fx-js .olk-words .olk-wi{display:inline-block;transform:translate3d(0,110%,0) rotate(4deg);opacity:0;
  transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .7s ease;transition-delay:calc(var(--i,0) * 60ms)}
.olk-fx-js .olk-words.olk-in .olk-wi{transform:none;opacity:1}
@supports (animation-timeline: view()){
  .olk-fx-js .olk-words.olk-sda{view-timeline:--olkw block}
  .olk-fx-js .olk-words.olk-sda .olk-wi{transition:none;animation:olkWord 1ms linear both;animation-timeline:--olkw;
    animation-range:entry calc(var(--i,0) * 4%) entry calc(75% + var(--i,0) * 4%)}
}
@keyframes olkWord{from{transform:translate3d(0,110%,0) rotate(4deg);opacity:0}to{transform:none;opacity:1}}

/* ---------- clip: scroll-scrubbed clip-path / mask reveals ---------- */
.olk-clip{--c0:inset(100% 0 0 0);--c1:inset(0 0 0 0)}
.olk-clip[data-cv=iris]{--c0:circle(0% at 50% 55%);--c1:circle(75% at 50% 50%)}
.olk-clip[data-cv=diag]{--c0:polygon(0 0,0 0,0 100%,0 100%);--c1:polygon(0 0,100% 0,100% 100%,0 100%)}
.olk-clip[data-cv=blob]{--c0:ellipse(8% 6% at 50% 60%);--c1:ellipse(90% 95% at 50% 50%)}
.olk-clip[data-cv=blinds]{--c0:inset(0 50% 0 50%);--c1:inset(0 0 0 0)}
.olk-fx-js .olk-clip{clip-path:var(--c0);scale:1.12;transition:clip-path 1.3s cubic-bezier(.65,0,.25,1),scale 1.6s cubic-bezier(.2,.7,.2,1)}
.olk-fx-js .olk-clip.olk-in{clip-path:var(--c1);scale:1}
@supports (animation-timeline: view()){
  .olk-fx-js .olk-clip.olk-sda{transition:none;animation:olkClip 1ms linear both;animation-timeline:view();animation-range:entry 5% cover 42%}
}
@keyframes olkClip{from{clip-path:var(--c0);scale:1.12}to{clip-path:var(--c1);scale:1}}

/* ---------- sdrive: scroll-driven entrances (pop / blur / rise) + zoom scrub ---------- */
.olk-fx-js .olk-sd{opacity:0;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .8s ease;transition-delay:var(--sdd,0ms)}
.olk-fx-js .olk-sd[data-sd=pop]{transform:translate3d(0,34px,0) scale(.9)}
.olk-fx-js .olk-sd[data-sd=blur]{transform:translate3d(0,40px,0);filter:blur(10px)}
.olk-fx-js .olk-sd[data-sd=rise]{transform:translate3d(0,70px,0) rotate(-1.5deg)}
.olk-fx-js .olk-sd.olk-in{opacity:1;transform:none;filter:none}
@supports (animation-timeline: view()){
  .olk-fx-js .olk-sd.olk-sda{transition:none;animation:olkSdPop 1ms linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  .olk-fx-js .olk-sd.olk-sda[data-sd=blur]{animation-name:olkSdBlur}
  .olk-fx-js .olk-sd.olk-sda[data-sd=rise]{animation-name:olkSdRise}
}
@keyframes olkSdPop{from{opacity:0;transform:translate3d(0,34px,0) scale(.9)}to{opacity:1;transform:none}}
@keyframes olkSdBlur{from{opacity:0;transform:translate3d(0,40px,0);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes olkSdRise{from{opacity:0;transform:translate3d(0,70px,0) rotate(-1.5deg)}to{opacity:1;transform:none}}
.olk-zoomwrap{overflow:hidden}
@supports (animation-timeline: view()){.olk-fx-js .olk-zoom{animation:olkZoom 1ms linear both;animation-timeline:view();animation-range:cover 0% cover 100%}}
@keyframes olkZoom{from{scale:1.28}to{scale:1}}

/* ---------- stack: sticky stacking cards ---------- */
.olk-stack{display:flex!important;flex-direction:column!important;gap:clamp(18px,3vw,30px)!important;grid-template-columns:none!important;overflow:visible!important;max-width:1040px;margin-inline:auto;padding-bottom:4vh}
.olk-stack > *{position:sticky!important;top:calc(var(--olk-navh,64px) + 18px + var(--si,0) * 16px);transform-origin:50% 0;
  transform:scale(calc(1 - var(--sd,0) * .07)) !important;filter:brightness(calc(1 - var(--sd,0) * .22));will-change:transform;width:100%!important;max-width:none!important;margin:0!important}
.olk-stack > .olk-nc{display:grid!important;grid-template-columns:1.05fr 1fr;min-height:clamp(300px,50vh,460px);background:var(--k-surface,#fff);color:var(--k-surface-ink,#222);border-radius:var(--k-radius,16px);overflow:hidden;box-shadow:0 18px 50px -20px rgba(0,0,0,.35)}
.olk-stack > .olk-nc .olk-nc-media{aspect-ratio:auto!important;height:100%}
@media(min-width:761px){.olk-stack > .olk-nc{grid-template-rows:auto 1fr;position:relative}.olk-stack > .olk-nc > .olk-nc-media{grid-column:2;grid-row:1 / span 2}.olk-stack > .olk-nc > .olk-nc-num{grid-column:1;grid-row:1;padding:clamp(22px,4vw,48px) clamp(22px,4vw,48px) 0}.olk-stack > .olk-nc > .olk-nc-body{grid-column:1;grid-row:2;justify-content:flex-start;padding-top:14px}}
.olk-stack > .olk-nc .olk-nc-body{justify-content:center;padding:clamp(22px,4vw,48px)}
.olk-stack > .olk-nc .olk-nc-num{display:block;font-size:clamp(28px,4vw,48px);line-height:1}
.olk-stack > .olk-nc .olk-nc-title{font-size:clamp(22px,2.4vw,32px)}
.olk-stack[data-sv=postcard] > *{background:var(--k-bg,#fdf6e3);color:var(--k-text,#2c1a0e);border:1px solid color-mix(in srgb,var(--k-dark) 18%,transparent);box-shadow:0 22px 50px -18px rgba(0,0,0,.5);padding:clamp(26px,4vw,48px)!important;border-radius:6px!important;
  background-image:repeating-linear-gradient(0deg,transparent 0 31px,color-mix(in srgb,var(--k-dark) 6%,transparent) 31px 32px)}
.olk-stack[data-sv=postcard] > *:nth-child(odd){rotate:-1.2deg}
.olk-stack[data-sv=postcard] > *:nth-child(even){rotate:1deg}
.olk-stack[data-sv=postcard] > *::before{content:"";position:absolute;top:18px;right:18px;width:54px;height:62px;border:2px dashed color-mix(in srgb,var(--k-primary,#8b3a2e) 60%,transparent);border-radius:3px}
@media (max-width:760px){
  .olk-stack > .olk-nc{grid-template-columns:1fr;min-height:0}
  .olk-stack > .olk-nc .olk-nc-media{aspect-ratio:16/10!important;height:auto}
  .olk-stack > *{top:calc(var(--olk-navh,56px) + 10px + var(--si,0) * 10px)}
}

/* ---------- hscroll: vertical scroll drives a pinned horizontal gallery (desktop), swipe row on touch ---------- */
.olk-hs .olk-hs-track{display:flex!important;gap:clamp(10px,1.4vw,20px)!important;grid-template-columns:none!important;grid-auto-flow:unset!important}
.olk-hs .olk-hs-track > *{flex:0 0 auto;grid-row:auto!important;grid-column:auto!important;overflow:hidden;border-radius:var(--k-radius,14px);position:relative}
.olk-hs .olk-hs-track > * img{width:100%!important;height:100%!important;object-fit:cover!important;display:block}
.olk-hs:not(.olk-hs-on) .olk-hs-track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px;overscroll-behavior-x:contain}
.olk-hs:not(.olk-hs-on) .olk-hs-track::-webkit-scrollbar{display:none}
.olk-hs:not(.olk-hs-on) .olk-hs-track > *{width:min(78vw,420px);aspect-ratio:4/5;height:auto!important;scroll-snap-align:center}
.olk-hs.olk-hs-on{padding-top:0!important;padding-bottom:0!important}
.olk-hs.olk-hs-on .olk-hs-pin{position:sticky;top:var(--olk-navh,64px);height:calc(100svh - var(--olk-navh,64px));overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,3vh,36px);padding:0 clamp(24px,4vw,56px)}
.olk-hs.olk-hs-on .olk-hs-pin > *{flex-shrink:0;margin-top:0!important;margin-bottom:0!important}
.olk-hs.olk-hs-on .olk-hs-track{width:max-content;transform:translate3d(calc(var(--hsx,0) * -1px),0,0);will-change:transform}
.olk-hs.olk-hs-on .olk-hs-track > *{width:clamp(280px,30vw,500px);height:min(58vh,540px)!important}
.olk-hs.olk-hs-on .olk-hs-track > *:nth-child(3n+2){width:clamp(240px,22vw,380px);margin-top:6vh!important}
.olk-hs-bar{height:3px;width:min(320px,50%);background:color-mix(in srgb,currentColor 18%,transparent);border-radius:3px;overflow:hidden}
.olk-hs-bar i{display:block;height:100%;background:var(--k-accent);transform-origin:0 50%;transform:scaleX(var(--hsp,0))}
.olk-hs:not(.olk-hs-on) .olk-hs-bar{display:none}

/* ---------- tilt / magnetic (pointer:fine only, set up by JS) ---------- */
.olk-tilt{transform-style:preserve-3d;will-change:transform;position:relative}
.olk-tilt.olk-tilt-rest{transition:transform .6s cubic-bezier(.2,.8,.2,1)!important}
.olk-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),rgba(255,255,255,0) 55%);mix-blend-mode:soft-light}
.olk-tilt:hover .olk-glare{opacity:1}
.olk-mag{transition:translate .35s cubic-bezier(.2,.8,.2,1)}

/* ---------- kinetic: big type band moved by scroll (decorative) ---------- */
.olk-kin{position:relative;overflow:hidden;padding:clamp(30px,6vw,80px) 0;background:var(--k-dark,#111);color:#fff;contain:paint}
.olk-kin-track{display:flex;width:max-content;white-space:nowrap;font-family:var(--k-head);font-size:clamp(46px,10.5vw,168px);line-height:.98;letter-spacing:-.01em;text-transform:uppercase;
  transform:translate3d(calc(var(--kx,0) * 1px - 25%),0,0);will-change:transform}
.olk-kin-track + .olk-kin-track{margin-top:.08em}
.olk-kin-track span{padding-right:.4em}
.olk-kin-track[data-dir="-1"]{color:transparent;-webkit-text-stroke:1.5px var(--k-accent,#fff)}
.olk-kin-track b{color:var(--k-accent);font-weight:inherit;padding-right:.4em}

/* ---------- shrink: hero photo shrinks into a framed card on scroll ---------- */
.olk-shrink{overflow:hidden;clip-path:inset(calc(var(--olk-sh,0) * var(--sh-y,4.5vh)) calc(var(--olk-sh,0) * var(--sh-x,4vw)) calc(var(--olk-sh,0) * var(--sh-y,4.5vh)) round calc(var(--olk-sh,0) * 34px))}
.olk-shrink-media{transform:scale(calc(1.08 - var(--olk-sh,0) * .08));transform-origin:50% 40%}
.olk-shrink-host{background:var(--k-bg,#fff)}

/* ---------- vtlight: view-transition gallery lightbox ---------- */
.olk-vt{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;z-index:2147482000;color:#fff}
.olk-vt:not([open]){display:none!important}
.olk-vt[open]{display:grid;grid-template-rows:auto 1fr auto;place-items:center}
.olk-vt::backdrop{background:transparent}
.olk-vt-bg{position:absolute;inset:0;background:color-mix(in srgb,var(--k-dark,#000) 94%,#000)}
.olk-vt-top,.olk-vt-bot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 18px;gap:12px;font:500 14px/1 var(--k-body)}
.olk-vt-top{padding-top:calc(14px + env(safe-area-inset-top,0px))}
.olk-vt-bot{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));justify-content:center}
.olk-vt-fig{position:relative;z-index:1;margin:0;width:100%;height:100%;display:grid;place-items:center;padding:0 clamp(8px,6vw,90px);min-height:0}
.olk-vt-fig img{max-width:100%;max-height:calc(100svh - 150px);width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5);display:block}
.olk-vt button{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.olk-vt button:hover{background:rgba(255,255,255,.2)}
.olk-vt button svg{width:22px;height:22px}
.olk-vt button:focus-visible{outline:3px solid var(--k-accent,#fff);outline-offset:2px}
.olk-vt-nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%)}
.olk-vt-prev{left:clamp(6px,2vw,24px)}.olk-vt-next{right:clamp(6px,2vw,24px)}
html.olk-vt-lock,html.olk-vt-lock body{overflow:hidden!important}
::view-transition-group(olk-vt-img){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
[data-olk-vt-thumb]{cursor:zoom-in}

/* ---------- reduced motion: everything static, backdrops simply stay put ---------- */
html.olk-rm .olk-curtain{display:none!important}
html.olk-rm .olk-curtain-img,html.olk-rm .olk-kin-track,html.olk-rm .olk-shrink-media{animation:none!important;transform:none!important}
html.olk-rm .olk-shrink{clip-path:none!important}
html.olk-rm .olk-words .olk-wi,html.olk-rm .olk-sd,html.olk-rm .olk-clip,html.olk-rm .olk-zoom{animation:none!important;transition:none!important;transform:none!important;opacity:1!important;filter:none!important;clip-path:none!important;scale:none!important}
html.olk-rm .olk-stack > *{transform:none!important;filter:none!important}
html.olk-rm .olk-bdh > .olk-bdh-hero > *,html.olk-rm .olk-bd-media img{transform:none!important;filter:none!important}
html.olk-rm .olk-bd[data-v=window] .olk-bd-media{clip-path:none!important}
@media (prefers-reduced-motion:reduce){.olk-curtain{display:none!important}.olk-progress{animation:none!important}}
@media print{.olk-curtain,.olk-progress,.olk-kin,.olk-vt{display:none!important}.olk-bd{height:auto;margin:0}.olk-bd-pin{position:relative;height:50vh}.olk-bd-next{margin-top:0!important}}
/* ---- batch 4 backdrop reveals: fan (deco sunburst sweep) / paper (torn sheets rip apart) / tiles (azulejo flip) / polaroid (print grows to full bleed) ---- */
.olk-bd[data-v=fan]{--pr:clamp(0,calc(var(--pw,1) * .35 + var(--p,0) * 1.9 - .3),1);background:var(--k-dark,#111)}
.olk-bd[data-v=fan] .olk-bd-media{-webkit-mask-image:conic-gradient(from -90deg at 50% 100%,#000 calc(var(--pr) * 180deg),transparent calc(var(--pr) * 180deg + .5deg));mask-image:conic-gradient(from -90deg at 50% 100%,#000 calc(var(--pr) * 180deg),transparent calc(var(--pr) * 180deg + .5deg))}
.olk-bd[data-v=fan] .olk-bd-media img{transform:scale(calc(1.12 - var(--pr) * .12))}
.olk-bd-rays{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;fill:none;stroke:var(--k-accent,#c9a45c);stroke-width:.35;opacity:calc(1 - var(--pr,1) * .85)}
.olk-bd[data-v=fan] .olk-bd-cap{opacity:clamp(0,calc(var(--pr) * 3 - 2),1)}
.olk-bd[data-v=paper]{--pr:clamp(0,calc(var(--p,0) * 2.3 - .12),1)}
.olk-bd-paper{position:absolute;inset:0;z-index:2;pointer-events:none}
.olk-bd-paper i{position:absolute;left:-2%;right:-2%;height:100%;background:var(--k-bg,#f6efe4);will-change:transform}
.olk-bd-pt{top:0;transform:translate3d(0,calc(var(--pr) * -62%),0) rotate(calc(var(--pr) * -3deg))}
.olk-bd-pb{bottom:0;transform:translate3d(0,calc(var(--pr) * 62%),0) rotate(calc(var(--pr) * 2.4deg))}
.olk-bd-paper .olk-bd-pt2,.olk-bd-paper .olk-bd-pb2{background:color-mix(in srgb,var(--k-bg,#f6efe4) 78%,#8a6d4a);filter:drop-shadow(0 0 6px rgba(0,0,0,.25))}
.olk-bd-pt2{transform:translate3d(0,calc(var(--pr) * -62% + 1.2%),0) rotate(calc(var(--pr) * -3deg))}
.olk-bd-pb2{transform:translate3d(0,calc(var(--pr) * 62% - 1.2%),0) rotate(calc(var(--pr) * 2.4deg))}
.olk-bd[data-v=paper] .olk-bd-paper{opacity:calc(1.6 - var(--pr))}
.olk-bd[data-v=paper] .olk-bd-media img{transform:scale(calc(1.14 - var(--pr) * .14))}
.olk-bd[data-v=paper] .olk-bd-cap{opacity:clamp(0,calc(var(--pr) * 2.5 - 1.3),1)}
.olk-bd[data-v=tiles]{--pr:clamp(0,calc(var(--pw,1) * .25 + var(--p,0) * 2.2 - .25),1);--tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23f7f3ea'/%3E%3Cg fill='none' stroke='%23215a9c' stroke-width='2.4'%3E%3Cpath d='M30 4c6 9 6 17 0 26-6-9-6-17 0-26zM30 56c6-9 6-17 0-26-6 9-6 17 0 26zM4 30c9-6 17-6 26 0-9 6-17 6-26 0zM56 30c-9-6-17-6-26 0 9 6 17 6 26 0z'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3Cpath d='M0 8a8 8 0 0 0 8-8M52 0a8 8 0 0 0 8 8M60 52a8 8 0 0 0-8 8M8 60a8 8 0 0 0-8-8'/%3E%3C/g%3E%3C/svg%3E")}
.olk-bd-tiles{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);perspective:900px;pointer-events:none}
.olk-bd-tiles i{--f:clamp(0,calc((var(--pr) - var(--d)) * 3.2),1);background:var(--tile) center/cover;box-shadow:inset 0 0 0 1px rgba(33,90,156,.18);transform:rotateY(calc(var(--f) * 92deg)) scale(calc(1 - var(--f) * .2));opacity:calc(1 - var(--f) * 1.1);backface-visibility:hidden;will-change:transform}
.olk-bd[data-v=tiles] .olk-bd-media img{opacity:clamp(.35,calc(var(--pr) * 1.3),1);transform:scale(calc(1.1 - var(--pr) * .1))}
.olk-bd[data-v=tiles] .olk-bd-cap{opacity:clamp(0,calc(var(--pr) * 3 - 2),1)}
.olk-bd[data-v=polaroid]{--pr:clamp(0,calc(var(--pw,1) * .2 + var(--p,0) * 2 - .3),1);background:var(--k-bg,#f4efe6)}
.olk-bd[data-v=polaroid] .olk-bd-pin{background:repeating-linear-gradient(90deg,transparent 0 38px,color-mix(in srgb,var(--k-text,#333) 6%,transparent) 38px 39px),var(--k-bg,#f4efe6)}
.olk-bd[data-v=polaroid] .olk-bd-media{--s:calc(.56 + var(--pr) * .44);transform:rotate(calc((1 - var(--pr)) * -4.5deg)) scale(var(--s));outline:calc((1 - var(--pr)) * 26px) solid #fff;box-shadow:0 calc((1 - var(--pr)) * 86px) 0 calc((1 - var(--pr)) * 26px) #fff,0 30px 70px -20px rgba(0,0,0,calc((1 - var(--pr)) * .5));will-change:transform}
.olk-bd[data-v=polaroid] .olk-bd-pin::after{opacity:var(--pr)}
.olk-bd-polcap{position:absolute;left:0;right:0;top:50%;z-index:3;margin:0;text-align:center;pointer-events:none;font:italic 400 clamp(26px,3.4vw,46px)/1 "Segoe Print","Bradley Hand","Marker Felt","Comic Sans MS",cursive;color:#2b2b2b;
  transform:rotate(calc((1 - var(--pr,0)) * -4.5deg)) scale(calc(.56 + var(--pr,0) * .44)) translateY(calc(50svh + 26px));opacity:calc(1 - var(--pr,0) * 2.4)}
.olk-bd[data-v=polaroid] .olk-bd-cap{opacity:clamp(0,calc(var(--pr) * 3 - 2),1)}
html.olk-rm .olk-bd[data-v=fan],html.olk-rm .olk-bd[data-v=paper],html.olk-rm .olk-bd[data-v=tiles],html.olk-rm .olk-bd[data-v=polaroid]{--pr:1}
html.olk-rm .olk-bd[data-v=fan] .olk-bd-media{-webkit-mask-image:none;mask-image:none}
html.olk-rm .olk-bd-paper,html.olk-rm .olk-bd-tiles,html.olk-rm .olk-bd-polcap,html.olk-rm .olk-bd-rays{display:none}
html.olk-rm .olk-bd[data-v=polaroid] .olk-bd-media{outline:0;box-shadow:none}
@media (prefers-reduced-motion:reduce){.olk-bd-paper,.olk-bd-tiles,.olk-bd-polcap,.olk-bd-rays{display:none}.olk-bd[data-v=fan] .olk-bd-media{-webkit-mask-image:none;mask-image:none}.olk-bd[data-v=polaroid] .olk-bd-media{outline:0;box-shadow:none;transform:none}}
/* ---- batch 5 backdrop reveals: letterbox (cinema bars open, subtitle caption) / pan (panorama drifts sideways while pinned) / triptych (three panels close into one photo) ---- */
.olk-bd[data-v=letterbox]{--pr:clamp(0,calc(var(--pw,1) * .3 + var(--p,0) * 2.1 - .35),1);background:#000}
.olk-bd-lbx{position:absolute;left:0;right:0;z-index:2;height:calc((1 - var(--pr)) * 36% + 7%);background:#050505;pointer-events:none}
.olk-bd-lbt{top:0}.olk-bd-lbb{bottom:0}
.olk-bd[data-v=letterbox] .olk-bd-media img{transform:scale(calc(1.14 - var(--pr) * .14))}
.olk-bd[data-v=letterbox] .olk-bd-pin::after{opacity:.55}
.olk-bd[data-v=letterbox] .olk-bd-cap{z-index:3;text-align:center;padding-bottom:calc(9% + var(--mbar-h,0px));opacity:clamp(0,calc(var(--pr) * 3 - 1.6),1)}
.olk-bd[data-v=letterbox] .olk-bd-line{font-size:clamp(24px,3.4vw,46px);font-style:italic;font-weight:500}
.olk-bd[data-v=letterbox] .olk-bd-kick::before{display:none}
.olk-bd[data-v=pan]{background:var(--k-dark,#111)}
.olk-bd[data-v=pan] .olk-bd-media img{width:135%;max-width:none;transform:translateX(calc(var(--p,0) * -25.9%)) scale(1.02)}
.olk-bd-panbar{position:absolute;left:clamp(18px,4vw,48px);right:clamp(18px,4vw,48px);top:clamp(80px,12vh,120px);z-index:3;height:2px;background:rgba(255,255,255,.3);pointer-events:none}
.olk-bd-panbar i{position:absolute;top:-4px;left:calc(var(--p,0) * (100% - 60px));width:60px;height:10px;border-radius:10px;border:2px solid #fff}
.olk-bd[data-v=triptych]{--pr:clamp(0,calc(var(--pw,1) * .3 + var(--p,0) * 2 - .3),1);--g:calc((1 - var(--pr)) * 2.6vw);background:var(--k-bg,#fff)}
.olk-bd[data-v=triptych] .olk-bd-media{-webkit-mask-image:linear-gradient(90deg,#000 calc(33.333% - var(--g)),transparent 0 calc(33.333% + var(--g)),#000 0 calc(66.666% - var(--g)),transparent 0 calc(66.666% + var(--g)),#000 0);mask-image:linear-gradient(90deg,#000 calc(33.333% - var(--g)),transparent 0 calc(33.333% + var(--g)),#000 0 calc(66.666% - var(--g)),transparent 0 calc(66.666% + var(--g)),#000 0);clip-path:inset(calc((1 - var(--pr)) * 14%) calc((1 - var(--pr)) * 5%))}
.olk-bd[data-v=triptych] .olk-bd-media img{transform:scale(calc(1.1 - var(--pr) * .1))}
.olk-bd[data-v=triptych] .olk-bd-pin::after{opacity:var(--pr)}
.olk-bd[data-v=triptych] .olk-bd-cap{opacity:clamp(0,calc(var(--pr) * 3 - 2),1)}
html.olk-rm .olk-bd[data-v=triptych] .olk-bd-media{-webkit-mask-image:none;mask-image:none;clip-path:none}
html.olk-rm .olk-bd-lbx,html.olk-rm .olk-bd-panbar{display:none}
html.olk-rm .olk-bd[data-v=letterbox] .olk-bd-cap{opacity:1}
html.olk-rm .olk-bd[data-v=pan] .olk-bd-media img{width:100%}
@media (prefers-reduced-motion:reduce){.olk-bd-lbx,.olk-bd-panbar{display:none}.olk-bd[data-v=triptych] .olk-bd-media{-webkit-mask-image:none;mask-image:none;clip-path:none}.olk-bd[data-v=letterbox] .olk-bd-cap{opacity:1}.olk-bd[data-v=pan] .olk-bd-media img{width:100%;transform:none}}