/* ============================================================
   HACKATHON THEGREENBOW – Aurora / BTTF Theme (green + violet)
   ============================================================ */

/* Monoton = closest free Google Font to the Back to the Future
   block-letter logo (thick 3D-striped uppercase).
   Orbitron = retro-futurist digital digits.
   Share Tech Mono = terminal / dashboard labels. */
@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

/* ---------- Theme tokens ---------- */
:root {
  --green-1: #9dffc9;   /* light mint */
  --green-2: #26ff9c;   /* electric green */
  --green-3: #00e676;   /* core green */
  --green-4: #00994d;   /* deep green */

  --violet-1: #e9c9ff;  /* lavender */
  --violet-2: #c77dff;  /* bright violet */
  --violet-3: #9b3dff;  /* core violet */
  --violet-4: #5a1aa0;  /* deep violet */

  --ink: #06091a;       /* near-black indigo */
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  color: #fff;
}

/* ============================================================
   NORTHERN LIGHTS BACKGROUND (green + violet)
   ============================================================ */
.aurora-container {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 110%, #1a0640 0%, #0a0420 45%, #02010a 100%);
  overflow: hidden;
  z-index: 0;
}

/* Deep ambient wash that slowly shifts green <-> violet */
.aurora-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(38,255,156,0.18), transparent 70%),
    radial-gradient(ellipse 55% 35% at 80% 25%, rgba(155,61,255,0.22), transparent 70%),
    radial-gradient(ellipse 70% 30% at 50% 90%, rgba(90,26,160,0.25), transparent 70%);
  animation: ambientShift 20s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes ambientShift {
  0%   { filter: hue-rotate(0deg)   saturate(1.1); opacity: 1; }
  100% { filter: hue-rotate(-25deg) saturate(1.3); opacity: 0.9; }
}

/* Starfield */
.stars {
  position: absolute;
  inset: 0;
  background: transparent;
  background-image:
    radial-gradient(1px 1px at  10%  15%, rgba(255,255,255,.9) 0%, transparent 100%),
    radial-gradient(1px 1px at  22%  35%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at  35%  8%,  rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at  48%  42%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at  60%  18%, rgba(255,255,255,.9) 0%, transparent 100%),
    radial-gradient(1px 1px at  73%  55%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at  85%  28%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at  92%  10%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at   5%  65%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at  17%  78%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at  30%  90%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at  55%  72%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at  68%  85%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at  80%  93%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at  44%  58%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at  95%  48%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 14%  48%, rgba(220,200,255,.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38%  22%, rgba(180,255,220,.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 62%  40%, rgba(220,200,255,.8) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78%  70%, rgba(180,255,220,.8) 0%, transparent 100%);
  animation: starTwinkle 6s ease-in-out infinite alternate;
}
@keyframes starTwinkle {
  0%   { opacity: 0.75; }
  100% { opacity: 1;    }
}

/* ============================================================
   AURORA BANDS — curtains of green + violet light
   Each band is a large blurred radial blob that drifts / breathes.
   ============================================================ */
.aurora {
  position: absolute;
  left: -20%;
  width: 140%;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  animation: auroraFloat linear infinite;
}

/* Aurora 1 — bright green curtain, upper third */
.aurora-1 {
  height: 55%;
  top: 3%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(38, 255, 156, 0.00) 10%,
    rgba(38, 255, 156, 0.55) 40%,
    rgba(0, 230, 118, 0.35) 65%,
    transparent 100%
  );
  animation-duration: 18s;
  animation-delay: 0s;
}

/* Aurora 2 — violet curtain, crossing the green */
.aurora-2 {
  height: 50%;
  top: 10%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(199, 125, 255, 0.50) 35%,
    rgba(155, 61, 255, 0.45) 65%,
    transparent 100%
  );
  animation-duration: 24s;
  animation-delay: -6s;
}

/* Aurora 3 — deep emerald ribbon, middle */
.aurora-3 {
  height: 45%;
  top: 22%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 255, 140, 0.45) 40%,
    rgba(0, 150, 80, 0.25) 70%,
    transparent 100%
  );
  animation-duration: 30s;
  animation-delay: -12s;
}

/* Aurora 4 — wide violet haze covering most of the sky */
.aurora-4 {
  height: 65%;
  top: 0%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(155, 61, 255, 0.28) 25%,
    rgba(90, 26, 160, 0.32) 55%,
    rgba(155, 61, 255, 0.22) 75%,
    transparent 100%
  );
  animation-duration: 22s;
  animation-delay: -4s;
}

@keyframes auroraFloat {
  0%   { opacity: 0;    transform: translateX(-15%) translateY(-2%) scaleY(0.8) skewX(-6deg); filter: blur(80px) hue-rotate(0deg);   }
  15%  { opacity: 1;                                                                                                              }
  50%  { opacity: 0.85; transform: translateX(5%)   translateY(3%)  scaleY(1.15) skewX(4deg); filter: blur(60px) hue-rotate(-15deg); }
  85%  { opacity: 1;                                                                                                              }
  100% { opacity: 0;    transform: translateX(15%)  translateY(-1%) scaleY(0.9) skewX(6deg);  filter: blur(90px) hue-rotate(10deg); }
}

/* Shimmering vertical "rays" on top of the auroras */
.aurora-container::after {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    repeating-linear-gradient(
      92deg,
      transparent 0px,
      transparent 80px,
      rgba(38,255,156,0.06) 80px,
      rgba(38,255,156,0.06) 82px,
      transparent 82px,
      transparent 170px,
      rgba(199,125,255,0.07) 170px,
      rgba(199,125,255,0.07) 172px
    );
  mix-blend-mode: screen;
  animation: rayDrift 14s linear infinite;
  pointer-events: none;
  opacity: 0.55;
}
@keyframes rayDrift {
  0%   { transform: translateX(0)    translateY(0)   skewX(-6deg); }
  100% { transform: translateX(-12%) translateY(-2%) skewX(-6deg); }
}

/* ============================================================
   LIGHTNING BOLTS — recolored to match green/violet theme
   ============================================================ */
.lightning-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.bolt {
  position: absolute;
  width: 3px;
  background: linear-gradient(180deg, var(--violet-2), #ffffff, var(--green-2));
  border-radius: 2px;
  box-shadow: 0 0 12px var(--violet-2), 0 0 25px var(--green-3);
  opacity: 0;
  animation: boltFlash 8s infinite;
}
.bolt-1 { height: 200px; left: 8%;  top: 5%;  transform: rotate(15deg);  animation-delay: 0s; }
.bolt-2 { height: 150px; right: 12%; top: 8%;  transform: rotate(-12deg); animation-delay: 2.5s; }
.bolt-3 { height: 180px; left: 5%;  top: 45%; transform: rotate(8deg);  animation-delay: 5s; }
.bolt-4 { height: 160px; right: 8%; top: 40%; transform: rotate(-18deg); animation-delay: 3.8s; }

@keyframes boltFlash {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  8%   { opacity: 0; }
  10%  { opacity: 0.7; }
  12%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ============================================================
   MAIN LAYOUT — 16:9 WRAPPER
   ============================================================ */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1.2vh 2vw 1vh;
  z-index: 2;
}

/* ============================================================
   HEADER — BTTF-style title
   ============================================================ */
.header {
  text-align: center;
  width: 100%;
  position: relative;
}

/* Monoton renders uppercase letters with the characteristic
   horizontal "stripes" of the BTTF logo, and plays very well with
   a multi-layer coloured drop-shadow to fake the 3D chrome effect. */
.hackathon-title {
  font-family: 'Monoton', 'Orbitron', sans-serif;
  font-weight: 400;                  /* Monoton only ships 400 */
  font-size: clamp(2.6rem, 7.5vw, 6.2rem);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--green-2);
  /* Stacked shadows: close violet edges for the 3D body,
     then green + violet glows for the aurora vibe. */
  text-shadow:
    1px 1px 0 var(--violet-3),
    2px 2px 0 var(--violet-3),
    3px 3px 0 var(--violet-4),
    4px 4px 0 var(--violet-4),
    5px 5px 0 #2a0a55,
    0 0 14px var(--green-2),
    0 0 30px var(--green-3),
    0 0 60px var(--violet-3);
  animation: titlePulse 3.2s ease-in-out infinite;
}

@keyframes titlePulse {
  0%, 100% {
    text-shadow:
      1px 1px 0 var(--violet-3),
      2px 2px 0 var(--violet-3),
      3px 3px 0 var(--violet-4),
      4px 4px 0 var(--violet-4),
      5px 5px 0 #2a0a55,
      0 0 14px var(--green-2),
      0 0 30px var(--green-3),
      0 0 60px var(--violet-3);
  }
  50% {
    text-shadow:
      1px 1px 0 var(--violet-3),
      2px 2px 0 var(--violet-3),
      3px 3px 0 var(--violet-4),
      4px 4px 0 var(--violet-4),
      5px 5px 0 #2a0a55,
      0 0 22px var(--green-1),
      0 0 48px var(--green-2),
      0 0 80px var(--violet-2);
  }
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5vw;
  margin-top: 0.3vh;
}

.brand-name {
  font-family: 'Monoton', 'Orbitron', sans-serif;
  font-size: clamp(1.1rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--violet-2);
  text-shadow:
    1px 1px 0 var(--green-4),
    2px 2px 0 #003a1e,
    0 0 10px var(--violet-2),
    0 0 24px var(--violet-3),
    0 0 40px var(--green-3);
}

.brand-separator {
  color: var(--green-2);
  font-size: clamp(1rem, 2.5vw, 2rem);
  text-shadow: 0 0 8px var(--green-2);
}

.date-display {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(0.7rem, 1.5vw, 1.1rem);
  letter-spacing: 0.25em;
  color: var(--green-1);
  text-shadow: 0 0 6px var(--green-2), 0 0 14px var(--violet-3);
  margin-top: 0.4vh;
}

/* ============================================================
   MAIN CONTENT — COUNTDOWN + TARDIGRADE
   ============================================================ */
.main-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vw;
  flex: 1;
  width: 100%;
  padding: 0.5vh 0;
}

/* Time circuit panel */
.time-circuit-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2vh;
}

.panel-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(0.55rem, 1.1vw, 0.85rem);
  letter-spacing: 0.3em;
  color: var(--violet-2);
  text-shadow: 0 0 6px var(--violet-2);
}

/* Countdown display */
.countdown-display {
  display: flex;
  gap: 0.8vw;
  align-items: center;
  background: rgba(10, 4, 30, 0.78);
  border: 2px solid var(--green-2);
  border-radius: 6px;
  padding: 1.2vh 2vw;
  box-shadow:
    0 0 18px rgba(38,255,156,0.55),
    0 0 40px rgba(155,61,255,0.35),
    inset 0 0 25px rgba(38,255,156,0.10);
  position: relative;
}

.countdown-display::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9px;
  border: 1px solid rgba(199,125,255,0.45);
  pointer-events: none;
}

.time-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3vh;
}

.time-value {
  font-family: 'Orbitron', monospace;
  font-size: clamp(2.5rem, 7vw, 6rem);
  font-weight: 900;
  color: var(--green-2);
  letter-spacing: 0.05em;
  line-height: 1;
  text-shadow:
    0 0 10px var(--green-2),
    0 0 25px var(--green-3),
    0 0 50px rgba(155,61,255,0.55);
  min-width: 2ch;
  text-align: center;
  animation: digitGlow 2s ease-in-out infinite;
}

@keyframes digitGlow {
  0%, 100% { opacity: 1; }
  49%      { opacity: 1; }
  50%      { opacity: 0.85; }
  51%      { opacity: 1; }
}

.time-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(0.45rem, 0.9vw, 0.7rem);
  letter-spacing: 0.2em;
  color: var(--violet-1);
  text-transform: uppercase;
}

.time-separator {
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  font-weight: 900;
  color: var(--violet-2);
  text-shadow: 0 0 10px var(--violet-2), 0 0 22px var(--green-2);
  line-height: 1;
  margin-bottom: 1.5vh;
  animation: blinkSep 1s step-end infinite;
}

@keyframes blinkSep {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.1; }
}

.destination-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(0.55rem, 1vw, 0.8rem);
  letter-spacing: 0.3em;
  color: var(--green-2);
  text-shadow: 0 0 8px var(--green-2);
  text-transform: uppercase;
}

/* Tardigrade */
.tardigrade-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.tardigrade-wrap img {
  width: clamp(150px, 24vw, 260px);
  height: auto;
  /* glow tuned to theme colors without tinting the creature too much */
  filter:
    drop-shadow(0 0 10px rgba(38,255,156,0.55))
    drop-shadow(0 0 24px rgba(155,61,255,0.55));
  animation: tardiFloat 4s ease-in-out infinite;
}

@keyframes tardiFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}

.tardigrade-label {
  font-family: 'Share Tech Mono', monospace;
  margin-top: 0.6vh;
  font-size: clamp(0.45rem, 0.85vw, 0.68rem);
  letter-spacing: 0.25em;
  color: var(--green-2);
  text-shadow: 0 0 6px var(--green-2), 0 0 14px var(--violet-3);
  text-align: center;
}

/* ============================================================
   BOTTOM — AGENDA + TEAMS
   ============================================================ */
.bottom-panels {
  display: flex;
  gap: 2vw;
  width: 100%;
  justify-content: center;
  padding-bottom: 0.5vh;
}

.panel {
  flex: 1;
  max-width: 42vw;
  background: rgba(8, 4, 22, 0.82);
  border: 1.5px solid;
  border-radius: 6px;
  padding: 1vh 1.5vw;
  position: relative;
  overflow: hidden;
}

.panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.6;
}

.panel-agenda {
  border-color: var(--green-2);
  color: var(--green-2);
  box-shadow: 0 0 16px rgba(38,255,156,0.25), inset 0 0 22px rgba(38,255,156,0.06);
}
.panel-agenda .panel-title { color: var(--green-2); text-shadow: 0 0 8px var(--green-2); }

.panel-teams {
  border-color: var(--violet-2);
  color: var(--violet-2);
  box-shadow: 0 0 16px rgba(155,61,255,0.30), inset 0 0 22px rgba(155,61,255,0.08);
}
.panel-teams .panel-title { color: var(--violet-2); text-shadow: 0 0 8px var(--violet-2); }

.panel-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.7rem, 1.5vw, 1.1rem);
  font-weight: 900;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 0.7vh;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.4vh;
  opacity: 0.9;
}

.agenda-list, .teams-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35vh;
}

.agenda-list li {
  display: flex;
  align-items: baseline;
  gap: 0.8vw;
  font-size: clamp(0.55rem, 1.2vw, 0.88rem);
  font-family: 'Share Tech Mono', monospace;
  color: var(--green-1);
}

.agenda-time {
  font-weight: 700;
  color: var(--green-2);
  text-shadow: 0 0 5px var(--green-2);
  min-width: 3.5em;
  flex-shrink: 0;
}

.agenda-event { color: #d8ffec; }

/* Highlight current/next (uses violet to stand out from the green list) */
.agenda-list li.active .agenda-time,
.agenda-list li.active .agenda-event {
  color: var(--violet-2);
  text-shadow: 0 0 8px var(--violet-2);
}

.teams-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4vh 1.5vw;
}

.teams-list li {
  font-size: clamp(0.5rem, 1.1vw, 0.82rem);
  font-family: 'Share Tech Mono', monospace;
  color: var(--violet-1);
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.team-num {
  color: var(--violet-2);
  font-weight: 700;
  text-shadow: 0 0 5px var(--violet-2);
  flex-shrink: 0;
  min-width: 1.8em;
}

.team-name { color: var(--violet-1); }
.team-name.tbd {
  color: rgba(220, 180, 255, 0.45);
  font-style: italic;
}

/* ============================================================
   SCANLINES OVERLAY (CRT effect)
   ============================================================ */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
}

/* ============================================================
   FINISHED STATE
   ============================================================ */
.countdown-finished {
  display: none;
  font-family: 'Monoton', 'Orbitron', sans-serif;
  font-size: clamp(1.5rem, 4.5vw, 3.8rem);
  font-weight: 400;
  color: var(--green-2);
  letter-spacing: 0.15em;
  text-shadow:
    2px 2px 0 var(--violet-3),
    4px 4px 0 var(--violet-4),
    0 0 20px var(--green-2),
    0 0 50px var(--violet-3);
  text-transform: uppercase;
  text-align: center;
  animation: finishedPulse 1s ease-in-out infinite;
}
@keyframes finishedPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.05); opacity: 0.9; }
}