/* ==== DDTeamGaming — Single-Image Cinematic Hero (with CSS fog) ==== */

:root{
  --bg:#0b0a16; --text:#f3f0ff; --muted:#d0caff;
  --brand:#ff2fd1; --brand2:#6a5cff;
  --radius:18px; --maxw:1200px;
}

/* Alap oldal (kiegészítés a main.css-hez) */
html,body{ background:var(--bg); color:var(--text); }
.container{ max-width:var(--maxw); margin:0 auto; padding:16px; }

/* ---------- HERO (egy kép + köd) ---------- */
.hero-cinematic{
  position:relative;
  min-height:min(100vh, 860px);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:flex-end;
  isolation:isolate; /* a blend módokhoz */
}

/* Háttérkép */
.hero-cinematic .layer-bg{ position:absolute; inset:0; z-index:0; }
.hero-cinematic .layer-bg img{
  width:100%; height:100%; object-fit:cover;
  filter: brightness(.95) saturate(1.25) contrast(1.05);
  transform: translateZ(0);
}

/* Neon grading + vignette */
.hero-cinematic::before{
  content:""; position:absolute; inset:-2px; z-index:0;
  background:
    radial-gradient(1400px 700px at 8% -10%, rgba(0,225,255,.18), transparent 60%),
    radial-gradient(1400px 700px at 100% 0%, rgba(255,47,209,.16), transparent 55%),
    linear-gradient(180deg, rgba(10,9,30,0), rgba(10,9,30,.35));
  mix-blend-mode:screen; pointer-events:none;
}
.hero-cinematic::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%),
    radial-gradient(1200px 500px at 50% 120%, rgba(0,0,0,.55), transparent 60%);
  pointer-events:none;
}

/* -------- Talajköd (CSS + SVG filter, JS nélkül) -------- */
.fog{
  position:absolute; left:0; right:0; bottom:0;
  height: 42%;                     /* köd magassága – 38–50% között állítható */
  z-index:1;                       /* háttér fölött, tartalom alatt */
  pointer-events:none;
  /* puha “fehér → neon” ködfolt, ezt torzítja az SVG turbulence */
  background:
    radial-gradient(120% 85% at 50% 100%,
      rgba(210,230,255,.55) 0%,
      rgba(150,180,255,.35) 28%,
      rgba(120,140,255,.22) 45%,
      transparent 70%);
  filter: url(#fogFx) blur(3px);   /* SVG örvény + finom elmosás */
  mix-blend-mode:screen;           /* neon hatás sötét alapon */
  opacity:.80;                     /* 0.65–0.95 közt ízlés szerint */
  /* felül gyors elhalás – csak alul legyen sűrű */
  mask-image: linear-gradient(to top, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%);
  animation: fogMove 20s ease-in-out infinite;
}

/* vízszintes, lassú sodródás */
@keyframes fogMove{
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-25px); }
  100% { transform: translateX(0); }
}

/* Tartalmi réteg */
.hero-cinematic .content{
  position:relative; z-index:2;
  width:100%;
  padding:clamp(18px, 4vw, 36px);
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  text-shadow: 0 0 18px rgba(115,81,255,.20), 0 0 26px rgba(0,229,255,.18);
}
.hero-cinematic h1{
  margin:0;
  font-size:clamp(28px, 5.2vw, 56px);
  line-height:1.05; letter-spacing:.2px;
}
.hero-cinematic .kicker{
  margin:0; color:#d7d1ff; opacity:.9; max-width:68ch;
}

/* CTA gomb */
.btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:12px;
  color:#fff; text-decoration:none; font-weight:600;
  background:linear-gradient(90deg, var(--brand2), var(--brand));
  box-shadow:0 12px 40px rgba(106,92,255,.22);
  transition:transform .18s, box-shadow .18s, filter .18s;
  width:fit-content;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 52px rgba(255,47,209,.25), 0 0 24px rgba(0,229,255,.25);
  filter:saturate(1.06);
}

/* Szekciócím a hero után */
.section-title{ margin:22px 0 10px; font-size:clamp(20px, 2.6vw, 28px); }

/* Reduced motion – animáció lekapcsolása */
@media (prefers-reduced-motion: reduce){
  .fog{ animation:none; filter: blur(3px); }
}
/* ===== Latest news — neon glass cards (CSS only) ===== */

/* rács */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  margin: 10px 0 24px;
}

/* alap kártya */
.card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background: rgba(15,16,32,.6);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding:16px;
  text-decoration:none;
  color:var(--text);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}

/* belső elemek – generátorodhoz illeszkedve */
.card .kicker{ font-size:.8rem; letter-spacing:.2px; opacity:.8; margin:0 0 6px; color:#a8a0ff; }
.card h3{ font-size:1.05rem; margin:0 0 8px; line-height:1.25; }
.card .meta{ font-size:.85rem; color:#c5c0ff; opacity:.8; }

/* neon border “él” — finom, csak hoverkor erősödik */
.card::before{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background: linear-gradient(135deg, rgba(0,225,255,.22), rgba(255,47,209,.22));
  opacity:.25;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:1px; /* vékony fénykeret */
}

/* hover effektek */
.card:hover{
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(0,225,255,.25);
  box-shadow:
    0 14px 42px rgba(0,225,255,.18),
    0 10px 28px rgba(255,47,209,.14),
    0 6px 24px rgba(0,0,0,.35);
  filter: saturate(1.05);
}
.card:hover::before{ opacity:.55; }

/* státusz badge – a generator által beállított data-status alapján */
.card::after{
  content: attr(data-status); /* official / rumor */
  position:absolute; top:10px; right:10px;
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  color:#e9e7ff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* státusz szerinti színkódolás */
.card[data-status="official"]::after{
  background: rgba(0,225,255,.14);
  border-color: rgba(0,225,255,.28);
  color:#bdf4ff;
}
.card[data-status="rumor"]::after{
  background: rgba(255,47,209,.14);
  border-color: rgba(255,47,209,.28);
  color:#ffd9f5;
}

/* kártyán belüli link stílus (ha a generátor <a> egész kártyát linkké teszi, ez oké) */
.card a{ color:inherit; text-decoration:none; }

/* képes kivágat, ha van thumb */
.card .thumb{
  height: 140px; border-radius:10px; overflow:hidden; margin:-4px -4px 12px;
  background: radial-gradient(600px 240px at 30% -40%, rgba(0,225,255,.20), transparent 60%),
              radial-gradient(600px 240px at 100% 0%, rgba(255,47,209,.18), transparent 55%),
              linear-gradient(180deg, #0e1220, #0a0d18);
}

/* “Latest news” cím margója */
.section-title{ margin: 22px 0 12px; }
/* Tabs */
.tab{
  background: rgba(20,20,40,.4);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  color:var(--text);
  padding:8px 16px;
  cursor:pointer;
  font-weight:600;
  transition: all .18s ease;
}
.tab:hover{
  background:linear-gradient(90deg, rgba(0,225,255,.15), rgba(255,47,209,.15));
  border-color:rgba(255,255,255,.18);
}
.tab.active{
  background:linear-gradient(90deg, var(--brand2), var(--brand));
  color:#fff;
  border-color:transparent;
  box-shadow:0 0 12px rgba(0,225,255,.35);
}
/* ===== Phase 2 – Interaktív finomságok ===== */

/* Hero overlay lassú neon-pulzálás (nagyon finom) */
@keyframes neonPulse { 
  0%,100% { filter: brightness(.95) saturate(1.25) contrast(1.05); }
  50%     { filter: brightness(1.02) saturate(1.32) contrast(1.07); }
}
@media (prefers-reduced-motion: no-preference){
  .hero-cinematic .layer-bg img { animation: neonPulse 14s ease-in-out infinite; }
}

/* Menü: neon underline hover */
.menu a{
  position: relative;
}
.menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg, rgba(0,225,255,.0), rgba(0,225,255,.9), rgba(255,47,209,.9), rgba(255,47,209,.0));
  border-radius:2px; transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .22s ease;
  box-shadow: 0 0 8px rgba(0,225,255,.35), 0 0 8px rgba(255,47,209,.28);
}
.menu a:hover::after,
.menu a.active::after{ transform: scaleX(1); }

/* Kártyák: scroll-reveal anim (egységes az index és news alatt) */
.pre-reveal{
  opacity: 0;
  transform: translateY(14px) scale(.98);
}
.reveal{
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .35s ease, transform .35s ease, filter .2s ease, box-shadow .2s ease;
}

/* Parallax JS által állítja a transform-ot; itt csak a transition kikapcs,
   hogy ne "csússzon" utólag */
.hero-cinematic .layer-bg img,
.hero-cinematic .fog {
  will-change: transform, filter;
  transition: none;
}

/* Reduced motion – minden mozgás finomra vagy off */
@media (prefers-reduced-motion: reduce){
  .menu a::after{ transition:none; }
  .pre-reveal{ opacity:1; transform:none; }
  .reveal{ transition:none; }
}