/* ═══════════════════════════════════════════════════════
   JOG PREZENTÁCIÓ — Közös stílusok
   Animációk, komponensek, design tokenek
   ═══════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENEK ─────────────────────────────── */
:root {
  /* Színek — kék */
  --j-blue-500:  #3b82f6;
  --j-blue-400:  #60a5fa;
  --j-blue-300:  #93c5fd;
  --j-blue-200:  #bfdbfe;
  --j-blue-100:  #dbeafe;

  /* Színek — cián */
  --j-cyan-500:  #06b6d4;
  --j-cyan-400:  #22d3ee;
  --j-cyan-300:  #67e8f9;

  /* Színek — ibolya */
  --j-violet-500:#8b5cf6;
  --j-violet-400:#a78bfa;

  /* Színek — smaragd */
  --j-emerald-500:#10b981;
  --j-emerald-400:#34d399;
  --j-emerald-300:#6ee7b7;

  /* Színek — sárga / arany */
  --j-amber-500: #f59e0b;
  --j-amber-400: #fbbf24;
  --j-amber-300: #fde047;

  /* Színek — piros */
  --j-red-500:   #ef4444;
  --j-red-400:   #f87171;

  /* Színek — slate (semleges) */
  --j-slate-700: #334155;
  --j-slate-600: #475569;
  --j-slate-500: #64748b;
  --j-slate-400: #94a3b8;
  --j-slate-300: #cbd5e1;
  --j-slate-200: #e2e8f0;
  --j-slate-100: #f1f5f9;

  /* Háttér színek */
  --j-bg-card:       rgba(15,23,42,0.5);
  --j-bg-card-heavy: rgba(15,23,42,0.55);
  --j-bg-def:        rgba(59,130,246,0.05);
  --j-bg-overlay:    rgba(15,23,42,0.6);
  --j-bg-overlay-75: rgba(15,23,42,0.75);
  --j-bg-overlay-85: rgba(15,23,42,0.85);

  /* Border színek */
  --j-border-blue:   rgba(59,130,246,0.15);
  --j-border-slate:  rgba(148,163,184,0.15);
  --j-border-red:    rgba(220,38,38,0.2);
  --j-border-white:  rgba(255,255,255,0.05);
  --j-border-white2: rgba(255,255,255,0.06);
  --j-border-white3: rgba(255,255,255,0.07);
  --j-border-white4: rgba(255,255,255,0.08);
  --j-border-white5: rgba(255,255,255,0.1);

  /* Tipográfia */
  --j-fs-h1:     clamp(2.025rem,4.725vw,2.835rem);
  --j-fs-h2:     2.56rem;
  --j-fs-label:  0.97rem;
  --j-fs-sub:    0.85rem;
  --j-fs-body:   1.42rem;
  --j-fs-body-sm:0.91rem;
  --j-fs-card-title: 1.95rem;
  --j-fs-ghost:  clamp(7rem,18vw,13rem);

  --j-tracking-label:  0.22em;
  --j-tracking-tight:  -0.03em;
  --j-tracking-wide:   0.25em;

  /* Animáció időzítések */
  --j-ease-reveal: cubic-bezier(0.16,1,0.3,1);
  --j-ease-pop:    cubic-bezier(0.17,0.89,0.32,1.2);
}

/* ── 2. KÖZÖS ANIMÁCIÓK ────────────────────────────── */

/* Belépők */
@keyframes j-rise {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes j-rise-fast {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes j-rise-20 {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes j-rise-18 {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes j-rise-24 {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes j-rise-28 {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes j-rise-30 {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes j-rise-40 {
  from { opacity:0; transform:translateY(40px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes j-slide-r {
  from { opacity:0; transform:translateX(-30px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes j-slide-l {
  from { opacity:0; transform:translateX(30px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes j-slide-r-40 {
  from { opacity:0; transform:translateX(-40px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes j-slide-l-24 {
  from { opacity:0; transform:translateX(-24px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes j-slide-r-24 {
  from { opacity:0; transform:translateX(24px); }
  to   { opacity:1; transform:translateX(0); }
}

@keyframes j-line-grow {
  from { transform:scaleX(0); transform-origin:left; }
  to   { transform:scaleX(1); }
}
@keyframes j-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes j-scale-in {
  from { opacity:0; transform:scale(0.95); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes j-scale-up {
  from { opacity:0; transform:scale(0.7); filter:blur(4px); }
  to   { opacity:1; transform:scale(1); filter:blur(0); }
}
@keyframes j-pop {
  0%   { opacity:0; transform:scale(0.85); }
  80%  { transform:scale(1.03); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes j-pop-big {
  0%   { opacity:0; transform:scale(0.8); }
  60%  { transform:scale(1.1); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes j-pop-bounce {
  0%   { opacity:0; transform:scale(0.8); }
  80%  { transform:scale(1.06); }
  100% { opacity:1; transform:scale(1); }
}

@keyframes j-expand {
  from { width:0; opacity:0; }
  to   { width:100%; opacity:1; }
}

/* Folyamatos effektek */
@keyframes j-spin-slow {
  from { transform:rotate(0deg); } to { transform:rotate(360deg); }
}
@keyframes j-spin-rev {
  from { transform:rotate(360deg); } to { transform:rotate(0deg); }
}
@keyframes j-sweep {
  0%   { transform:translateX(-100%); opacity:0; }
  20%  { opacity:1; } 80% { opacity:1; }
  100% { transform:translateX(400%); opacity:0; }
}

@keyframes j-pulse-blue {
  0%,100% { box-shadow: inset 8px 0 18px rgba(59,130,246,0.18), -4px 0 24px rgba(59,130,246,0.22), 0 0 40px rgba(59,130,246,0.06); }
  50%     { box-shadow: inset 8px 0 28px rgba(59,130,246,0.38), -4px 0 40px rgba(59,130,246,0.44), 0 0 60px rgba(59,130,246,0.14); }
}
@keyframes j-pulse-slate {
  0%,100% { box-shadow: 0 -4px 18px rgba(148,163,184,0.18); }
  50%     { box-shadow: 0 -4px 32px rgba(148,163,184,0.44), 0 0 24px rgba(148,163,184,0.10); }
}
@keyframes j-glow-top-blue {
  0%,100% { box-shadow: 0 -4px 18px rgba(59,130,246,0.22); }
  50%     { box-shadow: 0 -4px 36px rgba(59,130,246,0.54), 0 0 28px rgba(59,130,246,0.14); }
}
@keyframes j-glow-top-slate {
  0%,100% { box-shadow: 0 -4px 18px rgba(148,163,184,0.18); }
  50%     { box-shadow: 0 -4px 32px rgba(148,163,184,0.44), 0 0 24px rgba(148,163,184,0.10); }
}

@keyframes j-card-glow-blue {
  0%, 100% { box-shadow: 0 0 15px rgba(59,130,246,0.15); transform: scale(1); border-color: rgba(59,130,246,0.3); }
  25%, 75% { box-shadow: 0 0 40px rgba(59,130,246,0.6); transform: scale(1.03); border-color: var(--j-blue-500); }
  50%      { box-shadow: 0 0 20px rgba(59,130,246,0.25); transform: scale(1.01); border-color: rgba(59,130,246,0.5); }
}
@keyframes j-card-glow-slate {
  0%, 100% { box-shadow: 0 0 15px rgba(148,163,184,0.15); transform: scale(1); border-color: rgba(148,163,184,0.3); }
  25%, 75% { box-shadow: 0 0 40px rgba(148,163,184,0.5); transform: scale(1.03); border-color: var(--j-slate-400); }
  50%      { box-shadow: 0 0 20px rgba(148,163,184,0.25); transform: scale(1.01); border-color: rgba(148,163,184,0.5); }
}

@keyframes j-node-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,0), 0 0 36px rgba(59,130,246,0.35); }
  50%     { box-shadow: 0 0 0 18px rgba(59,130,246,0), 0 0 64px rgba(59,130,246,0.65); }
}
@keyframes j-ring-out {
  0%   { transform:scale(1);   opacity:0.35; }
  100% { transform:scale(1.6); opacity:0; }
}

@keyframes j-spoke-pulse {
  0%,100% { opacity:0.5; stroke-width:2; }
  50%     { opacity:1;   stroke-width:3.5; }
}
@keyframes j-spoke-pulse-slate {
  0%,100% { opacity:0.4; stroke-width:2; }
  50%     { opacity:0.9; stroke-width:3.5; }
}

/* Specifikus egyedi animációk — csak ahol kell */
@keyframes j-lock-click {
  0%   { opacity: 0; transform: translateX(-15px); filter: brightness(1); }
  50%  { opacity: 1; transform: translateX(5px); filter: brightness(1.8); }
  100% { opacity: 1; transform: translateX(0); filter: brightness(1); }
}
@keyframes j-conn-light {
  0%   { opacity: 0.2; box-shadow: 0 0 0 transparent; border-color: rgba(255,255,255,0.05); color: var(--j-slate-600); }
  100% { opacity: 1; box-shadow: 0 0 24px rgba(56,189,248,0.6); border-color: rgba(56,189,248,0.8); color: #f0f9ff; background: var(--j-bg-overlay); }
}
@keyframes j-spin { 100% { transform: rotate(360deg); } }
@keyframes j-pulse-core {
  0%, 100% { opacity: 0.5; transform: scale(0.8); filter: drop-shadow(0 0 4px #38bdf8); }
  50%      { opacity: 1; transform: scale(1.3); filter: drop-shadow(0 0 12px #38bdf8); }
}
@keyframes j-arrow-pulse {
  0%,100% { opacity:0.3; transform:translateX(0); }
  50%     { opacity:1; transform:translateX(8px); }
}
@keyframes j-dash-march { to { stroke-dashoffset:-20; } }
@keyframes j-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes j-flow-line { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
@keyframes j-fill-pipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes j-hero-pulse {
  0%,100% { opacity:0.18; transform:scale(1) rotate(-2deg); }
  50%     { opacity:0.30; transform:scale(1.05) rotate(2deg); }
}

/* ── 3. KÖZÖS KOMPONENSEK ──────────────────────────── */

/* Alap slide konténer */
.jog-slide {
  font-family: 'Space Grotesk', sans-serif;
}

/* Fejléc szettek */
.jog-header {
  position: relative; overflow: hidden;
  height: 88px; flex-shrink: 0;
}
.jog-header-sm {
  height: 80px;
}

.jog-ghost {
  font-size: var(--j-fs-ghost); font-weight: 900;
  letter-spacing: -0.06em; line-height: 0.85;
  color: transparent; -webkit-text-stroke: 1px rgba(59,130,246,0.13);
  user-select: none; pointer-events: none;
  position: absolute; top: -1rem; left: -0.5rem;
}

.jog-label {
  font-size: var(--j-fs-label); font-weight: 900;
  letter-spacing: var(--j-tracking-label);
  text-transform: uppercase;
}

.jog-title {
  font-size: var(--j-fs-h1); font-weight: 900;
  letter-spacing: var(--j-tracking-tight);
  line-height: 1; color: var(--j-slate-100);
  margin: 0; text-transform: uppercase;
}

.jog-sub {
  font-size: var(--j-fs-sub); font-weight: 900;
  letter-spacing: var(--j-tracking-label);
  text-transform: uppercase; opacity: 0.65;
  display: block; margin-top: 5px;
}

/* Elválasztó vonal */
.jog-divider {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--j-blue-500) 0%, rgba(59,130,246,0.1) 60%, transparent 100%);
  margin-bottom: 20px;
}
.jog-divider-slate {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--j-slate-400) 0%, rgba(148,163,184,0.1) 60%, transparent 100%);
  margin-bottom: 12px; flex-shrink: 0;
}

/* Kártya típusok */
.jog-card {
  background: var(--j-bg-card);
  border: 1px solid var(--j-border-white5);
  border-radius: 6px;
  padding: 18px 20px;
  transition: transform 0.3s, border-color 0.3s;
}
.jog-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.2) !important; }

.jog-card-blue {
  background: var(--j-bg-card);
  border: 1px solid var(--j-border-blue);
  border-top: 7px solid var(--j-blue-500);
  padding: 18px 20px;
}
.jog-card-slate {
  background: var(--j-bg-card);
  border: 1px solid var(--j-border-slate);
  border-top: 7px solid var(--j-slate-400);
  padding: 18px 20px;
}

/* Definició blokk */
.jog-def-block {
  background: var(--j-bg-def);
  border: 1px solid rgba(59,130,246,0.2);
  border-left: 8px solid var(--j-blue-500);
  padding: 18px 28px 14px;
  margin-bottom: 16px;
  position: relative;
}

/* Box cím */
.jog-box-title {
  font-size: 1.11rem; font-weight: 900;
  letter-spacing: 0.2em; text-transform: uppercase;
  display: flex; align-items: center; gap: 7px;
}
.jog-box-title::before {
  content: ''; display: inline-block;
  width: 10px; height: 10px; border-radius: 2px;
  flex-shrink: 0; background: currentColor; opacity: 0.75;
}

/* Lista elemek */
.jog-col-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--j-border-white);
}
.jog-col-item:last-child { border-bottom: none; }

.jog-dot {
  width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0; margin-top: 7px;
}
.jog-dot-blue  { background: var(--j-blue-400); }
.jog-dot-slate { background: var(--j-slate-400); }
.jog-dot-red   { background: var(--j-red-400); }
.jog-dot-cyan  { background: var(--j-cyan-400); }
.jog-dot-amber { background: var(--j-amber-400); }

/* Szöveg body */
.jog-body-text {
  font-size: var(--j-fs-body); font-weight: 600;
  line-height: 1.65; color: var(--j-slate-300);
  text-transform: uppercase; letter-spacing: 0.03em;
  margin: 0;
}
.jog-body-text b { color: var(--j-slate-100); font-weight: 900; }

.jog-body-text-sm {
  font-size: var(--j-fs-body-sm); font-weight: 500;
  line-height: 1.5; color: var(--j-slate-600);
  text-transform: uppercase; letter-spacing: 0.03em;
  margin: 0;
}

/* Flow pill (3 lépéses folyamat dobozok) */
.jog-flow-pill {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative; overflow: hidden;
  padding: 14px 10px;
}
.jog-flow-pill::after {
  content: ''; position: absolute; top: 0; left: 0;
  width: 28%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  animation: j-sweep 3.6s ease-in-out infinite;
  pointer-events: none;
}
.jog-pill-num {
  font-size: 1.1rem; font-weight: 900;
  letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.6;
}
.jog-pill-word {
  font-size: 1.69rem; font-weight: 500;
  letter-spacing: -0.01em; text-transform: uppercase;
  padding: 8px 20px; border-radius: 3px;
}
.jog-pill-sub {
  font-size: 1.11rem; color: var(--j-slate-400);
  font-weight: 700; text-align: center;
  margin-top: 5px; text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Hub-and-spoke kártyák */
.jog-hub-card {
  z-index: 2; justify-self: stretch; align-self: stretch;
  height: 100%; justify-content: center;
  display: flex; flex-direction: column;
  padding: 16px 22px;
}
.jog-hub-card-blue {
  background: var(--j-bg-card-heavy);
  border: 1px solid rgba(59,130,246,0.18);
  border-top: 3px solid var(--j-blue-500);
}
.jog-hub-card-slate {
  background: var(--j-bg-card-heavy);
  border: 1px solid rgba(148,163,184,0.15);
  border-top: 3px solid var(--j-slate-400);
}

.jog-card-title {
  font-size: var(--j-fs-card-title); font-weight: 500;
  letter-spacing: -0.01em; text-transform: uppercase;
  margin-bottom: 12px; display: flex; align-items: center; gap: 12px;
}
.jog-card-body {
  font-size: var(--j-fs-body); font-weight: 500;
  line-height: 1.5; color: var(--j-slate-400);
  text-transform: uppercase; letter-spacing: 0.02em;
  margin: 0;
}
.jog-card-body b { font-weight: 900; color: var(--j-slate-200); }

/* Node / központi elem */
.jog-node-inner {
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 12px;
}

/* Háttér elemek */
.jog-bg-arc {
  position: absolute; top: -60px; right: -80px;
  width: 380px; height: 380px;
  pointer-events: none; z-index: 0;
  opacity: 0;
}
.jog-bg-arc circle {
  animation: j-spin-slow 28s linear infinite;
  transform-origin: 50% 50%;
}

/* SVG vonalak draw-in */
.jog-arrow path {
  stroke-dasharray: 44; stroke-dashoffset: 44;
}

/* Háttér SVG spoke vonalak */
.jog-spokes {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
  opacity: 0;
}
.jog-spoke path {
  stroke-dasharray: 450; stroke-dashoffset: 450;
}

/* Statikus elemek alapértelmezetten rejtve */
.j-hidden { opacity: 0; }

/* ── 4. .slide.active trigger szabályok ────────────── */

/* Header, divider reveal */
.slide.active .j-rise-anim      { animation: j-rise 0.55s var(--j-ease-reveal) 0.05s forwards; }
.slide.active .j-divider-anim   { animation: j-line-grow 0.6s var(--j-ease-reveal) 0.25s forwards; opacity: 1; }

/* Def blokk */
.slide.active .j-def-anim {
  animation: j-rise 0.6s var(--j-ease-reveal) 0.35s forwards,
             j-pulse-blue 3s ease-in-out 1.2s infinite;
}

/* Flow bar */
.slide.active .j-flow-anim {
  animation: j-rise 0.55s var(--j-ease-reveal) 0.6s forwards;
}

/* Oszlopok */
.slide.active .j-col-slate {
  animation: j-rise 0.6s var(--j-ease-reveal) 0.82s forwards,
             j-glow-top-slate 3.4s ease-in-out 1.6s infinite;
}
.slide.active .j-col-blue {
  animation: j-rise 0.6s var(--j-ease-reveal) 1.0s forwards,
             j-glow-top-blue 3.4s ease-in-out 2.2s infinite;
}

/* SVG nyilak */
.slide.active .j-arrow-1 path { animation: j-draw 0.4s ease forwards 1.05s; }
.slide.active .j-arrow-2 path { animation: j-draw 0.4s ease forwards 1.25s; }

/* Háttér kör */
.slide.active .j-bg-arc { opacity: 1; }

/* Hub-and-spoke */
.slide.active .j-spokes { opacity: 1; }
.slide.active .j-spoke-1 path { animation: j-draw 0.45s ease forwards 0.85s; }
.slide.active .j-spoke-2 path { animation: j-draw 0.45s ease forwards 1.0s; }
.slide.active .j-spoke-3 path { animation: j-draw 0.45s ease forwards 1.15s; }
.slide.active .j-spoke-4 path { animation: j-draw 0.45s ease forwards 1.3s; }

.slide.active .j-node {
  animation: j-rise 0.6s var(--j-ease-reveal) 0.4s forwards;
}
.slide.active .j-node-inner {
  animation: j-node-pulse 3s ease-in-out 1.2s infinite;
}
.slide.active .j-ring-1 { animation: j-ring-out 3s ease-out 1.4s infinite; }
.slide.active .j-ring-2 { animation: j-ring-out 3s ease-out 2.2s infinite; }

/* Hub kártyák */
.slide.active .j-hub-1 {
  animation: j-rise 0.5s var(--j-ease-reveal) 1.1s forwards,
             j-card-glow-blue 3.6s ease-in-out 2s infinite;
}
.slide.active .j-hub-2 {
  animation: j-rise 0.5s var(--j-ease-reveal) 1.25s forwards,
             j-card-glow-slate 3.6s ease-in-out 2.3s infinite;
}
.slide.active .j-hub-3 {
  animation: j-rise 0.5s var(--j-ease-reveal) 1.4s forwards,
             j-card-glow-blue 3.6s ease-in-out 2.6s infinite;
}
.slide.active .j-hub-4 {
  animation: j-rise 0.5s var(--j-ease-reveal) 1.55s forwards,
             j-card-glow-slate 3.6s ease-in-out 2.9s infinite;
}

/* SVG spoke pulse */
.slide.active .j-spoke-1-g { animation: j-spoke-pulse 2.8s ease-in-out 0s infinite; }
.slide.active .j-spoke-2-g { animation: j-spoke-pulse-slate 2.8s ease-in-out 0.4s infinite; }
.slide.active .j-spoke-3-g { animation: j-spoke-pulse 2.8s ease-in-out 0.8s infinite; }
.slide.active .j-spoke-4-g { animation: j-spoke-pulse-slate 2.8s ease-in-out 1.2s infinite; }

/* ── 5. Slide-specifikus prefix-ek (csak ahol egyedi kell) ── */
/* A legtöbb dia használhatja a fenti közös osztályokat.
   Ha egy diának egyedi animációja van (pl. jogforrás, érvényesség),
   azt a dia saját <style> blokkjában hagyjuk — de csak az EGYEDIT. */

/* Hero mérleg */
.hero-scale-bg { animation: j-hero-pulse 6s ease-in-out infinite; transform-origin: center; }

/* Cursor blink */
.j-cursor { animation: j-blink 1.1s step-end infinite; }

/* Dashed march vonal */
.j-dash-path { animation: j-dash-march 0.6s linear 1.7s infinite; }

/* Lock click */
.j-lock {
  animation: j-lock-click 0.4s var(--j-ease-pop) forwards;
}

/* Connection light */
.j-conn {
  animation: j-conn-light 0.6s ease-out forwards;
}

/* Spin core */
.j-spin-anim {
  animation: j-spin 10s linear infinite;
}
.j-pulse-core-anim {
  animation: j-pulse-core 3s ease-in-out infinite;
}

/* Arrow pulse */
.j-arrow-bounce {
  animation: j-arrow-pulse 2s infinite;
}

/* Pipe fill */
.j-pipe-fill {
  animation: j-fill-pipe 2.5s linear forwards;
}

/* Node pop */
.j-node-pop {
  animation: j-pop-big 0.4s var(--j-ease-pop) forwards;
}