/* Atelier — motion layer. Everything here is additive and honours prefers-reduced-motion. */

video.still { display: block; width: 100%; max-width: 100%; }
.hero .frames video { aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- page transitions (cream fade between pages) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s ease-in both; }
::view-transition-new(root) { animation: vt-in .42s ease-out both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- click-to-play players ---------- */
html.has-cur .vimeo, html.has-cur .vimeo .play { cursor: none; }
.vimeo .play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; color: var(--cream); }
.vimeo .play .label { position: absolute; left: 16px; bottom: 14px; padding: 6px 10px; border: 1px solid rgba(236,230,214,.7); color: var(--cream); background: rgba(20,20,20,.35); backdrop-filter: blur(2px); }
.vimeo .play::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,20,20,.35), transparent 40%); }
.vimeo.is-playing .play { display: none; }
.vimeo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* poster "develops": b/w at rest, colour on hover */
.vimeo { background-color: var(--black); }
.vimeo::after { content: ""; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.05); transition: filter 1.1s cubic-bezier(.2,.7,.2,1), transform 1.6s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.vimeo.is-playing::after { display: none; }
.vimeo .play { z-index: 2; }
@media (hover: hover) {
  .vimeo:hover::after { filter: grayscale(0) contrast(1); transform: scale(1.03); }
  .vimeo .play .label { opacity: 0; transition: opacity .4s; }
  .vimeo:hover .play .label { opacity: 1; }
}
/* stills develop on hover too */
.still { transition: filter 1.1s cubic-bezier(.2,.7,.2,1), transform 1.6s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .still:hover { filter: grayscale(0) contrast(1); } }

/* ---------- custom cursor ---------- */
@media (hover: hover) and (pointer: fine) {
  .cur { position: fixed; left: 0; top: 0; width: 14px; height: 14px; border: 1px solid var(--oxblood); border-radius: 50%; pointer-events: none; z-index: 60; transform: translate(-50%, -50%); transition: width .3s, height .3s, background-color .3s, border-color .3s, opacity .3s; opacity: 0; mix-blend-mode: multiply; }
  .cur.is-on { opacity: 1; }
  .cur.is-link { width: 28px; height: 28px; background: rgba(139,26,26,.08); }
  .cur.is-play { width: 64px; height: 64px; background: var(--oxblood); border-color: var(--oxblood); mix-blend-mode: normal; }
  .cur .t { position: absolute; inset: 0; display: grid; place-items: center; font: 500 9px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cream); opacity: 0; transition: opacity .2s; }
  .cur.is-play .t { opacity: 1; }
}

/* ---------- hairlines draw themselves ---------- */
@media (prefers-reduced-motion: no-preference) {
  .draw { position: relative; border-top-color: transparent !important; }
  .draw::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--hairline); transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
  .on-black .draw::before, .on-band .draw::before { background: rgba(236,230,214,.3); }
  .draw.is-in::before { transform: scaleX(1); }
  footer.draw::before { top: -1px; }
  .rule.m-load { clip-path: inset(0 100% 0 0); animation: m-rule 1.1s cubic-bezier(.2,.7,.2,1) .55s forwards; }
  @keyframes m-rule { to { clip-path: inset(0 0 0 0); } }
}

/* ---------- mono labels type on ---------- */
.type > .ch { opacity: 0; }
.type.is-in > .ch { animation: ch-in .01s linear forwards; animation-delay: calc(var(--i) * 38ms); }
@keyframes ch-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .type > .ch { opacity: 1; } }

/* ---------- letters spread with the scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .letters.spreads { --spread: 0; width: calc(46% + 54% * var(--spread)); margin-inline: auto; will-change: width; }
}
/* ---------- arrow CTA ---------- */
.arrow .arr { display: inline-block; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.arrow:hover .arr { transform: translateX(6px); }

/* ---------- red band: faint light leak ---------- */
@media (prefers-reduced-motion: no-preference) {
  .on-band { position: relative; overflow: hidden; }
  .on-band::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(40% 60% at 70% 30%, rgba(255,150,110,.22), transparent 60%); animation: leak 16s ease-in-out infinite alternate; pointer-events: none; }
  .on-band > * { position: relative; }
  @keyframes leak { from { transform: translate(-6%, 4%) rotate(-3deg); opacity: .6; } to { transform: translate(8%, -6%) rotate(4deg); opacity: 1; } }
}

/* ---------- Films: the lead frame grows to full bleed on scroll ---------- */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .feature .lead { will-change: width; margin-inline: auto; }
}

/* ---------- Call sheet: the reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hold { transition: opacity .5s ease, transform .5s ease; }
  .is-revealed .hold { display: block; opacity: 0; transform: scaleY(.6); height: 0; padding: 0; overflow: hidden; border-color: transparent; }
  .revealed { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), display .9s allow-discrete; opacity: 1; transform: none; }
  @starting-style { .is-revealed .revealed { opacity: 0; transform: translateY(16px); } }
}

/* ---------- Preloader ---------- */
.pre { position: fixed; inset: 0; z-index: 100; background: var(--ground) url("plates/silk-cream.jpg") center top / 100% auto no-repeat; color: var(--oxblood); display: grid; place-items: center; overflow: hidden; }
.pre.is-done { opacity: 0; transition: opacity .6s ease; pointer-events: none; }
html.is-loading { overflow: hidden; }
html.is-loading body > *:not(.pre) { visibility: hidden; }
html.is-loading.pre-exit body > *:not(.pre) { visibility: visible; }

/* A — the name opens to let the frames through */
.pre-a .word { display: flex; align-items: center; font: 400 clamp(44px, 9vw, 112px)/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.pre-a .word .ch { opacity: 0; transform: translateY(.3em); animation: pre-ch .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes pre-ch { to { opacity: 1; transform: none; } }
.pre-a .gap { width: 0; height: .9em; margin: 0; overflow: hidden; position: relative; flex: none; transition: width .26s cubic-bezier(.2,.7,.2,1), height .26s cubic-bezier(.2,.7,.2,1), margin .3s cubic-bezier(.2,.7,.2,1); }
.pre-a.is-open .gap { margin: 0 .18em; }
.pre-a.is-close .gap { margin: 0; transition-duration: .4s; }
.pre-a .gap img, .pre-a .gap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: 0; }
.pre-a .gap .is-on { opacity: 1; }
.pre-a .bar { position: absolute; left: 50%; top: 50%; width: min(42vw, 520px); height: 1px; background: rgba(139,26,26,.18); transform: translate(-50%, calc(clamp(44px, 9vw, 112px) * .95)); }
.pre-a .bar i { display: block; height: 100%; background: var(--oxblood); transform: scaleX(0); transform-origin: left center; transition: transform .22s linear; }
.pre-a .pct { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(clamp(44px, 9vw, 112px) * .95 + 14px)); font-variant-numeric: tabular-nums; opacity: .8; }
.pre-a .foot { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; justify-content: space-between; padding: 0 28px; }

/* B — the Super 8 leader */
.pre-b .counter { font: 500 12px/1 var(--font-mono); letter-spacing: .3em; text-transform: uppercase; position: absolute; left: 28px; top: 24px; }
.pre-b .counter b { font-weight: 500; font-variant-numeric: tabular-nums; }
.pre-b .corner { position: absolute; font: 500 11px/1 var(--font-mono); letter-spacing: .3em; text-transform: uppercase; opacity: .8; }
.pre-b .corner.tr { right: 28px; top: 24px; } .pre-b .corner.bl { left: 28px; bottom: 24px; } .pre-b .corner.br { right: 28px; bottom: 24px; }
.pre-b .mark { width: clamp(72px, 10vw, 112px); opacity: 0; transform: scale(.96); transition: opacity .9s ease .25s, transform .9s cubic-bezier(.2,.7,.2,1) .25s; }
.pre-b.is-on .mark { opacity: 1; transform: none; }
.pre-b .frame { position: absolute; inset: 18px; pointer-events: none; }
.pre-b .frame i { position: absolute; background: var(--oxblood); opacity: .7; }
.pre-b .frame .t { top: 0; left: 0; height: 1px; width: 0; transition: width .5s linear; }
.pre-b .frame .r { top: 0; right: 0; width: 1px; height: 0; transition: height .5s linear .5s; }
.pre-b .frame .b { bottom: 0; right: 0; height: 1px; width: 0; transition: width .5s linear 1s; }
.pre-b .frame .l { bottom: 0; left: 0; width: 1px; height: 0; transition: height .5s linear 1.5s; }
.pre-b.is-on .frame .t, .pre-b.is-on .frame .b { width: 100%; }
.pre-b.is-on .frame .r, .pre-b.is-on .frame .l { height: 100%; }
.pre-b.is-out .frame { transition: inset .7s cubic-bezier(.6,0,.2,1); inset: -40px; }
.pre-b.is-out .mark, .pre-b.is-out .counter, .pre-b.is-out .corner { opacity: 0; transition: opacity .3s; }
.pre .flick { position: absolute; inset: 0; background: var(--ground); opacity: 0; pointer-events: none; }
.pre.is-flick .flick { animation: flick .18s steps(2) 2; }
@keyframes flick { 50% { opacity: .5; } }