/* ============================================================
   Magic Frame Production — styles
   ============================================================ */

:root {
  --purple-light: #c79bf0;
  --purple: #9a55d6;
  --purple-deep: #6a2d9e;
  --purple-glow: rgba(154, 85, 214, 0.55);

  --bg-0: #060409;
  --bg-1: #0c0814;
  --bg-2: #130c20;

  --text: #f3eefb;
  --text-soft: #c3b7d6;
  --text-dim: #7d7193;
  --line: rgba(199, 155, 240, 0.14);

  --maxw: 1320px;
  --topbar-h: 48px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: 'Antonio', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; }

body {
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}

@media (hover: none) { body { cursor: auto; } }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--purple); color: #fff; }

/* ---------- shared section scaffolding ---------- */
section { position: relative; }

.section-head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
  margin-bottom: clamp(40px, 6vw, 80px);
}
.section-head__index {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--purple-light);
  margin-bottom: 18px;
  opacity: 0.85;
}
/* oversized echo of the section title, sitting behind it (replaces the 0X — index).
   Keep the ghost text identical to the title — it reads as a shadow of the words,
   not as a second, unreadable label. */
.section-head--ghost { position: relative; }
.section-head__ghost {
  position: absolute; z-index: 0;
  left: clamp(20px, 5vw, 64px); bottom: 0;
  transform: translateY(16%);
  pointer-events: none; user-select: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(3.6rem, 12vw, 11.5rem); line-height: 0.78; letter-spacing: 0.01em;
  color: rgba(199, 155, 240, 0.055);
}
/* ghost nested in an already-inset wrapper (e.g. .section-head__titles) — no padding to clear */
.section-head__ghost--flush { left: 0; }
.section-head--ghost .section-title { position: relative; z-index: 1; }

/* small lead-in above a big section title — completes into it as one sentence */
.section-title__lead {
  display: block;
  font-family: var(--font-body); font-weight: 400; text-transform: none;
  font-size: clamp(0.95rem, 1.7vw, 1.35rem);
  letter-spacing: 0.01em; line-height: 1.35;
  color: var(--text-dim);
  margin-bottom: clamp(8px, 1vw, 14px);
}
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* The black backdrop is two halves, so it can part like a film gate on exit.
   Each carries its share of the purple glow, centred on the seam behind the mark. */
.preloader__panel { position: absolute; left: 0; width: 100%; height: 50.5%; background: var(--bg-0); }
.preloader__panel--top {
  top: 0;
  background-image: radial-gradient(70% 130% at 50% 100%, rgba(154,85,214,0.16), transparent 72%);
}
.preloader__panel--bottom {
  bottom: 0;
  background-image: radial-gradient(70% 130% at 50% 0%, rgba(154,85,214,0.16), transparent 72%);
}
.preloader__inner { position: relative; z-index: 1; text-align: center; width: min(420px, 78vw); }

/* The mark is the real logo, wiped in left-to-right like a grade being applied.
   Entrance is pure CSS so it plays even if the GSAP CDN is slow or blocked. */
/* The artwork sits at y 65..244 of the 800x300 PNG, so the box carries ~18% empty
   space under the mark — hence the small margin: the visual gap lands near 30px. */
.preloader__logo {
  position: relative; width: min(340px, 66vw); margin: 0 auto 8px;
  animation: pre-wipe 1.1s var(--ease) both;
}
.preloader__logo img { width: 100%; height: auto; }
@keyframes pre-wipe {
  from { clip-path: inset(0 100% 0 0); opacity: 0.25; }
  to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}
/* Metallic sweep, masked by the logo artwork so the light rides the letterforms
   themselves — echoes the silver gradient baked into the mark. */
.preloader__shine {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: url(../assets/logo.png); mask-image: url(../assets/logo.png);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  mix-blend-mode: screen;
}
.preloader__shine i {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.92), transparent);
  filter: blur(2px);
  animation: pre-shine 2.8s 0.9s var(--ease) infinite;
}
@keyframes pre-shine {
  0%   { transform: translateX(-160%); opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(320%);  opacity: 0; }
}
/* Progress reads as the logo's own hairline rule: grows from the centre out,
   tapered at both ends like the divider in the mark. */
.preloader__bar { height: 1px; width: min(340px, 66vw); margin: 0 auto; background: rgba(255,255,255,0.10); }
.preloader__bar span {
  display: block; height: 100%; width: 0%; margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--purple-light) 22%, #fff 50%, var(--purple-light) 78%, transparent);
  box-shadow: 0 0 12px -2px var(--purple-glow);
  transition: width 0.18s linear;
}
.preloader__count {
  margin-top: 16px;
  font-size: 0.7rem; letter-spacing: 0.34em; text-indent: 0.34em;
  color: var(--text-dim); font-variant-numeric: tabular-nums;
}
body.loaded .preloader { pointer-events: none; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor, .cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 10000;
  pointer-events: none; border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,0.7);
  transition: width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.cursor-dot { width: 5px; height: 5px; background: #fff; }
.cursor.is-hover { width: 70px; height: 70px; background: rgba(255,255,255,0.12); border-color: transparent; }
.cursor.is-open  { width: 84px; height: 84px; background: #fff; border-color: transparent; mix-blend-mode: normal; }
.cursor.is-open::after {
  content: 'IMDb'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: #000;
}
@media (hover: none) { .cursor, .cursor-dot { display: none; } }

/* ============================================================
   NAV
   ============================================================ */
/* ---------- top utility bar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 5vw, 64px);
  background: rgba(6, 4, 9, 0.55); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: transform .45s var(--ease);
}
.topbar.is-hidden { transform: translateY(-100%); }
.topbar__contact { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.topbar__item { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 0.95rem; transition: color .3s var(--ease); }
.topbar__item svg { width: 16px; height: 16px; color: var(--purple-light); }
.topbar__item:hover { color: var(--purple-light); }
.topbar__social { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px); }
.topbar__social a { display: inline-flex; color: #fff; opacity: 0.82; transition: opacity .3s var(--ease), transform .3s var(--ease), color .3s var(--ease); }
.topbar__social a:hover { opacity: 1; color: var(--purple-light); transform: translateY(-2px); }
.topbar__social svg { width: 18px; height: 18px; display: block; }

.nav {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(20px, 5vw, 64px);
  transition: top .45s var(--ease), padding .4s var(--ease), background .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.is-scrolled {
  top: 0;
  padding: 10px clamp(20px, 5vw, 64px);
  background: rgba(8, 5, 14, 0.6);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__logo img { height: 100px; width: auto; transition: height .4s var(--ease); }
.nav.is-scrolled .nav__logo img { height: 70px; }
.nav__links { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); }
.nav__links a {
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--text-soft); position: relative;
}
.nav__links a:not(.nav__cta)::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 1px; background: var(--purple-light);
  transition: width .35s var(--ease);
}
.nav__links a:not(.nav__cta):hover { color: var(--text); }
.nav__links a:not(.nav__cta):hover::after { width: 100%; }
.nav__partner { display: inline-flex; align-items: center; gap: 7px; }
.nav__partner-tag {
  font-size: 0.56rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--purple-light); line-height: 1;
  padding: 3px 7px; border: 1px solid var(--line); border-radius: 100px;
  background: rgba(154,85,214,0.1);
}
.nav__partner::after { display: none; } /* no underline under the partner item */
.nav__cta {
  padding: 10px 22px; border-radius: 100px;
  background: linear-gradient(120deg, var(--purple-deep), var(--purple));
  color: #fff !important; font-weight: 600;
  box-shadow: 0 6px 24px -8px var(--purple-glow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nav__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px var(--purple-glow); }

.nav__burger { display: none; background: none; border: none; cursor: pointer; width: 32px; height: 24px; position: relative; }
.nav__burger span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--text); transition: transform .35s var(--ease), top .35s var(--ease); }
.nav__burger span:nth-child(1) { top: 6px; }
.nav__burger span:nth-child(2) { top: 16px; }
body.menu-open .nav__burger span:nth-child(1) { top: 11px; transform: rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { top: 11px; transform: rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 160px clamp(20px, 5vw, 64px) 90px;
  overflow: hidden;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(154,85,214,0.28), transparent 55%),
    radial-gradient(80% 60% at 50% 120%, rgba(106,45,158,0.30), transparent 60%),
    linear-gradient(180deg, rgba(6,4,9,0.35) 0%, rgba(6,4,9,0.28) 45%, rgba(6,4,9,0.45) 78%, rgba(6,4,9,0.82) 100%);
}
.hero__content { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; }
.hero__eyebrow {
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--purple-light); margin-bottom: clamp(14px, 2vw, 26px);
}
.hero__title { margin: 0 0 clamp(24px, 3vw, 38px); }
.hero__title .line { display: block; overflow: hidden; margin-bottom: -0.14em; }
.hero__big {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 8.5vw, 7rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  padding-bottom: 0.06em; /* room so overflow:hidden doesn't clip glyph bottoms */
  /* gradient + transparency on the largest titles, per brief */
  background: linear-gradient(180deg, #ffffff 0%, #e7d9f7 58%, rgba(206,167,236,0.96) 100%, rgba(154,85,214,0) 165%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transform: translateY(110%);
}
.hero__big--thin { font-weight: 300; letter-spacing: 0.06em; font-size: clamp(1.7rem, 7.4vw, 6rem); }
.hero__lede {
  max-width: 620px; color: var(--text-soft);
  font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.7;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-dim);
}
.hero__scroll i { width: 1px; height: 46px; background: linear-gradient(180deg, var(--purple-light), transparent); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ''; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--text); animation: scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot { 0% { top: -50%; } 100% { top: 100%; } }

.hero__marquee {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  border-top: 1px solid var(--line);
  background: rgba(6,4,9,0.5); backdrop-filter: blur(8px);
  overflow: hidden; padding: 14px 0;
}
.marquee__track {
  display: inline-flex; align-items: center; gap: 26px; white-space: nowrap;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 1rem; color: var(--text-soft);
  will-change: transform;
}
.marquee__track b { color: var(--purple-light); }
@keyframes marqueeScroll { to { transform: translateX(-50%); } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 100px;
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.btn--primary {
  background: linear-gradient(120deg, var(--purple-deep), var(--purple));
  color: #fff; box-shadow: 0 10px 32px -10px var(--purple-glow);
}
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -10px var(--purple-glow); }
.btn--ghost { border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,0.02); }
.btn--ghost:hover { border-color: var(--purple-light); background: rgba(154,85,214,0.1); transform: translateY(-3px); }
.btn--lg { padding: 20px 40px; font-size: clamp(0.95rem, 1.6vw, 1.15rem); }

/* ============================================================
   INTRO STATEMENT (word-by-word reveal)
   ============================================================ */
.statement {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(90px, 14vw, 200px) clamp(20px, 5vw, 64px);
}
.statement__text {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 4.2rem); line-height: 1.18;
  letter-spacing: -0.005em;
}
.statement .word { display: inline-block; color: rgba(243,238,251,0.14); transition: color .4s var(--ease); }

/* ============================================================
   SERVICES
   ============================================================ */
.services { padding: clamp(40px, 6vw, 90px) 0 clamp(60px, 8vw, 120px); }
.services__list { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.service {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: clamp(16px, 4vw, 48px);
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 44px);
  border-top: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.service:last-child { border-bottom: 1px solid var(--line); }
.service::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(154,85,214,0.12), transparent 70%);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.service:hover::before { transform: scaleX(1); }
.service__name {
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(1.8rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -0.005em;
  transition: transform .5s var(--ease), color .5s var(--ease);
}
.service:hover .service__name { transform: translateX(14px); color: #fff; }
.service__desc { color: var(--text-dim); max-width: 560px; margin-top: 10px; font-size: clamp(0.95rem, 1.4vw, 1.1rem); transition: color .5s var(--ease); }
.service:hover .service__desc { color: var(--text-soft); }
.service__icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim); transition: color .5s var(--ease), transform .5s var(--ease);
}
.service__icon svg { position: relative; z-index: 1; width: clamp(38px, 5vw, 52px); height: auto; }
.service:hover .service__icon { color: var(--purple-light); transform: rotate(-6deg) scale(1.05); }
/* Ripple rings radiating off the icon on row hover — same idea as the button
   pulse, staggered into two waves. currentColor makes them pick up the purple
   the icon turns on hover. Max scale is 1.9: any wider and the ring clips on
   .service's overflow:hidden at narrow viewports, where the row padding is 20px. */
.service__icon::before,
.service__icon::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid currentColor;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0; pointer-events: none;
}
.service:hover .service__icon::before { animation: service-ripple 2.4s var(--ease) infinite; }
.service:hover .service__icon::after  { animation: service-ripple 2.4s var(--ease) infinite 1.2s; }
@keyframes service-ripple {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  12%  { opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
}

/* ============================================================
   WORK / PROJECTS
   ============================================================ */
.work { padding: clamp(40px, 6vw, 90px) 0 clamp(60px, 8vw, 120px); }
.work__grid {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(5, 1fr); /* max 5 per row */
  gap: clamp(14px, 1.8vw, 26px);
}
/* "View all projects" / "Back to home" button row under a listing */
.work__more { display: flex; justify-content: center; margin-top: clamp(30px, 4vw, 52px); }
/* phone-only variant of the button (7–10 projects: all fit on desktop, capped on phone) */
.work__more--mobile { display: none; }
/* section head with an action button to the right of the title (/work/ page) */
.section-head--withaction {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 3vw, 40px); flex-wrap: wrap;
}
.section-head--withaction .section-head__titles { min-width: 0; }
.section-head--withaction .section-head__index { margin-bottom: 12px; }
/* keep the action button above the oversized ghost word behind the title */
.section-head--withaction .work__back { position: relative; z-index: 2; }
/* dedicated /work/ page: extra top padding so the header clears the fixed nav */
.work--page { padding-top: clamp(200px, 24vh, 300px); }
.work__sentinel { height: 8px; width: 100%; }
.project {
  position: relative; border-radius: 10px; overflow: hidden;
  background: var(--bg-2); aspect-ratio: 2 / 3;
  box-shadow: 0 18px 50px -24px rgba(0,0,0,0.9);
}
.project__media { position: absolute; inset: 0; }
.project__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease), filter .6s var(--ease);
}
.project:hover .project__media img { transform: scale(1.08); filter: brightness(0.32) saturate(0.7); }

.project__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(18px, 2vw, 26px);
  opacity: 0;
  background: linear-gradient(180deg, rgba(20,8,32,0.2), rgba(8,4,14,0.78));
  transition: opacity .5s var(--ease);
}
.project:hover .project__overlay { opacity: 1; }
.project__meta { transform: translateY(14px); transition: transform .55s var(--ease); }
.project:hover .project__meta { transform: translateY(0); }
.project__year { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--purple-light); }
.project__title {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.05; margin: 8px 0 14px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; text-overflow: ellipsis;
}
.project__rule { display: block; width: 44px; height: 2px; background: var(--purple-light); margin-bottom: 14px; }
.project__info {
  font-size: 0.86rem; color: var(--text-soft); line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4;
  overflow: hidden; text-overflow: ellipsis;
}
.project__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; color: #fff;
  transform: translateY(14px); opacity: 0; transition: transform .55s var(--ease) .05s, opacity .55s var(--ease) .05s;
}
.project:hover .project__cta { transform: translateY(0); opacity: 1; }
.project__cta i { width: 16px; height: 1px; background: currentColor; position: relative; transition: width .3s var(--ease); }
.project__cta i::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.project:hover .project__cta i { width: 26px; }

.work__hint { text-align: center; margin-top: clamp(30px, 4vw, 50px); color: var(--text-dim); font-size: 0.86rem; letter-spacing: 0.02em; }

/* ============================================================
   STUDIO / REEL
   ============================================================ */
.studio { padding: clamp(40px, 6vw, 90px) 0 clamp(70px, 9vw, 130px); }
.studio__reel {
  position: relative; max-width: var(--maxw); margin: 0 auto clamp(40px, 6vw, 80px);
  width: calc(100% - clamp(40px, 10vw, 128px));
  aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 90px -40px rgba(0,0,0,1);
  border: 1px solid var(--line);
}
.studio__reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* showreel facade: poster fills the box; the YouTube iframe is injected on play */
.studio__reel .studio__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.studio__reel .studio__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.studio__play {
  position: absolute; inset: 0; z-index: 2; cursor: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(180deg, rgba(12,8,20,0.35), rgba(12,8,20,0.55));
  border: none; color: #fff;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.95rem;
  transition: opacity .4s var(--ease), background .4s var(--ease);
}
.studio__play svg { width: 64px; height: 64px; padding: 16px; border-radius: 50%; background: linear-gradient(120deg, var(--purple-deep), var(--purple)); box-shadow: 0 12px 40px -10px var(--purple-glow); transition: transform .35s var(--ease); }
.studio__play:hover svg { transform: scale(1.1); }
.studio__reel.is-playing .studio__play { opacity: 0; pointer-events: none; }

.studio__copy {
  max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px);
  display: grid; grid-template-columns: 1fr; gap: clamp(30px, 5vw, 70px); align-items: start;
}
.studio__col p { max-width: 760px; }
.studio__col h3 { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1.05; margin-bottom: 18px; }
.studio__col p { color: var(--text-soft); font-size: clamp(0.98rem, 1.4vw, 1.12rem); max-width: 560px; }
.studio__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; color: var(--purple-light); display: block; }
.stat__label { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-top: 8px; display: block; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { padding: clamp(90px, 14vw, 200px) clamp(20px, 5vw, 64px); text-align: center; overflow: hidden; }
.contact__inner { max-width: 1100px; margin: 0 auto; }
.contact .section-head__index { display: block; margin-bottom: 24px; }
.contact__title { margin-bottom: clamp(26px, 4vw, 40px); }
.contact__title .line { display: block; overflow: hidden; margin-bottom: -0.14em; }
.contact__big {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.4rem, 10.5vw, 8.5rem); line-height: 1.04; letter-spacing: -0.01em;
  padding-bottom: 0.06em; /* room so overflow:hidden doesn't clip glyph bottoms (e.g. the L in FILM) */
  background: linear-gradient(180deg, #ffffff 0%, #e7d9f7 58%, rgba(206,167,236,0.96) 100%, rgba(154,85,214,0) 165%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transform: translateY(110%);
}
.contact__big--thin { font-weight: 300; letter-spacing: 0.05em; }
.contact__lede { color: var(--text-soft); max-width: 540px; margin: 0 auto clamp(30px, 4vw, 44px); font-size: clamp(1rem, 1.5vw, 1.2rem); }
.contact__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 70px) clamp(20px, 5vw, 64px) 36px; max-width: var(--maxw); margin: 0 auto; }
.footer__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.footer__logo { height: 64px; width: auto; }
.footer__nav { display: flex; gap: clamp(18px, 3vw, 36px); }
.footer__nav a { color: var(--text-soft); font-size: 0.92rem; transition: color .3s var(--ease); }
.footer__nav a:hover { color: var(--purple-light); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; color: var(--text-dim); font-size: 0.82rem; }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.to-top {
  position: fixed; right: clamp(18px, 3vw, 34px); bottom: clamp(18px, 3vw, 34px); z-index: 900;
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, var(--purple-deep), var(--purple));
  box-shadow: 0 10px 30px -8px var(--purple-glow);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.9);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s var(--ease), box-shadow .3s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.to-top:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 16px 38px -8px var(--purple-glow); }
.to-top svg { width: 22px; height: 22px; }
@media (hover: none) { .to-top { cursor: auto; } }
@media (max-width: 760px) {
  .to-top {
    width: 48px; height: 48px; right: 16px; z-index: 1002;
    bottom: calc(116px + env(safe-area-inset-bottom, 0px)); /* sit clearly above the mobile browser bottom bar */
  }
}

/* ============================================================
   REVEAL HELPERS
   ============================================================ */
.reveal-up { opacity: 0; transform: translateY(30px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .work__grid { grid-template-columns: repeat(3, 1fr); }
  .studio__copy { grid-template-columns: 1fr; gap: 34px; }
  .nav__logo img { height: 72px; }
  .nav.is-scrolled .nav__logo img { height: 54px; }
  .hero { padding-top: 130px; }
  .footer__logo { height: 52px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  html { scroll-padding-top: 86px; }

  /* nav + slide-in menu */
  .nav { padding: 12px 20px; }
  .nav.is-scrolled { padding: 10px 20px; }
  .nav__logo img { height: 52px; }
  .nav.is-scrolled .nav__logo img { height: 44px; }
  .nav__links {
    position: fixed; inset: 0; z-index: 999;
    flex-direction: column; justify-content: center; gap: 26px;
    background: rgba(8,5,14,0.97); backdrop-filter: blur(20px);
    transform: translateX(100%); transition: transform .5s var(--ease);
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .nav__links { transform: translateX(0); }
  /* top bar: drop the long email, keep phone + socials; hide while the menu is open */
  .topbar { padding: 0 16px; }
  .topbar__item--email { display: none; }
  .topbar__item span { font-size: 0.86rem; }
  .topbar__social { gap: 14px; }
  body.menu-open .topbar { transform: translateY(-100%); }
  /* backdrop-filter on a scrolled nav makes it a containing block for the fixed menu,
     trapping it in the bar — drop it while the menu is open so it fills the screen */
  body.menu-open .nav,
  body.menu-open .nav.is-scrolled {
    background: transparent; border-bottom-color: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: none; /* remove the filter instantly so the menu isn't trapped mid-transition */
  }
  .nav__links a { font-size: 1.7rem; font-family: var(--font-display); text-transform: uppercase; color: var(--text); }
  .nav__links a:not(.nav__cta)::after { display: none; }
  .nav__links .nav__cta { margin-top: 10px; padding: 13px 30px; font-size: 1rem; }
  .nav__burger { display: block; z-index: 1001; }

  /* hero — content vertically centered; small camera sits in the clear upper-right */
  .hero { justify-content: center; padding: 110px 22px 96px; min-height: 100svh; }
  .hero__title { margin-bottom: 16px; }
  .hero__lede { font-size: 1rem; line-height: 1.5; margin-bottom: 22px; }
  .hero__actions { width: 100%; gap: 12px; }
  .hero__actions .btn { flex: 1 1 44%; justify-content: center; padding: 14px 16px; }
  .hero__scroll { display: none; }

  /* sections */
  .section-title { font-size: clamp(2.4rem, 13vw, 4rem); }
  .statement { padding: clamp(70px,18vw,120px) 24px; }
  .statement__text { font-size: clamp(1.7rem, 7.6vw, 2.6rem); }

  .service { grid-template-columns: 1fr; padding: 26px 14px; }
  .service__icon { display: none; }
  .service__name { font-size: clamp(1.9rem, 9vw, 2.8rem); }
  .service:hover .service__name { transform: none; }
  .service__desc { font-size: 1rem; }

  .work__hint { font-size: 0.82rem; }

  /* phone: show at most 6 projects on the home listing before "View all" */
  .work__grid--home .project:nth-child(n+7) { display: none; }
  .work__more--mobile { display: flex; }

  .studio__reel { width: calc(100% - 40px); border-radius: 12px; }
  .studio__copy { gap: 28px; }
  .studio__stats { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .stat__num { font-size: clamp(2rem, 10vw, 2.8rem); }
  .stat__label { font-size: 0.64rem; }

  .btn--lg { width: 100%; justify-content: center; word-break: break-word; padding: 18px 20px; font-size: 0.95rem; }

  .footer__top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer__nav { flex-wrap: wrap; gap: 16px 22px; }
  .footer__bottom { flex-direction: column; gap: 6px; }
  .footer__logo { height: 46px; }
}

/* ---------- Small phones ---------- */
@media (max-width: 520px) {
  .work__grid { grid-template-columns: repeat(2, 1fr); max-width: 100%; gap: 12px; } /* 2 posters per row on phones */
  .studio__stats { grid-template-columns: 1fr; gap: 16px; text-align: left; }
  .section-head { margin-bottom: clamp(26px, 8vw, 44px); }
}

@media (max-width: 400px) {
  .hero__actions .btn { flex: 1 1 100%; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .hero__big, .contact__big, .reveal-up { transform: none !important; opacity: 1 !important; }
  .preloader__logo { clip-path: none !important; opacity: 1 !important; }
  .preloader__shine { display: none; }
}

/* ============================================================
   V2 overrides — merged in when V2 became the main version
   (was css/styles-v2.css). Loaded last, so these rules win.
   ============================================================ */
/* ============================================================
   Magic Frame Production — V2 overrides
   Goal: introduce WHITE as a balancing secondary colour so the
   page reads as a purple + white duotone on the dark base.

   Division of labour:
     • WHITE  → structure & clarity (hairlines, indices, rules,
                primary action, hero camera, scroll cue)
     • PURPLE → brand & energy (glow, gradients, hovers, accents)

   Loaded AFTER styles.css, so these rules win on equal specificity.
   ============================================================ */

:root {
  --white: #ffffff;
  --white-soft: rgba(255, 255, 255, 0.88);

  /* structural hairlines move from purple-tint to a neutral white tint */
  --line: rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.28);

  /* lift dim text so body copy clears WCAG AA (4.5:1) on the dark bg */
  --text-dim: #a99cc0;

  --white-glow: rgba(255, 255, 255, 0.30);
}

/* ---------- accessibility: visible keyboard focus ----------
   The site hides the cursor, so a clear focus ring is essential
   for keyboard users. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[data-cursor]:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 6px;
}
.nav__cta:focus-visible,
.btn--primary:focus-visible {
  outline-color: var(--purple-light);
}

/* skip link for keyboard / screen-reader users */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 10001;
  padding: 10px 18px; border-radius: 8px;
  background: #fff; color: #0c0814; font-weight: 600;
  transform: translateY(-160%);
  transition: transform .3s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- section indices → white (structure) ---------- */
.section-head__index { color: var(--white); opacity: 0.92; }

/* ---------- hero ---------- */
/* keep a soft purple ambiance, but let the (now white) camera read as
   the focal subject by easing the purple wash slightly */
.hero__overlay {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(154, 85, 214, 0.22), transparent 55%),
    radial-gradient(70% 55% at 72% 38%, rgba(255, 255, 255, 0.06), transparent 60%),
    radial-gradient(80% 60% at 50% 120%, rgba(106, 45, 158, 0.26), transparent 60%),
    linear-gradient(180deg, rgba(6, 4, 9, 0.34) 0%, rgba(6, 4, 9, 0.26) 45%, rgba(6, 4, 9, 0.46) 78%, rgba(6, 4, 9, 0.84) 100%);
}
.hero__scroll i { background: linear-gradient(180deg, var(--white), transparent); }
.marquee__track { color: var(--white-soft); }
/* bullets stay purple — a steady brand pulse along the white text */

/* animated sheen on the main hero title: white → light purple → white,
   sweeping horizontally on a loop. Overrides the static vertical gradient
   from styles.css. The entrance transform (GSAP) is untouched — this only
   drives background-position. */
.hero__big {
  background: linear-gradient(100deg,
    #ffffff 0%,
    #c79bf0 25%,
    #ffffff 50%,
    #c79bf0 75%,
    #ffffff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: heroSheen 7s linear infinite;
}
@keyframes heroSheen {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

/* ---------- buttons: white primary, purple kept for brand ---------- */
.btn--primary {
  background: var(--white);
  color: #0c0814;
  box-shadow: 0 10px 32px -12px var(--white-glow);
}
.btn--primary:hover {
  background: #f3eefb;
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -12px rgba(255, 255, 255, 0.42);
}
.btn--ghost:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}
/* nav CTA stays the purple brand chip — the anchor that keeps the
   identity present amid the new white structure */

/* ---------- statement: keep purple emphasis on the closing line ---------- */
/* (words still light up to --text in JS; nothing to override) */

/* ---------- services ---------- */
.service:hover .service__name { color: var(--white); }
/* icon keeps purple-light on hover (brand energy) */

/* ---------- work / projects ---------- */
.project__rule { background: var(--white); }
.project__cta { color: var(--white); }
/* project year stays purple-light — per-card balance: white rule + purple year */

/* ---------- studio ---------- */
.studio__col h3 { color: var(--white); }

/* ---------- contact ---------- */
/* big title already runs a white→purple gradient; leave it.
   primary (email) button inherits the white treatment above. */

/* ---------- footer ---------- */
.footer__nav a:hover { color: var(--white); }

/* ============================================================
   LEGAL / TEXT PAGES (Terms of Use, etc.)
   ============================================================ */
.legal { padding: clamp(150px, 18vh, 230px) 0 clamp(80px, 10vw, 140px); }
.legal__body {
  max-width: 820px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}
.legal__body p {
  color: var(--text-soft);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.75;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.legal__body p:last-child { margin-bottom: 0; }
.legal__updated {
  display: block;
  font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.legal__lead { color: var(--text-soft); }
.legal__body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--white);
  margin: clamp(38px, 5vw, 58px) 0 clamp(14px, 1.8vw, 20px);
}
.legal__body h3 .legal__num { color: var(--purple-light); margin-right: 0.5em; }
.legal__body ul {
  list-style: none;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  padding: 0;
}
.legal__body li {
  position: relative;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  padding-left: 1.4em;
  margin-bottom: 10px;
}
.legal__body li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple-light);
}
.legal__body a { color: var(--purple-light); text-decoration: underline; text-underline-offset: 3px; }
.legal__body a:hover { color: var(--white); }

/* ---------- reduced-motion: the white camera canvas won't render,
   so give the hero a faint white vignette instead of an empty void --- */
@media (prefers-reduced-motion: reduce) {
  .hero__overlay {
    background:
      radial-gradient(60% 50% at 70% 40%, rgba(255, 255, 255, 0.10), transparent 60%),
      radial-gradient(120% 80% at 50% -10%, rgba(154, 85, 214, 0.22), transparent 55%),
      linear-gradient(180deg, rgba(6, 4, 9, 0.4), rgba(6, 4, 9, 0.86));
  }
}

/* ============================================================
   BUTTONS — hover ripple + pulse
   ============================================================ */
/* Two layers fire on hover:
     1. a ripple spreading from the exact point the cursor entered — the
        <span> is injected by js/app.js and removes itself on animationend;
     2. a ring radiating outward and fading, looping while hovered. It rides
        box-shadow, which an element's own overflow:hidden does not clip. */
.btn, .nav__cta { position: relative; overflow: hidden; isolation: isolate; }

.btn__ripple {
  position: absolute; z-index: -1;          /* above the pill's fill, under its label */
  border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle closest-side, var(--ripple, rgba(255,255,255,0.4)), transparent);
  animation: btn-ripple 0.7s var(--ease) forwards;
}
@keyframes btn-ripple {
  from { transform: translate(-50%, -50%) scale(0); opacity: 0.95; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
.btn--primary { --ripple: rgba(154, 85, 214, 0.42); }  /* purple ink on the white pill */
.btn--ghost   { --ripple: rgba(199, 155, 240, 0.34); }
.nav__cta     { --ripple: rgba(255, 255, 255, 0.34); }

/* Each pulse keyframe carries that variant's resting glow, so animating
   box-shadow doesn't drop the shadow the :hover rules already set. */
.btn--primary:hover { animation: btn-pulse-light 1.9s var(--ease) infinite; }
@keyframes btn-pulse-light {
  0%   { box-shadow: 0 18px 44px -12px rgba(255,255,255,0.42), 0 0 0 0    rgba(255,255,255,0.30); }
  70%  { box-shadow: 0 18px 44px -12px rgba(255,255,255,0.42), 0 0 0 15px rgba(255,255,255,0); }
  100% { box-shadow: 0 18px 44px -12px rgba(255,255,255,0.42), 0 0 0 0    rgba(255,255,255,0); }
}
.btn--ghost:hover { animation: btn-pulse-purple 1.9s var(--ease) infinite; }
@keyframes btn-pulse-purple {
  0%   { box-shadow: 0 0 0 0    rgba(199,155,240,0.28); }
  70%  { box-shadow: 0 0 0 15px rgba(199,155,240,0); }
  100% { box-shadow: 0 0 0 0    rgba(199,155,240,0); }
}
.nav__cta:hover { animation: btn-pulse-brand 1.9s var(--ease) infinite; }
@keyframes btn-pulse-brand {
  0%   { box-shadow: 0 12px 30px -8px var(--purple-glow), 0 0 0 0    rgba(199,155,240,0.34); }
  70%  { box-shadow: 0 12px 30px -8px var(--purple-glow), 0 0 0 13px rgba(199,155,240,0); }
  100% { box-shadow: 0 12px 30px -8px var(--purple-glow), 0 0 0 0    rgba(199,155,240,0); }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .nav__cta:hover { animation: none; }
  .btn__ripple { display: none; }
  .service:hover .service__icon::before,
  .service:hover .service__icon::after { animation: none; }
}