/* ---------- Mouvement : parallaxe et apparitions ---------- */
.ph img { translate: 0 var(--py, 0); scale: var(--sc, 1); transition: scale 1.4s cubic-bezier(.16,1,.3,1); transform: none !important }
html.fx .ph:not(.vide) img { --sc: 1.16 }
html.fx a.card:hover .ph img, html.fx .door:hover .ph img, html.fx .g-item:hover .ph img { --sc: 1.24 }
html:not(.fx) a.card:hover .ph img, html:not(.fx) .door:hover .ph img, html:not(.fx) .g-item:hover .ph img { --sc: 1.04 }
.hero > .ph img, .band > .ph img { will-change: translate }
html.fx .hero > .ph img { --sc: 1.12 }
html.fx .band > .ph img { --sc: 1.3 }
.hero .wrap { will-change: transform, opacity }

html.fx .rv { opacity: 0; translate: 0 48px; transition: opacity 1.1s ease, translate 1.4s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0ms) }
html.fx .rv.in { opacity: 1; translate: 0 0 }
html.fx .rv.ph-rv { opacity: 1; translate: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.5s cubic-bezier(.77,0,.18,1); transition-delay: var(--d, 0ms) }
html.fx .rv.ph-rv.in { clip-path: inset(0 0 0 0) }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em }
.w > span { display: inline-block }
html.fx .split .w > span { translate: 0 110%; transition: translate 1.3s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--d, 0ms) + var(--i) * 70ms) }
html.fx .split.in .w > span { translate: 0 0 }
.g-item { will-change: translate }
.mosaic .ph img { will-change: translate }

/* Ruban de texte qui défile avec le scroll */
.ribbon { overflow: hidden; padding-block: 36px; border-block: 1px solid var(--line); white-space: nowrap }
.ribbon .track { display: inline-flex; gap: .6em; font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(3.4rem, 10vw, 9.5rem); line-height: 1; will-change: transform }
.ribbon .track span:nth-child(4n+1) { color: transparent; -webkit-text-stroke: 1px var(--ink) }
.ribbon .track i { font-style: normal; color: var(--sapphire); font-size: .4em; align-self: center }

/* ---------- Albums : ouverture plein écran, défilé horizontal ---------- */
.album-hero { height: clamp(520px, 88vh, 960px) }
.album-hero .crumb { color: #fff; opacity: .85; margin-bottom: 18px }
.album-hero .crumb a { color: inherit }
.album-hero h1 { font-size: clamp(2.4rem, 7vw, 6.4rem); line-height: 1; max-width: 16ch; margin-inline: auto }
.album-page { padding-top: 64px }
.album-page .head { margin-bottom: 40px }

.film { position: relative; margin: 40px 0 64px }
.film-pin { overflow-x: auto; padding: 0 max(16px, calc((100vw - 1200px) / 2)) }
.film-track { display: flex; gap: clamp(14px, 2vw, 28px); width: max-content; align-items: center; padding-top: 2em }
.f-item { position: relative; display: block; flex: none }
.f-item .ph { height: clamp(300px, 66vh, 740px); aspect-ratio: auto; overflow: hidden }
.f-item .ph img { height: 100%; width: auto; max-width: none; object-fit: cover }
.f-item:nth-child(even) .ph { height: clamp(240px, 48vh, 540px) }
.f-n { position: absolute; left: 0; top: -1.7em; font-family: var(--display); font-style: italic; font-size: 1.1rem; color: var(--muted) }
html.fx .film-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center }
html.fx .film-track { will-change: transform }
html.fx .f-item .ph img { --sc: 1.2 }
.gallery { margin-block: 64px 150px }

@media (prefers-reduced-motion: reduce) {
  html.fx .rv, html.fx .split .w > span { opacity: 1 !important; translate: none !important; clip-path: none !important }
}