/* ==========================================================================
   SILK · binnenkort.css
   One plate of brushed steel. The letters are cut into it, and the light
   behind them comes on once, the way it does on the cart. Nothing else moves.
   No JavaScript, no video: fonts, one inline SVG and CSS.
   ========================================================================== */

@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-italic-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --steel: #121310;       /* the plate, in shadow */
  --cut: #24251f;         /* the letters before the light: a cut in the steel */
  --light: #ead7c5;       /* the logo glow, sampled from the cart (SILK_VID_07) */
  --kalk: #e7e2d7;        /* text */
  --kalk-2: #a9a598;      /* quiet text, 7.3:1 on the plate */
  --hair: rgba(231, 226, 215, 0.13);
  --ease-light: cubic-bezier(0.5, 0, 0.1, 1);   /* an LED warming up: slow start, soft landing */
  --ease-silk: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

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

html { background: var(--steel); }
body {
  margin: 0;
  min-height: 100svh;
  color: var(--kalk);
  background-color: var(--steel);
  background-image:
    /* the brushing: two hairline rhythms, so it reads as grain, not as a pattern */
    repeating-linear-gradient(0deg, rgba(231, 226, 215, 0.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 7px),
    /* and the falloff of a room light from above */
    linear-gradient(180deg, #181915 0%, #121310 52%, #0e0f0c 100%);
  background-attachment: fixed;
  font-family: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* The light spilling onto the steel around the letters. It comes up with them. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(46% 36% at 50% 48%, rgba(233, 214, 199, 0.085), rgba(233, 214, 199, 0.028) 46%, rgba(233, 214, 199, 0) 74%);
  opacity: 0;
  animation: glow 2.8s var(--ease-light) 0.7s forwards;
}

/* The edge of the plate. */
body::after {
  content: "";
  position: fixed;
  inset: clamp(10px, 1.5vw, 22px);
  border: 1px solid var(--hair);
  pointer-events: none;
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.plate {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  padding: clamp(44px, 8vh, 80px) clamp(28px, 5vw, 64px);
  text-align: center;
}

.centre {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: clamp(22px, 4.4vh, 46px);
}

/* The mark: the cut letters, and the lit letters on top of them. */
.mark {
  position: relative;
  margin: 0;
  width: clamp(220px, 40vw, 620px);
  aspect-ratio: 2710 / 771;
}
.mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mark__off {
  color: var(--cut);
  filter: drop-shadow(0 1px 0 rgba(231, 226, 215, 0.06)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.55));
}
.mark__on {
  color: var(--light);
  filter: drop-shadow(0 0 9px rgba(233, 214, 199, 0.42)) drop-shadow(0 0 36px rgba(233, 214, 199, 0.16));
  opacity: 0;
  will-change: opacity;
  animation: light 2.4s var(--ease-light) 0.6s forwards;
}

.line {
  margin: 0;
  font-family: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.02rem + 1.05vw, 2.05rem);
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--kalk);
  opacity: 0;
  animation: rise 1.5s var(--ease-silk) 1.9s forwards;
}

.label {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;          /* narrow screens and large text sizes: wrap, never cut */
  justify-content: center;
  align-items: center;
  gap: 10px 16px;
  max-width: 100%;
  font-size: 0.6875rem;
  font-stretch: 112%;
  font-weight: 520;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--kalk-2);
  padding-left: 0.34em;   /* letterspaced caps: balance the trailing space so they sit truly centred */
  opacity: 0;
  animation: rise 1.5s var(--ease-silk) forwards;
}
.label i { display: block; width: 36px; height: 1px; background: currentColor; opacity: 0.55; }
.label--top { animation-delay: 1.5s; }
.label--bottom { animation-delay: 2.3s; }

@keyframes light {
  0% { opacity: 0; }
  60% { opacity: 0.9; }
  100% { opacity: 1; }
}
@keyframes glow { to { opacity: 1; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Phones: the two words stack around a short hairline, like a label, instead of wrapping. */
@media (max-width: 600px) {
  .mark { width: min(76vw, 340px); }
  .label { flex-direction: column; gap: 9px; letter-spacing: 0.28em; padding-left: 0.28em; }
  .label i { width: 18px; }
}

/* Reduced motion: the light is simply on. */
@media (prefers-reduced-motion: reduce) {
  body::before, .mark__on, .line, .label { animation: none; opacity: 1; transform: none; }
}