/* ═══════════════════════════════════════════════════════════════
   PrepLoom — Global Layout CSS
   Nav glow, page transitions, universal hover states,
   and the "assemble from all directions" intro animation.
   ═══════════════════════════════════════════════════════════════ */

/* ── Page Transition Fade-In ─────────────────────────────────── */
.layout-fade-in {
    opacity: 0; transform: translateY(6px);
    transition: opacity .55s cubic-bezier(.23,1,.32,1), transform .55s cubic-bezier(.23,1,.32,1);
}
.layout-fade-in.layout-visible { opacity: 1; transform: translateY(0); }

/* ── Nav Brand Logo ──────────────────────────────────────────── */
.site-nav__brand img { height:32px; width:auto; border-radius:6px; transition: transform .25s, filter .25s; }
.site-nav__brand:hover img { transform:rotate(-3deg) scale(1.08); filter:drop-shadow(0 0 12px rgba(108,99,255,.45)); }

/* ── Nav Glow Follower ───────────────────────────────────────── */
.nav-glow-follower {
    position:absolute; border-radius:var(--pl-radius-sm,10px); pointer-events:none; z-index:0;
    background:radial-gradient(ellipse at center,rgba(108,99,255,.12) 0%,rgba(108,99,255,.04) 60%,transparent 100%);
    border:1px solid rgba(108,99,255,.08); opacity:0; transform:scale(.92);
    transition: opacity .3s, transform .3s cubic-bezier(.23,1,.32,1),
                left .25s cubic-bezier(.23,1,.32,1), top .25s cubic-bezier(.23,1,.32,1),
                width .25s cubic-bezier(.23,1,.32,1), height .25s cubic-bezier(.23,1,.32,1);
}
.nav-glow-follower.active { opacity:1; transform:scale(1); }

/* ── Nav Link Hover ──────────────────────────────────────────── */
.site-nav__link { position:relative; z-index:1; }
.site-nav__link::after {
    content:''; position:absolute; bottom:4px; left:50%; width:60%; height:2px;
    background:linear-gradient(90deg,var(--pl-accent,#6c63ff),var(--pl-teal,#2dd4bf));
    border-radius:99px; transform:translateX(-50%) scaleX(0);
    transition: transform .35s cubic-bezier(.23,1,.32,1);
    box-shadow:0 0 8px rgba(108,99,255,.4);
}
.site-nav__link:hover::after, .site-nav__link--active::after { transform:translateX(-50%) scaleX(1); }
.site-nav__link:hover { color:var(--pl-text); text-shadow:0 0 16px rgba(108,99,255,.2); }

/* ── CTA Shimmer ─────────────────────────────────────────────── */
.site-nav__link--cta { position:relative; overflow:hidden; }
.site-nav__link--cta::before {
    content:''; position:absolute; top:-50%; left:-80%; width:50%; height:200%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
    transform:skewX(-20deg); transition:left .55s;
}
.site-nav__link--cta:hover::before { left:130%; }
.site-nav__link--cta::after { display:none !important; }

/* ── Icon Buttons ────────────────────────────────────────────── */
.home-icon-button {
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; padding:0 !important; text-decoration:none;
    transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.home-icon-button:hover {
    border-color:rgba(108,99,255,.35) !important; background:rgba(108,99,255,.08) !important;
    transform:translateY(-1px); box-shadow:0 4px 16px rgba(108,99,255,.15);
}

/* ── User Dropdown ───────────────────────────────────────────── */
.nav-user-menu { position:relative; display:inline-block; }
.nav-user-email {
    background:transparent; border:none; color:inherit; display:flex; align-items:center;
    gap:.4rem; cursor:pointer; font-weight:600; font-size:.88rem; font-family:inherit;
    padding:.45rem .5rem; margin:0; max-width:180px; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; transition:color .15s;
}
.nav-user-email::after { content:'▾'; font-size:.7rem; opacity:.6; margin-left:.15rem; }
.user-dropdown-menu {
    display:none; flex-direction:column; position:absolute; top:calc(100% + 6px); right:0;
    min-width:180px; padding:.35rem 0; border-radius:14px;
    border:1px solid var(--pl-border-strong,rgba(255,255,255,.14));
    background:var(--pl-bg-elevated,#0e1018); backdrop-filter:blur(20px);
    box-shadow:0 16px 48px rgba(0,0,0,.5); z-index:200; animation:dropdownIn .2s ease;
}
.user-dropdown-menu.show { display:flex !important; }
@keyframes dropdownIn { from{opacity:0;transform:translateY(-6px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
.user-dropdown-menu__link, .user-dropdown-menu__button {
    display:flex; align-items:center; gap:.6rem; padding:.65rem 1rem; font-size:.85rem;
    font-family:inherit; color:var(--pl-text); text-decoration:none; background:transparent;
    border:none; cursor:pointer; transition:background .15s; width:100%; text-align:left;
}
.user-dropdown-menu__link:hover, .user-dropdown-menu__button:hover { background:rgba(108,99,255,.08); }
.user-dropdown-menu__button { color:#f87171; border-top:1px solid var(--pl-border,rgba(255,255,255,.08)); }
.user-dropdown-menu__button:hover { background:rgba(239,68,68,.08); }

/* ═══════════════════════════════════════════════════════════════
   SPECTACULAR INTRO — Letters fly in from ALL 8 directions
   and assemble into the brand name
   ═══════════════════════════════════════════════════════════════ */

.intro-overlay {
    position:fixed; inset:0; z-index:9999; background:#050710;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1.2rem; overflow:hidden;
}
.intro-overlay--exit { animation: introExit .9s cubic-bezier(.4,0,.2,1) forwards; }
.intro-overlay--hidden { opacity:0; visibility:hidden; pointer-events:none; }
@keyframes introExit {
    0%   { opacity:1; transform:scale(1); filter:blur(0); }
    100% { opacity:0; transform:scale(1.08); filter:blur(16px); }
}

/* Particle canvas */
.intro-canvas-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.intro-canvas-bg canvas { width:100%; height:100%; display:block; }

/* Floating code fragments */
.intro-fragments { position:absolute; inset:0; z-index:1; pointer-events:none; }
.intro-code-frag {
    position:absolute; font-family:'JetBrains Mono',monospace; font-size:.65rem;
    color:rgba(108,99,255,.35); white-space:nowrap; letter-spacing:.04em;
    transform:translate(var(--frag-x),var(--frag-y)); opacity:0;
    animation: fragDrift 3s ease var(--frag-delay) forwards;
}
@keyframes fragDrift {
    0%   { opacity:0; transform:translate(var(--frag-x),var(--frag-y)) scale(.7); }
    40%  { opacity:.5; }
    70%  { opacity:.3; transform:translate(0,0) scale(1); }
    100% { opacity:0; transform:translate(0,0) scale(1.05); }
}

/* ── Logo with rings ─────────────────────────────────────────── */
.intro-logo-wrap { position:relative; width:110px; height:110px; z-index:3; }
.intro-logo-mark {
    width:100%; height:100%; border-radius:26px;
    background:linear-gradient(135deg,#6c63ff 0%,#8b84ff 50%,#2dd4bf 100%);
    display:flex; align-items:center; justify-content:center;
    font-family:'Space Grotesk',sans-serif; font-size:1.9rem; font-weight:900; color:#fff;
    position:relative; z-index:3;
    box-shadow:0 0 60px rgba(108,99,255,.5), 0 0 120px rgba(108,99,255,.2);
    animation: logoEntry .9s cubic-bezier(.23,1,.32,1) .2s both, logoFloat 3s ease-in-out 1.1s infinite;
}
@keyframes logoEntry {
    from { opacity:0; transform:scale(.3) rotate(-25deg); filter:blur(12px); }
    to   { opacity:1; transform:scale(1) rotate(0); filter:blur(0); }
}
@keyframes logoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.intro-logo-ring {
    position:absolute; inset:-20px; border-radius:50%;
    border:1.5px solid rgba(108,99,255,.25); z-index:1;
}
.intro-logo-ring--1 { animation:ringPop 2s ease .4s forwards; border-color:rgba(108,99,255,.35); }
.intro-logo-ring--2 { animation:ringPop 2s ease .7s forwards; border-color:rgba(167,139,250,.25); inset:-40px; }
.intro-logo-ring--3 { animation:ringPop 2s ease 1s forwards; border-color:rgba(45,212,191,.18); inset:-60px; }
@keyframes ringPop { 0%{transform:scale(.3);opacity:0} 50%{opacity:1} 100%{transform:scale(2.8);opacity:0} }
.intro-logo-glow {
    position:absolute; inset:-30px; border-radius:50%;
    background:radial-gradient(circle,rgba(108,99,255,.25),transparent 70%);
    filter:blur(25px); z-index:0; animation:glowPulse 2.5s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{transform:scale(1);opacity:.4} 50%{transform:scale(1.4);opacity:.8} }

/* ═══════════════════════════════════════════════════════════════
   LETTERS FLYING FROM ALL 8 DIRECTIONS
   Each letter starts far off-screen from a different angle
   and converges to its final position with rotation + blur
   ═══════════════════════════════════════════════════════════════ */

.intro-brand-wrap {
    display:flex; gap:.06em; z-index:4;
    font-family:'Space Grotesk',sans-serif;
    font-size:clamp(2.2rem,6vw,4rem); font-weight:700; letter-spacing:-.04em; color:#fff;
}

.intro-letter {
    display:inline-block; opacity:0; filter:blur(10px);
    animation: letterAssemble .8s cubic-bezier(.23,1,.32,1) forwards;
    animation-delay: calc(.7s + var(--i) * .08s);
}

/* Origin directions — each letter flies in from a different side */
.intro-letter[data-dir="top"]          { transform:translateY(-120vh) rotate(-20deg) scale(2); }
.intro-letter[data-dir="top-right"]    { transform:translate(80vw,-80vh) rotate(30deg) scale(1.8); }
.intro-letter[data-dir="right"]        { transform:translateX(120vw) rotate(15deg) scale(2.2); }
.intro-letter[data-dir="bottom-right"] { transform:translate(80vw,80vh) rotate(-25deg) scale(1.6); }
.intro-letter[data-dir="bottom"]       { transform:translateY(120vh) rotate(20deg) scale(2); }
.intro-letter[data-dir="bottom-left"]  { transform:translate(-80vw,80vh) rotate(-30deg) scale(1.8); }
.intro-letter[data-dir="left"]         { transform:translateX(-120vw) rotate(-15deg) scale(2.2); }
.intro-letter[data-dir="top-left"]     { transform:translate(-80vw,-80vh) rotate(25deg) scale(1.6); }

@keyframes letterAssemble {
    0%   { opacity:0; filter:blur(10px); }
    30%  { opacity:.6; filter:blur(4px); }
    70%  { filter:blur(1px); }
    85%  { transform:translate(0,0) rotate(0) scale(1.05); }
    100% { opacity:1; transform:translate(0,0) rotate(0) scale(1); filter:blur(0);
           text-shadow:0 0 30px rgba(108,99,255,.4), 0 0 60px rgba(108,99,255,.15); }
}

/* ── Tagline words from different sides ──────────────────────── */
.intro-tagline-wrap {
    display:flex; gap:.5em; z-index:4;
    font-family:'Inter',sans-serif; font-size:.95rem; font-weight:500;
    letter-spacing:.05em; color:rgba(244,244,247,.5);
}
.intro-tag {
    display:inline-block; opacity:0; filter:blur(6px);
    animation: tagAssemble .7s cubic-bezier(.23,1,.32,1) forwards;
    animation-delay: calc(1.8s + var(--j) * .18s);
}
.intro-tag[data-dir="top"]          { transform:translateY(-60vh) scale(1.5); }
.intro-tag[data-dir="right"]        { transform:translateX(60vw) scale(1.5); }
.intro-tag[data-dir="bottom-right"] { transform:translate(40vw,40vh) scale(1.5); }
.intro-tag[data-dir="bottom"]       { transform:translateY(60vh) scale(1.5); }
.intro-tag[data-dir="left"]         { transform:translateX(-60vw) scale(1.5); }
.intro-tag[data-dir="top-left"]     { transform:translate(-40vw,-40vh) scale(1.5); }

@keyframes tagAssemble {
    0%   { opacity:0; filter:blur(6px); }
    50%  { opacity:.5; filter:blur(2px); }
    100% { opacity:1; transform:translate(0,0) scale(1); filter:blur(0); }
}

/* ── Status + Progress ───────────────────────────────────────── */
.intro-status {
    display:flex; align-items:center; gap:.6rem; z-index:4;
    font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
    color:var(--pl-teal,#2dd4bf); opacity:0; animation:fadeIn .5s ease 2.6s forwards;
}
.intro-pulse {
    width:8px; height:8px; border-radius:50%;
    background:var(--pl-teal,#2dd4bf); box-shadow:0 0 10px var(--pl-teal,#2dd4bf);
    animation:statusPulse 1.2s ease-in-out infinite;
}
@keyframes statusPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.intro-progress {
    width:200px; height:3px; border-radius:99px; background:rgba(255,255,255,.06);
    overflow:hidden; z-index:4; opacity:0; animation:fadeIn .5s ease 2.6s forwards;
}
.intro-progress-bar {
    height:100%; width:0%; border-radius:99px;
    background:linear-gradient(90deg,#6c63ff,#2dd4bf);
    animation:progressFill 3.5s ease .5s forwards;
}
@keyframes progressFill { 0%{width:0} 30%{width:40%} 60%{width:70%} 90%{width:95%} 100%{width:100%} }

/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL INTERACTIVE STATES
   ═══════════════════════════════════════════════════════════════ */

.btn-hero-primary,.btn-hero-secondary,.btn-nav-primary,.btn-nav-outline,
.btn-modal-primary,.fc-btn,.rev-tab,.feat-pill {
    transition: transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.btn-hero-primary:hover { transform:translateY(-3px); box-shadow:0 14px 44px rgba(108,99,255,.5), 0 0 0 1px rgba(108,99,255,.15); }
.btn-hero-secondary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.2); }

.card-pl,.system-card,.step-card,.control-node,.about-card,.bigo-card,.pattern-card,
.comm-card,.sysdesign-card,.star-card,.star-scenario,.telemetry-card,.feature-block__visual {
    transition: transform .25s cubic-bezier(.23,1,.32,1), border-color .25s, box-shadow .25s;
}
.card-pl:hover,.system-card:hover,.step-card:hover,.control-node:hover,.about-card:hover,
.bigo-card:hover,.pattern-card:hover,.comm-card:hover,.sysdesign-card:hover,
.star-card:hover,.star-scenario:hover {
    transform:translateY(-4px); border-color:rgba(108,99,255,.25);
    box-shadow:0 16px 48px rgba(0,0,0,.3), 0 0 0 1px rgba(108,99,255,.1), 0 0 20px rgba(108,99,255,.05);
}

.launch-band,.cta-band,.about-cta,.rev-cta { transition:transform .25s, box-shadow .25s; }
.launch-band:hover,.cta-band:hover,.about-cta:hover,.rev-cta:hover { transform:translateY(-2px); box-shadow:0 24px 64px rgba(108,99,255,.15); }

.site-footer a { position:relative; transition:color .2s; }
.site-footer a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--pl-accent,#6c63ff); transition:width .25s; }
.site-footer a:hover::after { width:100%; }

.console__row { transition:background .15s, transform .15s; }
.console__row:hover { background:rgba(108,99,255,.05); transform:translateX(3px); }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width:768px) {
    .intro-brand-wrap { font-size:2rem; }
    .intro-tagline-wrap { font-size:.82rem; flex-wrap:wrap; justify-content:center; }
    .intro-logo-wrap { width:80px; height:80px; }
    .intro-logo-mark { border-radius:20px; font-size:1.5rem; }
    .intro-code-frag { display:none; }
}

/* ── Reduced Motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
    .layout-fade-in { opacity:1; transform:none; transition:none; }
    .intro-letter,.intro-tag,.intro-logo-ring,.intro-logo-mark,.intro-code-frag {
        animation-duration:.001ms !important;
    }
    .nav-glow-follower { transition:none; }
}