/* =============================================================
   HOTFIXER — standalone teaser page
   Red "scan / glitch" theme. Still overwhelming-dark, same family
   as hailstorm.software, but a different world (crimson, corrupted).
   ============================================================= */

:root {
  --bg:        #0a0506;
  --ink:       #f5ebec;
  --muted:     #c79498;
  --faint:     #855c60;
  --red:       #ff2e3f;   /* delete-beam red */
  --red-hot:   #ff5a4e;
  --red-deep:  #b3121f;
  --cyan:      #23e0ff;   /* chromatic-aberration accent (glitch only) */
  --hair:      rgba(255, 90, 90, 0.14);
  --hair-2:    rgba(255, 90, 90, 0.26);

  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono:    ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }

::selection { background: rgba(255, 46, 63, 0.3); color: #fff; }
:focus-visible { outline: 2px solid var(--red-hot); outline-offset: 3px; border-radius: 2px; }

/* painted backdrop beneath the canvas */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(85% 60% at 50% 42%, rgba(179, 18, 31, 0.24), rgba(179, 18, 31, 0) 60%),
    radial-gradient(120% 100% at 50% 120%, rgba(255, 46, 63, 0.08), rgba(255, 46, 63, 0) 55%),
    linear-gradient(180deg, #0b0506 0%, #0a0506 50%, #070304 100%);
}

/* live scan/corruption canvas */
.scan-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* scanlines + vignette */
.fx {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 90, 90, 0.035) 0 1px, transparent 1px 3px),
    radial-gradient(130% 100% at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.6) 100%);
}

/* red glitch flash, driven from JS */
.fx-flash {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(80% 60% at 50% 45%, rgba(255, 46, 63, 0.6), rgba(255, 46, 63, 0) 70%);
  mix-blend-mode: screen;
  will-change: opacity;
}

.skip-link {
  position: fixed;
  top: 0.6rem; left: 50%;
  transform: translate(-50%, -150%);
  z-index: 50;
  padding: 0.5rem 1rem;
  background: #160a0b;
  border: 1px solid var(--hair-2);
  border-radius: 6px;
  font-size: 0.85rem;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ------------------------------ chrome ---------------------------- */
.top {
  position: relative;
  z-index: 3;
  padding: clamp(1.1rem, 3vw, 1.8rem) var(--gutter);
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.92rem;
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.back:hover { color: var(--ink); }
.back__arrow { transition: transform 0.25s var(--ease); }
.back:hover .back__arrow { transform: translateX(-3px); }
.back__mark { color: var(--red-hot); display: grid; place-items: center; filter: drop-shadow(0 0 8px rgba(255, 60, 70, 0.4)); }
.back__label { font-weight: 500; letter-spacing: 0.01em; }

/* ------------------------------- hero ----------------------------- */
.hero {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(1.1rem, 3vh, 1.8rem);
  padding: clamp(2rem, 8vh, 5rem) var(--gutter) clamp(3rem, 10vh, 6rem);
}

.eyebrow {
  font-family: var(--mono);
  font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.84rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--red-hot);
  text-shadow: 0 0 18px rgba(255, 60, 70, 0.4);
}

/* ---- the glitch title (the page's signature) ---- */
.glitch {
  position: relative;
  font-weight: 700;
  font-size: clamp(3.2rem, 17vw, 13rem);
  line-height: 0.84;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #ffd2cd 34%, #ff3b3b 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 55px rgba(255, 46, 63, 0.45);
  animation: jolt 8s infinite steps(1, end);
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  -webkit-text-fill-color: currentColor;   /* override the inherited transparent */
  background: none;
  pointer-events: none;
}
.glitch::before { color: var(--red); mix-blend-mode: screen; animation: g-r 2.8s infinite steps(2, end) alternate-reverse; }
.glitch::after  { color: var(--cyan); mix-blend-mode: screen; animation: g-c 3.6s infinite steps(2, end) alternate-reverse; }

@keyframes g-r {
  0%   { clip-path: inset(10% 0 70% 0); transform: translateX(-2px); }
  20%  { clip-path: inset(58% 0 22% 0); transform: translateX(2px); }
  40%  { clip-path: inset(34% 0 46% 0); transform: translateX(-3px); }
  60%  { clip-path: inset(82% 0 4% 0);  transform: translateX(1px); }
  80%  { clip-path: inset(22% 0 54% 0); transform: translateX(2px); }
  100% { clip-path: inset(46% 0 34% 0); transform: translateX(-1px); }
}
@keyframes g-c {
  0%   { clip-path: inset(70% 0 12% 0); transform: translateX(2px); }
  25%  { clip-path: inset(14% 0 66% 0); transform: translateX(-2px); }
  50%  { clip-path: inset(50% 0 30% 0); transform: translateX(3px); }
  75%  { clip-path: inset(30% 0 52% 0); transform: translateX(-1px); }
  100% { clip-path: inset(64% 0 20% 0); transform: translateX(1px); }
}
@keyframes jolt {
  0%, 96.5%, 100% { transform: none; }
  97%  { transform: translate(3px, 0) skewX(-7deg); }
  98%  { transform: translate(-3px, 0) skewX(4deg); }
  99%  { transform: translate(1px, 0); }
}

.tagline {
  max-width: 40ch;
  color: var(--muted);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
}

/* ---- coming soon / wishlist ---- */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.4rem;
  margin-top: clamp(0.5rem, 2vh, 1.2rem);
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.status__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red-hot);
  box-shadow: 0 0 12px var(--red-hot);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }

.wishlist {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  border: 1px solid var(--hair-2);
  background: rgba(255, 46, 63, 0.07);
  cursor: not-allowed;
  opacity: 0.92;
}
.wishlist__soon {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-hot);
  padding: 0.14rem 0.42rem;
  border: 1px solid var(--hair-2);
  border-radius: 4px;
}

/* ------------------------------ footer ---------------------------- */
.foot {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.5rem var(--gutter) 2rem;
  border-top: 1px solid var(--hair);
  color: var(--faint);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.foot__home { color: var(--faint); transition: color 0.25s var(--ease); }
.foot__home:hover { color: var(--red-hot); }

/* ---------------------------- responsive -------------------------- */
@media (max-width: 600px) {
  .foot { justify-content: center; text-align: center; }
}

/* -------------------------- reduced motion ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .glitch { animation: none; }
  .glitch::before, .glitch::after { display: none; }
  .status__dot { animation: none; }
}