/* ============================================================
   SLATE CARD — shared brushed-steel material
   Single source of truth. Used by:
     · landing hero (3D, drag-to-rotate)
     · landing "tap to engage" demo card
     · pre-order page product shot
   Edit here and every card on the site changes together.
   The iOS app mirrors this material in SlateCardVisual
   (Slate/DesignSystem/SlateComponents.swift) — change both.

   Matched to the SLT-001-B sample: brushed No.4 stainless,
   grain parallel to the long edge, surface laser etch with
   no depth and no infill — so the wordmark reads LIGHTER than
   the surrounding steel, not debossed.
   ============================================================ */

:root{
  /* Radius scales with card width to match the app's SlateCardVisual:
     12pt on the 250pt reference card = 4.8% of width. The second value
     makes the corner circular (4.8% ÷ (158/250) card aspect = 7.59%). */
  --card-radius: 4.8% / 7.59%;
}

/* ── The steel face ──────────────────────────────────────────
   Layered back-to-front. Real brushed metal under diffuse light
   is close to uniform in tone — the realism comes from the fine
   anisotropic grain, not from dramatic specular banding.        */
.steel{
  position:relative;
  border-radius:var(--card-radius);
  overflow:hidden;
  /* Container so the etch can size itself in cqw (% of card width) */
  container-type:inline-size;
  background:
    /* 1. Grain. Three pitches at low contrast rather than one
          uniform pitch — a single repeat reads as a synthetic
          moiré, three interfering pitches read as brushed metal. */
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.055) 0px, rgba(255,255,255,.055) .5px,
      rgba(255,255,255,0)    .5px, rgba(255,255,255,0)    1.7px),
    repeating-linear-gradient(180deg,
      rgba(72,78,82,.05) 0px, rgba(72,78,82,.05) .5px,
      rgba(72,78,82,0)   .5px, rgba(72,78,82,0)   2.9px),
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px,
      rgba(255,255,255,0)   1px, rgba(255,255,255,0)   4.3px),

    /* 2. One broad sheen band mid-face, flanks falling into shade —
          how light actually lies on the sample */
    linear-gradient(92deg,
      rgba(60,66,70,.16)    0%,
      rgba(60,66,70,.05)    18%,
      rgba(255,255,255,.22) 44%,
      rgba(255,255,255,.30) 52%,
      rgba(255,255,255,.10) 66%,
      rgba(60,66,70,.10)    100%),

    /* 3. Vertical falloff — light from above */
    linear-gradient(178deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,0)   30%,
      rgba(0,0,0,.05)       100%),

    /* 4. Base steel — brighter silver, wider tonal range than v1 */
    linear-gradient(96deg,
      #9a9ea1 0%, #b3b7ba 30%, #cdd1d2 52%, #b8bcbe 74%, #96999c 100%);

  /* Milled bevel: bright top edge, dark bottom edge — the app's edge
     stroke runs white .60 → black .22 top to bottom */
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.60),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset  1px 0 0 rgba(255,255,255,.14),
    inset -1px 0 0 rgba(0,0,0,.09);
}

/* Micro surface texture — keeps large flat areas from banding */
.steel::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:overlay;
}

/* Reverse face — same steel, slightly cooler and flatter */
.steel-back{
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) .5px,
      rgba(255,255,255,0)   .5px, rgba(255,255,255,0)   2.1px),
    linear-gradient(96deg,
      #8f9396 0%, #a6aaad 30%, #b4b8ba 55%, #a2a6a9 80%, #8d9194 100%);
}

/* ── Surface etch ────────────────────────────────────────────
   A laser etch scatters light where the brushed grain does not,
   so it reads lighter than the face. No infill, no deboss.      */
.steel-etch{
  font-family:'Instrument Serif',serif;
  font-style:italic;font-weight:400;
  letter-spacing:-.015em;
  color:rgba(244,246,246,.72);
  text-shadow:0 1px 1.2px rgba(70,76,80,.28);
  /* Wordmark size matches the app's SlateCardVisual: 58pt on the 250pt
     reference card = 23.2% of card width. cqw resolves against the
     .steel container, so it holds at every card size on every page. */
  font-size:44px;          /* fallback for pre-container-query browsers */
  font-size:23.2cqw;
  line-height:1;
}

/* ── Grounding shadow for a free-standing card ───────────────
   Tight contact shadow + wide ambient. Applied to the wrapper
   so it is not clipped by the face's overflow:hidden.           */
.steel-shadow{
  box-shadow:
    0 2px 4px rgba(19,21,23,.10),
    0 10px 22px rgba(19,21,23,.11),
    0 28px 54px rgba(19,21,23,.09);
  border-radius:var(--card-radius);
}