/* fforde.ch — Round 9 design: charcoal, cobalt + orange, AV05 titles, Mona Sans body */
/* Colours change per film (see palette.js); registering them lets the browser fade between films */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #18181a; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #3482de; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #ec4a28; }
@font-face { font-family: 'AV05'; src: url('/assets/fonts/av05-logotype.otf') format('opentype'); font-weight: 400; font-display: swap; }

:root {
  transition: --bg .9s ease, --ink .9s ease, --accent .9s ease;
  --bg: #18181a;
  --ink: #3482de;          /* titles */
  --ink-op: .8;            /* titles sit slightly transparent */
  --accent: #ec4a28;       /* filmmaker, film types */
  --text: #ecebe7;
  --body: #cfcdc7;
  --muted: #8a8a8f;
  --rule: #29292c;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; overscroll-behavior: none; }
body { font-family: 'Mona Sans', system-ui, sans-serif; font-stretch: 120%; font-weight: 300; letter-spacing: .01em; -webkit-font-smoothing: antialiased; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }
button { font: inherit; color: inherit; }
.btn, .row, .thumb, .story-btn, .story-tap, .story-nav, .mute, .panel-close { all: unset; box-sizing: border-box; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.tt { font-family: 'AV05', sans-serif; font-weight: 400; letter-spacing: .01em; color: var(--ink); opacity: var(--ink-op); white-space: nowrap; }
.lb { font-family: 'Mona Sans', sans-serif; font-stretch: 120%; font-weight: 400; letter-spacing: .01em; font-size: 13px; text-transform: lowercase; }
.keep-case { text-transform: none; }
.accent { color: var(--accent); }
.muted { color: var(--muted); }
.kind { color: var(--accent); white-space: nowrap; }

.app { position: fixed; inset: 0; overflow: hidden; }
.is-desk .phone-only, .is-phone .desk-only { display: none !important; }

/* ---------- hero ---------- */
.hero { position: absolute; left: 0; right: 0; top: var(--heroTop); height: var(--heroH); overflow: hidden; background: var(--bg); pointer-events: none; z-index: 2;
  transition: top .35s ease, height .35s ease, opacity .7s ease .15s; }
.hero .layer { position: absolute; inset: 0; overflow: hidden; background: #222225; will-change: transform; }
.hero .layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero .layer img:not([src]), .hero .layer img[src=""] { display: none; }
.hero-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 70%, transparent), color-mix(in srgb, var(--bg) 0%, transparent)); z-index: 3; }
.is-phone .hero-shade { display: none; }
.player { position: absolute; inset: 0; z-index: 4; display: none; background: var(--bg); pointer-events: auto; }
.player.on { display: block; }
.player .frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.player iframe { position: absolute; border: 0; }
.no-anim .row, .no-anim .info { transition: none !important; }
.player .tap { position: absolute; inset: 0; z-index: 2; }

/* ---------- scroller + content ---------- */
.scroller { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; z-index: 3; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scroller::-webkit-scrollbar { display: none; }
.content { position: relative; transition: opacity .5s ease .35s; }

.info { position: absolute; left: var(--pad); right: var(--pad); transition: opacity .3s ease .32s; }   /* fades back in only once the list has finished sliding into place */
[data-browse="1"] .info { transition: none; }   /* and gets out of the way at once when browsing starts */
.is-desk .info { width: 720px; right: auto; }
.info-head { display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; }
.is-phone .info-head { gap: 8px; }
.info .kind { font-size: 17px; }
.is-phone .info .kind { font-size: 15px; }
.info .meta { display: inline-flex; gap: 8px; align-items: baseline; font-size: 15px; }
.is-phone .info .meta { font-size: 14px; margin-top: 12px; }
.is-phone .info-head .meta { display: none; }
.blurb { margin: 10px 0 0; max-width: 640px; font-size: 17px; line-height: 1.5; color: var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.is-phone .blurb { margin-top: 8px; font-size: 14px; -webkit-line-clamp: 3; }
.blurb.open { -webkit-line-clamp: unset; display: block; }
.more { all: unset; box-sizing: border-box; cursor: pointer; display: table; margin-top: 4px; padding: 6px 0; font-size: 13px; color: var(--accent); }
.more[hidden] { display: none; }
.more:hover { color: var(--text); }
.more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.blurb:empty { display: none; }
.thumbs { display: flex; align-items: flex-end; gap: 28px; margin-top: 22px; padding: 4px 0 10px; }
.is-phone .thumbs { gap: 18px; margin: 16px calc(-1 * var(--pad)) 0; padding: 4px var(--pad) 10px; overflow-x: auto; scrollbar-width: none; }
.is-phone .thumbs::-webkit-scrollbar { display: none; }
.thumbs:empty { display: none; }
.thumb { flex: none; display: flex; flex-direction: column; gap: 8px; }
.thumb .pic { position: relative; display: block; overflow: hidden; background: #232326; outline: 1px solid rgba(236,235,231,.14); outline-offset: 3px; }
.thumb[aria-pressed="true"] .pic { outline-color: var(--text); }
.thumb .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .pic svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.thumb .lb { color: var(--muted); }
.thumb[aria-pressed="true"] .lb { color: var(--text); }
.is-phone .thumb .lb { font-size: 11px; }

.rows { position: absolute; left: 0; right: 0; top: 0; }
.row { position: absolute; left: calc(var(--pad) - 12px); width: min(720px, calc(100% - var(--pad) * 2 + 24px)); height: var(--row); display: flex; align-items: center; gap: 12px; padding: 0 12px;
  transition: opacity .12s linear, top .3s ease; }
.row .tt { font-size: var(--rowSize); line-height: 1; }
.row .k { font-size: 14px; color: var(--muted); }
.row .tag { margin-left: auto; flex: none; color: var(--muted); }
.is-phone .row .k { display: none; }
.row.is-active .tt { opacity: 1; }
.row:not(.is-active) .tt { opacity: .55; }
.row.is-active .k, .row.is-active .tag { color: var(--accent); }

/* ---------- fixed chrome ---------- */
.top { position: absolute; z-index: 8; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--pad); height: var(--headH);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, transparent), color-mix(in srgb, var(--bg) 0%, transparent)); transition: z-index 0s; }
.is-desk .top { align-items: baseline; padding-top: 32px; height: auto; padding-bottom: 40px; }
.is-phone .top { background: var(--bg); }
.is-phone[data-browse="1"] .top { z-index: 1; }
.logo { display: flex; align-items: baseline; gap: 14px; }   
.is-phone .logo { gap: 10px; }
.logo .tt { font-size: 26px; line-height: 1; }
.is-phone .logo .tt { font-size: 20px; }
.is-phone .lb { font-size: 12px; }
.nav { display: flex; gap: 32px; }
.is-phone .nav { gap: 18px; }
.bottom { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; height: 44px; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--pad) env(safe-area-inset-bottom); background: var(--bg); border-top: 1px solid var(--rule); }
.chrome { transition: opacity .6s ease .25s; }

.mute { position: absolute; z-index: 7; right: 34px; top: calc(var(--heroTop) + var(--heroH) - 60px); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--text); }
.is-phone .mute { right: 6px; top: calc(var(--heroTop) + var(--heroH) - 50px); }
.mute[hidden] { display: none; }
.mute .i-sound, .mute[aria-pressed="true"] .i-muted { display: none; }
.mute[aria-pressed="true"] .i-sound { display: block; }

.big { position: absolute; z-index: 6; left: var(--pad); top: calc(var(--line) - 1em); margin: 0; font-size: var(--big); line-height: 1; pointer-events: none;
  transform: translateY(.45em); transition: top .35s ease, transform .55s var(--ease-out) .1s, opacity .4s .1s; }
.sub { position: absolute; z-index: 6; left: var(--pad); top: calc(var(--line) + var(--subOff)); font-size: 17px; pointer-events: none; opacity: 0; transition: opacity .15s; }
.is-phone .sub { font-size: 15px; }
[data-browse="1"][data-ip="2"] .sub { opacity: 1; }

/* ---------- intro: the header name itself starts big in the middle and glides home (no copy, no swap) ---------- */
.app:not(.intro-ready) .logo { visibility: hidden; }
.logo, #logoName, #logoTag { transform-origin: 0 100%; }
.is-phone #logoTag { transform-origin: 0 0; }
.logo .w { display: inline-block; }
[data-ip="0"] .logo .w { opacity: 0; animation: wIn .5s var(--ease-out) forwards; }
@keyframes wIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
[data-ip="0"] .hero, [data-ip="0"] .content, [data-ip="0"] .chrome { opacity: 0; }
[data-ip="0"] .big { opacity: 0; transform: translateY(calc(.45em + 60px)); }
[data-ip="0"] .mute, [data-ip="1"] .mute { visibility: hidden; }

/* ---------- about / contact panel ---------- */
.panel { position: absolute; inset: 0; z-index: 12; background: var(--bg); overflow-y: auto; }
.panel[hidden] { display: none; }
.panel-close { position: fixed; top: 22px; right: 26px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; z-index: 2; }
.panel-inner { max-width: 760px; padding: 120px var(--pad) 120px; }
.panel h2 { font-size: clamp(40px, 7vw, 84px); margin: 0 0 36px; line-height: 1; }
.panel p { font-size: 18px; line-height: 1.6; color: var(--body); margin: 0 0 18px; }
.is-phone .panel p { font-size: 16px; }
.panel .contact-big { font-size: 18px; color: var(--text); }
.is-phone .panel .contact-big { font-size: 16px; }
.panel ul { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 10px; }
.panel li .lb { color: var(--muted); display: inline-block; width: 110px; }
/* about: portrait beside the text on desktop, above it on a phone */
.panel-inner.wide { max-width: 1180px; }
.about-grid { display: grid; grid-template-columns: minmax(0, 640px) minmax(260px, 400px); gap: 64px; align-items: start; }
.about-grid .portrait { grid-column: 2; grid-row: 1; position: sticky; top: 120px; }
.about-grid .about-text { grid-column: 1; grid-row: 1; }
.portrait { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: color-mix(in srgb, var(--text) 6%, transparent); }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.is-phone .about-grid { grid-template-columns: 1fr; gap: 28px; }
.is-phone .about-grid .portrait { grid-column: 1; grid-row: 1; position: static; max-width: 300px; }
.is-phone .about-grid .about-text { grid-row: 2; }

/* ---------- stories ---------- */
.story { position: absolute; inset: 0; z-index: 11; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 82%, transparent); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-stretch: normal; color: #fff; }
.story[hidden] { display: none; }
/* on a computer the story is always exactly 9:16, as big as the window allows — it never stretches to fit */
.story { --fw: min(calc((100dvh - 48px) * 9 / 16), calc(100vw - 32px)); }
.story-frame { position: relative; flex: none; width: var(--fw); height: calc(var(--fw) * 16 / 9); border-radius: 14px; overflow: hidden; background: #111; }
/* full-bleed only on actual phones (touch screens), never in a narrow desktop window */
.is-phone.is-touch .story { background: #000; }
.is-phone.is-touch .story-frame { height: 100%; width: 100%; border-radius: 0; }
.story-player { position: absolute; inset: 0; overflow: hidden; background: #000; }
.story-player iframe { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); border: 0; }
.story-shade { position: absolute; left: 0; right: 0; height: 130px; pointer-events: none; }
.story-shade-top { top: 0; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.story-shade-bottom { bottom: 0; background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.story-tap { position: absolute; top: 90px; bottom: 90px; }
.story-tap.left { left: 0; width: 30%; }
.story-tap.right { right: 0; width: 70%; }
.story-bars { position: absolute; left: 10px; right: 10px; top: calc(10px + env(safe-area-inset-top)); display: flex; gap: 4px; }
.story-bars div { flex: 1; height: 2px; border-radius: 1px; background: rgba(255,255,255,.35); overflow: hidden; }
.story-bars i { display: block; height: 100%; width: 0; background: #fff; }
.story-head { position: absolute; left: 12px; right: 6px; top: calc(22px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px; }
.story-avatar { width: 32px; height: 32px; border-radius: 16px; background: var(--ink) center / cover; box-shadow: 0 0 0 2px rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.story-who { font-size: 14px; font-weight: 600; }
.story-cut { font-size: 13px; opacity: .75; }
.story-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
#storyMute { margin-left: auto; }
#storyMute .i-sound, #storyMute[aria-pressed="true"] .i-muted { display: none; }
#storyMute[aria-pressed="true"] .i-sound { display: flex; }
.story-send { position: absolute; left: 12px; right: 8px; bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; }
.story-send input { flex: 1; min-width: 0; height: 44px; border: 1px solid rgba(255,255,255,.65); border-radius: 22px; background: transparent; color: #fff; padding: 0 18px; font: inherit; font-size: 14px; }
.story-send input::placeholder { color: rgba(255,255,255,.85); }
.story-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 24px; background: rgba(236,235,231,.12); display: flex; align-items: center; justify-content: center; color: var(--text); }
.story-nav.prev { left: max(8px, calc(50% - var(--fw) / 2 - 72px)); }
.story-nav.next { right: max(8px, calc(50% - var(--fw) / 2 - 72px)); }
.chat { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; top: 28%; background: rgba(14,14,16,.96); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); }
.chat[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.12); }
.chat-avatar { width: 30px; height: 30px; border-radius: 15px; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.chat-name { font-size: 14px; font-weight: 600; }
.chat-note { font-size: 12px; opacity: .6; }
.chat-close { margin-left: auto; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.chat-log .m { max-width: 80%; padding: 9px 13px; border-radius: 18px; font-size: 14px; line-height: 1.35; align-self: flex-start; background: rgba(255,255,255,.14); }
.chat-log .m.me { align-self: flex-end; background: var(--ink); }
.chat-log .note { font-size: 12px; opacity: .6; text-align: center; }
.chat-form { display: flex; gap: 8px; }
.chat-form[hidden] { display: none; }
.chat-form input { flex: 1; min-width: 0; height: 44px; border: 1px solid rgba(255,255,255,.4); border-radius: 22px; background: transparent; color: #fff; padding: 0 16px; font: inherit; font-size: 14px; }
.chat-form button { all: unset; cursor: pointer; width: 44px; height: 44px; border-radius: 22px; background: var(--ink); display: flex; align-items: center; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- resizing: follow the window without easing ---------- */
.resizing .big, .resizing .sub, .resizing .hero, .resizing .row, .resizing .info, .resizing .content, .resizing .player .frame { transition: none !important; }

/* ---------- custom video controls ---------- */
.player .frame { background: #000; }
.pc { position: absolute; inset: 0; z-index: 3; }
.pc-surface { all: unset; position: absolute; inset: 0; cursor: pointer; }
.player.idle .pc-surface { cursor: none; }
.pc-scrub { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; cursor: pointer; touch-action: none; }
.pc-track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(236,235,231,.22); transition: height .15s; }
.pc-scrub:hover .pc-track, .pc-scrub.drag .pc-track, .pc-scrub:focus-visible .pc-track { height: 4px; }
.pc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); }
.pc-knob { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 6px; background: var(--accent); opacity: 0; transition: opacity .15s; }
.pc-scrub:hover .pc-knob, .pc-scrub.drag .pc-knob { opacity: 1; }
.pc-bar { position: absolute; right: 30px; bottom: 26px; display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 22px; background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .3s; }
.is-phone .pc-bar { right: 8px; bottom: auto; top: 8px; }
.pc-btn { all: unset; box-sizing: border-box; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--text); }
.pc-btn:hover { color: var(--accent); }
.pc-time { color: var(--text); padding: 0 6px; font-variant-numeric: tabular-nums; min-width: 92px; text-align: center; }
.is-phone .pc-time { display: none; }
.player.idle .pc-bar { opacity: 0; pointer-events: none; }
.player.fs .pc-bar { right: 30px; bottom: 30px; top: auto; }
.player.fs .frame { left: 50%; top: 50%; }

/* header + intro name are always white; only the film titles take the film's colour */
.logo .tt { color: var(--text); opacity: 1; }
.logo .accent { color: var(--text); }

/* heart on the stories: fills and pops when pressed */
.story-heart.pop svg { animation: heartPop .45s var(--ease-out); fill: #ff3b5c; stroke: #ff3b5c; }
@keyframes heartPop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.chat-log .m.me.emoji { background: none; font-size: 34px; padding: 0 4px; }