@import url('./tokens.css');
/* Landing (index) specific styles extracted from legacy style.css but adapted to design tokens */
body { font-family: system-ui, Arial, sans-serif; background: linear-gradient(145deg,#070a0f 0%,#050608 60%,#040507 100%); color: var(--text,#fafafa); margin:0; min-height:100vh; -webkit-font-smoothing:antialiased; }
/* Aurora background */
#landing-aurora { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; filter:brightness(.92) saturate(1.05); }
/* Primary nav removed; loop navigation now primary */
.grid { position:fixed; inset:0; overflow:hidden; }
.grid-svg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.blur { position:absolute; inset:0; backdrop-filter:blur(90px); opacity:.15; }
.hero { position:relative; z-index:10; width:min(1200px,90%); margin:20vh auto 0; display:flex; flex-direction:column; align-items:flex-start; }
.hero__title { margin:0 0 1.2rem; font-size:clamp(3rem,9vw,6.3rem); font-weight:900; line-height:.88; letter-spacing:1.5px; color:#e9edf6; filter:drop-shadow(0 8px 26px rgba(0,0,0,.55)); }
.hero__accent { background:linear-gradient(90deg,#5ea8ff,#8f6fff,#ff75c8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__title .hero__accent { display:inline-block; }
.hero__faint { display:inline-block; background:linear-gradient(90deg,#5ea8ff,#8f6fff,#ff75c8); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900; }
.hero__tag { margin:0 0 1.75rem; max-width:740px; font-size:clamp(.9rem,1.7vw,1.08rem); line-height:1.6; color:#b7bec9; }
.hero__actions { display:flex; gap:.9rem; flex-wrap:wrap; }
.cta { text-decoration:none; font-weight:600; letter-spacing:.5px; padding:.75rem 1.2rem; border-radius:.65rem; position:relative; overflow:hidden; font-size:.85rem; }
.cta.primary { background:linear-gradient(120deg,#3453ff,#7d34ff,#1fa2ff); color:#fff; box-shadow:0 6px 24px -10px #000; border:1px solid #3b54ff; }
.cta.primary:hover { filter:brightness(1.1); }
.cta.ghost { background:rgba(255,255,255,.04); color:#d4d8e4; border:1px solid #2a2d33; }
.cta.ghost:hover { background:rgba(255,255,255,.08); }
/* Dataflow visualization container */
.loopshow { position:relative; width:min(1200px,92%); margin:6rem auto 2rem; aspect-ratio: 16/7; display:flex; align-items:center; justify-content:center; backdrop-filter:none; }
#loop-freeze-btn.loop-freeze-btn { position:absolute; z-index:3; width:110px; height:110px; border-radius:50%; border:2px solid #2c323a; background:radial-gradient(circle at 30% 30%,#1c2229,#0e1114); color:#d3dae4; font-weight:700; font-size:.65rem; letter-spacing:1px; cursor:pointer; display:flex; align-items:center; justify-content:center; top:50%; left:50%; transform:translate(-50%,-50%); box-shadow:0 6px 28px -12px #000; backdrop-filter:blur(4px) saturate(1.2); transition:.45s; }
#loop-freeze-btn.loop-freeze-btn:hover { color:#fff; box-shadow:0 0 0 1px #3b4652,0 0 24px -8px #5ea8ff; }
#loop-freeze-btn.loop-freeze-btn[aria-pressed="true"] { border-color:#5ea8ff; box-shadow:0 0 0 2px #365a73,0 0 40px -12px #5ea8ff; background:radial-gradient(circle at 60% 40%,#122736,#091014); color:#fff; }
/* Pulse highlight to draw attention after hero scroll */
.loop-freeze-btn.attention-pulse { animation:loopPulse 1.4s ease-in-out 0s 4; }
@keyframes loopPulse { 0%{box-shadow:0 0 0 0 rgba(94,168,255,.0);} 40%{box-shadow:0 0 0 4px rgba(94,168,255,.35),0 0 28px -8px #5ea8ff;} 70%{box-shadow:0 0 0 0 rgba(94,168,255,0);} 100%{box-shadow:0 0 0 0 rgba(94,168,255,0);} }
.loopshow.nav-mode #dataflow-canvas { filter:brightness(1.05) saturate(1.05); }
.loopshow.nav-mode::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(110,150,255,0.12),transparent 65%); pointer-events:none; z-index:2; }
/* Removed separate .loop-nav-slice overlay elements; navigation uses existing ring. */

/* Canvas overlay rings for segmentation (drawn by JS) */
#dataflow-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.loopshow__legend { position:absolute; right:1rem; top:1rem; z-index:2; display:flex; flex-direction:column; gap:.45rem; font-size:.65rem; background:rgba(20,22,26,.55); border:1px solid #242830; padding:.6rem .7rem; border-radius:.75rem; backdrop-filter:blur(4px); }
.legend-item { display:flex; align-items:center; gap:.4rem; letter-spacing:.5px; font-weight:600; color:#cdd3dd; cursor:default; }
.legend-item .dot { width:.55rem; height:.55rem; border-radius:50%; background:linear-gradient(90deg,#3a3f46,#1b1d22); box-shadow:0 0 0 1px #2e333a; position:relative; }
.legend-item[data-seg="database"] .dot { background:#4db3ff; box-shadow:0 0 0 1px #4db3ff66,0 0 6px -1px #4db3ff; }
.legend-item[data-seg="loop"] .dot { background:#9d6bff; box-shadow:0 0 0 1px #9d6bff66,0 0 6px -1px #9d6bff; }
.legend-item[data-seg="segment"] .dot { background:#ffcc3d; box-shadow:0 0 0 1px #ffcc3d66,0 0 6px -1px #ffcc3d; }
.legend-item[data-seg="craft"] .dot { background:#4dff88; box-shadow:0 0 0 1px #4dff8866,0 0 6px -1px #4dff88; }
.legend-item[data-seg="extract"] .dot { background:#ff5d9c; box-shadow:0 0 0 1px #ff5d9c66,0 0 6px -1px #ff5d9c; }
.legend-item { background:rgba(15,18,24,0.55); border:1px solid #29313a; padding:.4rem .55rem; border-radius:.55rem; font-size:.58rem; /* removed automatic uppercase so nav mode change is visually distinct */ letter-spacing:.5px; cursor:pointer; transition:.3s; }
.legend-item:hover, .legend-item:focus-visible { outline:none; color:#fff; background:rgba(255,255,255,0.06); }
.legend-item.active { box-shadow:0 0 0 1px currentColor,0 0 14px -4px currentColor; }
.legend-item .dot::after { content:''; position:absolute; inset:-4px; border-radius:inherit; background:radial-gradient(circle at 50% 50%,currentColor 0%,transparent 70%); opacity:0; transition:.35s; }
.legend-item:hover .dot::after, .legend-item.active .dot::after { opacity:.35; }

/* Simplified legend nav animation state (styling kept minimal to avoid expansion) */
.legend-nav-simple { background:rgba(18,20,24,.35); }
.legend-nav-simple:hover { background:rgba(255,255,255,.07); }
/* Arrow / indicator showing these act as doc navigation links now */
.legend-nav-simple .lbl { text-transform:uppercase; letter-spacing:1.1px; font-weight:700; white-space:nowrap; }
/* removed arrow indicator for global nav repurposing */

/* Phase panel */
.phase-panel { position:fixed; bottom:1.25rem; left:1.25rem; max-width:360px; z-index:60; background:rgba(12,16,22,0.85); border:1px solid #2b323a; border-radius:1rem; box-shadow:0 10px 40px -14px #000; backdrop-filter:blur(10px) saturate(1.2); }
.phase-panel .panel-inner { padding:1rem 1rem 1.15rem; display:flex; flex-direction:column; gap:.75rem; }
.panel-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.panel-header h4 { margin:0; font-size:.8rem; letter-spacing:1px; font-weight:700; text-transform:uppercase; }
#panel-close { background:#181c22; color:#bbb; border:1px solid #23282f; width:1.9rem; height:1.9rem; border-radius:.55rem; font-size:1rem; cursor:pointer; }
#panel-close:hover { color:#fff; background:#222830; }
.panel-desc { margin:0; font-size:.7rem; line-height:1.4; color:#b5bcc6; }
.panel-code { margin:0; background:#0b0e11; border:1px solid #1e2329; padding:.65rem .75rem; border-radius:.6rem; font-size:.65rem; line-height:1.3; color:#dfe8f5; overflow:auto; }
.panel-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* Query showcase */
.query-showcase { position:relative; width:min(1000px,90%); margin:3rem auto 2rem; }
.query-box { position:relative; background:#0c1016; border:1px solid #1f2730; padding:1.1rem 1.25rem 1.4rem; border-radius:.9rem; font-family:ui-monospace,monospace; color:#e2eaf7; font-size:.7rem; line-height:1.5; min-height:110px; box-shadow:0 4px 36px -14px #000; }
.query-box .caret { position:absolute; width:6px; height:1.05rem; background:#fff; animation:blink 1.1s steps(1,end) infinite; }
@keyframes blink { 50% { opacity:0; } }
#query-code .kw { color:#7d9dff; }
#query-code .fn { color:#ffb347; }
#query-code .seg { color:#ff5d9c; }
#query-code .ph { color:#8f98a3; }

/* Pipeline linear representation */
.pipeline { width:min(1100px,92%); margin:4rem auto 5rem; }
.pipeline-wrap { display:flex; align-items:stretch; gap:.6rem; justify-content:space-between; font-size:.6rem; text-transform:uppercase; letter-spacing:1px; }
.pipe-stage { flex:1; position:relative; background:#12161c; border:1px solid #232a32; padding:.9rem .7rem; display:flex; align-items:center; justify-content:center; font-weight:600; border-radius:.75rem; color:#c5ccd5; transition:.4s; backdrop-filter:blur(4px); }
.pipe-stage[data-seg="database"] { --seg-color:#4db3ff; }
.pipe-stage[data-seg="loop"] { --seg-color:#9d6bff; }
.pipe-stage[data-seg="segment"] { --seg-color:#ffcc3d; }
.pipe-stage[data-seg="craft"] { --seg-color:#4dff88; }
.pipe-stage[data-seg="extract"] { --seg-color:#ff5d9c; }
.pipe-stage::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(150deg,rgba(255,255,255,0.02),var(--seg-color) 65%,rgba(255,255,255,0.02)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.25; transition:.55s; }
.pipe-stage:hover { color:#fff; }
.pipe-stage:hover::before { opacity:.95; filter:brightness(1.25); }
.pipe-arrow { display:flex; align-items:center; font-size:1.1rem; opacity:.35; }

@media (max-width:860px){
	.pipeline-wrap { flex-direction:column; }
	.pipe-arrow { transform:rotate(90deg); }
}

@media (max-width:840px){
	.loopshow { aspect-ratio: 1/1; margin:4rem auto 1rem; }
	.loopshow__legend { flex-direction:row; flex-wrap:wrap; position:static; background:transparent; border:none; padding:0; gap:.6rem 1rem; }
}
footer { position:relative; z-index:20; }
@media (max-width:640px){ .title{margin-top:28vh;} }