/* styles.css — separated styles for index.html
   Keep this file compressed (minified) and served with long cache headers in production.
*/

/* THEME VARIABLES ------------------------------------------------------- */
:root{
  --bg: #0f1220;
  --fg: #e6edf3;
  --muted: #9aa6b6;
  --accent: #38bdf8;
  --card: rgba(255,255,255,0.02);
  --border: rgba(255,255,255,0.04);

  --gold-a: #ffd700;
  --gold-b: #ff8c00;
  --epic-glow: rgba(255,215,0,0.85);
  --indicator-color: #38bdf8;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"], :root[data-theme="light"] {
    --bg: #f8fafc; --fg: #0b1220; --muted: #475569; --card: #ffffff; --border: #e2e8f0;
  }
}

/* BASE */
* { box-sizing: border-box; }
html,body { height:100%; }
html { scrollbar-gutter: stable; }
body{
  margin:0; font:16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--fg);
  display:grid; place-items:center;
  overflow-x:hidden; overflow-y:auto; overflow-anchor: none;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
main{ text-align:center; padding:36px 16px; max-width:1100px; width:100%; position:relative; }
h1{ font-size: clamp(28px, 5vw, 52px); margin:0 0 8px; letter-spacing:.2px; }
.under-construction{ color:var(--muted); margin:0 0 6px; font-size:14px; letter-spacing:.3px; text-transform:uppercase; }
p.lead{ font-size: clamp(14px,2.4vw,18px); color:var(--muted); margin:0 0 20px; display:inline-block; }

/* BACKGROUND LAYERS */
.bg{ position:fixed; inset:0; z-index:-5; overflow:hidden;
    background: radial-gradient(1200px 500px at 50% -10%, rgba(99,102,241,.04), transparent 60%); }

.bg .orbs, .bg .rays{ position:absolute; inset:-10%; }
.bg .orbs::before, .bg .orbs::after {
  content:""; position:absolute; width:48vw; height:48vw; border-radius:50%; filter:blur(40px); opacity:.85;
}
.bg .orbs::before{ left:-6%; top:0%; background: radial-gradient(circle at 30% 30%, rgba(56,189,248,.28), transparent 60%); animation: drift1 36s ease-in-out infinite alternate; }
.bg .orbs::after{ right:-6%; bottom:-6%; background: radial-gradient(circle at 70% 70%, rgba(167,139,250,.22), transparent 60%); animation: drift2 38s ease-in-out infinite alternate; }
@keyframes drift1{ 0%{transform:translate3d(0,0,0) scale(1);} 100%{transform:translate3d(3%,-2%,0) scale(1.03);} }
@keyframes drift2{ 0%{transform:translate3d(0,0,0) scale(1);} 100%{transform:translate3d(-3%,2%,0) scale(1.03);} }
.bg .rays::before{
  content:""; position:absolute; inset:-30%;
  background: conic-gradient(from 0deg at 50% 40%,
    transparent 0deg,
    rgba(56,189,248,.06) 80deg,
    transparent 140deg,
    rgba(56,189,248,.06) 210deg,
    transparent 280deg,
    rgba(56,189,248,.06) 330deg,
    transparent 360deg);
  filter: blur(30px) saturate(105%); animation: raysSpin 48s linear infinite; opacity:.5;
}
@keyframes raysSpin{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

/* Cinematic background + particles */
.cinematic-bg{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:-6;
  background: radial-gradient(ellipse at top,#1a0033 0%,transparent 50%),
              radial-gradient(ellipse at bottom,#330011 0%,transparent 50%),
              linear-gradient(135deg,#0a0a0a,#1a1a2e,#16213e,#0f3460); opacity:.82; }

.particle-system{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:-4; overflow:hidden; pointer-events:none; }
.magical-orb{ position:absolute; border-radius:50%;
  background: radial-gradient(circle, rgba(255,215,0,0.82), rgba(255,140,0,0.38), transparent);
  box-shadow: 0 0 16px rgba(255,215,0,0.55); animation: float-magical 6.5s ease-in-out infinite; opacity:.85; mix-blend-mode:screen; }
.magical-orb:nth-child(1){ width:8px; height:8px; top:20%; left:10%; animation-delay:0s; }
.magical-orb:nth-child(2){ width:12px; height:12px; top:60%; left:80%; animation-delay:-2s; }
.magical-orb:nth-child(3){ width:6px; height:6px; top:80%; left:20%; animation-delay:-4s; }
.magical-orb:nth-child(4){ width:10px; height:10px; top:30%; left:70%; animation-delay:-1s; }
.magical-orb:nth-child(5){ width:14px; height:14px; top:70%; left:50%; animation-delay:-3s; }
@keyframes float-magical{ 0%,100%{transform:translateY(0) scale(1); opacity:.7;} 25%{transform:translateY(-12px) scale(1.06); opacity:1;} 50%{transform:translateY(-6px) scale(.95); opacity:.82;} 75%{transform:translateY(-18px) scale(1.02); opacity:.9;} }

.center-aura{ position:absolute; top:50%; left:50%; width:420px; height:420px;
  background: radial-gradient(circle, rgba(255,215,0,0.05) 0%, rgba(255,140,0,0.03) 30%, transparent 70%); border-radius:50%;
  transform:translate(-50%,-50%); animation: aura-pulse 10s ease-in-out infinite; z-index:-3; mix-blend-mode:screen; }
@keyframes aura-pulse{ 0%,100%{transform:translate(-50%,-50%) scale(.86) rotate(0deg); opacity:.28;} 25%{transform:translate(-50%,-50%) scale(1.05) rotate(90deg); opacity:.6;} 50%{transform:translate(-50%,-50%) scale(1.18) rotate(180deg); opacity:.48;} 75%{transform:translate(-50%,-50%) scale(.98) rotate(270deg); opacity:.72;} }

.dragon-breath{ position:absolute; top:10%; right:5%; width:120px; height:120px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,69,0,0.28), rgba(255,140,0,0.18), transparent); animation: dragon-breath 6s ease-in-out infinite; z-index:-4; mix-blend-mode:screen; }
@keyframes dragon-breath{ 0%,100%{transform:scale(1) rotate(0); opacity:.28;} 33%{transform:scale(1.18) rotate(120deg); opacity:.64;} 66%{transform:scale(.9) rotate(240deg); opacity:.46;} }

/* THEME TOGGLE */
.theme-toggle {
  position: fixed; top: 14px; right: 14px; z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap:6px;
  font-size: 12px; color: var(--muted);
  user-select: none;
}
/* labels visually hidden but kept in DOM for screen readers if needed */
.theme-toggle .labels { display: none !important; }

.theme-buttons {
  position: relative; display:flex; gap:8px; align-items:center; justify-content:center;
  background: transparent; padding: 6px;
}
.theme-buttons button {
  border: none; background: transparent; color: var(--muted);
  padding: 6px; border-radius:8px; width:36px; height:36px; display:grid; place-items:center; cursor:pointer;
  transition: transform .15s ease, color .15s ease, opacity .15s ease;
  opacity: .85;
}
.theme-buttons button:hover { transform: translateY(-2px); opacity: 1; }
.theme-buttons .active { color: var(--indicator-color); opacity: 1; }
.theme-indicator {
  position: absolute; bottom: -8px; width:8px; height:8px; border-radius:50%;
  background: var(--indicator-color); transform: translateX(0) translateY(0);
  transition: left .32s cubic-bezier(.2,.8,.2,1), opacity .25s ease, transform .25s ease;
  left: 0; opacity:0;
  pointer-events:none;
}

/* LOGO: crisp + glow */
.logo-container{ text-align:center; margin:14px auto 16px; position:relative; z-index:6; perspective:1000px; }
.main-logo{ display:inline-block; position:relative; font-family: 'Orbitron', sans-serif; font-weight:900; line-height:1; transform-origin:center; -webkit-font-smoothing:antialiased; }
.main-logo .logo-crisp{ position:relative; z-index:3; display:inline-block; font-size: clamp(42px, 8vw, 96px); background: linear-gradient(90deg, var(--gold-a) 0%, var(--gold-b) 50%, var(--gold-a) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; letter-spacing: 3px; will-change: transform; }
.main-logo .logo-glow{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(1.02); z-index:1; pointer-events:none; font-size: clamp(42px, 8vw, 96px); color: var(--gold-a); filter: blur(10px) saturate(120%); opacity:.78; mix-blend-mode: screen; }
.main-logo .logo-glow::after{ content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.28) 45%, rgba(255,255,255,0) 65%); transform: translateX(-120%) skewX(-12deg); animation: shimmer-sweep 3.2s linear infinite; opacity:.9; pointer-events:none; }
@keyframes shimmer-sweep { 0%{ transform: translateX(-140%) skewX(-12deg); } 100%{ transform: translateX(140%) skewX(-12deg); } }
@keyframes logo-tilt { 0% { transform: translateY(0) rotateY(-4deg); } 50% { transform: translateY(-3px) rotateY(3deg); } 100% { transform: translateY(0) rotateY(-4deg); } }
.main-logo { animation: logo-tilt 6s ease-in-out infinite; }

/* MOBILE: simplify */
@media (max-width:520px){
  .main-logo .logo-crisp{ font-size:44px; letter-spacing:2px; }
  .main-logo .logo-glow{ display:none; }
  .main-logo{ animation:none; }
  .particle-system{ display:none; }
  .center-aura{ width:260px; height:260px; }
  main{ padding:20px 12px; }
  .menu-grid{ gap:12px; }
  .theme-toggle { top: 10px; right: 10px; }
  .theme-buttons button { width:34px; height:34px; }
  .theme-indicator { bottom: -6px; width:7px; height:7px; }
}

/* CARDS */
.menu-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; max-width:880px; margin:18px auto 6px; perspective:900px; }
.menu-card{ background: var(--card); border-radius:12px; padding:16px; text-align:center; cursor:pointer; border:1px solid var(--border); transition: transform .26s, box-shadow .2s; backdrop-filter: blur(8px); color:var(--fg); }
.menu-card .title { font-weight:700; color:var(--gold-a); margin-top:8px; }
.menu-card .desc { color: rgba(255,240,200,0.45); font-size:13px; margin-top:6px; }
.menu-card:hover{ transform: translateY(-8px) rotateX(4deg); box-shadow: 0 14px 34px rgba(0,0,0,0.36); border-color: rgba(255,215,0,0.12); }

/* FOOTER */
footer{ margin-top:26px; font-size:14px; color:var(--muted); display:flex; gap:16px; align-items:center; justify-content:center; flex-direction:column; z-index:6; }
.contact{ display:flex; gap:14px; align-items:center; }
.social-link{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); text-decoration:none; color:var(--gold-a); transition: transform .12s, box-shadow .12s; }
.social-link:hover{ transform: translateY(-4px); box-shadow: 0 10px 30px rgba(255,215,0,0.10); }
.social-link svg{ width:20px; height:20px; display:block; }
.smalltext{ color:var(--muted); font-size:13px; margin-top:8px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .main-logo, .main-logo .logo-glow::after, .bg .orbs::before, .bg .orbs::after, .bg .rays::before, .particle-system, .center-aura, .dragon-breath, .theme-indicator {
    animation: none !important; transition: none !important;
  }
}