/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   NAVR ALBUM MOTION — the premium presentation layer of the Album Templates (dw-30001 … dw-31000).

   SCOPE. Every rule below starts with `.site.site--album`. That marker class is written by SiteDesignCss only when a website's
   design style is one of the `album-*` families (AlbumMotionProfile), so no other template — in any other library — can be
   reached by this file. The file adds PRESENTATION only (surface, motion, depth); it changes no box size, no grid and no content,
   so the layouts the responsive matrix verified stay as they are.

   PROFILE. AlbumMotionProfile derives, per website, one value per axis from the template's own identity and writes them as
   classes: alb-e{0-7} entrance · alb-h{0-5} hover · alb-l{0-3} lightbox · alb-f{0-3} film · alb-v{0-3} hero variant · alb-s{0-2}
   speed. A Cinematic Noir website therefore reveals frames with a curtain and glows on hover while a Pastel Journal blurs them in
   and wobbles — from the same stylesheet. Hero, gallery layout and album card already differ per template (their own markup).

   MEDIA INVARIANT. navr-media.css forces `transform: none !important` on every <img>/<video>: motion here lives on FRAMES and
   WRAPPERS (translate / scale / rotate / clip-path / filter / opacity), never on the picture, so nothing is ever cropped.

   NO-JS / NO-SUPPORT. Entrances use CSS scroll-driven animation (animation-timeline: view()) where supported; elsewhere the page
   keeps the platform's own load-time reveal, and navr-album.js (IntersectionObserver) upgrades it when it runs. Nothing is hidden
   unless it is certain to be revealed.

   MOTION BUDGET. Infinite animations pause when the website is off screen or the tab is hidden (`.alb-paused`, set by the
   script) and are removed entirely for `prefers-reduced-motion: reduce` and for Motion = none (`alb-calm`).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Speed + shared tokens ─────────────────────────────────────────────────────────────────────────────────── */
.site.site--album {
    --alb-ease: cubic-bezier(.22, .8, .24, 1);
    --alb-spring: cubic-bezier(.34, 1.56, .64, 1);
    --alb-dur: .9s;
    --alb-kb: 26s;
    --alb-float: 8s;
    --alb-auto: 6500;
    --alb-ring: var(--site-accent, #e4b363);
    --alb-lift: 0 26px 40px -26px rgb(0 0 0 / .55);
}
.site.site--album.alb-s0 { --alb-dur: 1.2s; --alb-kb: 34s; --alb-float: 11s; --alb-auto: 8000; }
.site.site--album.alb-s2 { --alb-dur: .7s; --alb-kb: 20s; --alb-float: 6s; --alb-auto: 5000; }

/* ── Family skins: type colour, surface and rule — the personality of each of the 14 design families ──────────── */
.site.site--album .ss-ahero__title { font-style: var(--alb-t-style, normal); text-transform: var(--alb-t-case, none); letter-spacing: var(--alb-t-ls, -.012em); text-wrap: balance; }
.site.site--album .ss-ahero__kicker, .site.site--album .ss-head .ss-eyebrow { letter-spacing: var(--alb-k-ls, .3em); }
.site.site--album .ss-head { position: relative; }
.site.site--album .ss-head .ss-title { text-wrap: balance; }
/* The rule is out of flow (the heading keeps its size) and only on sections whose heading has room beneath it. */
.site.site--album .ss:not(.ss--cta):not(.ss--intro) > .ss__inner > .ss-head::after {
    content: ""; position: absolute; left: 0; bottom: calc(-1 * clamp(10px, 1.6vw, 20px)); width: var(--alb-rule-w, 56px); max-width: 100%; height: var(--alb-rule-h, 2px);
    background: var(--alb-rule, linear-gradient(90deg, var(--site-accent, #e4b363), transparent)); pointer-events: none;
    transform-origin: left center;
}
.site.site--album .ss:not(.ss--cta):not(.ss--intro) > .ss__inner > .ss-head--center::after { left: 50%; translate: -50% 0; transform-origin: center; }

.site.site--album.site--style-album-romance { --alb-t-style: italic; --alb-t-ls: -.005em; --alb-k-ls: .36em; --alb-rule-w: 90px; --alb-rule-h: 1px; --alb-rule: linear-gradient(90deg, transparent, var(--site-accent, #e4b363) 30%, var(--site-accent, #e4b363) 70%, transparent); --alb-lift: 0 30px 44px -28px color-mix(in srgb, var(--site-primary) 55%, #000); }
.site.site--album.site--style-album-cinematic { --alb-t-case: uppercase; --alb-t-ls: .02em; --alb-k-ls: .42em; --alb-rule-w: 72px; --alb-rule-h: 3px; --alb-rule: var(--site-accent, #e4b363); --alb-lift: 0 30px 50px -22px rgb(0 0 0 / .9); }
.site.site--album.site--style-album-gallery { --alb-t-ls: -.02em; --alb-k-ls: .34em; --alb-rule-w: 40px; --alb-rule-h: 1px; --alb-rule: var(--ss-fg, #111); }
.site.site--album.site--style-album-heritage { --alb-t-ls: 0; --alb-k-ls: .26em; --alb-rule-w: 120px; --alb-rule-h: 3px; --alb-rule: repeating-linear-gradient(90deg, var(--site-secondary, #a67b5b) 0 8px, transparent 8px 14px); }
.site.site--album.site--style-album-botanical { --alb-t-ls: -.01em; --alb-k-ls: .28em; --alb-rule-w: 64px; --alb-rule-h: 4px; --alb-rule: linear-gradient(90deg, var(--site-primary), var(--site-accent)); }
.site.site--album.site--style-album-vivid { --alb-t-ls: -.025em; --alb-k-ls: .2em; --alb-rule-w: 84px; --alb-rule-h: 6px; --alb-rule: linear-gradient(90deg, var(--site-primary), var(--site-secondary), var(--site-accent)); }
.site.site--album.site--style-album-couture { --alb-t-case: uppercase; --alb-t-ls: .04em; --alb-k-ls: .5em; --alb-rule-w: 100%; --alb-rule-h: 1px; --alb-rule: var(--ss-line, rgb(0 0 0 / .2)); }
.site.site--album.site--style-album-expedition { --alb-t-ls: -.02em; --alb-k-ls: .24em; --alb-rule-w: 96px; --alb-rule-h: 3px; --alb-rule: linear-gradient(90deg, var(--site-primary) 0 55%, var(--site-accent) 55%); }
.site.site--album.site--style-album-nursery { --alb-t-ls: -.01em; --alb-k-ls: .16em; --alb-rule-w: 70px; --alb-rule-h: 8px; --alb-rule: radial-gradient(circle at 4px 4px, var(--site-accent) 3px, transparent 3.5px) 0 0 / 18px 8px repeat-x; }
.site.site--album.site--style-album-corporate { --alb-t-ls: -.02em; --alb-k-ls: .22em; --alb-rule-w: 48px; --alb-rule-h: 4px; --alb-rule: var(--site-primary); }
.site.site--album.site--style-album-luxe { --alb-t-case: uppercase; --alb-t-ls: .06em; --alb-k-ls: .5em; --alb-rule-w: 110px; --alb-rule-h: 1px; --alb-rule: linear-gradient(90deg, transparent, var(--site-primary), transparent); --alb-lift: 0 34px 56px -24px color-mix(in srgb, var(--site-primary) 40%, #000); }
.site.site--album.site--style-album-editorial { --alb-t-ls: -.03em; --alb-k-ls: .3em; --alb-rule-w: 100%; --alb-rule-h: 4px; --alb-rule: linear-gradient(var(--ss-fg, #111) 0 1px, transparent 1px 3px, var(--ss-fg, #111) 3px 4px); }
.site.site--album.site--style-album-studio { --alb-t-case: uppercase; --alb-t-ls: -.01em; --alb-k-ls: .36em; --alb-rule-w: 120px; --alb-rule-h: 8px; --alb-rule: repeating-linear-gradient(90deg, var(--site-accent) 0 14px, transparent 14px 20px); }
.site.site--album.site--style-album-pastel { --alb-t-style: italic; --alb-t-ls: -.01em; --alb-k-ls: .2em; --alb-rule-w: 80px; --alb-rule-h: 5px; --alb-rule: linear-gradient(90deg, var(--site-accent), var(--site-primary)); }

/* Upper-case families set wider type: give the display title a smaller ceiling so long names still fit their column. */
.site.site--album.site--style-album-cinematic .ss-ahero__title, .site.site--album .ss-ahero__title { overflow-wrap: anywhere; }
.site.site--album.site--style-album-cinematic .ss-ahero__title, .site.site--album.site--style-album-couture .ss-ahero__title,
.site.site--album.site--style-album-luxe .ss-ahero__title, .site.site--album.site--style-album-studio .ss-ahero__title { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.08; }

/* ── Buttons — a light sheen travels across on hover; focus is always visible ──────────────────────────────── */
.site.site--album .ss-btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .35s var(--alb-ease), box-shadow .35s ease, background-color .3s ease, color .3s ease, border-color .3s ease; }
.site.site--album .ss-btn::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .28) 50%, transparent 65%); translate: -120% 0;
}
.site.site--album .ss-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgb(0 0 0 / .55); }
.site.site--album .ss-btn:hover::after { translate: 120% 0; transition: translate .8s var(--alb-ease); }
.site.site--album .ss-btn:active { transform: translateY(0) scale(.98); }
.site.site--album .ss-btn:focus-visible { outline: 3px solid var(--site-accent, #e4b363); outline-offset: 3px; }

/* ── Image-loading transition: a quiet shimmer until the picture is decoded, then a fade (class set by the script) ─ */
.site.site--album.alb-js .ss-alb-still:not(.is-loaded) { opacity: 0; }
.site.site--album .ss-alb-still { transition: opacity .6s ease; }
.site.site--album .ss-alb-frame, .site.site--album .ss-album__cover, .site.site--album .ss-alb-film__stage, .site.site--album .ss-ahero__print, .site.site--album .ss-ahero__cell, .site.site--album .ss-ahero__half, .site.site--album .ss-ahero__col, .site.site--album .ss-ahero__reelcell {
    --alb-sh: color-mix(in srgb, var(--ss-fg, #111) 10%, var(--ss-ground, #fff));
}
.site.site--album.alb-js .ss-alb-frame:has(.ss-alb-still:not(.is-loaded)),
.site.site--album.alb-js .ss-album__cover:has(.ss-alb-still:not(.is-loaded)),
.site.site--album.alb-js .ss-alb-film__stage:has(.ss-alb-still:not(.is-loaded)) {
    background: linear-gradient(100deg, var(--alb-sh) 30%, color-mix(in srgb, var(--alb-sh) 70%, #fff) 50%, var(--alb-sh) 70%) 0 0 / 220% 100%;
    animation: alb-shimmer 1.4s linear infinite;
}
@keyframes alb-shimmer { to { background-position: -220% 0; } }

/* ── Scroll entrances (gallery frames, album covers, films, section headings) ───────────────────────────────── */
@keyframes alb-in-0 { from { opacity: 0; translate: 0 42px; } to { opacity: 1; translate: 0 0; } }
@keyframes alb-in-1 { from { opacity: .001; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes alb-in-2 { from { opacity: 0; scale: .88; } to { opacity: 1; scale: 1; } }
@keyframes alb-in-3 { from { opacity: 0; translate: var(--alb-dx, -56px) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes alb-in-4 { from { opacity: 0; filter: blur(16px); scale: 1.05; } to { opacity: 1; filter: blur(0); scale: 1; } }
@keyframes alb-in-5 { from { opacity: .001; clip-path: inset(0 50% 0 50%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes alb-in-6 { from { opacity: 0; transform: perspective(900px) rotateX(16deg) translateY(34px); } to { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0); } }
@keyframes alb-in-7 { from { opacity: .001; clip-path: circle(0% at 50% 50%); } to { opacity: 1; clip-path: circle(80% at 50% 50%); } }
@keyframes alb-rule { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes alb-head { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }

.site.site--album .ss-alb-frame:nth-child(even), .site.site--album .ss-album:nth-child(even) { --alb-dx: 56px; }

@supports (animation-timeline: view()) {
    .site.site--album .ss-alb-frame.ss-reveal, .site.site--album .ss-album.ss-reveal, .site.site--album .ss-alb-film.ss-reveal, .site.site--album .ss-head {
        animation-duration: 1ms; animation-timing-function: var(--alb-ease); animation-fill-mode: backwards; animation-timeline: view();
        animation-range: entry calc(var(--ss-d, 0) * 4%) entry calc(70% + var(--ss-d, 0) * 3%);
    }
    .site.site--album .ss-alb-frame.ss-reveal, .site.site--album .ss-album.ss-reveal, .site.site--album .ss-alb-film.ss-reveal { animation-name: alb-in-0; }
    .site.site--album.alb-e1 :is(.ss-alb-frame.ss-reveal, .ss-album.ss-reveal, .ss-alb-film.ss-reveal) { animation-name: alb-in-1; }
    .site.site--album.alb-e2 :is(.ss-alb-frame.ss-reveal, .ss-album.ss-reveal, .ss-alb-film.ss-reveal) { animation-name: alb-in-2; }
    .site.site--album.alb-e3 :is(.ss-alb-frame.ss-reveal, .ss-album.ss-reveal, .ss-alb-film.ss-reveal) { animation-name: alb-in-3; }
    .site.site--album.alb-e4 :is(.ss-alb-frame.ss-reveal, .ss-album.ss-reveal, .ss-alb-film.ss-reveal) { animation-name: alb-in-4; }
    .site.site--album.alb-e5 :is(.ss-alb-frame.ss-reveal, .ss-album.ss-reveal, .ss-alb-film.ss-reveal) { animation-name: alb-in-5; }
    .site.site--album.alb-e6 :is(.ss-alb-frame.ss-reveal, .ss-album.ss-reveal, .ss-alb-film.ss-reveal) { animation-name: alb-in-6; }
    .site.site--album.alb-e7 :is(.ss-alb-frame.ss-reveal, .ss-album.ss-reveal, .ss-alb-film.ss-reveal) { animation-name: alb-in-7; }
    .site.site--album .ss-head { animation-name: alb-head; animation-range: entry 0% entry 55%; }
    .site.site--album .ss:not(.ss--cta):not(.ss--intro) > .ss__inner > .ss-head::after { animation: alb-rule 1ms var(--alb-ease) backwards; animation-timeline: view(); animation-range: entry 20% entry 90%; }
}

/* Fallback (no scroll-driven animation): the script observes the same elements and adds .is-in as they arrive. */
@supports not (animation-timeline: view()) {
    .site.site--album.alb-io :is(.ss-alb-frame, .ss-album, .ss-alb-film).ss-reveal:not(.is-in) { animation: none; opacity: 0; }
    .site.site--album.alb-io :is(.ss-alb-frame, .ss-album, .ss-alb-film).ss-reveal.is-in { animation: alb-in-0 var(--alb-dur) var(--alb-ease) both; animation-delay: calc(var(--ss-d, 0) * 70ms); }
    .site.site--album.alb-io.alb-e1 :is(.ss-alb-frame, .ss-album, .ss-alb-film).ss-reveal.is-in { animation-name: alb-in-1; }
    .site.site--album.alb-io.alb-e2 :is(.ss-alb-frame, .ss-album, .ss-alb-film).ss-reveal.is-in { animation-name: alb-in-2; }
    .site.site--album.alb-io.alb-e3 :is(.ss-alb-frame, .ss-album, .ss-alb-film).ss-reveal.is-in { animation-name: alb-in-3; }
    .site.site--album.alb-io.alb-e4 :is(.ss-alb-frame, .ss-album, .ss-alb-film).ss-reveal.is-in { animation-name: alb-in-4; }
    .site.site--album.alb-io.alb-e5 :is(.ss-alb-frame, .ss-album, .ss-alb-film).ss-reveal.is-in { animation-name: alb-in-5; }
    .site.site--album.alb-io.alb-e7 :is(.ss-alb-frame, .ss-album, .ss-alb-film).ss-reveal.is-in { animation-name: alb-in-7; }
    .site.site--album.alb-io .ss-head:not(.is-in) { opacity: 0; }
    .site.site--album.alb-io .ss-head.is-in { animation: alb-head .8s var(--alb-ease) both; }
}

/* ── Hover treatments (frames and album covers) ─────────────────────────────────────────────────────────────── */
.site.site--album .ss-alb-frame, .site.site--album .ss-album { transition: translate .45s var(--alb-ease), scale .45s var(--alb-ease), box-shadow .45s ease, filter .45s ease, opacity .4s ease; }
@media (hover: hover) {
    /* 0 lift */
    .site.site--album.alb-h0 .ss-alb-frame:hover, .site.site--album.alb-h0 .ss-album:hover { translate: 0 -7px; box-shadow: var(--alb-lift); z-index: 2; }
    /* 1 tilt — pointer-driven rotation set by the script (--alb-rx/--alb-ry); a plain lift without it */
    .site.site--album.alb-h1 .ss-alb-frame, .site.site--album.alb-h1 .ss-album { transform: perspective(900px) rotateX(var(--alb-rx, 0deg)) rotateY(var(--alb-ry, 0deg)); transition: transform .25s ease-out, translate .45s var(--alb-ease), box-shadow .45s ease; }
    .site.site--album.alb-h1 .ss-alb-frame:hover, .site.site--album.alb-h1 .ss-album:hover { translate: 0 -5px; box-shadow: var(--alb-lift); z-index: 2; }
    /* 2 glow */
    .site.site--album.alb-h2 .ss-alb-frame:hover, .site.site--album.alb-h2 .ss-album:hover { box-shadow: 0 0 0 1px var(--alb-ring), 0 0 34px -4px color-mix(in srgb, var(--alb-ring) 70%, transparent); z-index: 2; }
    /* 3 zoom — the whole frame grows (the picture itself never scales) */
    .site.site--album.alb-h3 .ss-alb-frame:hover, .site.site--album.alb-h3 .ss-album:hover { scale: 1.035; box-shadow: var(--alb-lift); z-index: 2; }
    /* 4 spotlight — the others recede */
    .site.site--album.alb-h4 .ss-album-view:has(.ss-alb-frame:hover) .ss-alb-frame:not(:hover),
    .site.site--album.alb-h4 .ss-albums:has(.ss-album:hover) .ss-album:not(:hover) { filter: saturate(.55) brightness(.8); }
    .site.site--album.alb-h4 .ss-alb-frame:hover, .site.site--album.alb-h4 .ss-album:hover { scale: 1.02; z-index: 2; box-shadow: var(--alb-lift); }
    /* 5 wobble */
    .site.site--album.alb-h5 .ss-alb-frame:hover, .site.site--album.alb-h5 .ss-album:hover { animation: alb-wobble .7s var(--alb-spring) both; z-index: 2; box-shadow: var(--alb-lift); }
}
@keyframes alb-wobble { 0% { rotate: 0deg; } 30% { rotate: -2.2deg; scale: 1.03; } 60% { rotate: 1.6deg; scale: 1.03; } 100% { rotate: 0deg; scale: 1.025; } }
.site.site--album .ss-alb-frame:active, .site.site--album .ss-album:active { scale: .985; }

/* A caption that rises with the pointer and a darker foot for legibility */
.site.site--album .ss-alb-frame__caption { background: linear-gradient(0deg, rgb(0 0 0 / .78), rgb(0 0 0 / .35) 60%, transparent); }

/* ── HERO: staged entrance of the copy (kicker → title → lead → buttons) ───────────────────────────────────── */
@keyframes alb-copy { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes alb-copy-clip { from { opacity: .001; clip-path: inset(0 100% 0 0); translate: -14px 0; } to { opacity: 1; clip-path: inset(0 -2% 0 0); translate: 0 0; } }
@keyframes alb-copy-blur { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } }
@keyframes alb-copy-zoom { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
.site.site--album .ss-ahero .ss-reveal { animation: none; }
.site.site--album .ss-ahero__kicker { animation: alb-copy .8s var(--alb-ease) .05s both; }
.site.site--album .ss-ahero__title { animation: alb-copy 1s var(--alb-ease) .16s both; }
.site.site--album .ss-ahero__lead { animation: alb-copy .9s var(--alb-ease) .3s both; }
.site.site--album .ss-ahero .ss-actions { animation: alb-copy .9s var(--alb-ease) .44s both; }
.site.site--album.alb-v1 .ss-ahero__title { animation-name: alb-copy-clip; animation-duration: 1.2s; }
.site.site--album.alb-v2 .ss-ahero__title { animation-name: alb-copy-blur; }
.site.site--album.alb-v3 .ss-ahero__title { animation-name: alb-copy-zoom; }
.site.site--album.alb-e1 .ss-ahero__title, .site.site--album.alb-e5 .ss-ahero__title { animation-name: alb-copy-clip; animation-duration: 1.2s; }

/* ── HERO: Ken Burns (alb-kenburns) — the WRAPPER moves, the picture never scales ──────────────────────────── */
/* Scaled from the TOP edge and never moved upward, so the picture never climbs under the fixed header zone. */
@keyframes alb-kb0 { from { scale: 1; translate: 0 0; } to { scale: 1.12; translate: -1.5% 0; } }
@keyframes alb-kb1 { from { scale: 1.14; translate: 1% 0; } to { scale: 1; translate: 0 0; } }
@keyframes alb-kb2 { from { scale: 1.1; translate: 4% 0; } to { scale: 1.1; translate: -4% 0; } }
@keyframes alb-kb3 { from { scale: 1.08; translate: -3% 0; } to { scale: 1.18; translate: 3% 0; } }
.site.site--album .ss-ahero--bleed .ss-ahero__bg { transform-origin: 50% 0; }
.site.site--album .ss-ahero--kenburns .ss-ahero__bg { animation: alb-kb0 var(--alb-kb) ease-in-out infinite alternate; will-change: scale, translate; }
.site.site--album.alb-v1 .ss-ahero--kenburns .ss-ahero__bg { animation-name: alb-kb1; }
.site.site--album.alb-v2 .ss-ahero--kenburns .ss-ahero__bg { animation-name: alb-kb2; }
.site.site--album.alb-v3 .ss-ahero--kenburns .ss-ahero__bg { animation-name: alb-kb3; }

/* ── HERO: parallax (CSS scroll-driven; absent support = still) ───────────────────────────────────────────── */
@keyframes alb-par { from { scale: 1; } to { scale: 1.14; } }
@keyframes alb-par-up { from { translate: 0 0; } to { translate: 0 -34px; } }
@keyframes alb-par-down { from { translate: 0 0; } to { translate: 0 42px; } }
@supports (animation-timeline: view()) {
    .site.site--album .ss-ahero--bleed:not(.ss-ahero--kenburns) .ss-ahero__bg { animation: alb-par linear both; animation-timeline: view(); animation-range: contain 0% exit 100%; }
    .site.site--album .ss-ahero--columns .ss-ahero__col:nth-child(1) { animation: alb-par-up linear both; animation-timeline: view(); animation-range: contain 0% exit 100%; }
    .site.site--album .ss-ahero--columns .ss-ahero__col:nth-child(2) { animation: alb-par-down linear both; animation-timeline: view(); animation-range: contain 0% exit 100%; }
    .site.site--album .ss-ahero--columns .ss-ahero__col:nth-child(3) { animation: alb-par-up linear both; animation-timeline: view(); animation-range: contain 0% exit 100%; }
    .site.site--album .ss-ahero--cover .ss-ahero__visual { animation: alb-par-up linear both; animation-timeline: view(); animation-range: contain 0% exit 100%; }
}

/* ── HERO: slider — each slide enters with a treatment chosen by the variant; the stage fades through ───────── */
@keyframes alb-slide-in-0 { from { scale: 1.12; } to { scale: 1; } }
@keyframes alb-slide-in-1 { from { translate: 6% 0; } to { translate: 0 0; } }
@keyframes alb-slide-in-2 { from { filter: blur(10px); scale: 1.04; } to { filter: blur(0); scale: 1; } }
@keyframes alb-slide-in-3 { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.site.site--album .ss-ahero__slide { transition: opacity 1.1s ease; }
.site.site--album .ss-ahero__slide.is-on { animation: alb-slide-in-0 calc(var(--alb-auto) * 1ms + 1.2s) ease-out both; z-index: 1; }
.site.site--album.alb-v1 .ss-ahero__slide.is-on { animation: alb-slide-in-1 1.3s var(--alb-ease) both; }
.site.site--album.alb-v2 .ss-ahero__slide.is-on { animation: alb-slide-in-2 1.2s var(--alb-ease) both; }
.site.site--album.alb-v3 .ss-ahero__slide.is-on { animation: alb-slide-in-3 1.1s var(--alb-ease) both; }
/* The progress hairline under the active dot shows how long the slide stays (the script pauses it with the autoplay) */
.site.site--album .ss-ahero__dots button.is-on { position: relative; }
.site.site--album .ss-ahero__dots button.is-on::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%; background: var(--site-accent, #e4b363); transform-origin: left; animation: alb-progress calc(var(--alb-auto) * 1ms) linear both; }
@keyframes alb-progress { from { scale: 0 1; } to { scale: 1 1; } }
.site.site--album.alb-paused .ss-ahero__dots button.is-on::after, .site.site--album.alb-hold .ss-ahero__dots button.is-on::after { animation-play-state: paused; }

/* ── HERO: polaroids — float gently; tap/Enter sends a photograph to another corner (script) ──────────────── */
/* Floating uses `transform`; travelling between corners uses the separate `translate` property, so the two compose. */
@keyframes alb-float-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -14px); } }
@keyframes alb-float-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-8px, 12px); } }
.site.site--album .ss-ahero__prints { pointer-events: none; }
.site.site--album .ss-ahero[data-alb-prints] .ss-ahero__prints { pointer-events: none; }
.site.site--album .ss-ahero[data-alb-prints] .ss-ahero__print { pointer-events: auto; cursor: grab; touch-action: manipulation; }
.site.site--album .ss-ahero__print { transition: translate .9s var(--alb-spring), rotate .9s var(--alb-spring), box-shadow .4s ease; will-change: translate; }
.site.site--album.alb-v0 .ss-ahero__print--0, .site.site--album.alb-v0 .ss-ahero__print--3 { animation: alb-float-a var(--alb-float) ease-in-out infinite; }
.site.site--album.alb-v0 .ss-ahero__print--1, .site.site--album.alb-v0 .ss-ahero__print--2 { animation: alb-float-b calc(var(--alb-float) * 1.2) ease-in-out infinite; }
.site.site--album.alb-v1 .ss-ahero__print { animation: alb-float-a calc(var(--alb-float) * 1.1) ease-in-out infinite; }
.site.site--album.alb-v1 .ss-ahero__print:nth-child(even) { animation-name: alb-float-b; animation-delay: -3s; }
.site.site--album.alb-v2 .ss-ahero__print--0 { animation: alb-float-b var(--alb-float) ease-in-out infinite; }
.site.site--album.alb-v3 .ss-ahero__print--1, .site.site--album.alb-v3 .ss-ahero__print--2 { animation: alb-float-a var(--alb-float) ease-in-out infinite; }
.site.site--album .ss-ahero__print[data-alb-moved] { animation: none; }
.site.site--album .ss-ahero__print:hover { box-shadow: 0 34px 50px -24px rgb(0 0 0 / .65); }
.site.site--album .ss-ahero__print:focus-visible { outline: 3px solid var(--site-accent, #e4b363); outline-offset: 4px; }
.site.site--album .ss-ahero__print.is-flying { z-index: 5; transition-timing-function: var(--alb-spring); }

/* ── HERO: collage — cells assemble from different directions ───────────────────────────────────────────── */
@keyframes alb-cell-0 { from { opacity: 0; translate: -40px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes alb-cell-1 { from { opacity: 0; translate: 0 -40px; } to { opacity: 1; translate: 0 0; } }
@keyframes alb-cell-2 { from { opacity: 0; translate: 40px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes alb-cell-3 { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes alb-cell-4 { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
.site.site--album .ss-ahero__cell--0 { animation: alb-cell-0 1s var(--alb-ease) .05s both; }
.site.site--album .ss-ahero__cell--1 { animation: alb-cell-1 1s var(--alb-ease) .2s both; }
.site.site--album .ss-ahero__cell--2 { animation: alb-cell-2 1s var(--alb-ease) .1s both; }
.site.site--album .ss-ahero__cell--3 { animation: alb-cell-3 1s var(--alb-ease) .3s both; }
.site.site--album .ss-ahero__cell--4 { animation: alb-cell-4 1s var(--alb-ease) .4s both; }
@media (hover: hover) {
    .site.site--album .ss-ahero__mosaic:has(.ss-ahero__cell:hover) .ss-ahero__cell:not(:hover) { filter: brightness(.7) saturate(.8); }
    .site.site--album .ss-ahero__cell { transition: filter .5s ease; }
}

/* ── HERO: diptych — the halves part to show the title; columns rise; monogram strip steps in ──────────────── */
@keyframes alb-half-l { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes alb-half-r { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes alb-col-up { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
@keyframes alb-strip { from { opacity: 0; translate: 0 36px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
.site.site--album .ss-ahero__half:first-child { animation: alb-half-l 1.3s var(--alb-ease) both; }
.site.site--album .ss-ahero__half:last-child { animation: alb-half-r 1.3s var(--alb-ease) .15s both; }
@supports not (animation-timeline: view()) {
    .site.site--album .ss-ahero--columns .ss-ahero__col { animation: alb-col-up 1.1s var(--alb-ease) both; }
    .site.site--album .ss-ahero--columns .ss-ahero__col:nth-child(2) { animation-delay: .15s; }
    .site.site--album .ss-ahero--columns .ss-ahero__col:nth-child(3) { animation-delay: .3s; }
}
.site.site--album .ss-ahero__stripcell { animation: alb-strip .9s var(--alb-ease) both; }
.site.site--album .ss-ahero__stripcell:nth-child(2) { animation-delay: .12s; }
.site.site--album .ss-ahero__stripcell:nth-child(3) { animation-delay: .24s; }
@media (hover: hover) {
    .site.site--album .ss-ahero__stripcell { transition: translate .4s var(--alb-ease), box-shadow .4s ease; }
    .site.site--album .ss-ahero__stripcell:hover { translate: 0 -8px; box-shadow: var(--alb-lift); }
}

/* ── HERO: framed print — a mat with a soft light that follows the pointer (script sets --alb-mx/--alb-my) ───── */
.site.site--album .ss-ahero__mat { transition: transform .3s ease-out, box-shadow .4s ease; transform: perspective(1100px) rotateX(var(--alb-rx, 0deg)) rotateY(var(--alb-ry, 0deg)); }
.site.site--album .ss-ahero__mat::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .4s ease;
    background: radial-gradient(420px circle at var(--alb-mx, 50%) var(--alb-my, 30%), rgb(255 255 255 / .22), transparent 60%);
}
.site.site--album .ss-ahero__mat:hover::after { opacity: 1; }

/* ── HERO: reel — the filmstrip slowly travels (distance measured by the script; 0 = still) ──────────────── */
@keyframes alb-reel { from { translate: 0 0; } to { translate: calc(var(--alb-reel-d, 0px) * -1) 0; } }
.site.site--album .ss-ahero__reelcell { animation: alb-reel calc(var(--alb-kb) * .9) ease-in-out infinite alternate; }

/* ── HERO: film poster — the play control breathes; the frame is lit like a screen ─────────────────────────── */
@keyframes alb-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--site-accent, #e4b363) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 26px transparent; } }
.site.site--album .ss-ahero__posterplay, .site.site--album .ss-alb-film__play { animation: alb-pulse 2.8s ease-out infinite; }
.site.site--album .ss-ahero__posterframe::after, .site.site--album .ss-alb-film__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ── ALBUM VIEWER: slideshow stage — a transition on every change (restarted by the script) ───────────────── */
@keyframes alb-stage-0 { from { opacity: 0; scale: 1.05; } to { opacity: 1; scale: 1; } }
@keyframes alb-stage-1 { from { opacity: 0; translate: calc(var(--alb-dir, 1) * 40px) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes alb-stage-2 { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
@keyframes alb-stage-3 { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
.site.site--album .ss-alb-stage.alb-swap .ss-alb-stage__open { animation: alb-stage-0 .8s var(--alb-ease) both; }
.site.site--album.alb-e3 .ss-alb-stage.alb-swap .ss-alb-stage__open, .site.site--album.alb-e6 .ss-alb-stage.alb-swap .ss-alb-stage__open { animation-name: alb-stage-1; }
.site.site--album.alb-e4 .ss-alb-stage.alb-swap .ss-alb-stage__open, .site.site--album.alb-e2 .ss-alb-stage.alb-swap .ss-alb-stage__open { animation-name: alb-stage-2; }
.site.site--album.alb-e1 .ss-alb-stage.alb-swap .ss-alb-stage__open, .site.site--album.alb-e5 .ss-alb-stage.alb-swap .ss-alb-stage__open { animation-name: alb-stage-3; }
.site.site--album .ss-alb-thumbs__item { transition: opacity .3s ease, translate .3s var(--alb-ease), border-color .3s ease; }
.site.site--album .ss-alb-thumbs__item:hover { opacity: 1; translate: 0 -3px; }
.site.site--album .alb-stagetoggle { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgb(0 0 0 / .55); cursor: pointer; backdrop-filter: blur(4px); }
.site.site--album .alb-stagetoggle:hover { background: rgb(0 0 0 / .75); }
.site.site--album .alb-stagetoggle:focus-visible, .site.site--album .alb-playtoggle:focus-visible { outline: 3px solid var(--site-accent, #e4b363); outline-offset: 2px; }
.site.site--album .ss-alb-stage__nav { transition: background .25s ease, scale .3s var(--alb-spring); }
.site.site--album .ss-alb-stage__nav:hover { scale: 1.1; }

/* ── ALBUM INDEX: covers ─────────────────────────────────────────────────────────────────────────────────── */
.site.site--album .ss-album__cover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgb(0 0 0 / .18)); opacity: 0; transition: opacity .4s ease; }
.site.site--album .ss-album:hover .ss-album__cover::after { opacity: 1; }
.site.site--album .ss-alb-chipbtn { transition: background-color .25s ease, color .25s ease, border-color .25s ease, translate .25s var(--alb-ease); }
.site.site--album .ss-alb-chipbtn:hover { translate: 0 -2px; }

/* ── FILM sections: cinematic framing — set by the film axis (alb-f) ─────────────────────────────────────── */
@keyframes alb-curtain { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0); } }
@keyframes alb-push { from { scale: 1; } to { scale: 1.035; } }
.site.site--album .ss-alb-film__stage { transition: scale .6s var(--alb-ease), box-shadow .6s ease; }
@media (hover: hover) {
    .site.site--album .ss-alb-film__stage:hover { scale: 1.012; box-shadow: 0 40px 70px -36px rgb(0 0 0 / .85); }
}
/* 0 letterbox — cinema bars close in from top and bottom on arrival */
.site.site--album.alb-f0 .ss-alb-film__stage::before, .site.site--album.alb-f0 .ss-alb-film__stage::after {
    content: ""; position: absolute; left: 0; right: 0; z-index: 2; height: 7%; background: #000; pointer-events: none;
}
.site.site--album.alb-f0 .ss-alb-film__stage::before { top: 0; }
.site.site--album.alb-f0 .ss-alb-film__stage::after { bottom: 0; inset-inline: 0; top: auto; }
/* 1 vignette — soft darkened corners and a light bloom behind the play control */
.site.site--album.alb-f1 .ss-alb-film__stage::after { background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgb(0 0 0 / .45)); }
/* 2 grain edge — film-gate edge lines with a fine grain */
.site.site--album.alb-f2 .ss-alb-film__stage::after {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2), inset 0 0 60px rgb(0 0 0 / .35);
    background: repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0 1px, transparent 1px 3px);
}
/* 3 spotlight — a cone of light falls on the stage from above */
.site.site--album.alb-f3 .ss-alb-film__stage::after { background: radial-gradient(70% 90% at 50% -10%, rgb(255 255 255 / .18), transparent 70%); }
.site.site--album.alb-f3 .ss-alb-film__stage { box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 40px 80px -40px rgb(0 0 0 / .9); }
/* The decorative layers never intercept the play control or the native video controls */
.site.site--album .ss-alb-film__stage::before, .site.site--album .ss-alb-film__stage::after, .site.site--album .ss-ahero__posterframe::after { pointer-events: none; }
.site.site--album .ss-alb-film__stage:has(.ss-alb-film__video)::before, .site.site--album .ss-alb-film__stage:has(.ss-alb-film__video)::after { display: none; }
/* The poster slowly pushes in while the film waits to be played (the wrapper scales; the poster is never cropped) */
.site.site--album .ss-alb-film__stage:not(:has(.ss-alb-film__video)) > .ss-media, .site.site--album .ss-alb-film__stage:not(:has(.ss-alb-film__video)) > .ss-art { animation: none; }

/* ── LIGHTBOX — arrival, direction-aware change, fullscreen (all inside the album website) ────────────────── */
@keyframes alb-lb-bg { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(10px); } }
@keyframes alb-lb-0 { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes alb-lb-1 { from { opacity: 0; translate: calc(var(--alb-dir, 1) * 60px) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes alb-lb-2 { from { opacity: 0; filter: blur(14px); scale: 1.03; } to { opacity: 1; filter: blur(0); scale: 1; } }
@keyframes alb-lb-3 { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
.site.site--album .ss-lightbox { animation: alb-lb-bg .35s ease both; background: radial-gradient(120% 100% at 50% 40%, rgb(18 20 24 / .92), rgb(4 5 6 / .97)); }
.site.site--album .ss-lightbox__figure { animation: alb-lb-0 .5s var(--alb-ease) both; }
.site.site--album.alb-l1 .ss-lightbox__figure { animation-name: alb-lb-1; }
.site.site--album.alb-l2 .ss-lightbox__figure { animation-name: alb-lb-2; }
.site.site--album.alb-l3 .ss-lightbox__figure { animation-name: alb-lb-3; }
.site.site--album .ss-lightbox__figure.alb-swap { animation-duration: .5s; }
.site.site--album .ss-lightbox__close, .site.site--album .ss-lightbox__nav, .site.site--album .ss-lightbox__full { transition: background .25s ease, scale .3s var(--alb-spring); }
.site.site--album .ss-lightbox__close:hover, .site.site--album .ss-lightbox__nav:hover, .site.site--album .ss-lightbox__full:hover { scale: 1.1; }
.site.site--album .ss-lightbox__close:focus-visible, .site.site--album .ss-lightbox__nav:focus-visible, .site.site--album .ss-lightbox__full:focus-visible { outline: 3px solid var(--site-accent, #e4b363); outline-offset: 3px; }
.site.site--album .ss-lightbox__full { position: absolute; top: 20px; right: 80px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgb(255 255 255 / .12); cursor: pointer; }
.site.site--album .ss-lightbox__full:hover { background: rgb(255 255 255 / .24); }
.site.site--album .ss-lightbox__full svg { width: 22px; height: 22px; }
.site.site--album .ss-lightbox:fullscreen { background: #000; }

/* ── Pause everything that loops while the website is off screen or the tab is hidden ───────────────────────── */
.site.site--album.alb-paused :is(.ss-ahero__bg, .ss-ahero__print, .ss-ahero__reelcell, .ss-ahero__posterplay, .ss-alb-film__play, .ss-ahero__slide.is-on),
.site.site--album .alb-paused :is(.ss-ahero__bg, .ss-ahero__print, .ss-ahero__reelcell, .ss-ahero__posterplay, .ss-alb-film__play, .ss-ahero__slide.is-on),
.site.site--album .ss-ahero.alb-paused :is(.ss-ahero__bg, .ss-ahero__print, .ss-ahero__reelcell, .ss-ahero__posterplay, .ss-ahero__slide.is-on),
.site.site--album.alb-paused .ss-ahero__dots button.is-on::after, .site.site--album .alb-paused .ss-ahero__dots button.is-on::after { animation-play-state: paused; }

/* ── Reduced motion + Motion = none: no animation, no travel, no autoplay (the script also stands down) ───── */
@media (prefers-reduced-motion: reduce) {
    .site.site--album *, .site.site--album *::before, .site.site--album *::after {
        animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
        animation-timeline: auto !important; transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
    .site.site--album.alb-js .ss-alb-still:not(.is-loaded) { opacity: 1; }
}
.site.site--album.alb-calm *, .site.site--album.alb-calm *::before, .site.site--album.alb-calm *::after {
    animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; animation-timeline: auto !important;
    transition-duration: .001ms !important;
}
.site.site--album.alb-calm .ss-alb-still { opacity: 1 !important; }