/* =====================================================================
   TV50FEST — 19/06/2027
   To use a higher-resolution background: replace assets/background.jpg
   with the new file (keep the name), or point --bg-image at another path.
   ===================================================================== */
:root {
  --bg-image: url("assets/background.jpg");
  --seg-on: #ff4d1f;          /* lit segment (alarm-clock red/orange) */
  --seg-off: rgba(255, 77, 31, 0.10);
  --seg-glow: rgba(255, 92, 40, 0.75);
  --ink: #ffffff;
  --shell: rgba(10, 0, 20, 0.35);
  /* Chunky noise used to flake away the painted date. Lower the last
     slope value (2.1) for a more worn look, raise it for cleaner paint. */
  --paint-wear: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340'>\
<filter id='w'>\
<feTurbulence type='fractalNoise' baseFrequency='.055 .09' numOctaves='4' seed='7'/>\
<feColorMatrix type='saturate' values='0'/>\
<feComponentTransfer><feFuncA type='linear' slope='2.1' intercept='-.28'/></feComponentTransfer>\
</filter>\
<rect width='340' height='340' filter='url(%23w)'/></svg>");
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: #120020;
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow: hidden;
}

/* ---------- background ---------- */
.bg { position: fixed; inset: 0; z-index: 0; }

.bg-layer {
  position: absolute;
  inset: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-base { filter: saturate(1.15) contrast(1.05); }

/* chromatic aberration ghosts */
.bg-ghost { mix-blend-mode: screen; opacity: .35; }
.bg-ghost-r {
  filter: url(#none) sepia(1) saturate(6) hue-rotate(-25deg);
  animation: drift-r 7s steps(30, end) infinite;
}
.bg-ghost-c {
  filter: sepia(1) saturate(6) hue-rotate(140deg);
  animation: drift-c 9s steps(24, end) infinite;
}

@keyframes drift-r {
  0%, 92%, 100% { transform: translate3d(0,0,0); opacity: .22; }
  93% { transform: translate3d(7px, -3px, 0); opacity: .6; }
  95% { transform: translate3d(-9px, 2px, 0); opacity: .5; }
  97% { transform: translate3d(4px, 4px, 0); opacity: .65; }
}
@keyframes drift-c {
  0%, 88%, 100% { transform: translate3d(0,0,0); opacity: .18; }
  89% { transform: translate3d(-8px, 3px, 0); opacity: .55; }
  92% { transform: translate3d(6px, -5px, 0); opacity: .45; }
}

/* horizontal slice tears */
.bg-slice { mix-blend-mode: hard-light; opacity: 0; }
.bg-slice-1 { animation: tear1 6.5s steps(1, end) infinite; }
.bg-slice-2 { animation: tear2 8.3s steps(1, end) infinite; }
.bg-slice-3 { animation: tear3 11s steps(1, end) infinite; }

@keyframes tear1 {
  0%, 89%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
  90% { opacity: .9; clip-path: inset(18% 0 74% 0); transform: translateX(-3%) scaleX(1.02); }
  93% { opacity: .8; clip-path: inset(41% 0 52% 0); transform: translateX(2.5%); }
  96% { opacity: 0; }
}
@keyframes tear2 {
  0%, 84%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
  85% { opacity: .85; clip-path: inset(62% 0 31% 0); transform: translateX(4%) skewX(-1deg); }
  88% { opacity: .7; clip-path: inset(9% 0 85% 0); transform: translateX(-4.5%); }
  91% { opacity: 0; }
}
@keyframes tear3 {
  0%, 76%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
  77% { opacity: .75; clip-path: inset(74% 0 19% 0); transform: translateX(-6%); filter: invert(1) hue-rotate(90deg); }
  79% { opacity: .6; clip-path: inset(30% 0 63% 0); transform: translateX(5%); filter: invert(1); }
  82% { opacity: 0; }
}

/* ---------- overlays ---------- */
.scanlines {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.28) 0px,
    rgba(0,0,0,.28) 1px,
    rgba(255,255,255,.02) 2px,
    rgba(255,255,255,.02) 3px
  );
  mix-blend-mode: multiply;
  opacity: .55;
  animation: roll 9s linear infinite;
}
@keyframes roll { from { background-position-y: 0; } to { background-position-y: 100px; } }

.noise {
  position: fixed; inset: -50%; z-index: 3; pointer-events: none;
  opacity: .10;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter>\
<rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation: grain .5s steps(4, end) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); }
  25% { transform: translate(-4%, 3%); }
  50% { transform: translate(3%, -3%); }
  75% { transform: translate(-2%, -4%); }
  100% { transform: translate(0,0); }
}

.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(5,0,12,.78) 100%);
}

/* ---------- stage ---------- */
.stage {
  position: relative;
  z-index: 4;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vh, 44px);
  padding: 24px 16px;
  text-align: center;
}

/* ---------- painted, worn-out date (bottom of page) ---------- */
h1.glitch {
  position: absolute;               /* anchored to the bottom of the page */
  left: 50%;
  bottom: clamp(18px, 5vh, 56px);
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font-family: "Rubik Distressed", "Rubik", Impact, "Arial Black", sans-serif;
  font-size: clamp(1.7rem, 6.2vw, 4.4rem);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  color: #f4ece2;                   /* chalky, slightly off-white paint */
  text-shadow:
    0 0 1px rgba(255,255,255,.35),
    2px 3px 0 rgba(20, 0, 35, .45),
    0 0 26px rgba(0,0,0,.5);
  /* flaked paint: noise mask eats away at the letterforms */
  -webkit-mask-image: var(--paint-wear);
  mask-image: var(--paint-wear);
  -webkit-mask-size: 340px 340px;
  mask-size: 340px 340px;
  animation: jitter 5s steps(1, end) infinite;
}
h1.glitch::before,
h1.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding-bottom: inherit;
  pointer-events: none;
}
h1.glitch::before {
  color: #00fff0;
  mix-blend-mode: screen;
  animation: shift-a 3.2s steps(2, end) infinite;
  clip-path: inset(0 0 55% 0);
}
h1.glitch::after {
  color: #ff0060;
  mix-blend-mode: screen;
  animation: shift-b 2.7s steps(2, end) infinite;
  clip-path: inset(48% 0 0 0);
}
@keyframes shift-a {
  0%, 80%, 100% { transform: translate(0,0); opacity: .45; }
  82% { transform: translate(-4px, 2px); opacity: 1; }
  86% { transform: translate(5px, -2px); opacity: .9; }
  90% { transform: translate(-2px, 1px); opacity: 1; }
}
@keyframes shift-b {
  0%, 74%, 100% { transform: translate(0,0); opacity: .45; }
  76% { transform: translate(4px, -2px); opacity: 1; }
  81% { transform: translate(-6px, 2px); opacity: .85; }
  85% { transform: translate(2px, 2px); opacity: 1; }
}
@keyframes jitter {
  0%, 96%, 100% { transform: translateX(-50%) skewX(0); }
  97% { transform: translateX(calc(-50% - 2px)) skewX(-1.5deg); }
  98% { transform: translateX(calc(-50% + 3px)) skewX(1.5deg); }
  99% { transform: translateX(calc(-50% - 1px)) skewX(0); }
}

/* ---------- 7-segment clock ---------- */
.clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(6px, 1.6vw, 18px);
  padding: clamp(12px, 2.4vw, 26px) clamp(14px, 3vw, 34px);
  background: var(--shell);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  box-shadow: 0 0 60px rgba(255, 60, 20, .18), inset 0 0 40px rgba(0,0,0,.45);
  animation: clock-glitch 7s steps(1, end) infinite;
}
@keyframes clock-glitch {
  0%, 93%, 100% { transform: translate(0,0); filter: none; }
  94% { transform: translate(-3px, 1px); filter: hue-rotate(40deg); }
  96% { transform: translate(4px, -1px); filter: hue-rotate(-30deg) contrast(1.2); }
  98% { transform: translate(-1px, 0); }
}

.unit { display: flex; flex-direction: column; align-items: center; gap: .55em; }
.digits { display: flex; gap: clamp(3px, .8vw, 9px); }

.digit { display: block; width: clamp(26px, 6.4vw, 74px); height: auto; }
.digit .seg { fill: var(--seg-off); transition: fill .08s linear; }
.digit .seg.on {
  fill: var(--seg-on);
  filter: drop-shadow(0 0 4px var(--seg-glow)) drop-shadow(0 0 14px var(--seg-glow));
}

.sep {
  width: clamp(8px, 1.6vw, 16px);
  align-self: stretch;
  margin-top: clamp(6px, 1.4vw, 16px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 26px);
  animation: blink 1s steps(1, end) infinite;
}
.sep::before, .sep::after {
  content: "";
  display: block;
  width: clamp(6px, 1.2vw, 13px);
  height: clamp(6px, 1.2vw, 13px);
  border-radius: 2px;
  background: var(--seg-on);
  box-shadow: 0 0 10px var(--seg-glow);
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .12; } }

.label {
  font-size: clamp(.52rem, 1.2vw, .78rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .72;
  padding-left: .34em;
}

/* ---------- tagline ---------- */
.tagline {
  position: relative;
  margin: 0;
  font-size: clamp(.7rem, 2vw, 1.15rem);
  letter-spacing: .6em;
  padding-left: .6em;
  text-transform: uppercase;
  opacity: .9;
}
.glitch-soft::before {
  content: attr(data-text);
  position: absolute; inset: 0;
  color: #00fff0;
  mix-blend-mode: screen;
  animation: shift-a 4.4s steps(2, end) infinite;
}

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

@media (max-width: 480px) {
  .clock { gap: 4px; padding: 12px 10px; }
  .label { letter-spacing: .18em; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-ghost, .bg-slice, .scanlines, .noise,
  h1.glitch, h1.glitch::before, h1.glitch::after,
  .clock, .sep, .glitch-soft::before {
    animation: none !important;
  }
  .bg-ghost, .bg-slice { opacity: 0; }
}