/* Shared fonts, reset, media, page transitions, header states and 360 background */

/* Self-hosted fonts (SIL OFL). Fraunces is variable with optical size + weight; the browser picks opsz automatically. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/fraunces-latin-opsz-normal.woff2) format('woff2-variations'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/fraunces-latin-opsz-italic.woff2) format('woff2-variations'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2'); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Poster → live video crossfade */
.media { position: relative; overflow: hidden; background: #000; }
.media > img, .media > picture, .media > picture > img, .media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media > video { opacity: 0; transition: opacity 0.9s ease; }
.media.is-playing > video { opacity: 1; }

/* Page transitions (cross-document, where supported). Film links name the clicked image «film-stage». */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; }
::view-transition-group(film-stage) { animation-duration: 0.6s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Site header (src/components/SiteHeader.astro, states driven by /scripts/header.js) */
.hd { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem clamp(1rem, 3vw, 2.5rem); color: #f2f0ea; transition: transform 0.5s cubic-bezier(.2,.8,.2,1), background-color 0.4s ease; }
.hd a { color: inherit; text-decoration: none; font: 500 0.78rem/1 Inter, system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
.hd__logo { white-space: nowrap; }
.hd__nav ul { display: flex; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.hd__nav a { opacity: 0.8; transition: opacity 0.3s, color 0.3s; }
.hd__nav a:hover, .hd__nav a:focus-visible { opacity: 1; }
.hd__nav a[aria-current="page"] { opacity: 1; color: #e04b2f; }
.hd__toggle { display: none; }
@media (max-width: 52rem) {
  .hd__toggle { all: unset; cursor: pointer; display: flex; align-items: center; gap: 0.7rem; font: 500 0.72rem/1 Inter, system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
  .hd__toggle i { position: relative; width: 1.4rem; height: 0.55rem; }
  .hd__toggle i::before, .hd__toggle i::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.4s cubic-bezier(.2,.8,.2,1), top 0.4s; }
  .hd__toggle i::before { top: 0; }
  .hd__toggle i::after { top: calc(100% - 1.5px); }
  .hd.is-open .hd__toggle i::before { top: calc(50% - 0.75px); transform: rotate(45deg); }
  .hd.is-open .hd__toggle i::after { top: calc(50% - 0.75px); transform: rotate(-45deg); }
  .hd__toggle:focus-visible { outline: 2px solid #e04b2f; outline-offset: 4px; }
  .hd__nav { position: absolute; top: 0; left: 0; right: 0; z-index: -1; height: 100svh; display: flex; align-items: center; padding: 6rem clamp(1rem, 3vw, 2.5rem) 3rem; background: rgba(10,10,11,0.97); visibility: hidden; clip-path: circle(0% at calc(100% - 3rem) 2rem); transition: clip-path 0.7s cubic-bezier(.2,.8,.2,1), visibility 0s 0.7s; }
  .hd.is-open .hd__nav { visibility: visible; clip-path: circle(150% at calc(100% - 3rem) 2rem); transition: clip-path 0.8s cubic-bezier(.2,.8,.2,1), visibility 0s; }
  .hd__nav ul { flex-direction: column; gap: 0.3rem; }
  .hd__nav a { display: inline-block; font: 300 clamp(2.6rem, 12vw, 4rem)/1.1 Fraunces, Georgia, serif; letter-spacing: -0.02em; text-transform: none; opacity: 0; transform: translateY(1rem); transition: opacity 0.4s, transform 0.6s cubic-bezier(.2,.8,.2,1), color 0.3s; }
  .hd.is-open .hd__nav a { opacity: 1; transform: none; }
  .hd.is-open .hd__nav li:nth-child(2) a { transition-delay: 0.05s; }
  .hd.is-open .hd__nav li:nth-child(3) a { transition-delay: 0.1s; }
  .hd.is-open .hd__nav li:nth-child(4) a { transition-delay: 0.15s; }
  .hd.is-open .hd__nav li:nth-child(5) a { transition-delay: 0.2s; }
  .hd.is-open { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hd.is-open::before { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hd, .hd__nav, .hd__nav a { transition: none !important; } }
.hd::before { content: ''; position: absolute; inset: 0 0 -60%; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0.42), rgba(0,0,0,0)); transition: opacity 0.4s ease; }
.hd.is-scrolled { background-color: rgba(10,10,11,0.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hd.is-scrolled::before { opacity: 0; }
.hd.is-hidden { transform: translateY(-100%); }
/* Film pages add html.is-watching while a film plays */
html.is-watching .hd { transform: translateY(-100%); }

/* WebGL 360° background (/scripts/pano-bg.js) */
.pano-bg { position: absolute; inset: 0; overflow: hidden; background: #000; }
.pano-bg__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pano-bg__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease; }
.pano-bg.is-ready .pano-bg__canvas { opacity: 1; }
.pano-bg__still { transition: opacity 0.45s ease; }
.pano-bg.is-switching .pano-bg__still, .pano-bg.is-switching .pano-bg__canvas { opacity: 0; transition-duration: 0.45s; }
[data-pano-host] { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
[data-pano-host].is-dragging { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .media > video { display: none; }
}