/* ==========================================================================
   glass.css — glassmorph component kit for the SZJZ tender pitch
   --------------------------------------------------------------------------
   Palette: base #2A2E3F → #11131C, accent lime #93D14F.
   Minden felület üveg, de a szövegkontraszt elsődleges: a videó textúrája
   a sötét scrimen és a blurön át marad érzékelhető. Recipes adapted from 21st.dev
   glassmorphism cards / liquid-glass button / glass nav references,
   tuned to our palette.
   Components: .glass-panel  .glass-card  .glass-chip  .glass-stat
               .glass-nav    .glass-btn
   All responsive; on mobile everything must fit the narrow centre column
   (only the middle 26% of the video is visible) → see media queries at end.
   No HTML here, no layout opinions beyond the components' own box.
   ========================================================================== */

/* ── design tokens ──────────────────────────────────────────────────────── */
:root {
  --bg-top: #2A2E3F;
  --bg-bottom: #11131C;
  --accent: #93D14F;
  --accent-soft: rgba(147, 209, 79, 0.35);
  --accent-glow: rgba(147, 209, 79, 0.55);

  /* A sötét scrim a videó legvilágosabb kockáin is biztosítja a testszöveg kontrasztját. */
  --glass-fill: rgba(9, 12, 18, 0.82);
  --glass-fill-strong: rgba(9, 12, 18, 0.92);
  --glass-scrim: rgba(7, 10, 16, 0.88);
  --glass-scrim-soft: rgba(9, 12, 19, 0.84);
  --glass-tint: rgba(42, 46, 63, 0.35);
  --glass-border: rgba(255, 255, 255, 0.16);        /* thin white frame        */
  --glass-border-bright: rgba(255, 255, 255, 0.30);
  --glass-blur: 14px;
  --glass-radius: 20px;
  --glass-radius-sm: 12px;

  /* layered light: inset top light + inset side sheen + deep soft shadow */
  --glass-light:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 1px 0 0 rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 12px 40px rgba(6, 8, 14, 0.45);
  --glass-shadow-lift: 0 20px 60px rgba(6, 8, 14, 0.55);

  --text-hi: rgba(255, 255, 255, 0.96);
  --text-mid: rgba(255, 255, 255, 0.88);
  --text-low: rgba(255, 255, 255, 0.76);
  --muted: rgba(235, 237, 245, 0.86);

  /* narrow centre column: video's visible middle strip on mobile (~26%) —
     content hugs a slim column so it never sits on the dark letterbox edges */
  --glass-col-mobile: min(92vw, 400px);
}

/* No backdrop-filter support → denser fill so text stays readable on video */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-fill: rgba(9, 12, 18, 0.94);
    --glass-fill-strong: rgba(9, 12, 18, 0.98);
    --glass-scrim: rgba(7, 10, 16, 0.96);
    --glass-scrim-soft: rgba(9, 12, 19, 0.94);
  }
}

/* ── .glass-panel ───────────────────────────────────────────────────────────
   Nagy állomásfelület: fejezetnyitó, case-részlet és bevezető. Ez kapja a
   legerősebb scrimet, mert itt fut a legtöbb testszöveg. */
.glass-panel {
  position: relative;
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--glass-radius);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.015) 45%, rgba(255, 255, 255, 0.04) 100%),
    var(--glass-scrim);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-light), var(--glass-shadow);
  color: var(--text-hi);
  overflow: hidden;
}
/* faint diagonal shine sweeping the top-left corner */
.glass-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0%, transparent 28%);
  pointer-events: none;
}
/* accent variant: lime edge-glow for SZJZ-relevant highlights */
.glass-panel--accent {
  border-color: var(--accent-soft);
  box-shadow: var(--glass-light), var(--glass-shadow), 0 0 32px rgba(147, 209, 79, 0.14);
}

/* ── .glass-card ────────────────────────────────────────────────────────────
   Mid-size content card: case-study cards, AI product modules, pillar cards.
   Slightly denser than a panel; lifts + brightens on hover. */
.glass-card {
  position: relative;
  padding: clamp(18px, 2.5vw, 32px);
  border-radius: var(--glass-radius);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 60%),
    var(--glass-scrim-soft);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-light), var(--glass-shadow);
  color: var(--text-hi);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.glass-card:hover,
.glass-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--glass-border-bright);
  box-shadow: var(--glass-light), var(--glass-shadow-lift);
}
/* lime-glow variant (e.g. JÁTÉK & KÖZÖSSÉG pillar, AI cross-reference) */
.glass-card--accent {
  border-color: var(--accent-soft);
  box-shadow: var(--glass-light), var(--glass-shadow), 0 0 28px rgba(147, 209, 79, 0.18);
}
.glass-card--accent:hover {
  box-shadow: var(--glass-light), var(--glass-shadow-lift), 0 0 40px rgba(147, 209, 79, 0.28);
}
/* pending state: Bridgestone "hamarosan" shell — same box, muted content */
.glass-card--pending {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.22);
}
.glass-card--pending > * { opacity: 0.82; }

/* ── .glass-chip ────────────────────────────────────────────────────────────
   Small pill: pillar labels, tool/detail tags, monospace section tags. */
.glass-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 1.1em;
  border-radius: 999px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: var(--text-mid);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.glass-chip:hover {
  background: var(--glass-fill-strong);
  border-color: var(--glass-border-bright);
  color: var(--text-hi);
}
/* lime accent chip: active / highlighted (SZJZ-relevant) items */
.glass-chip--accent {
  border-color: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 16px rgba(147, 209, 79, 0.20);
}

/* ── .glass-stat ────────────────────────────────────────────────────────────
   Big countup number + small caps label (case metrics: 24M, €463K, 16M Ft…).
   Number in lime with a soft glow; label stays quiet below it. */
.glass-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  min-width: 7.5em;
  padding: clamp(14px, 2vw, 24px) clamp(16px, 2.2vw, 28px);
  border-radius: var(--glass-radius-sm);
  background:
    linear-gradient(170deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 70%),
    rgba(8, 11, 17, 0.86);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-light), 0 8px 28px rgba(6, 8, 14, 0.38);
  text-align: center;
}
.glass-stat__value {
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent);
  text-shadow: 0 0 22px var(--accent-glow);
  font-variant-numeric: tabular-nums; /* stable width while counting up */
}
.glass-stat__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mid);
  max-width: 16em;
}

/* ── .glass-nav ─────────────────────────────────────────────────────────────
   HUD menu on the left edge: unfolds from the AG monogram on hover.
   Thin white lines, game-interface micro-motion. Codex toggles .is-open;
   items get .is-active for the current station. */
.glass-nav {
  position: fixed;
  left: clamp(12px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 100%),
    rgba(9, 12, 18, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-light), var(--glass-shadow);
}
.glass-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--text-low);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  /* label collapsed by default; unfolds when the nav opens */
  max-width: 44px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.25s ease, border-color 0.25s ease,
              background 0.25s ease, transform 0.25s ease;
}
.glass-nav.is-open .glass-nav__item,
.glass-nav:hover .glass-nav__item {
  max-width: 240px;
}
.glass-nav__item:hover {
  color: var(--text-hi);
  background: var(--glass-fill);
  border-color: var(--glass-border);
  transform: translateX(3px); /* game-HUD micro-motion */
}
/* active station: lime marker line + lime glow text */
.glass-nav__item.is-active {
  color: var(--accent);
  border-color: var(--accent-soft);
  background: rgba(147, 209, 79, 0.08);
  text-shadow: 0 0 14px var(--accent-glow);
}
.glass-nav__item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

/* ── .glass-btn ─────────────────────────────────────────────────────────────
   Liquid-glass button (BELÉPÉS AZ ÉLMÉNYBE, gate entries, contact CTA).
   Multi-layer shadow stack for the "wet glass" edge; primary = lime. */
.glass-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 2.4em;
  border-radius: 999px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0.10) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid var(--glass-border-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -6px 12px rgba(255, 255, 255, 0.06),
    0 10px 30px rgba(6, 8, 14, 0.45);
  color: var(--text-hi);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease, border-color 0.3s ease;
}
/* shine sweep on hover */
.glass-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.glass-btn:hover::after { left: 130%; }
.glass-btn:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -6px 12px rgba(255, 255, 255, 0.08),
    0 16px 44px rgba(6, 8, 14, 0.55);
}
.glass-btn:active { transform: translateY(0) scale(0.99); }
.glass-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* primary CTA: lime glass — still translucent, video glows through the glow */
.glass-btn--primary {
  background:
    linear-gradient(160deg, rgba(147, 209, 79, 0.38) 0%, rgba(147, 209, 79, 0.14) 60%, rgba(147, 209, 79, 0.26) 100%);
  border-color: rgba(147, 209, 79, 0.55);
  color: #EAFBD6;
  text-shadow: 0 0 12px rgba(147, 209, 79, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -6px 12px rgba(147, 209, 79, 0.10),
    0 10px 30px rgba(6, 8, 14, 0.45),
    0 0 34px rgba(147, 209, 79, 0.25);
}
.glass-btn--primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -6px 12px rgba(147, 209, 79, 0.14),
    0 16px 44px rgba(6, 8, 14, 0.55),
    0 0 48px rgba(147, 209, 79, 0.38);
}

/* ── motion hygiene ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .glass-card, .glass-btn, .glass-btn::after, .glass-nav__item, .glass-chip {
    transition: none;
  }
}

/* ── responsive: tablet ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --glass-blur: 12px; --glass-radius: 16px; }
  .glass-stat { min-width: 6.2em; }
}

/* ── responsive: mobile — narrow centre column ──────────────────────────────
   Only the middle ~26% of the video is visible on phones: every component
   compresses into a slim centred column and must never spill sideways. */
@media (max-width: 600px) {
  .glass-panel,
  .glass-card {
    width: 100%;
    max-width: var(--glass-col-mobile);
    margin-left: auto;
    margin-right: auto;
    padding: 18px 16px;
  }
  .glass-stat {
    width: 100%;
    max-width: var(--glass-col-mobile);
    min-width: 0;
    padding: 12px 14px;
  }
  .glass-stat__value { font-size: 2rem; }
  .glass-stat__label { font-size: 0.66rem; }
  .glass-chip { font-size: 0.72rem; padding: 0.4em 0.9em; white-space: normal; }
  .glass-btn { padding: 0.85em 1.8em; font-size: 0.85rem; letter-spacing: 0.14em; }

  /* HUD collapses to a compact bottom-left stack, labels only while open */
  .glass-nav {
    left: 10px;
    top: auto;
    bottom: 16px;
    transform: none;
    gap: 4px;
    padding: 8px;
  }
  .glass-nav__item { padding: 7px 10px; font-size: 0.7rem; }
  .glass-nav:hover .glass-nav__item { max-width: 44px; } /* touch: only .is-open unfolds */
  .glass-nav.is-open .glass-nav__item { max-width: 200px; }
}

/* Nyomtatásban az üvegfelületek papírbarát, stabil kontrasztú kártyákká válnak. */
@media print {
  .glass-panel,
  .glass-card,
  .glass-stat,
  .glass-chip {
    color: #11131c !important;
    border-color: #c9ccd4 !important;
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .glass-panel::before,
  .glass-card::before {
    display: none !important;
  }

  .glass-card:hover,
  .glass-card:focus-within {
    transform: none;
  }

  .glass-card--accent,
  .glass-card--pending {
    border-color: #6e9f39 !important;
  }
}