/*
  PSYCHE.OS | FILM STYLE LAYER
  Loads after main-*.css. Carries the film's language across the whole site:
  a fixed particle field behind everything, blur-in reveals, word-by-word titles,
  luminosity (not colour) for emphasis, and glass over the field.
  Emphasis is brightness: bright means "look here", everything else is dim.
*/

:root { --ease: cubic-bezier(.16, 1, .3, 1); }

/* ---------- the stage: field + vignette sit behind all content ---------- */
html[data-theme="dark"] body {
  background: radial-gradient(120% 95% at 68% 48%, #111113 0%, #0a0a0b 38%, #050506 72%) fixed;
}
#ambient-field {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -2; pointer-events: none; display: block;
  transition: opacity 1s var(--ease);
}
#ambient-vignette {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .72) 100%);
}
html[data-theme="light"] #ambient-vignette {
  background: radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(0, 0, 0, .05) 100%);
}

/* ---------- glass: let the field show through sections and grids ---------- */
.bg-\[rgb\(var\(--bg-raised-rgb\)\)\] { background-color: rgb(var(--bg-raised-rgb) / .34); }
.gap-px > .bg-ink {
  background-color: rgb(var(--bg-rgb) / .5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* Legibility over moving particles: a soft halo of the page colour behind type. */
html[data-theme="dark"] main { text-shadow: 0 1px 26px rgba(5, 5, 6, .92); }
html[data-theme="light"] main { text-shadow: 0 1px 22px rgba(255, 255, 255, .9); }
main .field, main .field *, main .frame, main .frame *, main .film-frame, main .film-frame * { text-shadow: none; }

/* ---------- reveals: the film's blur-in ---------- */
.reveal {
  filter: blur(8px);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease), filter .9s var(--ease);
}
.reveal.is-visible { filter: none; }
.reveal-stagger > * {
  filter: blur(6px);
  transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease);
}
.reveal-stagger.is-visible > * { filter: none; }

/* Titles arrive word by word (words are wrapped by field.js). */
.words .w {
  display: inline-block;
  opacity: 0; transform: translateY(.38em); filter: blur(6px);
  transition: opacity .8s var(--ease), transform 1s var(--ease), filter .8s var(--ease);
}
.words.on .w { opacity: 1; transform: none; filter: none; }

/* ---------- the film, on the page ---------- */
.film-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 1.5rem; background: #050506;
  border: 1px solid rgb(var(--fg-rgb) / .12);
  box-shadow: 0 40px 100px -50px rgb(var(--fg-rgb) / .35);
}
.film-frame iframe, .film-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; background: #050506; }
.film-poster {
  appearance: none; position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; cursor: pointer; color: #f4f4f5; font: inherit;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(120% 95% at 68% 48%, #111113 0%, #0a0a0b 38%, #050506 72%);
  background-size: cover; background-position: center;
}
.film-poster.has-still { background-blend-mode: normal; }

/* ---------- the film gallery: additional short films ---------- */
.film-gallery { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .film-gallery { grid-template-columns: repeat(2, 1fr); } }
.film-gallery .film-frame { border-radius: 1.125rem; }
.film-gallery .film-title { font-size: clamp(18px, 2.2vw, 24px); }
.film-gallery .film-play { width: 52px; height: 52px; }
.film-poster:focus-visible { outline: 2px solid rgb(244 244 245 / .7); outline-offset: -6px; }
.film-orb {
  position: absolute; left: 50%; top: 46%; width: 34%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(244 244 245 / .5) 0%, rgb(244 244 245 / .16) 34%, transparent 68%);
  filter: blur(6px); animation: film-breathe 6s ease-in-out infinite;
}
@keyframes film-breathe { 50% { transform: scale(1.09); opacity: .78; } }
.film-poster-body { position: relative; display: grid; gap: 14px; justify-items: center; padding: 24px; text-shadow: none; }
.film-play {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: #f4f4f5; color: #050506; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.film-poster:hover .film-play { transform: scale(1.06); box-shadow: 0 14px 44px -12px rgb(244 244 245 / .5); }
.film-title { font-weight: 200; font-size: clamp(22px, 3.2vw, 40px); letter-spacing: -.04em; line-height: 1; }
.film-title span { color: rgb(244 244 245 / .4); }
.film-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: rgb(244 244 245 / .45);
}

/* ---------- nav: room for the Film link ---------- */
#site-nav a, #site-nav button { white-space: nowrap; }
@media (min-width: 1024px) {
  #nav-menu { gap: 1.25rem; margin-inline: 1rem; }
}
@media (min-width: 1440px) {
  #nav-menu { gap: 1.5rem; margin-inline: 1.5rem; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  #site-nav a.btn-ghost[href="#contact"] { display: none; }   /* "Say hello" lives at the foot of the page */
}

/* ---------- sub-page header (docs, journey, pilot): room on narrow screens ---------- */
@media (max-width: 480px) {
  .sub-nav a[href="../index.html"] { display: none; }
  .sub-nav .btn-ghost { padding-left: .75rem; padding-right: .75rem; font-size: 11px; }
}

/* ---------- numbered steps: install walkthroughs ---------- */
.step-list { counter-reset: step; display: grid; gap: 26px; }
.step-list > li { position: relative; padding-left: 46px; }
.step-list > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgb(var(--fg-rgb) / .22);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; color: rgb(var(--fg-rgb) / .7);
}
.step-list > li h4 { font-size: 15px; font-weight: 400; color: rgb(var(--fg-rgb) / 1); margin: 0 0 5px; }
.step-list > li p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: rgb(var(--fg-rgb) / .62); margin: 0; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { filter: none !important; }
  .words .w { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .film-orb { animation: none; }
}