/**
 * Plugin Name:  PokéPapi KoraCouncil Landing
 * File:         /styles.css
 * Description:  Global styles, tokens, keyframes, reveal + responsive rules for the koracouncil.com marketing page.
 * Version:      1.0.0
 * Author:       PokéPapi
 * License:      GPL-2.0+
 */

:root {
  --bg: #060912;
  --surface: rgba(14, 20, 38, 0.55);
  --surface-2: rgba(12, 18, 34, 0.6);
  --border: rgba(120, 150, 220, 0.13);
  --border-strong: rgba(120, 150, 220, 0.4);
  --text: #e8edf7;
  --text-muted: #aab6cf;
  --text-dim: #8794ad;
  --text-faint: #6f7c97;
  --primary: #5b8def;
  --secondary: #8b6cf0;
  --accent-cyan: #6fe6ff;
  --tone-teal: #3fb6c7;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: #060912;
  color: #e8edf7;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
::selection { background: rgba(91, 141, 239, 0.35); }

/* Fixed-bar scroll offset for anchor targets */
#models, #how, #modes, #pricing, #faq, #top { scroll-margin-top: 80px; }

/* ---- Keyframes ---- */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes glowpulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes gradientshift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes heroUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---- Hero entrance (staggered) ---- */
.hero-item { opacity: 0; animation: heroUp .85s cubic-bezier(.2, .7, .2, 1) both; }
.hero-d1 { animation-delay: .09s; }
.hero-d2 { animation-delay: .18s; }
.hero-d3 { animation-delay: .27s; }
.hero-d4 { animation-delay: .36s; }

/* ---- Scroll reveal (IntersectionObserver-driven, replaces animation-timeline:view()) ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* ---- Hover interactions (translated from style-hover bindings) ---- */
.nav-link { transition: color .2s ease; }
.nav-link:hover { color: #e8edf7; }

.btn-primary { transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); }

.btn-ghost { transition: border-color .25s ease, background .25s ease; }
.btn-ghost:hover { border-color: rgba(120, 150, 220, 0.4); background: rgba(255, 255, 255, 0.07); }

.lift { transition: transform .25s ease, border-color .25s ease; }
.lift:hover { transform: translateY(-4px); border-color: rgba(120, 150, 220, 0.4); }

/* ---- Wallpaper switcher swatches ---- */
.wp-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  cursor: pointer; padding: 0;
  border: 2px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wp-swatch:hover { transform: scale(1.12); }
.wp-swatch.active { border-color: #fff; }

/* ---- Pricing toggle segments ---- */
.bill-seg {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13.5px; font-weight: 600;
  padding: 9px 18px; border-radius: 999px;
  border: none; cursor: pointer;
  color: #aab6cf; background: transparent;
  white-space: nowrap;
  transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}
.bill-seg.active {
  color: #fff;
  background: linear-gradient(100deg, #5b8def, #8b6cf0);
  box-shadow: 0 8px 22px -10px rgba(91, 141, 239, 0.9);
}

/* ---- Modes demo tabs ---- */
.demo-tab {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13.5px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  color: #aab6cf;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(120, 150, 220, 0.14);
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.demo-tab:hover { color: #e8edf7; border-color: rgba(120, 150, 220, 0.3); }
.demo-tab.active {
  color: #fff;
  background: linear-gradient(100deg, #5b8def, #8b6cf0);
  border-color: transparent;
  box-shadow: 0 8px 20px -10px rgba(91, 141, 239, 0.9);
}

/* ---- Demo card swap fade ---- */
.demo-fade { animation: demoFadeIn .35s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes demoFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- FAQ accordion ---- */
.faq-item { border-radius: 18px; background: rgba(14, 20, 38, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(120, 150, 220, 0.13); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  text-align: left; padding: 20px 24px; background: none; border: none; cursor: pointer;
  color: #e8edf7; font-family: 'Hanken Grotesk', sans-serif; font-size: 16.5px; font-weight: 600;
}
.faq-sign { flex: none; font-size: 22px; line-height: 1; color: #7e8ba6; transition: color .2s ease; }
.faq-item.open .faq-sign { color: #8fb4ff; }
.faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2, .7, .2, 1); }
.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a { padding: 0 24px 22px; font-size: 15.5px; line-height: 1.6; color: #aab6cf; text-wrap: pretty; }

/* ---- Mobile nav menu ---- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(6, 9, 18, 0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: none; flex-direction: column;
  padding: 18px clamp(16px, 4vw, 48px);
}
.mobile-menu.open { display: flex; }

/* The single hard breakpoint: nav at 880px (links -> hamburger) */
.nav-desktop { display: flex; }
.nav-burger { display: none; }
@media (max-width: 880px) {
  .nav-desktop { display: none; }
  .nav-burger { display: inline-flex; }
}

/* ---- Reduced motion: static shader frame, no reveals/count-ups/entrances ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero-item { opacity: 1 !important; animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* === END OF FILE (FILENAME: /var/www/vhosts/koracouncil.com/kora/styles.css) === */