/*
 * demo52 "Four Frames": one series told four ways. A person as they are, then make-up, then hair,
 * then the magazine cover. Colours come from that cover: VOÍD red, its lilac paper, leather ink.
 * Header and footer come from the site styles.
 */
@font-face {
    font-family: "Archivo";
    src: url("/demo52/fonts/archivo-latin.woff2") format("woff2");
    font-weight: 400 900;
    font-stretch: 62% 125%;
    font-display: swap;
}
.d52 {
    --ink: #101014;
    --paper: #f3f1ec;
    --lilac: #d6d3e0;
    --red: #c4161c;
    --ground: #0b0b0c;
    --text: #f3f1ec;
    --soft: #a9a7ae;
    --line: rgba(255, 255, 255, .16);
    --edge: clamp(16px, 4vw, 64px);
    --hdr: 70px;
    --display: "Archivo", "Arial Narrow", sans-serif;
    --body: "Lato", system-ui, sans-serif;
    background: var(--ground);
    color: var(--text);
}
.d52 .main { padding: 0; color: var(--text); }
.d52--slats { --ground: var(--lilac); --text: var(--ink); --soft: #55535f; --line: rgba(16, 16, 20, .2); }
.d52--drop { --ground: var(--paper); --text: var(--ink); --soft: #5d5b58; --line: rgba(16, 16, 20, .18); }

.flash { position: fixed; inset: 0; z-index: 35; background: #fff; opacity: 0; pointer-events: none; }

/* shared type */
.stage-word {
    margin: 0;
    font: 900 clamp(64px, 11vw, 188px)/.86 var(--display);
    font-stretch: 62%;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: inherit;
    transform-origin: left center;
}
.stage-kicker {
    display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 14px;
    font: 700 14px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--soft);
}
.stage-kicker b { color: var(--red); font-weight: 700; }
.d52--aperture .stage-kicker b, .d52--shutter .stage-kicker b { color: #ff5a5f; }
.stage-line { overflow-wrap: anywhere; max-width: 34ch; margin: 18px 0 0; font: 400 clamp(16px, 1.4vw, 20px)/1.45 var(--body); color: var(--text); }
.dots { display: flex; gap: 6px; margin: 22px 0 0; padding: 0; list-style: none; }
.dots li { width: 34px; height: 4px; background: var(--line); transition: background .15s; }
.dots li.is-on { background: var(--red); }

/* the frame images: stacked; close on the face until the cover pulls back */
.frame-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    visibility: hidden; transform: scale(1.5); transform-origin: 52% 27%;
}
.frame-img.is-on { visibility: visible; }
.frame-img:last-of-type { transform: none; }
.ap__img { transform: translateY(17%) scale(1.6); }
.sh__img { transform: scale(1.2); transform-origin: 52% 16%; }

/* 1. Aperture */
.ap { height: 460vh; }
.ap__pin { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); height: calc(100svh - var(--hdr)); overflow: hidden; }
.ap__frame { overflow: hidden; position: absolute; top: 0; bottom: 0; right: clamp(16px, 7vw, 120px); aspect-ratio: 4 / 5; max-width: calc(100% - 32px); background: #000; }
.ap canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ap__copy { position: absolute; left: var(--edge); bottom: clamp(72px, 12vh, 120px); z-index: 2; max-width: 44vw; }
.ap__hint { position: absolute; left: var(--edge); top: 24px; z-index: 2; margin: 0; font: 400 14px/1 var(--body); color: var(--soft); transition: opacity .2s; }
[data-stage]:not([data-stage="0"]) .ap__hint { opacity: 0; }

/* 2. Shutter */
.sh {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 80px); align-items: center;
    min-height: calc(100vh - var(--hdr)); min-height: calc(100svh - var(--hdr));
    padding: 24px var(--edge) 84px;
    background: radial-gradient(90% 90% at 70% 40%, #24232a, #0d0d10 70%);
}
.sh__view { position: relative; height: min(calc(100svh - var(--hdr) - 108px), 880px); aspect-ratio: 4 / 5; max-width: 100%; }
.sh__frame { position: absolute; inset: 0; overflow: hidden; background: #000; }
.sh__leaf {
    position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 2; transform: translateX(-101%);
    background: repeating-linear-gradient(90deg, #17171a 0 22px, #1d1d21 22px 23px);
}
.sh__leaf--l { left: 0; box-shadow: inset -2px 0 0 rgba(255, 255, 255, .22); }
.sh__leaf--r { right: 0; transform: translateX(101%); box-shadow: inset 2px 0 0 rgba(255, 255, 255, .22); }
.sh__marks { position: absolute; inset: 14px; z-index: 3; pointer-events: none; color: #fff; transition: opacity .2s; }
.sh__marks i { position: absolute; width: 34px; height: 34px; border: 2px solid currentColor; }
.sh__marks i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.sh__marks i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.sh__marks i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.sh__marks i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.sh__focus { position: absolute; top: 30%; left: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 2px solid #5dff8a; }
.sh__read {
    position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
    font: 700 13px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.is-cover .sh__marks { opacity: 0; }
.sh__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.sh__release {
    width: 84px; height: 84px; padding: 0; border: 4px solid #fff; border-radius: 50%; background: var(--red);
    box-shadow: inset 0 0 0 5px #0d0d10; color: #fff; font: 900 13px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
    transition: transform .08s;
}
.sh__release:active { transform: scale(.92); }
.is-cover .sh__release { display: none; }
.d52-link {
    display: none; align-items: center; min-height: 48px; padding: 0 22px; border: 2px solid currentColor; background: none; color: inherit;
    font: 800 15px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.d52-link--solid { border-color: var(--red); background: var(--red); color: #fff; }
.is-cover .d52-link { display: inline-flex; }
.d52-link--always { display: inline-flex; }

/* 3. Slats */
.sl { height: 440vh; }
.sl__pin {
    position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); height: calc(100svh - var(--hdr)); overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 80px); align-items: center;
    padding: 18px var(--edge) 72px;
}
.sl__stage { perspective: 1800px; height: 100%; min-height: 0; aspect-ratio: 4 / 5; max-width: 100%; }
.sl__wall { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.sl__slat { position: absolute; top: 0; transform-style: preserve-3d; }
.sl__face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; }
.sl__face img { position: absolute; top: 0; max-width: none; object-fit: cover; }

/* 4. Drop */
.dr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center;
    min-height: calc(100vh - var(--hdr)); min-height: calc(100svh - var(--hdr));
    padding: 28px var(--edge) 84px; overflow: hidden;
}
.dr__big { margin: 0 0 clamp(20px, 3vw, 36px); font: 900 clamp(20px, 2.1vw, 30px)/1.05 var(--display); font-stretch: 75%; text-transform: uppercase; }
.dr__pile { position: relative; justify-self: center; height: min(calc(100svh - var(--hdr) - 190px), 760px); aspect-ratio: 4 / 5; max-width: 90%; }
.dr__print {
    position: absolute; inset: 0; visibility: hidden; margin: 0; padding: 12px 12px 42px; background: #fff; box-shadow: 0 18px 40px rgba(16, 16, 20, .28);
}
.dr__crop { display: block; width: 100%; height: 100%; overflow: hidden; }
.dr__print img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dr__print figcaption { position: absolute; left: 14px; right: 14px; bottom: 12px; font: 700 14px/1.2 var(--body); color: #33323a; }
.dr__print--cover { padding: 0; box-shadow: 0 30px 70px rgba(16, 16, 20, .45); }

/* the crew: what the series means for the site */
.crew { padding: clamp(56px, 8vw, 120px) var(--edge) clamp(90px, 10vw, 140px); border-top: 1px solid var(--line); }
.crew__title { margin: 0 0 clamp(28px, 4vw, 48px); font: 900 clamp(44px, 7vw, 112px)/.9 var(--display); font-stretch: 62%; text-transform: uppercase; }
.crew__list { margin: 0 0 40px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.crew__list li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 190px; gap: 8px 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.crew__role { font: 800 clamp(20px, 2.2vw, 30px)/1.1 var(--display); font-stretch: 80%; text-transform: uppercase; }
.crew__list p { margin: 0; font: 400 17px/1.4 var(--body); color: var(--soft); }
.crew__list a { font: 700 15px/1.3 var(--body); text-underline-offset: 3px; }
.d52--aperture .site-footer, .d52--shutter .site-footer { border-top: 1px solid var(--line); }

/* switcher between the versions */
.vbar {
    position: fixed; left: var(--edge); bottom: 14px; z-index: 30;
    display: flex; max-width: calc(100vw - 16px); padding: 4px; border-radius: 999px; background: #101014; box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
    font: 700 14px/1 var(--body);
}
.vbar a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; color: #d6d3e0; text-decoration: none; white-space: nowrap; }
.vbar a:hover { color: #fff; }
.vbar a[aria-current] { background: var(--red); color: #fff; }

.d52 a:focus-visible, .d52 button:focus-visible { outline: 3px solid #5dff8a; outline-offset: 3px; }

@media (max-width: 860px) {
    :root { --hdr-h: 70px; }
    .stage-word { font-size: clamp(52px, 17vw, 96px); }
    .stage-kicker { margin-bottom: 8px; font-size: 12px; }
    .stage-line { margin-top: 8px; font-size: 15px; }
    .dots { margin-top: 12px; }

    .ap__frame { top: 0; bottom: auto; left: 50%; right: auto; width: min(100%, 58svh); transform: translateX(-50%); }
    .ap__copy { left: 16px; right: 16px; bottom: 68px; max-width: none; }
    .ap__hint { display: none; }

    .sh { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 84px; align-content: start; gap: 16px; }
    .sh__view { order: -1; width: min(100%, 50svh); height: auto; justify-self: center; }
    .sh__buttons { margin-top: 14px; }
    .sh__release { width: 68px; height: 68px; font-size: 11px; }

    .sl__pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px 68px; }
    .sl__stage { order: -1; height: auto; width: min(100%, 54svh); justify-self: center; }

    .dr { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 18px 16px 84px; gap: 24px; }
    .dr__pile { order: -1; height: auto; width: min(74%, 44svh); margin: 10px 0 18px; }

    .crew__list li { grid-template-columns: minmax(0, 1fr); }
    .vbar { left: 50%; transform: translateX(-50%); }
    .vbar a { padding: 0 10px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .dots li, .sh__marks, .ap__hint { transition: none; }
}

/* the site's base styles paint headings, spans and buttons white: this page has light grounds too */
.d52 .main :is(h1, h2, span, button, li, figcaption) { color: inherit; }
.d52 .main .stage-kicker span { color: var(--soft); }
.d52 .main .stage-kicker b span { color: inherit; }
.d52 .main .dr__print figcaption { color: #33323a; }
.d52 .main .d52-link--solid { color: #fff; }
.d52 .main .sh__release { color: #fff; }
.d52 .main .sh__marks, .d52 .main .sh__marks span { color: #fff; }
.d52 .main :is(.stage-word, .dr__big, .crew__title, .crew__role, .d52-link:not(.d52-link--solid), .crew__list a) { color: var(--text); }
html:has(.d52) { scroll-behavior: auto; }

/* Shutter: the focus box, the frames taken so far, the lights coming on for the cover */
.d52--shutter .sh { position: relative; isolation: isolate; }
.d52--shutter .sh::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lilac); opacity: 0; transition: opacity .12s; }
.d52--shutter .sh.is-cover { --text: var(--ink); --soft: #55535f; --line: rgba(16, 16, 20, .2); }
.d52--shutter .sh.is-cover::before { opacity: 1; }
.d52--shutter .sh.is-cover .stage-kicker b { color: var(--red); }
.sh__frame { transition: box-shadow .2s; }
.is-cover .sh__frame { box-shadow: 0 30px 70px rgba(16, 16, 20, .45); }
.sh__focus { transition: left .22s ease, top .22s ease, border-color .08s, scale .16s ease-out; border-color: #fff; scale: 1.2; }
.sh__focus.is-locked { border-color: #5dff8a; scale: 1; }
.sh__taken { display: flex; gap: 6px; margin: 22px 0 0; padding: 0; list-style: none; }
.sh__taken li { width: clamp(38px, 4vw, 58px); aspect-ratio: 4 / 5; border: 1px solid var(--line); overflow: hidden; }
.sh__taken img { display: block; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.sh__taken .is-on { border-color: transparent; }
.sh__taken .is-on img { visibility: visible; animation: sh-taken .18s ease-out; }
@keyframes sh-taken { from { transform: scale(1.5); opacity: 0; } }
.sh__hint { margin: 0; font: 400 14px/1 var(--body); color: var(--soft); }
.is-cover .sh__hint { display: none; }
.sh__sound { min-height: 44px; padding: 0 4px; border: 0; background: none; font: 400 14px/1 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.d52 .main .sh__sound { color: var(--soft); }
@media (hover: none) { .sh__hint { display: none; } }
@media (max-width: 860px) { .sh__taken { margin-top: 10px; } .sh__taken li { width: 34px; } }
@media (prefers-reduced-motion: reduce) {
    .sh__taken .is-on img { animation: none; }
    .d52--shutter .sh::before, .sh__focus, .sh__frame { transition: none; }
}
@media (max-width: 860px) { .sh__view { width: min(100%, 42svh); } .sh__hint { display: none; } }

/* a frame's photo and position, from the series; hidden until the series is known */
.d52 [data-stage-img] {
    object-position: calc(var(--x, 50) * 1%) calc(var(--y, 50) * 1%);
    scale: var(--z, 1);
}
.d52:not(.is-ready) [data-stage-img] { opacity: 0; }