/* ================================================================
   JUNIOR LAKSH 2026 - Coming Soon Page Styles
   Theme: Prism / Bauhaus / Geometric - Poster Faithful
   Colors: Blue #2558F4 | Orange #F36A1C | Purple #CF4FE8 | Green #0EC64F | DarkGreen #0A6B41
   ================================================================ */

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

:root {
    --blue:       #2558F4;
    --orange:     #F36A1C;
    --purple:     #CF4FE8;
    --green:      #0EC64F;
    --darkgreen:  #0A6B41;
    --white:      #FFFFFF;
    --text-dark:  #1A1A2E;
    --text-mid:   #555577;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    background: #FAFBFF;
    color: var(--text-dark);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* ── Background Mouse Glow ────────────────────────────── */
.mouse-glow {
    position: fixed;
    top: 0; left: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(37, 88, 244, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    transition: background 1.5s ease;
    will-change: transform;
}

/* ── Background cross grid ────────────────────────────── */
.bg-grid {
    position: fixed;
    inset: 0;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cline x1='26' y1='21' x2='26' y2='31' stroke='%23c0c8e0' stroke-width='1.3'/%3E%3Cline x1='21' y1='26' x2='31' y2='26' stroke='%23c0c8e0' stroke-width='1.3'/%3E%3C/svg%3E");
    background-size: 52px 52px;
    opacity: 0.65;
    pointer-events: none;
}

/* ── Floating geometric shapes (Bauhaus poster style) ── */
.geo-shapes {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.geo {
    position: absolute;
    animation: geoFloat 20s ease-in-out infinite;
}

.geo-1 {
    width: 130px; height: 130px;
    background: var(--blue);
    top: -65px; right: 6%;
    border-radius: 50%;
    animation-delay: 0s; animation-duration: 22s;
    opacity: 0.1;
}
.geo-2 {
    width: 100px; height: 100px;
    background: var(--orange);
    bottom: 10%; left: -35px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    animation-delay: -4s; animation-duration: 18s;
    opacity: 0.14;
}
.geo-3 {
    width: 75px; height: 75px;
    background: var(--purple);
    top: 18%; right: 4%;
    border-radius: 50%;
    animation-delay: -8s; animation-duration: 25s;
    opacity: 0.13;
}
.geo-4 {
    width: 170px; height: 170px;
    background: var(--green);
    bottom: -70px; right: 2%;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    animation-delay: -2s; animation-duration: 20s;
    opacity: 0.08;
}
.geo-5 {
    width: 55px; height: 55px;
    background: var(--orange);
    top: 8%; left: 4%;
    border-radius: 8px;
    transform: rotate(45deg);
    animation-delay: -12s; animation-duration: 28s;
    opacity: 0.11;
}
.geo-6 {
    width: 210px; height: 210px;
    background: var(--blue);
    top: 50%; left: -100px;
    border-radius: 50%;
    animation-delay: -6s; animation-duration: 24s;
    opacity: 0.06;
}

@keyframes geoFloat {
    0%, 100%  { transform: translate(0, 0) rotate(0deg) scale(1); }
    25%       { transform: translate(18px, -22px) rotate(6deg) scale(1.05); }
    50%       { transform: translate(32px, 12px) rotate(-3deg) scale(0.95); }
    75%       { transform: translate(-12px, -18px) rotate(9deg) scale(1.03); }
}

/* ── Prisms (diamond shapes from poster) ─────────────── */
.prisms {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.prism {
    position: absolute;
    animation: prismDrift 16s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.prism svg { display: block; }

.prism-1 { width: 58px; top: 14%; left: 6%;    animation-delay: 0s; }
.prism-2 { width: 44px; top: 28%; right: 8%;   animation-delay: -5s;  animation-duration: 19s; }
.prism-3 { width: 52px; bottom: 22%; left: 9%; animation-delay: -9s;  animation-duration: 23s; }
.prism-4 { width: 40px; bottom: 16%; right: 11%; animation-delay: -3s; animation-duration: 17s; }

@keyframes prismDrift {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%      { transform: translateY(-28px) rotate(10deg); }
}

/* ── Main container ───────────────────────────────────── */
.container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 900px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 32px 28px 0;
}

/* ── Logos row ────────────────────────────────────────── */
.logos-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
}

.ni-logo {
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 2px 10px rgba(37,88,244,0.18));
}

.triangle-marks { width: 108px; }
.triangle-marks svg { width: 100%; height: auto; }

/* ── Hero section ─────────────────────────────────────── */
.hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 38px;
    padding: 10px 0;
}

/* ── Logo wrapper ─────────────────────────────────────── */
.logo-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.logo-glow-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(37,88,244,0.18);
    animation: ringPulse 3.2s ease-in-out infinite;
    width: 320px; height: 320px;
    pointer-events: none;
}

.logo-glow-ring.ring-2 {
    width: 410px; height: 410px;
    border-color: rgba(207,79,232,0.11);
    animation-delay: -1.6s;
    animation-duration: 4s;
}

@keyframes ringPulse {
    0%, 100% { transform: scale(1); opacity: 0.35; }
    50%       { transform: scale(1.07); opacity: 0.9; }
}

.main-logo {
    width: min(430px, 82vw);
    height: auto;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 10px 36px rgba(37,88,244,0.22)) drop-shadow(0 2px 8px rgba(0,0,0,0.08));
    transition: filter 0.5s ease;
}

/* ── Coming Soon block ────────────────────────────────── */
.coming-soon-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
}

.coming-soon-line {
    display: flex;
    align-items: baseline;
    line-height: 1;
}

.cs-char {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(44px, 9.5vw, 108px);
    font-weight: 900;
    letter-spacing: 0.07em;
    color: transparent;
    -webkit-text-stroke: 2.5px var(--text-dark);
    text-stroke: 2.5px var(--text-dark);
    line-height: 1;
    transition: -webkit-text-stroke-color 0.4s ease, color 0.4s ease;
}

.cs-space {
    display: inline-block;
    width: 0.38em;
}

/* Colour shift per-char, staggered via JS */
.cs-char.blue   { -webkit-text-stroke-color: var(--blue);   color: rgba(37,88,244,0.06); }
.cs-char.orange { -webkit-text-stroke-color: var(--orange);  color: rgba(243,106,28,0.06); }
.cs-char.purple { -webkit-text-stroke-color: var(--purple);  color: rgba(207,79,232,0.06); }
.cs-char.green  { -webkit-text-stroke-color: var(--green);   color: rgba(14,198,79,0.06); }

/* colour underline bar */
.cs-underline {
    display: flex;
    width: 90%;
    height: 5px;
    border-radius: 99px;
    overflow: hidden;
    gap: 4px;
    transform: scaleX(0);
    transform-origin: left;
}

.ul-seg { flex: 1; border-radius: 99px; height: 100%; }
.seg-blue     { background: var(--blue); }
.seg-orange   { background: var(--orange); }
.seg-purple   { background: var(--purple); }
.seg-green    { background: var(--green); }

/* ── Tagline ──────────────────────────────────────────── */
.tagline {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(12px, 1.8vw, 16px);
    font-weight: 500;
    color: var(--text-mid);
    letter-spacing: 0.07em;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
}

.tag-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    animation: dotPulse 2.2s ease-in-out infinite;
}
.dot-blue   { background: var(--blue); }
.dot-orange { background: var(--orange); animation-delay: -1.1s; }

@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.7); opacity: 1; }
}

/* ── Bottom colour strip ──────────────────────────────── */
.bottom-strip {
    display: flex;
    width: 100%;
    height: 7px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    opacity: 0;
}

.strip-block {
    flex: 1;
    transition: flex 0.5s cubic-bezier(0.22,1,0.36,1);
}
.strip-block:hover { flex: 4; }

.s-blue      { background: var(--blue); }
.s-orange    { background: var(--orange); }
.s-purple    { background: var(--purple); }
.s-green     { background: var(--green); }
.s-darkgreen { background: var(--darkgreen); }

/* ── Footer ───────────────────────────────────────────── */
.site-footer {
    position: fixed;
    bottom: 14px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 20;
    font-size: 12px;
    color: #999;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.05em;
    opacity: 0;
}
.site-footer a { color: var(--blue); text-decoration: none; font-weight: 600; }
.site-footer a:hover { color: var(--orange); }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 600px) {
    .logo-glow-ring        { width: 230px; height: 230px; }
    .logo-glow-ring.ring-2 { width: 300px; height: 300px; }
    .ni-logo               { height: 38px; }
    .triangle-marks        { width: 78px; }
    .hero                  { gap: 26px; }
    .prism-1, .prism-3     { display: none; }
    .geo-5, .geo-6         { display: none; }
}