/* ============================================================
   AANDRS_ — Design System
   ============================================================ */

/* ------------------------------------------------------------
   Brand typeface: Styrene A (Commercial Type, licensed).
   Drop your .woff2 files into /assets/fonts/ and they’ll be used.
   Until then, the stack falls back to Inter, which is loaded from
   Google Fonts in index.html.

   Expected files (rename your purchased files to match, or tweak paths):
     assets/fonts/StyreneA-Regular.woff2
     assets/fonts/StyreneA-Medium.woff2
     assets/fonts/StyreneA-Bold.woff2
     assets/fonts/StyreneA-Black.woff2
   ------------------------------------------------------------ */
@font-face {
  font-family: "Styrene A";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/StyreneA-Bold-Web.woff") format("woff");
}

:root {
  --red: #ff0017;
  --black: #000000;
  --white: #ffffff;

  --font-display: "Styrene A", "Inter", "Neue Haas Grotesk Display Pro",
    "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;
  --space-7: 8rem;

  --meta-size: 0.6875rem;
  --meta-size-mobile: 0.6rem;

  --page-pad: clamp(1rem, 3vw, 2rem);
  --max-width: 1920px;

  --col-gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* ============================================================
   12-column grid utility
   ============================================================ */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
  width: 100%;
}

/* ============================================================
   Reset
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  line-height: 1.4;
  overflow-x: hidden;
  text-transform: uppercase;
}

/* User-typed content stays in whatever case the user types. */
input,
textarea,
select {
  text-transform: none;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* ============================================================
   Header + Footer meta bar
   ============================================================ */

/* Absolute (not fixed) so the header sits at the very top of the page and
   scrolls away with the red hero — by the time the black block reaches
   the viewport, the header has already scrolled out of view (it "docks"
   at the bottom of the red area and never overlaps the black). */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  background: var(--red);
  color: var(--black);
}

/* Meta-bar uses the global 12-col grid so header columns and nav land at
   the same column gutters as section content below. */
.meta-bar {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: start;
  padding: var(--space-2) var(--page-pad);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--meta-size);
  letter-spacing: 0;
  line-height: 1.35;
}

.meta-bar__col {
  display: flex;
  flex-direction: column;
}

.meta-bar__col--lead { grid-column: 1 / 4; }
.meta-bar__col:nth-of-type(2) { grid-column: 4 / 6; }
.meta-bar__col:nth-of-type(3) { grid-column: 6 / 9; }

.meta-bar__nav {
  grid-column: 10 / 13;
  display: flex;
  gap: var(--space-3);
  justify-self: end;
  align-self: start;
}

.meta-bar__nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.1vw, 1.125rem);
  text-transform: none;
  letter-spacing: 0;
  transition: opacity 0.2s ease;
}

.meta-bar__nav a:hover {
  opacity: 0.6;
}

.meta-bar--footer {
  background: var(--red);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.site-footer {
  position: relative;
  z-index: 50;
  background: var(--red);
}

/* ============================================================
   HERO OVERLAY — fixed-position layer above the page that holds the
   scroll-scrubbed glasses frame sequence (canvas) plus the AANDRS_
   wordmark anchored to the viewport bottom. The canvas sits ABOVE the
   black backgrounds of .intro and .features (those use a ::before
   pseudo at z-index: 1 so this z-index:30 paints on top), and BELOW
   the section text content (which lifts itself to z-index: 50).
   ============================================================ */
.hero-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--page-pad) var(--space-4);
}

.hero-overlay__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-overlay__logo {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 2;
}

/* ============================================================
   HERO — empty scroll space (red bg) for the first phase of the
   overlay animation.
   ============================================================ */
.hero {
  position: relative;
  background: var(--red);
  height: 220vh;
  width: 100%;
}

/* ============================================================
   INTRO + FEATURES — the "black block".

   We split the black background off into a ::before pseudo at
   z-index: 1 (under the hero canvas at z:30), and lift the actual
   text content via direct children at z-index: 50 (above the canvas).
   The section itself MUST NOT create its own stacking context, so we
   keep z-index: auto on the section element. position: relative is
   only used to anchor the absolutely-positioned ::before.
   ============================================================ */
.intro {
  position: relative;
  padding: var(--space-7) var(--page-pad) var(--space-4);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
}

.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black);
  z-index: 1;
}

.intro > * {
  position: relative;
  z-index: 50;
}

.intro__copy {
  grid-column: 1 / 6;
  color: var(--red);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.4;
}

/* ============================================================
   FEATURES / annotated glasses
   ============================================================ */

/* Tall section (~130vh) so the FACE logo + the two info notes can be
   staggered vertically — matches the Figma where each element sits at
   a different scroll depth and the right note is reached before the
   left one as the animation scrubs through. Same black::before trick
   as .intro so the glasses canvas paints over this background. */
.features {
  position: relative;
  padding: var(--space-7) var(--page-pad);
  min-height: 80vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  /* Row 2 collapsed (0) — pulls both notes up ≈150px so the lower (left)
     note triggers earlier as the animation scrubs past it. */
  grid-template-rows: auto 0 auto 6vh auto;
  align-items: start;
}

.features::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black);
  z-index: 1;
}

.features > * {
  position: relative;
  z-index: 50;
}

.features__center-logo {
  grid-column: 6 / 8;
  grid-row: 1;
  justify-self: center;
  width: auto;
  height: clamp(4rem, 9vw, 8rem);
}

.features__note {
  color: var(--red);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.3;
  max-width: 22rem;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.features__note.is-visible {
  opacity: 1;
}

.features__note--right {
  grid-column: 10 / 13;
  grid-row: 3;
  text-align: right;
  justify-self: end;
}

.features__note--left {
  grid-column: 1 / 4;
  grid-row: 5;
  text-align: left;
  justify-self: start;
}

/* ============================================================
   SLIDER — two-layer "emerging" transition.

   A full-bleed background layer holds one image; a smaller card layer
   sits centered on top with another. On slide change, a transient
   layer expands from the card's rect to full-bleed (taking the old
   card image into the background), while the card itself scales a
   new image up from zero.
   ============================================================ */

.slider {
  position: relative;
  z-index: 50;
  background: #111;
  padding: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.slider__stack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.slider__layer {
  position: absolute;
  overflow: hidden;
}

.slider__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slider__layer--bg {
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.slider__layer--card {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(42vw, 440px);
  aspect-ratio: 3 / 4;
  height: auto;
  z-index: 3;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transform-origin: center center;
}

/* The transient expanding layer — positioned/sized entirely via inline
   styles from slider.js; this rule just sets its stacking order. */
.slider__layer--transition {
  z-index: 2;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

/* Full-area click zones (created by JS) — left half prev, right half next.
   Sit above all slide layers (bg/card/transition use z: 1–3) so clicks
   always register on them rather than on the images underneath. */
.slider__zone {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: transparent;
  border: 0;
  z-index: 5;
}

.slider__zone--prev {
  left: 0;
  cursor: w-resize;
}

.slider__zone--next {
  right: 0;
  cursor: e-resize;
}

/* Prev/Next buttons: red text on top of a short red underline.
   Flex-column with align-items left/right pulls the bar to the same edge
   as the label (PREVIOUS bar left-aligned under "PREVIOUS"; NEXT bar
   right-aligned under "NEXT"). */
.slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: var(--red);
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.75rem, 0.85vw, 0.875rem);
  letter-spacing: 0.08em;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: opacity 0.2s ease;
}

.slider__btn:hover {
  opacity: 0.7;
  background: transparent;
}

/* Slab beneath PREVIOUS/NEXT — proportioned like the "_" in AANDRS_:
   underscore in the SVG is 238 wide × 27 tall (≈ 11% aspect). 6rem wide
   × 0.65rem tall keeps the same chunky feel against the caption text. */
.slider__btn::after {
  content: "";
  display: block;
  width: 6rem;
  height: 0.65rem;
  background: var(--red);
}

.slider__btn--prev {
  left: var(--page-pad);
  align-items: flex-start;
  text-align: left;
}

.slider__btn--next {
  right: var(--page-pad);
  align-items: flex-end;
  text-align: right;
}

/* Caption sits at the bottom-left corner of the centered card. The card's
   half-width and half-height are mirrored via the same min() expressions
   used to size the card, so this stays aligned at every breakpoint. */
.slider__caption {
  --card-half-w: min(21vw, 220px);
  --card-half-h: min(28vw, 293px);
  position: absolute;
  top: calc(50% + var(--card-half-h) + 0.75rem);
  left: calc(50% - var(--card-half-w));
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.8rem, 0.85vw, 0.95rem);
  line-height: 1.35;
  color: var(--red);
  text-align: left;
  z-index: 6;
}

.slider__caption-label,
.slider__caption-value {
  display: block;
}

/* ============================================================
   VIDEO
   ============================================================ */

.video {
  position: relative;
  z-index: 50;
  background: var(--black);
  min-height: 90vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.video__player {
  width: 100%;
  height: 100%;
  min-height: 90vh;
  object-fit: cover;
  display: block;
}

/* ============================================================
   CONTACT
   ============================================================ */

.contact {
  position: relative;
  z-index: 50;
  background: var(--red);
  padding: var(--space-6) var(--page-pad);
  color: var(--black);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
}

.contact__inner {
  grid-column: 1 / 9;
}

.contact__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

.contact__copy {
  max-width: 480px;
  font-size: 0.9rem;
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

.contact__form {
  display: grid;
  gap: var(--space-2);
  max-width: 520px;
}

.field {
  display: grid;
  grid-template-columns: 6rem 1fr;
  align-items: center;
  gap: var(--space-2);
}

.field label {
  font-weight: 500;
  font-size: 0.9rem;
}

.field input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--black);
  padding: 0.25rem 0;
  outline: none;
  transition: border-color 0.2s ease;
}

.field input:focus {
  border-color: var(--white);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
}

.check input {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--black);
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.check input:checked::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--black);
}

.contact__submit {
  justify-self: start;
  margin-top: var(--space-2);
  background: var(--black);
  color: var(--red);
  padding: 0.6rem 1.4rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: background 0.2s ease;
}

.contact__submit:hover {
  background: #222;
}

.contact__submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact__status {
  font-size: 0.8rem;
  min-height: 1.2em;
  margin-top: var(--space-1);
}

.contact__status.is-success {
  color: var(--white);
}

.contact__status.is-error {
  color: #5a0008;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .meta-bar {
    grid-template-columns: repeat(2, 1fr);
    font-size: var(--meta-size-mobile);
    column-gap: var(--space-2);
    row-gap: var(--space-2);
  }

  .meta-bar__col--lead { grid-column: 1 / 2; }
  .meta-bar__col:nth-of-type(2) { grid-column: 2 / 3; }
  .meta-bar__col:nth-of-type(3) { grid-column: 1 / -1; }

  .meta-bar__nav {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .meta-bar--footer .meta-bar__nav {
    justify-self: start;
  }

  .hero {
    height: 180vh;
  }

  .intro {
    grid-template-columns: repeat(6, 1fr);
  }

  .intro__copy {
    grid-column: 1 / -1;
  }

  .features {
    padding: var(--space-6) var(--page-pad);
    min-height: 90vh;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: var(--space-4);
  }

  .features__center-logo {
    grid-column: 2 / 6;
    grid-row: 2;
  }

  .features__note {
    max-width: 100%;
  }

  .features__note--right {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: center;
    justify-self: center;
  }

  .features__note--left {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
    justify-self: center;
  }

  .contact {
    grid-template-columns: repeat(6, 1fr);
  }

  .contact__inner {
    grid-column: 1 / -1;
  }

  .slider {
    height: 85vh;
  }

  .slider__layer--card {
    width: min(72vw, 360px);
  }

  .slider__btn {
    top: 50%;
  }

  .slider__btn--prev {
    left: 1rem;
  }

  .slider__btn--next {
    right: 1rem;
  }

  .slider__btn::after {
    width: 3.5rem;
    height: 0.4rem;
  }

  .slider__caption {
    --card-half-w: min(36vw, 180px);
    --card-half-h: min(48vw, 240px);
    font-size: 0.75rem;
  }

  .field {
    grid-template-columns: 5rem 1fr;
  }
}

@media (max-width: 520px) {
  .meta-bar {
    grid-template-columns: 1fr;
    font-size: var(--meta-size-mobile);
  }

  .meta-bar__nav {
    grid-column: 1;
    justify-self: start;
  }

  .field {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* ============================================================
   Reduce motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}