@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Orbitron:wght@400;500;600&display=swap');

:root {
  --green: #D4FB0C;
  --green-dim: rgba(212, 251, 12, 0.45);
  --background: #050604;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--background);
  font-family: 'Space Grotesk', sans-serif;
  color: var(--green);
}

/* BACKGROUND */

body::before {
content: "";
position: fixed;
inset: 0;

background:
    radial-gradient(
        ellipse at 50% 38%,
        rgba(120, 145, 20, 0.09),
        transparent 55%
    ),
    linear-gradient(
        180deg,
        #050604,
        #080a05 50%,
        #050604
    );

pointer-events: none;

}

/* AMBIENT DETAIL */

body::after {
content: "";
position: fixed;
width: 1000px;
height: 1000px;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
border: 1px solid rgba(212, 251, 12, 0.018);
border-radius: 50%;

box-shadow:
    0 0 0 150px rgba(212, 251, 12, 0.006),
    0 0 0 300px rgba(212, 251, 12, 0.004);

pointer-events: none;

}

/* LOGO */

.header {
position: absolute;
top: 13%;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 0 20px;
}

.logo {
display: block;
width: clamp(150px, 19vw, 270px);
max-width: 100%;
height: auto;
object-fit: contain;

filter: drop-shadow(
    0 0 25px rgba(212, 251, 12, 0.09)
);

}

/* COUNTDOWN POSITION */

.countdown-container {
position: absolute;
top: 76%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 0 12px;
display: flex;
justify-content: center;
align-items: center;
}

/* REMOVE HORIZONTAL LINE */

.countdown-container::before,
.countdown-container::after {
display: none;
}

/* COUNTDOWN LAYOUT */

.countdown {
display: flex;
align-items: flex-start;
justify-content: center;
gap: clamp(12px, 2vw, 25px);
position: relative;
z-index: 2;
white-space: nowrap;
}

/* TIME UNITS */

.time-unit {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
}

/* TIMER NUMBERS */

.time-unit span {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(45px, 5.5vw, 76px);
font-weight: 600;
letter-spacing: -0.075em;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--green);

text-shadow:
    0 0 18px rgba(212, 251, 12, 0.12);

}

/* LABELS */

.time-unit small {
margin-top: 20px;
font-family: 'Orbitron', sans-serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 5px;
color: var(--green-dim);
text-transform: uppercase;
}

/* SEPARATORS */

.separator {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(35px, 4.5vw, 58px);
font-weight: 400;
line-height: 1;
color: var(--green);
opacity: 0.5;
animation: separatorPulse 3s ease-in-out infinite;
}

/* PARTICLES */

.particles {
display: none;
}

/* ANIMATION */

@keyframes separatorPulse {
0%, 100% {
opacity: 0.3;
}

50% {
    opacity: 0.75;
}

}

/* MOBILE PHONES */

@media (max-width: 600px) {
.header {
top: 19%;
}

.logo {
    width: clamp(145px, 43vw, 190px);
}

.countdown-container {
    top: 70%;
    padding: 0 8px;
}

.countdown {
    width: 100%;
    justify-content: center;
    gap: clamp(3px, 1.5vw, 8px);
}

.time-unit span {
    font-size: clamp(27px, 8vw, 42px);
    letter-spacing: -0.07em;
}

.time-unit small {
    font-size: clamp(5px, 1.5vw, 7px);
    letter-spacing: clamp(1px, 0.4vw, 2px);
    margin-top: 14px;
}

.separator {
    font-size: clamp(21px, 5.5vw, 27px);
}

}

/* VERY SMALL PHONES */

@media (max-width: 360px) {
.countdown {
gap: 3px;
}

.time-unit span {
    font-size: 26px;
}

.time-unit small {
    font-size: 5px;
    letter-spacing: 0.8px;
    margin-top: 12px;
}

.separator {
    font-size: 21px;
}

}

/* SHORT PHONE SCREENS */

@media (max-width: 600px) and (max-height: 650px) {
.header {
top: 12%;
}

.countdown-container {
    top: 72%;
}

}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
.separator {
animation: none;
}
}