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

:root{
    
    --bg:#f8f3e6; 
    --surface:#f0e6d2; 
    --accent:#8b4513; 
    --accent-light:#cd853f; 
    --highlight:#b35e2a; 
    --text:#4a3a28; 
    --muted:#a39a84; 
    --border:#c4b7a3; 
}

html{font-size:16px;scroll-behavior:smooth}

body{
    font-family:'Crimson Text',serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow-x:hidden;
    position:relative;
}


body::before{
    content:'';
    position:fixed;
    inset:0;
    background:radial-gradient(ellipse at top left, rgba(139,69,19,0.08) 0%, transparent 40%),
               radial-gradient(ellipse at bottom right, rgba(205,133,63,0.06) 0%, transparent 40%),
               radial-gradient(circle at 30% 50%, rgba(179,94,42,0.04) 0%, transparent 30%);
    z-index:0;
    pointer-events:none;
}


body::after{
    content:'';
    position:fixed;
    inset:0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(74,58,40,.08) 0  .5px, transparent .7px),
        radial-gradient(circle at 70% 65%, rgba(139,69,19,.06) 0 .6px, transparent .8px),
        repeating-linear-gradient(102deg, transparent 0 7px, rgba(139,69,19,.018) 8px 9px, transparent 10px 17px),
        repeating-linear-gradient(12deg, transparent 0 11px, rgba(74,58,40,.014) 12px 13px, transparent 14px 23px);
    background-size:5px 5px, 7px 7px, 43px 43px, 67px 67px;
    opacity:.7;
    mix-blend-mode:multiply;
    z-index:0;
    pointer-events:none;
}


.world-map{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
}
.world-map svg{
    width:100%;
    height:100%;
    display:block;
    opacity:.75;
}
.world-map .land{
    fill:rgba(139,69,19,.16);
    stroke:rgba(139,69,19,.6);
    stroke-width:1.2;
    stroke-linejoin:round;
}
.world-map .island{stroke-width:1}
.world-map .graticule{
    fill:none;
    stroke:rgba(139,69,19,.16);
    stroke-width:.7;
}
.world-map .equator{
    stroke:rgba(139,69,19,.32);
    stroke-dasharray:6 5;
}
.world-map .tropic{
    fill:none;
    stroke:rgba(139,69,19,.2);
    stroke-width:.6;
    stroke-dasharray:3 4;
}

.world-map::after{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at center, rgba(248,243,230,.55) 0%, rgba(248,243,230,.22) 45%, transparent 72%);
}


.container{
    position:relative;
    z-index:1;
    text-align:center;
    padding:2rem;
    max-width:650px;
    animation:fadeIn 0.8s ease-out both;
}

@keyframes fadeIn{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
}

h1{
    font-family:'Cinzel',serif;
    
    font-size:clamp(1.9rem,6.5vw,3.4rem);
    font-weight:900;
    line-height:1.2;
    margin-bottom:3rem;
    background:linear-gradient(135deg, var(--text) 0%, var(--accent-light) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    letter-spacing:.04em;
    filter:drop-shadow(2px 2px 3px rgba(74,58,40,.16));
    overflow-wrap:break-word;
}




.countdown-label{
    font-family:'Cinzel',serif;
    font-size:.9rem;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:var(--muted);
    margin-bottom:1.5rem;
    font-weight:700;
}
.countdown{
    display:flex;
    justify-content:center;
    gap:1rem;
    margin-bottom:3rem;
}
.countdown-box{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:1.5rem 1.25rem;
    min-width:90px;
    text-align:center;
    transition:all .3s ease;
}
.countdown-box:hover{
    border-color:var(--accent);
    transform:translateY(-2px);
}
.countdown-box .num{
    font-size:2.5rem;
    font-weight:800;
    color:var(--accent-light);
    font-variant-numeric:tabular-nums;
    line-height:1;
}
.countdown-box .label{
    font-family:'Cinzel',serif;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--muted);
    margin-top:.75rem;
    font-weight:700;
}


.socials{
    display:flex;
    justify-content:center;
    gap:1.2rem;
    margin-top:1.5rem;
}
.socials a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:50px;height:50px;
    border-radius:50%;
    background:var(--surface);
    border:3px solid var(--outline);
    color:var(--muted);
    transition:all .2s;
    text-decoration:none;
    box-shadow:4px 4px 0px var(--outline);
}
.socials a:hover{
    color:var(--accent);
    border-color:var(--accent);
    box-shadow:6px 6px 0px var(--outline);
    transform:translateY(-4px) scale(1.1);
}
.socials a svg{width:22px;height:22px}




.toast{
    position:fixed;
    bottom:2rem;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:var(--surface);
    border:1px solid var(--accent);
    border-radius:10px;
    padding:1rem 1.5rem;
    font-size:.95rem;
    color:var(--text);
    opacity:0;
    transition:all .3s ease;
    pointer-events:none;
    z-index:10;
}
.toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}



@media(max-width:600px){
    .container{padding:2rem 1.5rem}
    h1{font-size:clamp(1.6rem,7vw,1.9rem)}
    .countdown{gap:.75rem;flex-wrap:wrap}
    .countdown-box{min-width:70px;padding:1.25rem 1rem}
    .countdown-box .num{font-size:2rem}
}


.planes{
    position:fixed;
    inset:0;
    z-index:6; 
    overflow:hidden;
    pointer-events:none;
}
.plane{
    position:absolute;
    left:0;
    top:0;
    animation:journey var(--dur) linear infinite;
    animation-delay:var(--delay);
    will-change:transform;
}
.plane .art{
    position:relative;
    display:block;
    width:var(--size);
    height:var(--size);
}
.plane .glider{
    display:block;
    width:100%;
    height:100%;
    filter:drop-shadow(2px 3px 3px rgba(74,58,40,.28));
    animation:glide var(--bob) ease-in-out infinite alternate;
}
.plane .trail{
    position:absolute;
    right:92%;
    top:55%;
    width:calc(var(--size) * 2.8);
    height:2px;
    background:repeating-linear-gradient(90deg, rgba(139,69,19,.5) 0 6px, transparent 6px 13px);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 80%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 80%);
}
.plane.rtl .art{transform:scaleX(-1)}
@keyframes journey{
    0%{
        transform:translate(calc(100vw + 140px), -6vh) rotate(8deg);
    }
    22%{
        transform:translate(78vw, 16vh) rotate(-4deg); 
    }
    50%{
        transform:translate(46vw, 58vh) rotate(-10deg); 
    }
    78%{
        transform:translate(18vw, 30vh) rotate(-2deg); 
    }
    100%{
        transform:translate(-160px, -10vh) rotate(6deg); 
    }
}

@keyframes glide{
    from{transform:translateY(-7px) rotate(-5deg)}
    to{transform:translateY(7px) rotate(4deg)}
}