/* Base / Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; background: #04070d; color: #d9e7ff; overflow: hidden; -webkit-font-smoothing: antialiased; }

:root {
  --bg: #04070d;
  --bg-alt: #0b1320;
  --accent-a: #38b6ff;
  --accent-b: #165a87;
  --panel-bg: rgba(5,10,20,0.82);
  --panel-border: rgba(255,255,255,0.05);
  --glow: 0 0 12px -2px var(--accent-a), 0 0 32px -4px var(--accent-b);
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in: cubic-bezier(.7,0,.84,0);
}

/* Layout */
.site-header { position: fixed; top: 0; left: 0; width: 100%; padding: 1.2rem 2rem; z-index: 20; pointer-events: none; }
.brand { font-size: clamp(1.4rem, 2.2vw, 2.4rem); font-weight: 300; letter-spacing: .15em; text-transform: lowercase; background: linear-gradient(90deg,var(--accent-a),var(--accent-b)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px rgba(56,182,255,0.25)); }

#three-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }

.site-footer { position: fixed; bottom: 0; left: 0; width: 100%; padding: 1rem 1.5rem 1.4rem; z-index: 30; }
.footer-links { list-style: none; display: flex; justify-content: center; gap: clamp(1.5rem,4vw,5rem); }
.footer-link { background: none; border: none; color: #cfe9ff; font-size: clamp(.8rem, .9rem + .2vw, 1rem); letter-spacing: .25em; text-transform: uppercase; position: relative; cursor: pointer; padding: .75rem 1rem; font-weight: 400; isolation: isolate; }
.footer-link::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 120%, rgba(56,182,255,0.15), transparent 70%); opacity: 0; transition: opacity .4s var(--ease-out); z-index: -1; }
.footer-link:hover::after, .footer-link:focus-visible::after { opacity: 1; }
.footer-link:hover, .footer-link:focus-visible { color: #fff; }
.footer-link:active { transform: scale(.95); }

/* Info Panels */
.info-panel { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 4rem min(5vw,3rem); pointer-events: none; opacity: 0; transform: perspective(1200px) translateY(40vh) rotateX(40deg) scale(.92); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); z-index: 25; -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }
.info-panel.active { opacity: 1; transform: perspective(1200px) translateY(0) rotateX(0deg) scale(1); pointer-events: auto; }
.panel-inner { max-width: 900px; width: 100%; background: linear-gradient(145deg, var(--panel-bg), rgba(10,22,40,0.65)); border: 1px solid var(--panel-border); padding: clamp(2rem,4vw,3rem); border-radius: 28px; box-shadow: 0 0 0 1px rgba(255,255,255,0.02), 0 4px 18px -4px rgba(0,0,0,0.8), 0 0 40px -10px rgba(56,182,255,0.25); -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%); position: relative; overflow: hidden; }
.panel-inner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 10%, rgba(56,182,255,0.12), transparent 60%), radial-gradient(circle at 80% 80%, rgba(22,90,135,0.12), transparent 65%); mix-blend-mode: screen; pointer-events: none; }
.panel-inner h2 { font-weight: 300; letter-spacing: .2em; text-transform: uppercase; font-size: clamp(1rem, .8rem + 1vw, 1.35rem); margin-bottom: 1.4rem; background: linear-gradient(90deg,var(--accent-a),var(--accent-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel-inner p { line-height: 1.55; font-size: clamp(.9rem, .8rem + .55vw, 1.05rem); color: #d3e9ff; max-width: 60ch; }

/* Futuristic ambient entrance */
body.is-loaded .brand { animation: brandFade 1.8s var(--ease-out) .2s both; }
body.is-loaded #three-canvas { animation: canvasFade 2.2s ease .1s both; }
body.is-loaded .site-footer { animation: footerFade 1.6s var(--ease-out) .6s both; }
@keyframes brandFade { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes canvasFade { from { opacity:0; filter:blur(4px); } to { opacity:1; filter:blur(0); } }
@keyframes footerFade { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

/* Responsive */
@media (max-width: 900px) {
  .panel-inner { border-radius: 24px; }
  .footer-links { gap: clamp(1rem,6vw,3rem); }
  .footer-link { letter-spacing: .18em; }
}
@media (max-width: 600px) {
  body { font-size: 15px; }
  .panel-inner { padding: 2.2rem 1.75rem 2.4rem; }
  .footer-links { gap: 1.75rem; }
  .footer-link { padding: .6rem .75rem; }
}

/* Accessibility focus */
.footer-link:focus-visible { outline: 2px solid var(--accent-a); outline-offset: 4px; border-radius: 6px; }

/* Subtle idle pulse on buttons */
@keyframes idlePulse { 0%,100% { transform: translateZ(0) scale(1); } 50% { transform: translateZ(0) scale(1.04); } }
.footer-link:hover { animation: idlePulse 1.8s ease infinite; }

/* Hide scrollbars when panels scroll (if content expands later) */
/* Optional custom scrollbar (progressive enhancement) */
.panel-inner::-webkit-scrollbar { width: 10px; }
.panel-inner::-webkit-scrollbar-track { background: transparent; }
.panel-inner::-webkit-scrollbar-thumb { background: linear-gradient(var(--accent-b), var(--accent-a)); border-radius: 10px; }