/* ============================================================
   Moi Travel — "Site in development" splash + animation
   ============================================================ */
:root { --cn-accent: #8E1F2C; --cn-accent-soft: #F7EAEC; --cn-ink: #1A1A1A; }

* { box-sizing: border-box; }
.cn-body {
    margin: 0; min-height: 100vh; font-family: 'Inter', system-ui, sans-serif;
    display: flex; align-items: center; justify-content: center; text-align: center;
    color: var(--cn-ink); padding: 32px 20px;
    background: radial-gradient(1200px 600px at 50% -10%, #fff 0%, #FBF4F5 45%, #F4E7E9 100%);
    overflow: hidden;
}

.cn-stage { max-width: 560px; animation: cn-fade-up .9s ease both; }

/* ---- Animated radar / "be on the lookout" scene ---- */
.cn-scene { position: relative; width: 230px; height: 230px; margin: 0 auto 14px; }

.cn-ring {
    position: absolute; inset: 0; margin: auto; border-radius: 50%;
    border: 2px solid var(--cn-accent); opacity: 0; transform: scale(.4);
    animation: cn-pulse 3.2s ease-out infinite;
}
.cn-ring-2 { animation-delay: 1.06s; }
.cn-ring-3 { animation-delay: 2.12s; }

/* a little plane orbiting the logo — "something coming, be on the lookout" */
.cn-orbit {
    position: absolute; inset: 0; margin: auto; width: 100%; height: 100%;
    animation: cn-spin 6s linear infinite;
}
.cn-plane {
    position: absolute; top: -6px; left: 50%; width: 38px; height: 38px;
    margin-left: -19px; color: var(--cn-accent);
    display: flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 50%; box-shadow: 0 6px 16px rgba(142,31,44,.25);
    transform: rotate(45deg); /* point the paper plane along its travel direction */
}
.cn-plane svg { width: 20px; height: 20px; }

.cn-logo-wrap {
    position: absolute; inset: 0; margin: auto; width: 132px; height: 132px;
    background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 18px 50px rgba(142,31,44,.18);
    animation: cn-float 4s ease-in-out infinite;
}
.cn-logo { width: 86px; height: 86px; object-fit: contain; }

.cn-title {
    font-size: clamp(26px, 5vw, 40px); font-weight: 800; letter-spacing: -.02em;
    margin: 8px 0 10px; line-height: 1.12;
}
.cn-msg {
    font-size: clamp(15px, 2.4vw, 17px); line-height: 1.6; color: #5b5b62;
    margin: 0 auto; max-width: 460px; font-weight: 400;
}

/* bouncing "loading" dots */
.cn-dots { display: flex; gap: 9px; justify-content: center; margin: 26px 0 8px; }
.cn-dots span {
    width: 11px; height: 11px; border-radius: 50%; background: var(--cn-accent);
    animation: cn-bounce 1.3s ease-in-out infinite;
}
.cn-dots span:nth-child(2) { animation-delay: .18s; opacity: .7; }
.cn-dots span:nth-child(3) { animation-delay: .36s; opacity: .45; }

.cn-admin-link {
    display: inline-block; margin-top: 22px; font-size: 13px; font-weight: 600;
    color: var(--cn-accent); text-decoration: none; opacity: .7; transition: opacity .15s;
}
.cn-admin-link:hover { opacity: 1; text-decoration: underline; }

@keyframes cn-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cn-pulse {
    0%   { opacity: .55; transform: scale(.4); }
    80%  { opacity: 0;   transform: scale(1.05); }
    100% { opacity: 0;   transform: scale(1.05); }
}
@keyframes cn-spin { to { transform: rotate(360deg); } }
@keyframes cn-float { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } }
@keyframes cn-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (prefers-reduced-motion: reduce) {
    .cn-ring, .cn-orbit, .cn-logo-wrap, .cn-dots span, .cn-stage { animation: none; }
    .cn-ring { opacity: .25; transform: scale(1); }
}