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

body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: white;
    overflow-x: hidden;
}

.hero {
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
}

.content {
    max-width: 900px;
    text-align: center;
}

h1 {
    font-size: 4rem;
    margin-bottom: 30px;
    font-weight: 700;
}

p {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 20px;
    opacity: 0.9;
}

.countdown-section {
    position: relative;
    height: 30vh;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.number {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 10rem;
    font-weight: 800;
    opacity: 0;
    color: #38bdf8;
}

/* 20 sec cycle divided into 9 parts */
.n1 { animation: anim1 20s infinite; }
.n2 { animation: anim2 20s infinite; }
.n3 { animation: anim3 20s infinite; }
.n4 { animation: anim4 20s infinite; }
.n5 { animation: anim5 20s infinite; }
.n6 { animation: anim6 20s infinite; }
.n7 { animation: anim7 20s infinite; }
.n8 { animation: anim8 20s infinite; }
.n9 { animation: anim9 20s infinite; }

/* 1 - Left -> Center -> Right */
@keyframes anim1 {
    0%,100% {transform:translate(-120vw,-50%);opacity:0;}
    2% {opacity:1;}
    6% {transform:translate(-50%,-50%);opacity:1;}
    8.5% {transform:translate(-50%,-50%);opacity:1;}
    11% {transform:translate(120vw,-50%);opacity:0;}
}

/* 2 - Roll from right */
@keyframes anim2 {
    11%,100% {opacity:0;}
    12% {transform:translate(120vw,-50%) rotate(0deg);opacity:1;}
    16% {transform:translate(-50%,-50%) rotate(360deg);opacity:1;}
    18.5% {transform:translate(-50%,-50%) rotate(360deg);}
    22% {transform:translate(-120vw,-50%) rotate(720deg);opacity:0;}
}

/* 3 - Zigzag */
@keyframes anim3 {
    22%,100% {opacity:0;}
    23% {transform:translate(-100vw,-100px);opacity:1;}
    26% {transform:translate(-20vw,80px);}
    29% {transform:translate(20vw,-80px);}
    31% {transform:translate(-50%,-50%);}
    33.5% {transform:translate(-50%,-50%);}
    36% {transform:translate(120vw,50px);opacity:0;}
}

/* 4 - Drop from top */
@keyframes anim4 {
    36%,100% {opacity:0;}
    37% {transform:translate(-50%,-120vh);opacity:1;}
    41% {transform:translate(-50%,-50%);}
    43.5% {transform:translate(-50%,-50%);}
    46% {transform:translate(-50%,120vh);opacity:0;}
}

/* 5 - Grow */
@keyframes anim5 {
    46%,100% {opacity:0;}
    47% {transform:translate(-50%,-50%) scale(0);opacity:1;}
    51% {transform:translate(-50%,-50%) scale(1);}
    53.5% {transform:translate(-50%,-50%) scale(1);}
    56% {transform:translate(-50%,-50%) scale(4);opacity:0;}
}

/* 6 - Rotate */
@keyframes anim6 {
    56%,100% {opacity:0;}
    57% {transform:translate(-50%,-50%) rotate(-720deg) scale(.2);opacity:1;}
    61% {transform:translate(-50%,-50%) rotate(0deg) scale(1);}
    63.5% {transform:translate(-50%,-50%) rotate(0deg);}
    66% {transform:translate(-50%,-50%) rotate(720deg) scale(.2);opacity:0;}
}

/* 7 - Bounce */
@keyframes anim7 {
    66%,100% {opacity:0;}
    67% {transform:translate(-50%,120vh);opacity:1;}
    70% {transform:translate(-50%,-120px);}
    72% {transform:translate(-50%,-50%);}
    73.5% {transform:translate(-50%,-50%);}
    76% {transform:translate(-50%,-120vh);opacity:0;}
}

/* 8 - Orbit */
@keyframes anim8 {
    76%,100% {opacity:0;}
    77% {transform:translate(-50%,-50%) rotate(0deg) translateX(300px);opacity:1;}
    81% {transform:translate(-50%,-50%) rotate(360deg) translateX(0);}
    83.5% {transform:translate(-50%,-50%);}
    86% {transform:translate(-50%,-50%) rotate(720deg) translateX(300px);opacity:0;}
}

/* 9 - Spiral */
@keyframes anim9 {
    86%,100% {opacity:0;}
    87% {transform:translate(-50%,-50%) scale(4) rotate(0deg);opacity:0;}
    89% {opacity:1;}
    91% {transform:translate(-50%,-50%) scale(1) rotate(360deg);}
    93.5% {transform:translate(-50%,-50%) scale(1);}
    99% {transform:translate(-50%,-50%) scale(0) rotate(720deg);opacity:0;}
}