/* ==========================================================================
   Light Frame Games (https://lightframegames.ca) — Official Brand Stylesheet
   Property of Light Frame Games Corporation 2026. All rights reserved.
   ========================================================================== */

/* Custom display font metrics: ascent/descent overrides center the glyphs
   vertically within buttons, labels, and headings. */
@font-face {
  font-family: "Kittens Menu Detail";
  src:
    url("assets/KittensMenuDetail-Regular.woff2") format("woff2"),
    url("assets/KittensMenuDetail-Regular.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  ascent-override: 107%;
  descent-override: 51%;
}

/* Light Frame Open Compact Bold: the studio's custom display face, used for
   the studio name "Light Frame Games" and "LFG" (see .lfg-name). */
@font-face {
  font-family: "Light Frame Open Compact";
  src:
    url("assets/LightFrameOpenCompact-Bold.woff2") format("woff2"),
    url("assets/LightFrameOpenCompact-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 95%;
  descent-override: 23%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Kittens Menu Clean";
  src: url("assets/KittensMenuClean-Regular.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 28%;
}

:root {
  /* sRGB Brand Palette */
  --color-black: #0B0B0F;   /* Primary dark background and text */
  --color-cream: #F5F0E6;   /* Warm document and editorial ground */
  --color-white: #FFFFFF;   /* High contrast text and clean space */
  --color-purple: #7C3AED;  /* Primary accent and digital actions */
  --color-gold: #D4AF37;    /* Logo material cue and small accents */
  --color-maroon: #35126E;  /* Secondary dark purple accent */

  /* Supporting Neutral Borders & Surfaces */
  --surface-dark-elevated: #121218;
  --border-on-dark: rgba(245, 240, 230, 0.14);
  --text-muted-on-dark: #C8C3B8;

  /* Official Web Font Stacks */
  --font-heading: "Space Grotesk", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-game-title: "Kittens Menu Detail", "Space Grotesk", sans-serif;
  --font-game-menu: "Kittens Menu Clean", "Space Grotesk", sans-serif;
  --font-brand: "Light Frame Open Compact", "Space Grotesk", sans-serif;

  /* Layout Constants */
  --container-max: 1160px;
  --nav-height: 44px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --transition: 0.2s ease;

  /* Silver Finish (top bar): beveled metal, bright on top and darker through the
     middle, picking up a light purple reflection along its lower edge, as if the
     glowing cube on the home page were shining up onto it. The darkest stop
     (#94949C) is still 6.6:1 on the bar's black. */
  --silver-metal: linear-gradient(180deg, #F6F6F8 0%, #DCDCE1 28%, #94949C 50%, #C5C4CD 64%, #CBBDF6 80%, #B8A5F6 100%);
  --silver-sheen: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 58%);
  /* The bar's bottom rod: steel banding with a soft lavender reflection in the
     middle (above where the cube sits), and a narrower white sheen */
  --steel-line: linear-gradient(90deg, #4E4E56 0%, #8E8E97 14%, #62626B 28%, #A79FC6 42%, #CFC4F8 50%, #A79FC6 58%, #62626B 72%, #8E8E97 86%, #4E4E56 100%);
  --line-sheen: linear-gradient(105deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 55%);
  --sheen-cycle: 7s;   /* one glint sweep across the bar per cycle */
  --sheen-travel: 1.4s; /* time for the glint to travel from the left edge to the right */

  /* Cursor-lit text (see "Cursor-Lit Text"): how dark text is outside the light
     (share of its own colour kept, the rest black) and how far the light reaches.
     75% = text stays readable and the light only lifts it a little. */
  --text-dim: 75%;
  --text-light-radius: 420px;

  /* Hexagonal Repeating Logo Tile Settings (Exact 15:26 ratio matching 480x832 tile) */
  --hex-tile-size: 180px 312px;
  --hex-opacity-dark: 0.042;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  /* script.js keeps the clicked section line in place itself when a section above
     it closes; the browser's own scroll anchoring would double that correction */
  overflow-anchor: none;
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
}

/* Headings: Space Grotesk 600 (or 700 for display headlines) */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

/* Brand rule: the name is always written "Light Frame Games" (title case, as typed;
   no text-transform), and its short form "LFG", in Light Frame Open Compact Bold,
   wherever they appear. It keeps
   the colour and size of the text around it; the face has a single Bold weight, so
   synthetic styles are switched off. */
.lfg-name {
  font-family: var(--font-brand);
  font-weight: 700;
  font-style: normal;
  font-synthesis: none;
  font-kerning: normal;
  letter-spacing: normal;
  white-space: nowrap; /* the name never breaks across lines */
}

/* Keyboard focus ring: Gold on Black 9.34:1 */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* ==========================================================================
   Layout & Section Grounds
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

.section {
  padding: 104px 0;
  position: relative;
  overflow: hidden;
}

/* Dark Sections: Vertical #000000 center bar fading outward into #0B0B0F textured hexagonal sides */
.section-black {
  background: linear-gradient(
    90deg,
    var(--color-black) 0%,
    #000000 28%,
    #000000 72%,
    var(--color-black) 100%
  );
  color: var(--color-white);
  border-top: 1px solid var(--border-on-dark);
}

.hero::before,
.section-black::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/hex-tile-white.png");
  background-repeat: repeat;
  background-size: var(--hex-tile-size);
  background-position: center top;
  opacity: var(--hex-opacity-dark);
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.5) 18%,
    transparent 32%,
    transparent 68%,
    rgba(0, 0, 0, 0.5) 82%,
    rgba(0, 0, 0, 1) 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.5) 18%,
    transparent 32%,
    transparent 68%,
    rgba(0, 0, 0, 0.5) 82%,
    rgba(0, 0, 0, 1) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Cursor-lit shine on the hex logo tiles: the mouse is the light source.
   A second copy of the tile (white lines) sits on black; a soft gold light centred
   on the cursor is MULTIPLIED into it, so only the logo lines take the light and
   the black stays black. The layer is then SCREENED onto the page, so it can only
   add light. The light gradient is background-attachment: fixed, so it is placed
   in viewport coordinates (--shine-x/--shine-y, set by script.js on mouse move)
   and lines up across every section; it is parked off-screen until the mouse moves.
   On touch screens a finger drives it instead (see "Finger light" below). The
   shine reaches the centre column too, but at 30% so it never fights the text. */
.hero::after,
.section-black::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  /* The light must fade to OPAQUE black, not transparent: multiplying by a
     transparent colour leaves the white tile untouched, lighting every tile */
  background-image:
    radial-gradient(
      circle 300px at var(--shine-lx, var(--shine-x, -9999px)) var(--shine-ly, var(--shine-y, -9999px)),
      #E6DDC6 0%,
      #7C6A34 22%,
      #211907 50%,
      #000000 75%
    ),
    url("assets/hex-tile-white.png");
  background-attachment: fixed, scroll;
  background-size: auto, var(--hex-tile-size);
  background-repeat: no-repeat, repeat;
  background-position: 0 0, center top;
  background-blend-mode: multiply, normal;
  mix-blend-mode: screen;
  opacity: 0.4;
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.6) 20%,
    rgba(0, 0, 0, 0.3) 34%,
    rgba(0, 0, 0, 0.3) 66%,
    rgba(0, 0, 0, 0.6) 80%,
    rgba(0, 0, 0, 1) 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.6) 20%,
    rgba(0, 0, 0, 0.3) 34%,
    rgba(0, 0, 0, 0.3) 66%,
    rgba(0, 0, 0, 0.6) 80%,
    rgba(0, 0, 0, 1) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   Section Background Photo (About Us)
   A photo behind the section, fading in when the section opens. Layering, bottom
   to top: blurred copy (softens the top and bottom edges) -> sharp copy (masked to
   the middle band) -> the black centre gradient (keeps it behind the text) -> the
   hex logo tiles and cursor shine (the section's ::before/::after) -> content.
   Both copies drift slower than the page: script.js sets --parallax-y. The photo is
   sized from the viewport, not the section, so it doesn't zoom while the section
   animates open.
   ========================================================================== */
.has-photo {
  isolation: isolate; /* lets the photo sit at z-index -1: above the section's own
                         background, below the tiles and shine */
}

/* While the section is open, the logo tiles (::before) and their cursor shine
   (::after, which carries its own copy of the tiles) also fade out through the
   middle, so they only frame the top and bottom edges and leave the photo calm.
   Each keeps its usual side fade; the two masks intersect. (Collapsed, the row
   keeps the same tiles as the other section lines.) */
.js .has-photo.is-open::before,
html:not(.js) .has-photo::before {
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 18%, transparent 32%, transparent 68%, rgba(0, 0, 0, 0.5) 82%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 6%, transparent 26%, transparent 74%, #000 94%, #000 100%);
  mask-image:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 18%, transparent 32%, transparent 68%, rgba(0, 0, 0, 0.5) 82%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 6%, transparent 26%, transparent 74%, #000 94%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.js .has-photo.is-open::after,
html:not(.js) .has-photo::after {
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.3) 34%, rgba(0, 0, 0, 0.3) 66%, rgba(0, 0, 0, 0.6) 80%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 6%, transparent 26%, transparent 74%, #000 94%, #000 100%);
  mask-image:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.3) 34%, rgba(0, 0, 0, 0.3) 66%, rgba(0, 0, 0, 0.6) 80%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 6%, transparent 26%, transparent 74%, #000 94%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.section-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  /* the whole photo fades to black at the section's top and bottom */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

.js .collapsible.is-open .section-photo,
html:not(.js) .section-photo {
  opacity: 1;
}

.section-photo-soft,
.section-photo-sharp {
  position: absolute;
  inset: 0;
}

.section-photo-soft {
  filter: blur(14px);
}

/* the sharp copy only shows through the middle, blending into the blurred edges */
.section-photo-sharp {
  -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 34%, #000 66%, transparent 90%);
  mask-image: linear-gradient(180deg, transparent 10%, #000 34%, #000 66%, transparent 90%);
}

/* 20vh of headroom above and below for the parallax drift (max 18vh each way) */
.section-photo-img {
  position: absolute;
  left: 0;
  top: -20vh;
  width: 100%;
  height: calc(100% + 40vh);
  object-fit: cover;
  object-position: 50% 58%;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

/* the section's black centre gradient laid over the photo, so it stays partly
   obscured: dark behind the text column, more of the photo at the sides (a touch
   more cover on the left, where the text starts) */
.section-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.64) 0%,
    rgba(0, 0, 0, 0.88) 30%,
    rgba(0, 0, 0, 0.88) 70%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

/* On narrow screens the text spans the full width, so there are no clear sides:
   darken the photo more evenly so the text stays easy to read */
@media (max-width: 768px) {
  .section-photo::after {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.82) 50%,
      rgba(0, 0, 0, 0.7) 100%
    );
  }
}

/* ==========================================================================
   Cursor-Lit Text
   Text in the hero and sections sits dark until the cursor spotlight (the same
   --shine-x/--shine-y light that shines on the tiles) passes over it. Each text
   element paints its OWN colour through a radial light fixed to the viewport
   (background-clip: text), full strength near the light and fading to
   --text-dim of that colour, so gold stays gold and grey stays grey.
   Left alone, so they stay readable/usable: the section lines ("01 / About Us"),
   buttons, badges with their own fill, the contact email card (the only way to
   reach the studio), the studio name in the hero headline, the top bar, menu
   and footer.
   Mouse devices only: phones/tablets have no cursor to light with, and
   "increase contrast" users get normal text.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) and (prefers-contrast: no-preference) {
  .js main :is(p, h1, h2, h3, li, label,
    .hero-kicker, .caption-main, .caption-tba,
    .team-member-name, .team-member-loc, .role-dept),
  .js main :is(.game-features, .role-reqs) li::before {
    background-image: radial-gradient(
      circle var(--text-light-radius) at var(--shine-x, -9999px) var(--shine-y, -9999px),
      currentColor 0%,
      currentColor 30%,
      color-mix(in srgb, currentColor var(--text-dim), #000) 100%
    );
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* The studio name in the hero headline always stays bright */
  .js main .hero-title .lfg-name {
    -webkit-text-fill-color: currentColor;
  }

  /* Selected text would otherwise be invisible (its fill is transparent) */
  .js main ::selection {
    -webkit-text-fill-color: var(--color-white);
    background-color: rgba(124, 58, 237, 0.6);
  }
}

.section-header {
  max-width: 680px;
  margin-bottom: 56px;
}

.section-header-wide {
  max-width: 780px;
}

/* Heard by screen readers, never seen: gives headingless sections a heading */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Section Index / Eyebrow Label — Inter 600 */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}

/* Gold on Black: 9.34:1 contrast (AA normal text) */
.section-black .section-eyebrow {
  color: var(--color-gold);
}

.section-black .section-eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  background-color: var(--color-gold);
}

/* ==========================================================================
   Collapsible Sections
   Each section starts collapsed to its "0X / Name" line, a .section-toggle
   button. Clicking the line, a menu item, or any in-page link to the section
   opens it (script.js adds .is-open). Collapsing only applies after script.js
   has attached the controls and added .js to <html>; a failed script leaves
   every section open and readable.
   The body animates via grid rows 0fr -> 1fr; visibility keeps collapsed
   content out of the tab order and away from screen readers.
   ========================================================================== */
.section-toggle {
  width: 100%;
  margin-bottom: 0;
  padding: 8px 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: color var(--transition);
}

.section-black .section-toggle:hover {
  color: #E8C95A;
}

/* Chevron after the label: points right when collapsed, down when open */
.section-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.collapsible.is-open .section-toggle::after,
html:not(.js) .section-toggle::after {
  transform: rotate(45deg);
}

.section-body {
  display: grid;
  grid-template-rows: 1fr;
}

.section-body-inner {
  min-height: 0;
  overflow: hidden;
}

/* Gap between the toggle line and the heading (as content, not padding, so the
   collapsed body can shrink to exactly zero) */
.section-body-inner::before {
  content: "";
  display: block;
  height: 22px;
}

.js .collapsible {
  padding: 24px 0 48px;
  transition: padding 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .collapsible:not(.is-open) {
  padding: 20px 0;
}

/* Closing: visibility flips to hidden only after the 0.42s collapse finishes */
.js .section-body {
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.42s;
}

.js .collapsible:not(.is-open) .section-body {
  grid-template-rows: 0fr;
  visibility: hidden;
}

/* Opening: visible immediately, then the rows grow */
.js .collapsible.is-open .section-body {
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* Opened by a link (menu, footer, buttons): jump straight to full height so the
   browser can scroll to the section's top (script.js adds .no-anim for one frame) */
.js .collapsible.no-anim,
.js .collapsible.no-anim .section-body {
  transition: none;
}

/* Large section headings in the approved brand gold, matching the eyebrow above them
   (Gold on Black: 9.34:1) */
.section-title {
  font-size: clamp(2rem, 3.4vw, 2.65rem);
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: 16px;
}

.section-black .section-subtitle {
  color: var(--text-muted-on-dark);
  font-size: 1.05rem;
}

/* ==========================================================================
   Top Navigation Bar (Silver Finish)
   The bar's mark, name and menu button are silver metal: a static beveled
   gradient with a light purple reflection along the lower edges (as if lit by the
   home page's glowing cube) and a bright sheen band on top (the dropdown stays
   plain). Each cycle the sheen glints across every element.
   script.js sets --sheen-offset (0 = left edge, 1 = right edge) per element to
   stagger the glints, so the highlight travels across the bar left to right.
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 100;
}

/* The bar's frosted background lives on this layer, not on .navbar itself: a
   backdrop-filter on .navbar would make it a "backdrop root", and the dropdown
   inside it could then only blur the bar, never the page behind the menu. */
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(11, 11, 15, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}

/* Bottom edge: a crisp steel rod (no glow) with a soft lavender reflection in the
   middle, running the same full-width sheen in step with the glints */
.navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-image: var(--line-sheen), var(--steel-line);
  background-size: 300% 100%, 100% 100%;
  background-position: 0% 0, 0 0;
  background-repeat: no-repeat;
  pointer-events: none;
  animation: sheen-line var(--sheen-cycle) linear infinite;
}

/* Silver metal clipped to text */
.metal-text {
  background-image: var(--silver-sheen), var(--silver-metal);
  background-size: 300% 100%, 100% 100%;
  background-position: 0% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Silver metal as a solid surface (menu bars) */
.metal-plate {
  background-image: var(--silver-sheen), var(--silver-metal);
  background-size: 300% 100%, 100% 100%;
  background-position: 0% 0, 0 0;
  background-repeat: no-repeat;
}

.metal-text,
.metal-plate {
  animation: metal-glint var(--sheen-cycle) ease-in-out infinite;
  animation-delay: calc(var(--sheen-offset, 0) * var(--sheen-travel));
}

/* The sheen layer is 3x the element's width: 100% parks the band off the left
   edge, 0% parks it off the right. A glint takes the first ~1 s of the cycle. */
@keyframes metal-glint {
  0% {
    background-position: 100% 0, 0 0;
  }
  14%,
  100% {
    background-position: 0% 0, 0 0;
  }
}

@keyframes sheen-line {
  0% {
    background-position: 100% 0, 0 0;
  }
  40%,
  100% {
    background-position: 0% 0, 0 0;
  }
}

/* Same glint for the inline SVG mark, in its 1000-unit viewBox */
@keyframes metal-glint-mark {
  0% {
    transform: translateX(-1000px);
  }
  14%,
  100% {
    transform: translateX(1000px);
  }
}

.nav-inner {
  position: relative; /* anchors the centred studio name */
  width: 100%;
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-cream);
}

/* Silver mark in slim navbar (inline SVG: gradient fill + masked sheen), on the left */
.brand-mark {
  width: 34px;
  height: 34px;
  display: block;
}

.brand-mark-sheen {
  transform: translateX(1000px);
  animation: metal-glint-mark var(--sheen-cycle) ease-in-out infinite;
  animation-delay: calc(var(--sheen-offset, 0) * var(--sheen-travel));
}

/* Typeface, weight and caps come from .lfg-name (the studio name's brand font) */
/* The studio name sits centred in the bar (still part of the home link).
   line-height: 1 makes its box hug the capitals, so the silver gradient's bands
   (and the purple reflection at the bottom) land on the letters themselves. */
.brand-name {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  line-height: 1;
  transition: filter var(--transition);
}

.brand:hover .brand-name {
  filter: brightness(1.18);
}

/* Design decision: the pages are always behind the 3-bars button, at every screen width.
   The dropdown tucks up under the bar's bottom rod and sits beneath it in the bar's
   stacking context, so the purple rod draws over the menu's top edge.
   No border, and a 50% see-through background with the page behind it blurred,
   so page text turns to haze instead of fighting the labels. */
.nav-links {
  position: fixed;
  top: calc(var(--nav-height) - 2px);
  z-index: -1;
  right: 16px;
  min-width: 220px;
  background: rgba(11, 11, 15, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  border-radius: 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
  flex-direction: column;
  align-items: stretch;
  padding: 12px;
  gap: 4px;
  list-style: none;
  display: none;
}

.nav-links.open {
  display: flex;
}

/* Dropdown items use the page's plain colours (no gold finish, glints or glows).
   Inter 600 for labels and buttons; cream labels like the footer links. */
.nav-link {
  display: block;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-cream);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 0; /* sharp corners for the hover highlight and the Contact button */
  transition: background-color var(--transition), color var(--transition);
}

/* Hover highlight: a flat purple tint */
.nav-link:hover {
  background-color: rgba(124, 58, 237, 0.24);
  color: var(--color-white);
}

/* Current page: gold label, like the section eyebrows (Gold on Black: 9.34:1) */
.nav-link.active {
  color: var(--color-gold);
}

/* Contact: flat purple like the page's buttons (White on Purple: 5.70:1) */
.nav-link.nav-cta {
  margin-top: 4px;
  text-align: center;
  background-color: var(--color-purple);
  color: var(--color-white);
}

.nav-link.nav-cta:hover {
  background-color: #6D28D9;
}

/* Menu button: just the three silver bars, no frame or fill. The padding keeps a
   comfortable click/tap target around them; hover brightens the bars. */
.mobile-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 10px 9px;
  border-radius: 0;
  cursor: pointer;
  transition: filter var(--transition);
}

.mobile-menu-btn:hover {
  filter: brightness(1.25);
}

.menu-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Each bar is only 2px tall, so the purple reflection is carried by the stack
   instead: the top bar is plain silver, the middle catches a trace of lavender
   and the bottom bar the most */
.menu-bars .metal-plate {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background-image: var(--silver-sheen), linear-gradient(90deg, #A2A2AA 0%, #EDEDF0 50%, #A2A2AA 100%);
}

.menu-bars .metal-plate:nth-child(2) {
  background-image: var(--silver-sheen), linear-gradient(90deg, #A3A0B3 0%, #E6E2F4 50%, #A3A0B3 100%);
}

.menu-bars .metal-plate:nth-child(3) {
  background-image: var(--silver-sheen), linear-gradient(90deg, #A49BC9 0%, #D9CEFB 50%, #A49BC9 100%);
}

/* ==========================================================================
   Buttons (Inter 600, WCAG Verified Pairings)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid transparent;
}

/* Primary Digital Action: White (#FFFFFF) on Purple (#7C3AED) — 5.70:1 */
.btn-purple {
  background-color: var(--color-purple);
  color: var(--color-white);
}

.btn-purple:hover {
  background-color: #6D28D9;
  transform: translateY(-1px);
}

/* ==========================================================================
   1. Splash / Hero Section (Centered Large Rendered Mark on Black)
   ========================================================================== */
.hero {
  min-height: 100vh;
  padding-top: var(--nav-height);
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: linear-gradient(
    90deg,
    var(--color-black) 0%,
    #000000 28%,
    #000000 72%,
    var(--color-black) 100%
  );
  position: relative;
  overflow: hidden;
}

.hero-centered {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0;
}

/* Borderless Rendered Logo Stage with wide radial black feathering so the cursor
   spotlight never reveals a hard rectangular video edge */
.hero-render-stage {
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  width: 100%;
  max-width: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-render-stage::before {
  content: "";
  position: absolute;
  inset: -70px -110px;
  background: radial-gradient(
    closest-side at 50% 50%,
    #000000 0%,
    #000000 56%,
    rgba(0, 0, 0, 0.82) 68%,
    rgba(0, 0, 0, 0.42) 80%,
    rgba(0, 0, 0, 0.12) 91%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Sized against viewport height too, so the launch copy starts above the fold on 900px-tall screens */
.hero-render-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(630px, 58vh);
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
  margin: 40px auto 36px;
  pointer-events: none;
  outline: none;
  mask-image: radial-gradient(closest-side at 50% 50%, black 86%, rgba(0, 0, 0, 0.4) 94%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, black 86%, rgba(0, 0, 0, 0.4) 94%, transparent 100%);
}

/* Sized so the launch headline sits on one clean line on desktop */
.hero-copy-below {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  max-width: 52rem;
}

.hero-kicker {
  /* Keep the subdued gold readable outside the spotlight, including over the
     faint tile texture. Other text retains the normal 75% lighting floor. */
  --text-dim: 95%;
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #A68629; /* Darker, subdued gold: 6.06:1 on black */
  margin-bottom: 10px;
}

.hero-title {
  font-size: clamp(1.25rem, 2.05vw, 1.56rem);
  line-height: 1.25;
  color: var(--color-cream);
  margin-bottom: 12px;
}

/* Keep "an indie game studio." together so if narrow screens wrap, it breaks cleanly after the comma */
.hero-title-tail {
  white-space: nowrap;
}

.hero-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #B5B0A6; /* Muted warm neutral: 9.73:1 on black */
  width: 100%;
}

/* ==========================================================================
   2. About Us Section (Black Ground)
   ========================================================================== */
/* About Us is all text (no card after the header), so its subtitle, lead and body
   paragraph share one even 24px gap instead of the 56px used above section cards */
.section-header.about-header {
  margin-bottom: 24px;
}

.about-copy {
  max-width: 780px;
}

.about-copy p {
  color: var(--text-muted-on-dark);
  margin-bottom: 24px;
}

.about-copy p:last-child {
  margin-bottom: 0;
}

.about-copy p.about-lead {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-white);
}

/* ==========================================================================
   3. Upcoming Games Section (Black Ground)
   ========================================================================== */
.game-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: var(--surface-dark-elevated);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.game-visual-panel {
  background-color: #000000;
  padding: 36px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--border-on-dark);
  position: relative;
  min-height: 360px;
  overflow: hidden;
}

/* A wide, short window onto the teaser. Its shape is fixed (522 x 240 on a
   1440px desktop) rather than its height, so phones get the same letterbox
   framing instead of a near-square crop. */
.game-concept-stripe {
  margin: 18px -30px;
  aspect-ratio: 2.175 / 1;
  position: relative;
  z-index: 1;
  overflow: hidden;
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.45) 18%,
    rgba(0, 0, 0, 1) 36%,
    rgba(0, 0, 0, 1) 64%,
    rgba(0, 0, 0, 0.45) 82%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.45) 18%,
    rgba(0, 0, 0, 1) 36%,
    rgba(0, 0, 0, 1) 64%,
    rgba(0, 0, 0, 0.45) 82%,
    transparent 100%
  );
}

/* A quarter of the strip's height of extra image above and below, so the image
   can drift gently against the scroll (parallax, script.js sets --parallax-y on
   the strip, up to 0.22 of the strip's height each way). Sized from the strip, so
   the framing is the same at every screen size. */
.game-concept-img {
  position: absolute;
  left: 0;
  top: -23%;
  width: 100%;
  height: 146%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

.game-visual-caption {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border-on-dark);
  padding-top: 18px;
}

.game-visual-caption .caption-main {
  display: block;
  font-family: var(--font-game-menu);
  font-size: 1.45rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--color-gold); /* Gold on Black: 9.34:1 */
  margin-bottom: 4px;
}

.game-visual-caption .caption-codename {
  font-family: var(--font-game-title);
}

.game-visual-caption .caption-tba {
  display: block;
  font-family: var(--font-game-menu);
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--color-gold);
}

.game-info-panel {
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.game-features {
  list-style: none;
  display: grid;
  gap: 10px;
}

.game-features li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--color-cream);
  font-size: 0.95rem;
}

.game-features li::before {
  content: "■";
  color: var(--color-gold);
  font-size: 0.65rem;
}

/* ==========================================================================
   4. The Team Section (Black Ground)
   ========================================================================== */
.team-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 44px;
  background-color: var(--surface-dark-elevated);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-md);
  padding: 44px;
  align-items: center;
}

.team-profile-col {
  display: block;
  text-decoration: none;
  background-color: #000000;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  text-align: center;
  transition: border-color var(--transition), transform var(--transition);
}

.team-profile-col:hover {
  border-color: var(--color-gold);
  transform: translateY(-2px);
}

.team-monogram-badge {
  width: 164px;
  height: 164px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-on-dark);
  margin: 0 auto 18px;
  display: block;
}

.team-member-name {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 6px;
}

.team-member-role {
  display: inline-block;
  background-color: var(--color-maroon);
  color: var(--color-cream); /* Cream on Maroon: 12.64:1 */
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.team-member-loc {
  font-size: 0.84rem;
  color: var(--text-muted-on-dark);
}

.team-bio-col h3 {
  font-size: 1.45rem;
  color: var(--color-white);
  margin-bottom: 14px;
}

.team-bio-col p {
  color: var(--text-muted-on-dark);
  margin-bottom: 16px;
}

.team-bio-col p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   5. Recruiting Section (Black Ground)
   ========================================================================== */
.recruiting-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.recruiting-header {
  margin-bottom: 0;
  flex: 1 1 560px;
}

.recruiting-top-cta {
  flex-shrink: 0;
  margin-top: 6px;
}

.section-black .recruiting-intro {
  font-size: 1.08rem;
  color: var(--color-cream);
  line-height: 1.52;
}

.recruiting-disclaimer {
  font-size: 0.82rem;
  color: #726E66;
  margin-top: 8px;
  line-height: 1.45;
}

.roles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.role-card {
  background-color: var(--surface-dark-elevated);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.role-header-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.role-dept {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold); /* Gold on Black: 9.34:1 */
}

.role-type {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background-color: rgba(245, 240, 230, 0.08);
  color: var(--color-cream);
}

.role-title {
  font-size: 1.22rem;
  color: var(--color-white);
  margin-bottom: 8px;
}

.role-desc {
  color: var(--text-muted-on-dark);
  font-size: 0.92rem;
  margin-bottom: 14px;
}

.role-reqs {
  list-style: none;
  margin-bottom: 0;
  display: grid;
  gap: 6px;
}

.role-reqs li {
  font-size: 0.88rem;
  color: var(--color-cream);
  padding-left: 16px;
  position: relative;
}

.role-reqs li::before {
  content: "•";
  color: var(--color-gold);
  position: absolute;
  left: 0;
}

/* ==========================================================================
   6. Contact Section (Black Ground)
   ========================================================================== */
/* A single column: intro, studio mark and the email (no contact form) */
.contact-info {
  max-width: 560px;
}

.section-black .contact-intro {
  margin-bottom: 28px;
}

/* Wraps so that on very narrow phones the (unbreakable) studio name drops below
   the logo instead of running off the edge */
.contact-brand-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-on-dark);
}

.contact-brand-header h3 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.contact-brand-header p {
  font-size: 0.92rem;
  color: var(--text-muted-on-dark);
}

/* Monochrome white mark at >=96px digital minimum */
.contact-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  flex-shrink: 0;
}

.contact-directory {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* never wider than the column on tiny phones */
  gap: 16px;
  margin-top: 28px;
}

.directory-item {
  background-color: var(--surface-dark-elevated);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}

.directory-item span {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  margin-bottom: 4px;
}

.directory-item a,
.directory-item strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-white);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.directory-item a:hover {
  color: var(--color-gold);
  text-decoration: underline;
}

/* ==========================================================================
   Footer (Black Ground)
   ========================================================================== */
.footer {
  position: relative; /* anchors the easter-egg strip to the bottom edge */
  overflow: hidden;
  background-color: var(--color-black);
  color: var(--color-cream);
  border-top: 2px solid var(--color-gold);
  padding: 48px 0;
  font-size: 0.88rem;
}

/* Easter egg: "Light Frame Games" repeated edge to edge along the bottom of the
   footer in the logo font. Its text is painted with a light fixed to the viewport
   at the cursor spotlight (--shine-x/--shine-y): purple where the light falls,
   exactly the footer colour everywhere else, so it is invisible until the light
   passes over it. Hidden from screen readers (aria-hidden) and from selection,
   and turned off in forced-colours (high contrast) mode, which would repaint it. */
.footer-easter-egg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-brand);
  font-weight: 700;
  font-synthesis: none;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--color-black); /* fallback where background-clip: text is unsupported */
  background-image: radial-gradient(
    circle 240px at var(--shine-lx, var(--shine-x, -9999px)) var(--shine-ly, var(--shine-y, -9999px)),
    #C4B5FD 0%,
    #8B5CF6 30%,
    var(--color-black) 80%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
  pointer-events: none;
}

/* Finger light on touch screens: iOS ignores background-attachment: fixed, so
   script.js hands each lit surface the light in its own coordinates
   (--shine-lx/--shine-ly) and these backgrounds scroll normally instead */
html.touch-light .hero::after,
html.touch-light .section-black::after {
  background-attachment: scroll, scroll;
}

html.touch-light .footer-easter-egg {
  background-attachment: scroll;
}

@media (forced-colors: active) {
  .footer-easter-egg {
    display: none;
  }
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* Typeface comes from .lfg-name (the studio name's brand font) */
.footer-name {
  color: var(--color-white);
}

.footer-copyright {
  font-size: 0.82rem;
  color: var(--text-muted-on-dark);
}

/* Must wrap: an unwrapped row is wider than a phone and widens the whole page,
   pushing the fixed navbar's menu button off-screen */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  list-style: none;
}

.footer-links a {
  color: var(--color-cream);
  text-decoration: none;
  font-weight: 600;
}

.footer-links a:hover {
  color: var(--color-gold);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 960px) {
  .game-showcase,
  .team-card,
  .roles-grid {
    grid-template-columns: 1fr;
  }

  .game-visual-panel {
    border-right: none;
    border-bottom: 1px solid var(--border-on-dark);
    min-height: 280px;
  }
}

@media (max-width: 768px) {
  .hero-copy-below {
    width: 100%;
  }

  .nav-links {
    left: 0;
    right: 0;
    padding: 16px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }

  .btn-purple:hover,
  .team-profile-col:hover {
    transform: none;
  }

  /* Silver top bar keeps its finish but stops glinting */
  .metal-text,
  .metal-plate,
  .brand-mark-sheen,
  .navbar::after {
    animation: none;
  }
}