/* ═══════════════════════════════════════════════════════════
   Grimorie Coming Soon Styles
   Glass surfaces, fire gradients, ambient atmosphere.
   Requires grimoire-variables.css loaded first.
   ═══════════════════════════════════════════════════════════ */

html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { background:var(--gm-bg); color:var(--gm-text); font-family:var(--gm-font-body); line-height:1.6; min-height:100vh; overflow-x:hidden; }
a { color:var(--gm-primary); text-decoration:none; transition:color 0.25s ease; }
a:hover { color:var(--gm-cyan); }

/* ── Ambient Background ── */
.gm-ambient { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.gm-wisp { position:absolute; border-radius:50%; filter:blur(120px); opacity:0.25; animation:gm-wisp-drift 22s ease-in-out infinite alternate; }
.gm-wisp-1 { width:600px; height:350px; background:rgba(122,255,42,0.06); top:-8%; left:-5%; }
.gm-wisp-2 { width:450px; height:450px; background:rgba(0,212,255,0.04); bottom:15%; right:-10%; animation-delay:-8s; }
.gm-wisp-3 { width:500px; height:300px; background:rgba(199,146,234,0.04); top:55%; left:25%; animation-delay:-15s; }
@keyframes gm-wisp-drift { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-20px) scale(1.08)} 100%{transform:translate(-15px,15px) scale(0.95)} }

/* ── Nav ── */
.gm-nav { position:fixed; top:0; left:0; right:0; height:64px; background:rgba(13,13,20,0.7); backdrop-filter:var(--gm-glass); -webkit-backdrop-filter:var(--gm-glass); border-bottom:1px solid var(--gm-border); z-index:100; }
.gm-nav-inner { max-width:1200px; margin:0 auto; height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 2rem; }
.gm-nav-logo { display:flex; align-items:center; gap:8px; font-family:var(--gm-font-body); font-size:1.15rem; font-weight:700; color:var(--gm-text-bright); text-decoration:none; letter-spacing:-0.01em; }
.gm-nav-logo canvas { display:block; }

/* ── Main Content ── */
.gm-main { max-width:1200px; margin:0 auto; min-height:100vh; padding:5rem 2rem 2.5rem; }

/* ── Hero ── */
.gm-hero { margin-bottom:3rem; animation:gm-fadeInUp 0.4s ease both; }
.gm-hero h1 { font-family:var(--gm-font-heading); font-size:2.8rem; font-weight:400; color:var(--gm-text-bright); margin-bottom:0.5rem; line-height:1.2; }
.gm-hero h1 em { font-style:italic; color:var(--gm-primary); }
.gm-hero p { font-size:1.05rem; color:var(--gm-text-dim); max-width:600px; margin-bottom:1.25rem; }

/* ── Status Indicator ── */
.gm-status-label { font-family:var(--gm-font-mono); font-size:0.65rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--gm-primary); display:flex; align-items:center; gap:0.5rem; }
.gm-status-dot { width:6px; height:6px; border-radius:50%; background:var(--gm-primary); animation:gm-pulse 2s ease-in-out infinite; }
@keyframes gm-pulse { 0%,100%{opacity:1;box-shadow:0 0 4px var(--gm-primary)} 50%{opacity:0.4;box-shadow:none} }

/* ── Logo Marquee ── */
.gm-logo-marquee {
  overflow:hidden;
  width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  animation:gm-fadeInUp 0.4s ease both;
  animation-delay:0.15s;
}

.gm-logo-track {
  display:flex;
  gap:2rem;
  width:max-content;
  animation:gm-scroll-left 30s linear infinite;
}

@keyframes gm-scroll-left {
  0% { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* Pause on hover */
.gm-logo-marquee:hover .gm-logo-track { animation-play-state:paused; }

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce) {
  .gm-logo-track { animation:none; }
}

/* ── Logo Tiles ── */
.gm-logo-tile {
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:100px; height:100px;
  background:var(--gm-surface);
  border:1px solid var(--gm-border);
  border-radius:var(--gm-radius-sm);
  transition:border-color 0.3s ease, background 0.3s ease;
}
.gm-logo-tile:hover { border-color:var(--gm-border-hover); background:rgba(255,255,255,0.07); }
.gm-logo-tile img { width:44px; height:44px; object-fit:contain; opacity:0.5; transition:all 0.3s ease; }
.gm-logo-tile:hover img { opacity:0.9; filter:drop-shadow(0 0 10px var(--gm-fire-glow)) drop-shadow(0 0 20px var(--gm-fire-glow)); }

/* ── Footer ── */
.gm-footer { text-align:center; padding:2rem 0; font-family:var(--gm-font-mono); font-size:0.7rem; color:var(--gm-text-dim); border-top:1px solid var(--gm-border); margin-top:2rem; }

/* ── Animations ── */
@keyframes gm-fadeInUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ── Responsive ── */
@media (max-width:768px) {
  .gm-main { padding:4.5rem 1rem 2rem; }
  .gm-hero h1 { font-size:2rem; }
  .gm-logo-track { gap:1.25rem; }
  .gm-logo-tile { width:80px; height:80px; }
  .gm-logo-tile img { width:36px; height:36px; }
}