/* Atrium Creative — shared styles */

@font-face {
  font-family: "Ragick";
  src: url("../fonts/ragick.otf") format("opentype");
  font-display: swap;
}

:root {
  /* The four colours from the logo sheet */
  --bordo: #6d141f;
  --green: #006d76;
  --cream: #f5dabf;
  --walnut: #61423d;

  --bg: var(--walnut);       /* page ground: swapped at random on hover */
  --fg: var(--cream);        /* text on that ground */
  --logo: #ffffff;           /* logo stroke */

  --font: "Ragick", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --edge: clamp(16px, 2.4vw, 32px);
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  --swap: 0.9s;
}

/* Text flips to bordo when the ground is cream, so it stays legible. */
html[data-tone="cream"], body[data-tone="cream"] { --fg: var(--bordo); --logo: var(--bordo); }

/* Home: Datastar sets body[data-tone] on every change of slide. */
body[data-tone="bordo"] { --bg: var(--bordo); }
body[data-tone="green"] { --bg: var(--green); }
body[data-tone="cream"] { --bg: var(--cream); }
body[data-tone="walnut"] { --bg: var(--walnut); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.6s ease, color 0.6s ease;
}

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
img, video { display: block; max-width: 100%; }
/* Films are ambient loops: never show the native play overlay (iOS shows one when
   Low Power Mode blocks autoplay; the poster frame stays visible instead). */
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls { display: none !important; }

/* ---------- Logo (outline only, no background) ---------- */
.logo {
  position: fixed; top: var(--edge); right: var(--edge); z-index: 20;
  width: clamp(34px, 3.4vw, 46px);
  color: var(--logo);
  transition: color 0.6s ease;
}
/* Opacity lives on the svg, not .logo: opacity on .logo would cut its blur panel off from the page behind */
.logo svg { width: 100%; height: auto; overflow: visible; opacity: 0.9; transition: opacity 0.3s ease; }
.logo:hover svg { opacity: 1; }
.logo path {
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linejoin: miter; vector-effect: non-scaling-stroke;
}

/* ---------- Small type ---------- */
.small { font-size: 13px; letter-spacing: 0.01em; }
.dim { opacity: 0.55; }
.label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }

/* ---------- HOME: fixed, no scroll ---------- */
.home { height: 100vh; height: 100dvh; overflow: hidden; }

.stage { position: fixed; overflow: hidden; }

.slide {
  position: absolute; inset: 0; margin: 0;
  background: var(--slide-bg, var(--bordo));
  transform: translateX(101%);
  /* once covered by the next slide, jump back off-stage without animating */
  transition: transform 0s linear var(--swap);
  z-index: 0;
}
.slide.prev { transform: none; transition: none; z-index: 1; }
.slide.on   { transform: none; transition: transform var(--swap) var(--ease); z-index: 2; }

.slide picture { display: contents; }
.slide img, .slide > video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.5s ease 0.35s;
}
.slide.on img, .slide.on > video, .slide.prev img, .slide.prev > video { opacity: 1; }
.slide.on img, .slide.on > video { animation: settle calc(var(--swap) * 2.4) var(--ease) both; }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }

.menu {
  position: fixed; bottom: var(--edge); z-index: 10;
  margin: 0; padding: 0; list-style: none;
}
.menu.projects { left: var(--edge); }
.menu.pages { right: var(--edge); text-align: right; }
.menu li + li { margin-top: 2px; }
.menu a { display: inline-flex; gap: 0.9em; transition: opacity 0.25s ease; }
.menu .meta { opacity: 0.5; }
/* Hovering one option quiets the others; nothing moves */
.menus-hot .menu a { opacity: 0.45; }
.menus-hot .menu a.hot { opacity: 1; }

.brand {
  position: fixed; top: var(--edge); left: var(--edge); z-index: 10;
}

/* Text that floats over imagery sits on a softly blurred rounded panel so it reads over
   any frame: the home overlays, and the fixed logo, which scrolls over the carousels on
   every page. The panel is a pseudo-element bleeding past the text, so nothing shifts.
   The fixed parents' z-index keeps the z-index:-1 panel above the media, under the text. */
.home .brand::before,
.logo::before,
.home .menu::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -10px -12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 22%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  transition: background-color 0.6s ease;
}
.logo::before { inset: -12px; }
.home .brand::before, .home .logo::before, .home .menu::before {
  background: rgba(0, 0, 0, 0.14); /* full bleed: neutral dark tint keeps white type legible */
}

/* ---------- Clickable feedback (js/interact.js sets --hl / --hl-ink) ----------
   Hover: a fill in one of the four Atrium colours wipes in behind the link and the link
   nudges toward it. Click: the fill swaps to that colour's complementary pair with a
   squash-and-pop, then the page navigates. */
:where(a.fx) { position: relative; }
a.fx { isolation: isolate; transition: color 0.25s ease, opacity 0.25s ease, transform 0.4s var(--ease); }
a.fx::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: var(--fx-inset, -3px -8px);
  border-radius: var(--fx-radius, 7px);
  background: var(--hl, transparent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.4s var(--ease), background-color 0.2s ease;
}
/* Fill colour by name (home menu: Datastar sets data-fx; interact.js sets these inline) */
a.fx[data-fx="bordo"] { --hl: var(--bordo); --hl-ink: var(--cream); }
a.fx[data-fx="green"] { --hl: var(--green); --hl-ink: var(--cream); }
a.fx[data-fx="walnut"] { --hl: var(--walnut); --hl-ink: var(--cream); }
a.fx[data-fx="cream"] { --hl: var(--cream); --hl-ink: var(--bordo); }
a.fx.fx-on { color: var(--hl-ink) !important; opacity: 1 !important; transform: translateX(3px); }
a.fx.fx-on::after { transform: scaleX(1); }
a.fx.fx-on .meta, a.fx.fx-on .dim { opacity: 0.75; }

/* Stacked menu rows are tight: keep the fill from overlapping the next row */
.menu a.fx { --fx-inset: -1px -7px; --fx-radius: 5px; }

/* Right-aligned menu wipes in from the right and nudges left, toward the screen */
.menu.pages a.fx::after { transform-origin: right center; }
.menu.pages a.fx.fx-on { transform: translateX(-3px); }

/* The logo fills its own rounded panel and gives a small turn */
.logo.fx { --fx-inset: -12px; --fx-radius: 12px; }
.logo.fx.fx-on { transform: rotate(-8deg) scale(1.06); }

/* Big text links (contact, chooser) get a roomier fill */
.contact-lines a.fx { --fx-inset: -2px -12px; --fx-radius: 12px; border-bottom-color: transparent !important; }

a.fx.fx-go { animation: fx-go 0.46s var(--ease) both; }
a.fx.fx-go::after { animation: fx-wipe 0.46s var(--ease) both; }
.logo.fx.fx-go { animation: fx-go-logo 0.46s var(--ease) both; }
@keyframes fx-go {
  0%   { transform: translateX(3px) scale(1); }
  35%  { transform: translateX(0) scale(0.9); }
  70%  { transform: translateX(0) scale(1.1); }
  100% { transform: translateX(0) scale(1); }
}
@keyframes fx-go-logo {
  0%   { transform: rotate(-8deg) scale(1.06); }
  35%  { transform: rotate(10deg) scale(0.88); }
  70%  { transform: rotate(-4deg) scale(1.14); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes fx-wipe {
  0%   { transform: scale(1, 1); }
  35%  { transform: scale(1.18, 1.35); }
  100% { transform: scale(1, 1); }
}

/* Full bleed: media fills the screen, type sits on top */
.home .stage { inset: 0; }
.home .stage::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.42), rgba(0,0,0,0) 32%),
              linear-gradient(to bottom, rgba(0,0,0,0.22), rgba(0,0,0,0) 18%);
}
.home { --fg: #fff; --logo: #fff; }

@media (max-width: 700px) {
  .menu .meta { display: none; }
}

/* ---------- INNER PAGES: simple, scroll is fine ---------- */
.page { min-height: 100vh; padding: var(--edge); padding-bottom: calc(var(--edge) * 3); }
.page-nav { display: flex; flex-wrap: wrap; gap: 0.5em 1.4em; align-items: baseline; }
.page-nav a { opacity: 0.6; transition: opacity 0.2s; }
.page-nav a:hover, .page-nav a[aria-current] { opacity: 1; }
.page-nav .home-link { opacity: 1; margin-right: 0.6em; }

.page h1 {
  font-size: clamp(30px, 5vw, 64px); line-height: 0.95; font-weight: 400;
  margin: clamp(48px, 12vh, 140px) 0 0.3em;
}
.page h2 { font-size: clamp(20px, 2.4vw, 30px); line-height: 1; font-weight: 400; margin: 0 0 0.35em; }
.intro { max-width: 46ch; font-size: 15px; line-height: 1.45; margin: 0 0 2em; }

.section { margin-top: clamp(56px, 10vh, 110px); }
.section-head {
  display: grid; grid-template-columns: 1fr auto; gap: 1em; align-items: end;
  margin-bottom: 14px;
}
.section-head p { margin: 0; max-width: 52ch; }
.arrow-link { white-space: nowrap; border-bottom: 1px solid currentColor; padding-bottom: 1px; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin: 2.4em 0 0; max-width: 760px; }
.facts dt { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-bottom: 4px; }
.facts dd { margin: 0; font-size: 15px; }

/* ---------- Carousel: equal-height frames, steps one frame at a time ---------- */
.carousel {
  --h: clamp(260px, 52vh, 560px);
  position: relative; overflow: hidden;
  margin-inline: calc(var(--edge) * -1);
  cursor: e-resize;
}
.carousel-track { display: flex; gap: 8px; width: max-content; will-change: transform; }
.carousel-track > * { height: var(--h); width: auto; flex: none; object-fit: cover; background: rgba(0,0,0,0.12); }
.carousel-track > picture { display: block; }
.carousel-track > picture > img { height: 100%; width: auto; max-width: none; }
.carousel-track > video { aspect-ratio: 4 / 5; }
.carousel.short { --h: clamp(200px, 34vh, 380px); }

/* Films grid on the postcards page */
.films { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-inline: calc(var(--edge) * -1); }
.films figure { margin: 0; }
.films video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: rgba(0,0,0,0.15); }
.films figcaption { padding: 8px var(--edge) 0; display: flex; justify-content: space-between; }
@media (max-width: 700px) { .films { grid-template-columns: 1fr; } }

/* Team grid: 4:5 portraits, name and role on a blurred panel over the photo */
.crew { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-inline: calc(var(--edge) * -1); }
.crew-card { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: rgba(0,0,0,0.15); }
.crew-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform 1.2s var(--ease); }
.crew-card:hover img { transform: scale(1.04); }
.crew-card figcaption {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; border-radius: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
}
.crew-name { font-size: 15px; line-height: 1.1; }
.crew-role { font-size: 11px; opacity: 0.8; }
@media (max-width: 700px) { .crew { grid-template-columns: repeat(2, 1fr); } }

/* Team cards open each member's page; the fill shows on the caption panel */
.crew-link { display: block; }
.crew-link.fx::after { display: none; }
.crew-link.fx.fx-on, .crew-link.fx.fx-go { transform: none; animation: none; }
.crew-link figcaption { transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--ease); }
.crew-link.fx-on figcaption { background: var(--hl); color: var(--hl-ink); transform: translateX(3px); }
.crew-link.fx-go figcaption { animation: fx-go 0.46s var(--ease) both; }
.crew-link.fx-on img { transform: scale(1.04); }

/* Crew member page */
.member {
  display: grid; grid-template-columns: minmax(0, 42vw) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px);
  align-items: end; margin-top: clamp(40px, 9vh, 110px);
}
.member-photo { margin-inline-start: calc(var(--edge) * -1); aspect-ratio: 4 / 5; overflow: hidden; background: rgba(0,0,0,0.15); }
.member-photo picture { display: contents; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.member-text { font-size: 15px; line-height: 1.45; max-width: 46ch; }
.member-text h1 { margin-top: 0.15em; }
.member-text p { margin: 0 0 0.8em; }
.member .facts { grid-template-columns: 1fr; gap: 14px; margin-top: 1.8em; }
.facts dd a { border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.member-nav {
  display: flex; justify-content: space-between; gap: 1em;
  margin-top: clamp(48px, 9vh, 100px); padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--fg) 25%, transparent);
}
@media (max-width: 700px) {
  .member { grid-template-columns: 1fr; }
  .member-photo { margin-inline: calc(var(--edge) * -1); }
}

/* Services: one row per service, media beside the description */
.services { margin-top: clamp(24px, 5vh, 56px); }
.service {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px);
  align-items: end; padding: clamp(24px, 5vh, 56px) 0;
  border-top: 1px solid color-mix(in srgb, var(--fg) 25%, transparent);
  scroll-margin-top: var(--edge);
}
.service-media picture { display: contents; }
.service-media img, .service-media video {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: rgba(0,0,0,0.15);
}
.service-text { max-width: 46ch; font-size: 15px; line-height: 1.45; }
.service-text h2 { font-size: clamp(30px, 4.4vw, 56px); line-height: 0.95; margin: 0.15em 0 0.4em; }
.service-text p { margin: 0 0 1em; }
.tags { list-style: none; margin: 0 0 1.4em; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--fg) 35%, transparent); }
@media (max-width: 700px) { .service { grid-template-columns: 1fr; } }

/* Join page */
.roles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2em 0.7em;
  font-size: clamp(22px, 3.4vw, 44px); line-height: 1.15; max-width: 22ch; }
.roles li:not(:last-child)::after { content: " ·"; opacity: 0.4; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 900px; font-size: 15px; line-height: 1.45; }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; } }

.contact-lines { font-size: clamp(22px, 3.4vw, 44px); line-height: 1.15; margin: 0; }
.contact-lines a { border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.contact-lines a:hover { border-bottom-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  :root { --swap: 0.01s; }
  .slide.on img, .slide.on > video { animation: none; }
}