/* ═══════════════════════════════════════════════════════════════════
   Kaevor Design System — v1.0
   Additive layer on top of css/styles.css.
   Import after styles.css on every page.
═══════════════════════════════════════════════════════════════════ */

/* ── TOKEN ALIASES ──────────────────────────────────────────────── */
/* Maps the brief's naming convention to existing style values.
   Use --c-* tokens in new components; --accent/--bg0 etc. remain
   available for backward compat. */
:root {
  --c-primary:   #6c47ff;
  --c-secondary: #8b6dff;
  --c-accent:    #6c47ff;
  --c-bg:        #0b0d12;
  --c-surface:   #141821;
  --c-surface2:  #1a1f2e;
  --c-text:      #f1f5f9;
  --c-muted:     #94a3b8;
  --c-stroke:    rgba(255,255,255,.09);
  --c-stroke2:   rgba(255,255,255,.06);

  /* Gradient shorthands */
  --g-primary: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
  --g-hero:    linear-gradient(135deg, rgba(108,71,255,.18) 0%, transparent 70%);
  --g-card:    linear-gradient(180deg, transparent 50%, rgba(11,13,18,.85) 100%);
}

/* ── WAVE DIVIDERS ──────────────────────────────────────────────── */
/*
  Usage — place between two sections to transition fill color:

  <div class="wave" aria-hidden="true">
    <svg viewBox="0 0 1200 72" preserveAspectRatio="none">
      <path d="M0,36 C300,72 900,0 1200,36 L1200,72 L0,72 Z"
            class="wave-fill-surface"/>
    </svg>
  </div>

  Variants:
    wave-fill-bg       fills --c-bg       (#0b0d12) — for transitions INTO bg sections
    wave-fill-surface  fills --c-surface  (#141821) — for transitions INTO surface sections
    wave-flip          flips the wave so it droops from the top instead of rising at bottom
*/
.wave {
  position: relative;
  height: 72px;
  overflow: hidden;
  pointer-events: none;
  line-height: 0;
  margin: -1px 0;          /* collapse the 1px gap that can appear between sections */
}
.wave svg {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0; left: 0;
}
.wave.wave-flip svg { bottom: auto; top: 0; transform: scaleY(-1); }
.wave.wave-tall    { height: 100px; }
.wave.wave-short   { height: 48px; }

.wave-fill-bg      { fill: var(--c-bg); }
.wave-fill-surface { fill: var(--c-surface); }
.wave-fill-surface2{ fill: var(--c-surface2); }

/* ── REVEAL ANIMATION VARIANTS ──────────────────────────────────── */
/*
  Builds on the existing .reveal / .reveal.in system in styles.css.
  script.js already observes .reveal elements and adds .in on scroll.

  Usage — pair a direction modifier with the base .reveal class:
    <div class="reveal reveal-left">…</div>
    <div class="reveal reveal-right" data-delay="2">…</div>
    <div class="reveal reveal-scale">…</div>

  .reveal alone = gentle upward fade (existing behaviour, unchanged).
*/
.reveal.reveal-up    { transform: translateY(36px); }
.reveal.reveal-left  { transform: translateX(-36px); }
.reveal.reveal-right { transform: translateX( 36px); }
.reveal.reveal-scale { transform: scale(.93) translateY(10px); }

/* .in resets all directional transforms — works for every variant */
.reveal.reveal-up.in,
.reveal.reveal-left.in,
.reveal.reveal-right.in,
.reveal.reveal-scale.in {
  opacity: 1;
  transform: none;
}

/* Stagger delays — apply data-delay="1"–"6" to children in a grid */
[data-delay="1"] { transition-delay:  80ms; }
[data-delay="2"] { transition-delay: 160ms; }
[data-delay="3"] { transition-delay: 240ms; }
[data-delay="4"] { transition-delay: 320ms; }
[data-delay="5"] { transition-delay: 400ms; }
[data-delay="6"] { transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal.reveal-up,
  .reveal.reveal-left,
  .reveal.reveal-right,
  .reveal.reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-delay] { transition-delay: 0ms; }
}

/* ── MICRO-INTERACTIONS ─────────────────────────────────────────── */

/* Generic lift — subtle translateY + shadow on hover */
.hover-lift {
  transition: transform var(--t) ease, box-shadow var(--t) ease;
  will-change: transform;
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(0,0,0,.32), 0 0 0 1px rgba(108,71,255,.14);
}

/* Accent glow — border + soft glow pulse */
.hover-glow {
  transition: box-shadow var(--t) ease, border-color var(--t) ease;
}
.hover-glow:hover {
  box-shadow: 0 0 0 1px rgba(108,71,255,.32), 0 8px 32px rgba(108,71,255,.18);
}

/* Border accent — border snaps to accent colour on hover */
.hover-border {
  border: 1px solid var(--c-stroke2);
  transition: border-color var(--t) ease;
}
.hover-border:hover { border-color: rgba(108,71,255,.38); }

/* Shine sweep — light streak across a card on hover */
.shine { position: relative; overflow: hidden; }
.shine::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    108deg,
    transparent 38%,
    rgba(255,255,255,.055) 50%,
    transparent 62%
  );
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity .3s ease, transform .55s ease;
  pointer-events: none;
}
.shine:hover::after {
  opacity: 1;
  transform: translateX(100%);
}

/* Icon pop — icon inside a card scales on parent hover */
.icon-pop .ic-wrap {
  transition: transform var(--t) ease, background var(--t) ease;
}
.icon-pop:hover .ic-wrap {
  transform: scale(1.12);
  background: rgba(108,71,255,.22);
}

/* ── TEXT UTILITIES ─────────────────────────────────────────────── */
.text-gradient {
  background: var(--g-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-accent  { color: var(--c-primary); }
.text-muted   { color: var(--c-muted); }
.text-center  { text-align: center; }
.text-balance { text-wrap: balance; }       /* improves headline wrapping */

/* ── LAYOUT UTILITIES ───────────────────────────────────────────── */
.section-tight    { padding: 44px 0; }
.section-spacious { padding: 96px 0; }
.pt-0 { padding-top:    0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.mt-0 { margin-top:     0 !important; }
.mb-0 { margin-bottom:  0 !important; }

/* Inline flex gap helpers — useful for action rows */
.flex-row   { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.flex-col   { display: flex; flex-direction: column; gap: 12px; }
.flex-center{ display: flex; align-items: center; justify-content: center; }

/* ── GRADIENT SURFACE CARDS ─────────────────────────────────────── */
/* .card-glow — glass card with an inner accent gradient top edge */
.card-glow {
  position: relative;
  border-radius: var(--radius2);
  background: var(--c-surface);
  border: 1px solid var(--c-stroke2);
  overflow: hidden;
}
.card-glow::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--g-primary);
  opacity: 0;
  transition: opacity var(--t) ease;
}
.card-glow:hover::before { opacity: 1; }

/* ── DIVIDERS ───────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--c-stroke2);
  margin: 0;
}
.divider-accent {
  height: 2px;
  background: var(--g-primary);
  border: none;
  border-radius: 2px;
  width: 40px;
  margin: 0 0 20px;
}

/* ── COOKIE BANNER ──────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  width: min(96vw, 660px);
  padding: 16px 20px;
  border-radius: var(--radius2);
  background: rgba(15,17,23,.97);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  transition: opacity .38s ease, transform .38s ease;
}
.cookie-banner.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(24px);
}
.cookie-text {
  flex: 1;
  min-width: 180px;
  font-size: .875rem;
  color: rgba(241,245,249,.78);
  line-height: 1.55;
}
.cookie-text a {
  color: var(--c-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-text a:hover { color: var(--c-text); }
.cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cookie-btn {
  padding: 9px 18px;
  border-radius: 12px;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--t) ease, background var(--t) ease, border-color var(--t) ease;
  line-height: 1;
}
.cookie-btn-accept {
  background: var(--c-primary);
  color: #fff;
  border: 1px solid transparent;
}
.cookie-btn-accept:hover {
  background: var(--c-secondary);
  transform: translateY(-1px);
}
.cookie-btn-decline {
  background: transparent;
  color: var(--c-muted);
  border: 1px solid rgba(255,255,255,.12);
}
.cookie-btn-decline:hover {
  border-color: rgba(255,255,255,.28);
  color: var(--c-text);
}

/* ── RESPONSIVE ADJUSTMENTS ─────────────────────────────────────── */
@media (max-width: 620px) {
  .cookie-banner { bottom: 12px; padding: 14px 16px; flex-direction: column; align-items: flex-start; }
  .cookie-actions { width: 100%; }
  .cookie-btn { flex: 1; text-align: center; }
  .wave { height: 48px; }
  .wave.wave-tall { height: 64px; }
}