/* Cinema mode */

@property --glow {
    syntax: '<color>';
    inherits: true;
    initial-value: #0b0d0c;
}

:root {
    --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --font-serif: 'Instrument Serif', ui-serif, Georgia, serif;

    --bg: #0b0d0c;
    --text: #e9ede9;
    --muted: #97a299;
    --faint: #808a83; /* ≥ 4.5:1 on the dark background (WCAG AA for small text) */
    --accent: #9be07a;
    --border: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .16);
    --glass: rgba(16, 19, 17, .42);
    --ease: cubic-bezier(.2, .7, .2, 1);
    --gutter: clamp(16px, 3vw, 40px);
    --thumb: 88px;
    --thumb-on: 136px;

    --glow: #0b0d0c;
    transition: --glow 1.6s var(--ease);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Stage ---------- */

.stage {
    position: fixed;
    inset: 0;
    touch-action: pan-y pinch-zoom;
}
@media (pointer: fine) { .stage { cursor: none; } }

#gl { display: block; width: 100%; height: 100%; }

.glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(90% 60% at 8% 108%, color-mix(in oklab, var(--glow) 62%, transparent) 0%, transparent 62%),
        radial-gradient(48% 42% at 0% 74%, rgba(8, 10, 9, .5), transparent 72%),
        linear-gradient(to top, rgba(8, 10, 9, .82) 0%, rgba(8, 10, 9, .4) 24%, transparent 46%),
        linear-gradient(to bottom, rgba(8, 10, 9, .55) 0%, transparent 16%);
}

/* Clip over the canvas: placed where the shader draws the poster (cover; on portrait screens the framed box,
   92% wide, centred 7.5% above the middle), it fades in once it plays */
.clip-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05); /* the shader's cover zoom for a still poster */
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.clip-layer.on { opacity: 1; }
.contain .clip-layer {
    inset: auto 4%;
    top: 42.5%;
    width: 92%;
    height: auto;
    aspect-ratio: 16 / 9;
    transform: translateY(-50%);
    border-radius: 14px;
}
/* A labelled pill ("Play video"), not a bare circle, so it reads as an action */
.clip-play {
    position: fixed;
    z-index: 4;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 22px 0 10px;
    color: var(--text);
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
}
.contain .clip-play { top: 42.5%; }
.clip-play svg { width: 36px; height: 36px; flex: none; fill: var(--accent); }
.clip-play[hidden] { display: none; }
.clip-play:hover { border-color: color-mix(in oklab, var(--accent) 55%, transparent); }

/* A photo still loading (slow network, 01-cinema.js go()): which one, and the way back to the photo on screen */
.c-load {
    position: fixed;
    z-index: 4;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 6px 0 16px;
    color: var(--text);
    font: 500 11.5px/1 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(11, 13, 12, .62);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.96);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.c-load.on { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.c-load.nudge { animation: c-nudge .45s var(--ease); }
.contain .c-load { top: 42.5%; }
.c-load i {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .16);
    border-top-color: var(--accent);
    animation: c-spin .8s linear infinite;
}
.c-load .cl-back {
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: var(--text);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    pointer-events: auto;
}
.c-load .cl-back:hover { background: rgba(255, 255, 255, .16); }
.c-load .cl-back[hidden] { display: none; }
.c-load:has(.cl-back[hidden]) { padding-right: 16px; }
@keyframes c-spin { to { transform: rotate(360deg); } }
@keyframes c-nudge { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
@media (pointer: coarse) { .c-load .cl-back { height: 40px; } .c-load { height: 52px; } }
@media (max-width: 520px) { .c-load { gap: 8px; padding-left: 14px; font-size: 11px; letter-spacing: .03em; max-width: calc(100vw - 32px); } .c-load .cl-back { padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .c-load i { animation-duration: 2.4s; } .c-load.nudge { animation: none; } }

/* No-WebGL fallback */
.fallback { position: absolute; inset: 0; overflow: hidden; }
.fb-layer { position: absolute; inset: 0; opacity: 0; transition: opacity var(--d, 900ms) ease; }
.fb-layer.in { opacity: 1; }
.fb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fb-bg { display: none; }
.contain .fb-img { object-fit: contain; inset: 4% 4% 30% 4%; width: 92%; height: 66%; border-radius: 14px; }
.contain .fb-bg {
    display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    filter: blur(40px) brightness(.42) saturate(1.2);
    transform: scale(1.25);
}

/* ---------- Custom cursor ---------- */

.cursor {
    position: fixed;
    left: 0; top: 0;
    width: 68px; height: 68px;
    margin: -34px 0 0 -34px;
    border-radius: 50%;
    border: 1px solid rgba(233, 237, 233, .45);
    background: rgba(11, 13, 12, .18);
    backdrop-filter: blur(8px) saturate(1.4);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    display: grid;
    place-items: center;
    font: 500 18px/1 var(--font-mono);
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    scale: .6;
    transition: opacity .3s var(--ease), scale .4s var(--ease);
}
.cursor.on { opacity: 1; scale: 1; }
.cursor.press { scale: .86; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ---------- Header ---------- */

.top {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* Same offsets as the shared nav bar (nav.css). */
    padding: calc(var(--gnav-top, 20px) + env(safe-area-inset-top)) calc(var(--gnav-x, 32px) + env(safe-area-inset-right)) 0 calc(var(--gnav-x, 32px) + env(safe-area-inset-left));
}

.controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.iconbtn {
    width: 40px; height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--glass);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color .3s, background .3s;
}
.iconbtn:hover { border-color: var(--border-strong); background: rgba(30, 36, 32, .55); }
.iconbtn svg { width: 40px; height: 40px; }
.iconbtn path { fill: var(--text); }
#fs path { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ring-bg, .ring { fill: none; stroke-width: 1.5; }
.ring-bg { stroke: transparent; }
.ring {
    stroke: var(--accent);
    stroke-dasharray: 113.1;
    stroke-dashoffset: 113.1;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-linecap: round;
}
#play .i-pause { display: none; }
#play[aria-pressed="true"] .i-pause { display: block; }
#play[aria-pressed="true"] .i-play { display: none; }
#play[aria-pressed="true"] .ring-bg { stroke: rgba(255, 255, 255, .12); }

/* ---------- Caption ---------- */

.caption {
    position: fixed;
    z-index: 4;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(var(--thumb-on) * 9 / 16 + var(--gutter) * 1.6 + 30px + env(safe-area-inset-bottom));
    max-width: 980px;
    pointer-events: none;
}

.meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font: 500 12px/1.4 var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #c3ccc4;
    min-height: 1.4em;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
}
.meta .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--glow);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 0 14px var(--glow);
    flex: none;
}

.title {
    margin: 0;
    font: 400 clamp(46px, 7.6vw, 132px)/.94 var(--font-serif);
    letter-spacing: -.018em;
    text-shadow: 0 2px 40px rgba(0, 0, 0, .35);
}
.title-anim { display: grid; }
.title-anim > .t { grid-area: 1 / 1; }
.w { display: inline-block; white-space: nowrap; }
.c {
    display: inline-block;
    animation: c-in 1s var(--ease) both;
    animation-delay: calc(var(--i) * 26ms + 160ms);
}
.t.out .c {
    animation: c-out .5s cubic-bezier(.5, 0, .9, .4) both;
    animation-delay: calc(var(--i) * 12ms);
}
@keyframes c-in {
    from { opacity: 0; transform: translateY(.42em) rotate(5deg); filter: blur(10px); }
}
@keyframes c-out {
    to { opacity: 0; transform: translateY(-.28em) rotate(-3deg); filter: blur(8px); }
}

.hint {
    margin: 14px 0 0;
    font: 11px var(--font-mono);
    letter-spacing: .06em;
    color: var(--muted);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
    transition: opacity .8s var(--ease);
}
@media (pointer: coarse) { .hint { display: none; } }

/* ---------- Dock / filmstrip ---------- */

.dock {
    position: fixed;
    z-index: 5;
    left: 0; right: 0; bottom: 0;
    padding: 0 0 calc(var(--gutter) * .8 + env(safe-area-inset-bottom));
}

.strip {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 10px var(--gutter) 4px;
    mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    transition: opacity .5s var(--ease);
}
.strip::-webkit-scrollbar { display: none; }
.strip.swap { opacity: 0; }

.th {
    position: relative;
    flex: none;
    width: var(--thumb);
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    border-radius: 7px;
    overflow: hidden;
    background: #151917;
    cursor: pointer;
    opacity: .5;
    transition: width .6s var(--ease), opacity .4s var(--ease), box-shadow .5s var(--ease);
}
.th img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(.8);
    transition: filter .4s, transform .8s var(--ease);
    -webkit-user-drag: none;
    user-select: none;
}
.th:hover { opacity: .92; }
.th:hover img { filter: none; transform: scale(1.06); }
.th[aria-current="true"] {
    width: var(--thumb-on);
    opacity: 1;
    box-shadow: 0 0 0 1.5px var(--accent), 0 14px 34px -12px var(--glow);
}
.th[aria-current="true"] img { filter: none; }
.th .bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--accent);
    transform-origin: left;
    transform: scaleX(var(--p, 0));
}
.th.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22), transparent 70%);
    animation: shimmer 1s linear infinite;
}
/* Clips in the strip: a small play mark */
.th-play {
    position: absolute;
    left: 5px;
    top: 5px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(11, 13, 12, .62);
}
.th-play svg { width: 9px; height: 9px; fill: var(--accent); }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- Idle / clean view ---------- */

.ui, .ui-soft { transition: opacity .7s var(--ease), translate .7s var(--ease); }
.idle .ui { opacity: 0; pointer-events: none; }
.idle .top { translate: 0 -8px; }
.idle .dock { translate: 0 8px; }
.idle .hint { opacity: 0; }
.clean .ui, .clean .ui-soft { opacity: 0; pointer-events: none; }

/* ---------- Title card ---------- */

.card {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    padding: var(--gutter);
    text-align: center;
    background:
        radial-gradient(60% 50% at 50% 55%, rgba(123, 191, 106, .10), transparent 70%),
        var(--bg);
    transition: opacity 1.1s var(--ease), visibility 0s linear 0s;
    pointer-events: none;
}
.card.soft { background: radial-gradient(70% 60% at 50% 50%, rgba(11, 13, 12, .72), rgba(11, 13, 12, .25)); }
.card.gone { opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease), visibility 0s linear 1.1s; }
.card-k {
    margin: 0 0 18px;
    font: 500 12px var(--font-mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    animation: fade-up 1s var(--ease) both .1s;
}
.card-h {
    margin: 0;
    font: 400 clamp(64px, 13vw, 210px)/.88 var(--font-serif);
    letter-spacing: -.025em;
}
.card-h em { font-style: italic; color: var(--accent); display: inline-block; animation: fade-up 1.2s var(--ease) both .45s; }
.card-line {
    display: block;
    width: 160px; height: 1px;
    margin: 26px auto 18px;
    background: linear-gradient(90deg, transparent, var(--text), transparent);
    animation: grow 1.4s var(--ease) both .3s;
}
.card-s {
    margin: 0;
    font: 12px var(--font-mono);
    letter-spacing: .08em;
    color: var(--muted);
    animation: fade-up 1s var(--ease) both .5s;
}
.card.replay .card-k, .card.replay .card-line, .card.replay .card-s { animation-name: none; }
.card.replay .card-h em { animation: fade-up 1s var(--ease) both .3s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes grow { from { transform: scaleX(0); opacity: 0; } }

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
    :root { --thumb: 60px; --thumb-on: 96px; }
    .iconbtn, .iconbtn svg { width: 34px; height: 34px; }
    #fs, .hint { display: none; }
    .controls { gap: 6px; }
    .card-h { font-size: clamp(54px, 17vw, 96px); }
    .card-h em { display: block; margin-top: .06em; }
    .card-s { font-size: 11px; line-height: 1.7; max-width: 30ch; margin-inline: auto; }
    .title { font-size: clamp(40px, 11vw, 64px); }
    .meta { font-size: 11px; letter-spacing: .1em; }
    .caption { bottom: calc(var(--thumb-on) * 9 / 16 + var(--gutter) * 1.4 + 18px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    .c, .t.out .c, .card-k, .card-line, .card-s, .card-h em { animation-duration: .01ms; animation-delay: 0ms; }
    .th, .th img { transition: none; }
}