/* =======================================================
   home.css — Zone Click Coming Soon Page
   ======================================================= */

/* ----- Reset & Base ----- */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

/* ----- Full-screen wrapper ----- */
.soon-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #020814;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* =======================================================
   ANIMATED STARFIELD BACKGROUND
   ======================================================= */
.stars, .stars2, .stars3 {
    position: absolute;
    inset: 0;
    background: transparent;
    border-radius: 50%;
}

.stars  { animation: animStars  80s linear infinite; box-shadow: var(--stars-small); }
.stars2 { animation: animStars 160s linear infinite; box-shadow: var(--stars-medium); width: 2px; height: 2px; }
.stars3 { animation: animStars 240s linear infinite; box-shadow: var(--stars-large);  width: 3px; height: 3px; }

/* Generate stars with CSS custom property via inline style override */
.stars  { width: 1px; height: 1px;
    box-shadow:
        120px 240px #fff, 300px 80px #fff, 560px 400px #fff, 780px 120px #fff,
        950px 320px #fff, 1100px 60px #fff, 200px 600px #fff, 450px 700px #fff,
        650px 550px #fff, 870px 720px #fff, 1050px 480px #fff, 1200px 200px #fff,
        80px 900px #fff,  330px 850px #fff, 720px 900px #fff, 1000px 820px #fff,
        1300px 500px #fff, 1400px 150px #fff, 40px 450px #fff, 600px 200px #fff,
        900px 50px #fff,  1150px 680px #fff, 1350px 780px #fff, 250px 300px #fff,
        500px 130px #fff, 750px 750px #fff;
}
.stars2 { width: 2px; height: 2px;
    box-shadow:
        190px 350px rgba(255,255,255,.7), 480px 500px rgba(255,255,255,.7),
        820px 220px rgba(255,255,255,.7), 1080px 400px rgba(255,255,255,.7),
        60px 680px rgba(255,255,255,.7),  370px 760px rgba(255,255,255,.7),
        680px 640px rgba(255,255,255,.7), 1200px 120px rgba(255,255,255,.7),
        940px 860px rgba(255,255,255,.7), 1380px 320px rgba(255,255,255,.7);
}
.stars3 { width: 3px; height: 3px;
    box-shadow:
        280px 180px rgba(255,255,255,.5), 700px 460px rgba(255,255,255,.5),
        1020px 280px rgba(255,255,255,.5), 400px 820px rgba(255,255,255,.5),
        1260px 600px rgba(255,255,255,.5), 160px 520px rgba(255,255,255,.5);
}

@keyframes animStars {
    from { transform: translateY(0); }
    to   { transform: translateY(-2000px); }
}

/* =======================================================
   GRADIENT ORB BLOBS
   ======================================================= */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.18;
    animation: orbFloat 12s ease-in-out infinite;
}
.orb-1 { width: 500px; height: 500px; background: #ffc107; top: -150px;  left: -150px;  animation-delay: 0s; }
.orb-2 { width: 600px; height: 600px; background: #0d6efd; bottom: -200px; right: -200px; animation-delay: 4s; }
.orb-3 { width: 400px; height: 400px; background: #20c997; top: 40%;      left: 40%;     animation-delay: 8s; }

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(30px, -40px) scale(1.05); }
    66%       { transform: translate(-20px, 30px) scale(0.95); }
}

/* =======================================================
   LANGUAGE SWITCHER
   ======================================================= */
.lang-switcher {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 100;
}
.lang-switcher a {
    color: rgba(255,255,255,.6);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: 1px;
    border: 1px solid rgba(255,255,255,.2);
    padding: .4rem 1rem;
    border-radius: 2rem;
    transition: all .3s;
}
.lang-switcher a:hover {
    color: #ffc107;
    border-color: #ffc107;
}

/* =======================================================
   MAIN CONTENT
   ======================================================= */
.soon-content {
    position: relative;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    padding: 0 1.5rem;
}

/* =======================================================
   4D ROTATING LOGO CUBE
   ======================================================= */
.logo-stage {
    perspective: 600px;
    width: 90px;
    height: 90px;
    margin-bottom: .5rem;
}

.logo-cube {
    width: 90px;
    height: 90px;
    position: relative;
    transform-style: preserve-3d;
    animation: cube4d 8s cubic-bezier(.45,.05,.55,.95) infinite;
}

.logo-face {
    position: absolute;
    inset: 0;
    width: 90px;
    height: 90px;
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 193, 7, 0.08);
    border: 1.5px solid rgba(255, 193, 7, 0.35);
    backdrop-filter: blur(4px);
}
.logo-icon { font-size: 2.4rem; color: #ffc107; filter: drop-shadow(0 0 12px #ffc10799); }

.logo-front  { transform: rotateY(  0deg) translateZ(45px); }
.logo-back   { transform: rotateY(180deg) translateZ(45px); }
.logo-left   { transform: rotateY(-90deg) translateZ(45px); }
.logo-right  { transform: rotateY( 90deg) translateZ(45px); }

@keyframes cube4d {
    0%   { transform: rotateX(  0deg) rotateY(  0deg) rotateZ( 0deg); }
    20%  { transform: rotateX( 20deg) rotateY( 90deg) rotateZ( 5deg); }
    40%  { transform: rotateX(-15deg) rotateY(180deg) rotateZ(-5deg); }
    60%  { transform: rotateX( 10deg) rotateY(270deg) rotateZ( 8deg); }
    80%  { transform: rotateX(-20deg) rotateY(340deg) rotateZ(-3deg); }
    100% { transform: rotateX(  0deg) rotateY(360deg) rotateZ( 0deg); }
}

/* =======================================================
   BRAND NAME WITH GLOW + GLITCH
   ======================================================= */
.brand-name {
    font-size: clamp(2.8rem, 8vw, 5.5rem);
    font-weight: 800;
    letter-spacing: -1px;
    color: #fff;
    margin: 0;
    position: relative;
    text-shadow:
        0 0 20px rgba(255,193,7,.5),
        0 0 60px rgba(255,193,7,.2);
    animation: brandGlow 3s ease-in-out infinite;
}
.brand-name::before,
.brand-name::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: .06;
}
.brand-name::before {
    color: #ffc107;
    animation: glitch1 4s infinite linear;
    clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
}
.brand-name::after {
    color: #0d6efd;
    animation: glitch2 4s infinite linear;
    clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
}

@keyframes brandGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(255,193,7,.5), 0 0 60px rgba(255,193,7,.2); }
    50%       { text-shadow: 0 0 40px rgba(255,193,7,.8), 0 0 100px rgba(255,193,7,.4), 0 0 160px rgba(255,193,7,.1); }
}
@keyframes glitch1 {
    0%,94%       { transform: none; }
    95%          { transform: translate(-3px, 1px); }
    96%          { transform: translate(3px, -1px); }
    97%          { transform: translate(-2px, 2px); }
    98%,100%     { transform: none; }
}
@keyframes glitch2 {
    0%,92%       { transform: none; }
    93%          { transform: translate(3px, -1px); }
    94%          { transform: translate(-3px, 1px); }
    95%          { transform: translate(2px, -2px); }
    96%,100%     { transform: none; }
}

/* =======================================================
   TAGLINE
   ======================================================= */
.tagline {
    font-size: clamp(.85rem, 2.5vw, 1.1rem);
    color: rgba(255,255,255,.45);
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}

/* =======================================================
   COMING SOON BADGE
   ======================================================= */
.soon-badge {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255,193,7,.08);
    border: 1px solid rgba(255,193,7,.3);
    color: #ffc107;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: .5rem 1.4rem;
    border-radius: 2rem;
    backdrop-filter: blur(6px);
}
.soon-dot {
    width: 8px; height: 8px;
    background: #ffc107;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255,193,7,.6);
    animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,193,7,.7); }
    70%  { box-shadow: 0 0 0 10px rgba(255,193,7,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,193,7,0); }
}

/* =======================================================
   DIVIDER LINE
   ======================================================= */
.soon-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffc107, transparent);
    border-radius: 2px;
}

/* =======================================================
   SUB TEXT
   ======================================================= */
.soon-sub {
    font-size: clamp(.85rem, 2vw, 1rem);
    color: rgba(255,255,255,.35);
    margin: 0;
    max-width: 480px;
    line-height: 1.7;
}

/* =======================================================
   BOTTOM CREDIT
   ======================================================= */
.soon-credit {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: .75rem;
    color: rgba(255,255,255,.2);
    letter-spacing: 1px;
    z-index: 10;
    white-space: nowrap;
}
.soon-credit span { color: rgba(255,193,7,.5); font-weight: 600; }