/* ============================================================
   NOBODY.NET — premium coming-soon landing
   Matte black · futuristic · luxury supercar-grade minimalism
   Self-hosted fonts · zero third-party requests · strict-CSP safe
   ============================================================ */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 600;            /* variable */
  font-display: swap;
  src: url('/fonts/jost-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/michroma-latin.woff2') format('woff2');
}

/* ---------- Animatable angle for the running light ---------- */
@property --spin {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ---------- Design tokens ---------- */
:root {
  --bg:        #050506;
  --bg-2:      #0a0a0d;
  --ink:       #eef0f4;
  --silver:    #c4c8d0;
  --dim:       #6a6e78;
  --faint:     rgba(220, 225, 235, 0.06);
  --crimson:   #c8102e;       /* used with extreme restraint */
  --crimson-soft: rgba(200, 22, 44, 0.45);

  --glass-top: #101015;
  --glass-bot: #060608;

  --radius: clamp(14px, 1.6vw, 19px);

  --ease: cubic-bezier(0.22, 0.68, 0.16, 1);
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Jost', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;                /* single-screen experience */
  min-height: 100svh;
  position: relative;
}

/* ============================================================
   ATMOSPHERE
   ============================================================ */
.bg, .grain, .spot {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg__base {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, #14141a 0%, #0a0a0d 38%, var(--bg) 72%);
}

/* faint cool light pooled behind the wordmark */
.bg__glow {
  position: absolute;
  left: 50%; top: 16%;
  width: min(1100px, 120vw); height: 620px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(150, 170, 205, 0.16), rgba(150, 170, 205, 0) 70%);
  filter: blur(20px);
  opacity: 0.9;
  animation: drift-glow 16s ease-in-out infinite;
}

/* a single restrained crimson ember low in the frame */
.bg__ember {
  position: absolute;
  left: 50%; bottom: -16%;
  width: min(900px, 130vw); height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(200, 22, 44, 0.10), rgba(200, 22, 44, 0) 70%);
  filter: blur(30px);
  opacity: 0.7;
  animation: pulse-ember 11s ease-in-out infinite;
}

/* slow vertical light sweep — like a scanning beam */
.bg__scan {
  position: absolute; inset: -20% 0;
  background: linear-gradient(180deg, transparent 0%, rgba(190, 200, 220, 0.045) 50%, transparent 100%);
  height: 40%;
  opacity: 0.6;
  animation: scan 14s linear infinite;
  mix-blend-mode: screen;
}

.bg__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 50% 45%, transparent 52%, rgba(0,0,0,0.55) 100%);
}

/* film grain for the matte, photographed-in-the-dark feel */
.grain {
  z-index: 2;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grain-shift 6s steps(6) infinite;
}

/* cursor-reactive cool spotlight (set by JS) */
.spot {
  z-index: 1;
  background: radial-gradient(360px 360px at var(--mx, 50%) var(--my, 18%),
              rgba(170, 190, 220, 0.07), rgba(170, 190, 220, 0) 70%);
  opacity: 0;
  transition: opacity 1.2s ease;
}
body.is-live .spot { opacity: 1; }

/* ============================================================
   LAYOUT
   ============================================================ */
.stage {
  position: relative;
  z-index: 3;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vh, 72px) clamp(20px, 5vw, 64px);
}

.shell {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.6rem, 7vh, 5.8rem);
}

/* ============================================================
   BRAND WORDMARK
   ============================================================ */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.85rem, 2vh, 1.5rem);
}

.brand__rule {
  width: clamp(120px, 26vw, 300px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,206,218,0.45), transparent);
  transform: scaleX(0);
  opacity: 0;
  animation: rule-in 1.4s var(--ease) 0.15s forwards;
}
.brand__rule--bottom { animation-delay: 0.35s; }

.wordmark {
  font-family: 'Michroma', 'Jost', sans-serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 6.4vw, 4.4rem);
  line-height: 1;
  letter-spacing: clamp(0.1em, 0.6vw, 0.22em);
  text-indent: clamp(0.1em, 0.6vw, 0.22em);     /* balance trailing track */
  white-space: nowrap;
  user-select: none;

  /* brushed-metal fill + a slow travelling sheen */
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,0.85) 50%, transparent 62% 100%) 250% 0 / 260% 100% no-repeat,
    linear-gradient(180deg, #ffffff 0%, #d3d7de 36%, #888d98 58%, #eef1f6 76%, #b7bbc5 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  opacity: 0;
  filter: blur(8px);
  transform: translateY(14px);
  animation:
    word-in 1.5s var(--ease) 0.25s forwards,
    sheen 8s ease-in-out 1.8s infinite;
}

.wordmark__dot {
  -webkit-text-fill-color: var(--crimson);
  color: var(--crimson);
  text-shadow: 0 0 14px rgba(200, 22, 44, 0.75), 0 0 34px rgba(200, 22, 44, 0.35);
  animation: dot-pulse 3.4s ease-in-out 2s infinite;
}

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
}

.card {
  position: relative;
  aspect-ratio: 1 / 1;
  opacity: 0;
  transform: translateY(26px);
  filter: blur(7px);
  animation: card-in 1.15s var(--ease) both;
}
.card:nth-child(1) { animation-delay: 0.55s; }
.card:nth-child(2) { animation-delay: 0.70s; }
.card:nth-child(3) { animation-delay: 0.85s; }
.card:nth-child(4) { animation-delay: 1.00s; }

/* soft outer halo (breathing) */
.card__halo {
  position: absolute;
  inset: -14%;
  border-radius: calc(var(--radius) + 10px);
  background: radial-gradient(closest-side, rgba(160, 180, 210, 0.14), rgba(160, 180, 210, 0) 72%);
  opacity: 0.5;
  filter: blur(8px);
  animation: halo-breathe 7s ease-in-out infinite;
  transition: opacity 0.6s ease;
}
.card:nth-child(2) .card__halo { animation-delay: -1.6s; }
.card:nth-child(3) .card__halo { animation-delay: -3.1s; }
.card:nth-child(4) .card__halo { animation-delay: -4.7s; }

.card__frame {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 26px 50px -26px rgba(0,0,0,0.85);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
  will-change: transform;
}

/* the glass / dark-metal surface */
.card__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0) 40%),
    linear-gradient(157deg, var(--glass-top) 0%, #0a0a0d 52%, var(--glass-bot) 100%);
}

/* pulsing inner core glow */
.card__glow {
  position: absolute;
  width: 150%; height: 150%;
  left: 50%; top: 56%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(150,172,205,0.16), rgba(150,172,205,0) 70%);
  opacity: 0.55;
  animation: core-glow 6.5s ease-in-out infinite;
}
.card:nth-child(2) .card__glow { animation-delay: -1.3s; }
.card:nth-child(3) .card__glow { animation-delay: -2.9s; }
.card:nth-child(4) .card__glow { animation-delay: -4.2s; }

/* occasional diagonal shimmer across the glass */
.card__sheen {
  position: absolute;
  top: -60%; left: -120%;
  width: 60%; height: 220%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(220,228,240,0.10) 45%, rgba(220,228,240,0.16) 50%, rgba(220,228,240,0.10) 55%, transparent);
  filter: blur(2px);
  animation: sheen-sweep 9s ease-in-out infinite;
}
.card:nth-child(1) .card__sheen { animation-delay: 0.4s; }
.card:nth-child(2) .card__sheen { animation-delay: 3.0s; }
.card:nth-child(3) .card__sheen { animation-delay: 5.6s; }
.card:nth-child(4) .card__sheen { animation-delay: 1.8s; }

/* pointer-reactive field (set by JS) */
.card__field {
  position: absolute; inset: 0;
  background: radial-gradient(220px 220px at var(--cmx, 50%) var(--cmy, 50%),
              rgba(180,200,230,0.16), rgba(180,200,230,0) 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* running light — a comet that circles the frame */
.card__edge {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  padding: 1.4px;
  background: conic-gradient(from var(--spin),
      rgba(255,255,255,0) 0deg,
      rgba(255,255,255,0) 228deg,
      rgba(200,22,44,0) 250deg,
      var(--crimson-soft) 300deg,
      rgba(226,230,238,0.55) 332deg,
      #ffffff 350deg,
      rgba(226,230,238,0.5) 356deg,
      rgba(255,255,255,0) 360deg);
  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
          mask-composite: exclude;
  filter: drop-shadow(0 0 5px rgba(205,215,235,0.4));
  animation: spin var(--dur, 7s) linear infinite;
  transition: filter 0.5s ease;
}
.card:nth-child(1) .card__edge { --dur: 6.6s; animation-delay: -0.5s; }
.card:nth-child(2) .card__edge { --dur: 8.2s; animation-delay: -3.0s; }
.card:nth-child(3) .card__edge { --dur: 7.2s; animation-delay: -5.4s; }
.card:nth-child(4) .card__edge { --dur: 9.0s; animation-delay: -1.7s; }

/* COMING SOON */
.card__label {
  position: relative;
  z-index: 3;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: clamp(0.58rem, 1.15vw, 0.8rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--silver);
  white-space: nowrap;
  animation: breathe 4.8s ease-in-out infinite;
}
.card:nth-child(2) .card__label { animation-delay: -1.2s; }
.card:nth-child(3) .card__label { animation-delay: -2.4s; }
.card:nth-child(4) .card__label { animation-delay: -3.6s; }

/* particles injected by JS */
.p {
  position: absolute;
  left: var(--x, 50%);
  bottom: -8px;
  width: var(--s, 2px);
  height: var(--s, 2px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(235,240,250,0.95), rgba(235,240,250,0) 70%);
  opacity: 0;
  pointer-events: none;
  animation: rise var(--t, 9s) linear var(--d, 0s) infinite;
}

/* ---------- Hover (precise pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__frame {
    transform: translateY(-7px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      inset 0 0 0 1px rgba(255,255,255,0.09),
      0 40px 70px -30px rgba(0,0,0,0.9);
  }
  .card:hover .card__halo { opacity: 1; }
  .card:hover .card__field { opacity: 1; }
  .card:hover .card__edge { filter: drop-shadow(0 0 9px rgba(220,228,245,0.7)); }
  .card:hover .card__label { color: #f2f4f8; }
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes spin { to { --spin: 360deg; } }

@keyframes word-in {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes rule-in {
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes card-in {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes sheen {
  0%, 100% { background-position: 250% 0, 0 0; }
  50%      { background-position: -160% 0, 0 0; }
}

@keyframes dot-pulse {
  0%, 100% { opacity: 0.75; text-shadow: 0 0 10px rgba(200,22,44,0.6), 0 0 26px rgba(200,22,44,0.25); }
  50%      { opacity: 1;    text-shadow: 0 0 16px rgba(200,22,44,0.9), 0 0 40px rgba(200,22,44,0.45); }
}

@keyframes breathe {
  0%, 100% { opacity: 0.42; text-shadow: none; }
  50%      { opacity: 0.96; text-shadow: 0 0 18px rgba(206,213,226,0.28); }
}

@keyframes core-glow {
  0%, 100% { opacity: 0.38; transform: translate(-50%, -50%) scale(0.94); }
  50%      { opacity: 0.72; transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes halo-breathe {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.7; }
}

@keyframes sheen-sweep {
  0%   { left: -120%; opacity: 0; }
  8%   { opacity: 1; }
  26%  { left: 180%; opacity: 0; }
  100% { left: 180%; opacity: 0; }
}

@keyframes rise {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: var(--o, 0.7); }
  88%  { opacity: var(--o, 0.7); }
  100% { transform: translate(var(--drift, 0px), calc(-1 * var(--rise, 200px))); opacity: 0; }
}

@keyframes drift-glow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
  50%      { transform: translate(-50%, -54%) scale(1.06); opacity: 1; }
}
@keyframes pulse-ember {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.9; }
}
@keyframes scan {
  0%   { transform: translateY(-60%); }
  100% { transform: translateY(260%); }
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -2%); }
  75%  { transform: translate(-2%, -1%); }
  100% { transform: translate(0, 0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Tablet & down — two per row (2 x 2) */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 3vw, 24px); }
  .shell { gap: clamp(2rem, 6vh, 4rem); max-width: 640px; }
}

/* Phones — keep the 2 x 2 grid, tighten the label tracking */
@media (max-width: 520px) {
  .grid { gap: 14px; max-width: 460px; }
  .card__label { font-size: 0.62rem; letter-spacing: 0.34em; text-indent: 0.34em; }
}

@media (max-width: 360px) {
  .card__label { font-size: 0.56rem; letter-spacing: 0.28em; text-indent: 0.28em; }
}

@media (min-width: 1500px) {
  .shell { max-width: 1320px; }
}

/* Short / landscape viewports — allow graceful scroll, compress rhythm */
@media (max-height: 600px) {
  body { overflow: auto; }
  .shell { gap: 1.4rem; }
}

/* ============================================================
   ACCESSIBILITY — reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .wordmark { opacity: 1; filter: none; transform: none; }
  .brand__rule { opacity: 1; transform: scaleX(1); }
  .card { opacity: 1; filter: none; transform: none; }
  .card__edge {
    background: conic-gradient(from 318deg,
      rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 250deg,
      var(--crimson-soft) 300deg, #ffffff 350deg, rgba(255,255,255,0) 360deg);
  }
  .card__label { opacity: 0.9; }
  .bg__scan, .grain { display: none; }
}