/* ============================================================
   sim-ai.xyz / experimental simulation sandbox
   Palette: #050510 #ffffff #ff4488 #4488ff #1a1a2e
   Fonts: Syne, Inter, Space Mono
============================================================ */

:root {
    --deep: #050510;
    --fog: #1a1a2e;
    --particle-blue: #4488ff;
    --particle-pink: #ff4488;
    --glow: #ffffff;
    --display: "Syne", "Inter", system-ui, sans-serif;
    --body: "Inter", system-ui, sans-serif;
    --mono: "Space Mono", "Inter", monospace;
}

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

html,
body {
    width: 100%;
    height: 100%;
    background: var(--deep);
    color: var(--glow);
    font-family: var(--body);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
}

html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

body {
    overflow-y: auto;
    cursor: crosshair;
}

::selection {
    background: var(--particle-pink);
    color: var(--glow);
}

/* ------------------------------------------------------------
   Persistent stage (full screen, behind scrolling content)
------------------------------------------------------------ */

.stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 40%, #15152a 0%, var(--deep) 65%, #020207 100%);
    pointer-events: none;
}

/* radial fog clouds drifting behind everything */

.fog {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    mix-blend-mode: screen;
    will-change: transform;
}

.fog-1 {
    width: 70vmax;
    height: 70vmax;
    left: -20vmax;
    top: -20vmax;
    background: radial-gradient(circle, rgba(68, 136, 255, 0.45) 0%, transparent 65%);
    animation: fogDrift1 28s ease-in-out infinite alternate;
}

.fog-2 {
    width: 60vmax;
    height: 60vmax;
    right: -18vmax;
    bottom: -18vmax;
    background: radial-gradient(circle, rgba(255, 68, 136, 0.4) 0%, transparent 65%);
    animation: fogDrift2 34s ease-in-out infinite alternate;
}

.fog-3 {
    width: 80vmax;
    height: 80vmax;
    left: 10vmax;
    bottom: -30vmax;
    background: radial-gradient(circle, rgba(26, 26, 46, 0.85) 0%, transparent 70%);
    animation: fogDrift3 40s ease-in-out infinite alternate;
    opacity: 0.7;
}

@keyframes fogDrift1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(8vw, 6vh, 0) scale(1.15); }
}
@keyframes fogDrift2 {
    from { transform: translate3d(0, 0, 0) scale(1.05); }
    to   { transform: translate3d(-6vw, -8vh, 0) scale(1.2); }
}
@keyframes fogDrift3 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-10vw, 4vh, 0) scale(1.25); }
}

/* ------------------------------------------------------------
   Particle field (50-100 dots, generated in JS)
------------------------------------------------------------ */

.particle-field {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
    transition: transform 0.12s cubic-bezier(.2, .8, .2, 1);
}

.particle.p-blue {
    background: var(--particle-blue);
    box-shadow: 0 0 6px rgba(68, 136, 255, 0.9), 0 0 14px rgba(68, 136, 255, 0.4);
}

.particle.p-pink {
    background: var(--particle-pink);
    box-shadow: 0 0 6px rgba(255, 68, 136, 0.9), 0 0 14px rgba(255, 68, 136, 0.4);
}

.particle.p-white {
    background: var(--glow);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
    width: 2px;
    height: 2px;
}

.particle.depth-far {
    filter: blur(2px);
    opacity: 0.45;
}

.particle.depth-mid {
    filter: blur(0.5px);
    opacity: 0.75;
}

.particle.depth-near {
    opacity: 1;
}

/* ------------------------------------------------------------
   Central morphing geometry
------------------------------------------------------------ */

.geometry-stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    perspective: 1200px;
}

.geometry-orbit {
    position: relative;
    width: clamp(220px, 38vmin, 460px);
    height: clamp(220px, 38vmin, 460px);
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.4s cubic-bezier(.2, .8, .2, 1);
}

.geometry {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: geoSpin 22s linear infinite;
    will-change: transform, clip-path;
}

@keyframes geoSpin {
    from { transform: rotateX(20deg) rotateY(0deg); }
    to   { transform: rotateX(20deg) rotateY(360deg); }
}

.geometry-face {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(68, 136, 255, 0.85);
    background:
        linear-gradient(135deg, rgba(68, 136, 255, 0.18) 0%, rgba(255, 68, 136, 0.12) 100%);
    box-shadow:
        inset 0 0 60px rgba(68, 136, 255, 0.25),
        0 0 40px rgba(68, 136, 255, 0.45);
    /* default: cube */
    clip-path: polygon(15% 5%, 85% 5%, 95% 30%, 95% 80%, 85% 95%, 15% 95%, 5% 80%, 5% 30%);
    transition: clip-path 1.1s cubic-bezier(.7, 0, .3, 1),
                background 1.1s ease,
                border-color 1.1s ease,
                box-shadow 1.1s ease,
                transform 1.1s ease;
}

.face-back {
    transform: translateZ(-60px) rotateY(180deg);
    border-color: rgba(255, 68, 136, 0.7);
    background:
        linear-gradient(135deg, rgba(255, 68, 136, 0.18) 0%, rgba(68, 136, 255, 0.1) 100%);
    box-shadow:
        inset 0 0 60px rgba(255, 68, 136, 0.22),
        0 0 30px rgba(255, 68, 136, 0.35);
}

.geometry-edge {
    position: absolute;
    inset: 6%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transition: clip-path 1.1s cubic-bezier(.7, 0, .3, 1),
                transform 1.1s ease,
                opacity 1.1s ease;
}

.edge-1 { transform: rotateZ(0deg); opacity: 0.85; }
.edge-2 { transform: rotateZ(60deg) scale(0.92); opacity: 0.55; border-color: rgba(68, 136, 255, 0.5); }
.edge-3 { transform: rotateZ(120deg) scale(0.85); opacity: 0.4; border-color: rgba(255, 68, 136, 0.5); }

.geometry-glow {
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(68, 136, 255, 0.35) 0%, transparent 60%);
    filter: blur(40px);
    z-index: -1;
    animation: glowPulse 6s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 0.95; transform: scale(1.15); }
}

/* Section-driven geometry morphs: clip-path keyframes per node */

.stage[data-node="0"] .geometry-face {
    /* hex / cube */
    clip-path: polygon(20% 5%, 80% 5%, 95% 30%, 95% 70%, 80% 95%, 20% 95%, 5% 70%, 5% 30%);
}
.stage[data-node="1"] .geometry-face {
    /* sphere-ish circle */
    clip-path: polygon(50% 0%, 90% 10%, 100% 50%, 90% 90%, 50% 100%, 10% 90%, 0% 50%, 10% 10%);
    border-color: rgba(255, 68, 136, 0.85);
    background:
        linear-gradient(135deg, rgba(255, 68, 136, 0.22) 0%, rgba(68, 136, 255, 0.12) 100%);
    box-shadow:
        inset 0 0 70px rgba(255, 68, 136, 0.3),
        0 0 50px rgba(255, 68, 136, 0.5);
}
.stage[data-node="2"] .geometry-face {
    /* tetrahedron */
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    border-color: rgba(255, 255, 255, 0.85);
}
.stage[data-node="3"] .geometry-face {
    /* diamond */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    border-color: rgba(68, 136, 255, 0.9);
    background:
        linear-gradient(135deg, rgba(68, 136, 255, 0.25) 0%, rgba(255, 68, 136, 0.15) 100%);
}
.stage[data-node="4"] .geometry-face {
    /* fragmented star */
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border-color: rgba(255, 68, 136, 0.95);
    box-shadow:
        inset 0 0 70px rgba(255, 68, 136, 0.35),
        0 0 60px rgba(255, 68, 136, 0.55);
}

/* edges respond to node */

.stage[data-node="1"] .edge-1 { clip-path: circle(45% at 50% 50%); }
.stage[data-node="2"] .edge-1 { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.stage[data-node="3"] .edge-1 { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.stage[data-node="4"] .edge-1 {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* concentric rings behind geometry */

.geometry-grid {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.grid-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(68, 136, 255, 0.18);
    will-change: transform;
}

.ring-1 {
    width: clamp(320px, 55vmin, 700px);
    height: clamp(320px, 55vmin, 700px);
    animation: ringSpin 60s linear infinite;
}

.ring-2 {
    width: clamp(450px, 75vmin, 950px);
    height: clamp(450px, 75vmin, 950px);
    border-color: rgba(255, 68, 136, 0.14);
    animation: ringSpin 90s linear infinite reverse;
}

.ring-3 {
    width: clamp(640px, 100vmin, 1300px);
    height: clamp(640px, 100vmin, 1300px);
    border-color: rgba(255, 255, 255, 0.06);
    animation: ringSpin 120s linear infinite;
}

@keyframes ringSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ------------------------------------------------------------
   HUD overlays (data labels)
------------------------------------------------------------ */

.hud-corner {
    position: absolute;
    z-index: 5;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(5, 5, 16, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hud-tl { top: 1.2rem; left: 1.2rem; }
.hud-tr { top: 1.2rem; right: 1.2rem; color: rgba(68, 136, 255, 0.8); border-color: rgba(68, 136, 255, 0.2); }
.hud-bl { bottom: 1.2rem; left: 1.2rem; }
.hud-br { bottom: 1.2rem; right: 1.2rem; color: rgba(255, 68, 136, 0.85); border-color: rgba(255, 68, 136, 0.2); }

.hud-blink {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--particle-pink);
    box-shadow: 0 0 10px var(--particle-pink);
    animation: blink 1.4s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.3; transform: scale(0.7); }
}

/* brand mark (top-center) */

.brand {
    position: absolute;
    top: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(5, 5, 16, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.brand-mark {
    color: var(--particle-blue);
    font-size: 1rem;
    text-shadow: 0 0 8px rgba(68, 136, 255, 0.7);
}

/* progress dots */

.progress-dots {
    position: absolute;
    right: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    pointer-events: auto;
}

.progress-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    cursor: pointer;
    transition: transform 0.4s ease, background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.progress-dots .dot.active {
    background: var(--particle-blue);
    border-color: var(--particle-blue);
    box-shadow: 0 0 10px rgba(68, 136, 255, 0.85);
    transform: scale(1.4);
}

.progress-dots .dot:hover {
    border-color: var(--particle-pink);
}

/* ------------------------------------------------------------
   Scroll content
------------------------------------------------------------ */

.scroll-track {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.snap-section {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    display: grid;
    place-items: center;
    padding: 0 6vw;
    position: relative;
    pointer-events: none;
}

.section-content {
    max-width: 36rem;
    pointer-events: auto;
}

.content-center {
    text-align: center;
    margin: 0 auto;
}

.content-left {
    margin-right: auto;
    margin-left: 2vw;
}

.content-right {
    margin-left: auto;
    margin-right: 2vw;
    text-align: right;
}

.eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--particle-blue);
    margin-bottom: 1.2rem;
    opacity: 0.85;
}

.display-text {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin-bottom: 1.4rem;
    color: var(--glow);
}

.display-text em {
    font-style: italic;
    font-weight: 800;
    background: linear-gradient(120deg, var(--particle-blue) 0%, var(--particle-pink) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.display-text.glow {
    text-shadow:
        0 0 18px rgba(68, 136, 255, 0.55),
        0 0 36px rgba(68, 136, 255, 0.25);
}

.lede {
    font-family: var(--body);
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    max-width: 32rem;
}

.content-right .lede { margin-left: auto; }
.content-center .lede { margin-left: auto; margin-right: auto; }

/* scroll cue (first section) */

.scroll-cue {
    margin-top: 3rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    color: rgba(255, 255, 255, 0.55);
}

.scroll-cue-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--particle-blue), transparent);
    animation: cueLine 2.4s ease-in-out infinite;
}

@keyframes cueLine {
    0%, 100% { transform: scaleY(1) translateY(0); opacity: 0.6; }
    50%      { transform: scaleY(1.6) translateY(8px); opacity: 1; }
}

/* CTAs (final section) */

.cta-row {
    margin-top: 2.6rem;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.3rem;
    border: 1px solid var(--particle-blue);
    color: var(--glow);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    background: rgba(68, 136, 255, 0.08);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ghost-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.ghost-btn:hover {
    background: rgba(68, 136, 255, 0.22);
    box-shadow: 0 0 24px rgba(68, 136, 255, 0.4);
    transform: translateY(-2px);
}

.ghost-btn:hover::after {
    transform: translateX(100%);
}

.ghost-btn-pink {
    border-color: var(--particle-pink);
    background: rgba(255, 68, 136, 0.08);
}

.ghost-btn-pink:hover {
    background: rgba(255, 68, 136, 0.22);
    box-shadow: 0 0 24px rgba(255, 68, 136, 0.4);
}

.ghost-btn-arrow {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.ghost-btn:hover .ghost-btn-arrow {
    transform: translateX(4px);
}

.ghost-btn-pink:hover .ghost-btn-arrow {
    transform: rotate(180deg);
}

.signoff {
    margin-top: 3rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   Stage transforms based on node (zoom/rotate/morph cues)
------------------------------------------------------------ */

.stage[data-node="0"] .geometry-orbit { transform: scale(1) rotate(0deg); }
.stage[data-node="1"] .geometry-orbit { transform: scale(0.78) translateX(28vw) rotate(-8deg); }
.stage[data-node="2"] .geometry-orbit { transform: scale(0.85) translateX(-26vw) rotate(10deg); }
.stage[data-node="3"] .geometry-orbit { transform: scale(1.15) rotate(-4deg); }
.stage[data-node="4"] .geometry-orbit { transform: scale(0.6) rotate(180deg); filter: blur(0.5px); }

/* stage tints per node */

.stage[data-node="0"] .fog-1 { opacity: 0.6; }
.stage[data-node="1"] .fog-2 { opacity: 0.7; }
.stage[data-node="2"] .fog-3 { opacity: 0.85; }
.stage[data-node="3"] .fog-1 { opacity: 0.4; }
.stage[data-node="4"] {
    background:
        radial-gradient(ellipse at 50% 60%, #1a0a18 0%, var(--deep) 65%, #020207 100%);
}

/* ------------------------------------------------------------
   Reduced motion
------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }
    html { scroll-behavior: auto; }
    .particle { display: none; }
    .fog { opacity: 0.35; }
}

/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */

@media (max-width: 720px) {
    .hud-corner { font-size: 0.62rem; padding: 0.4rem 0.55rem; }
    .progress-dots { right: 0.9rem; gap: 0.65rem; }
    .content-left, .content-right { margin: 0 auto; text-align: left; }
    .content-right .lede { margin-left: 0; }
    .display-text { font-size: clamp(1.7rem, 8vw, 2.6rem); }
    .stage[data-node="1"] .geometry-orbit,
    .stage[data-node="2"] .geometry-orbit { transform: scale(0.7); }
    .brand { font-size: 0.65rem; }
}