/* =====================================================================
   GALAXYMC - PREMIUM POLISH (a "sima atmenet + szep elrendezes"
   javítás). A head.ejs linkeli be ezeket is, a ds.css UTAN, hogy
   a polish felulirja, ahol szukseges. Ezt a fajlt arra hoztuk letre,
   hogy a "oldal-atmenet ugy nez ki, mint egy ujratoltes" panasz
   megszunjon: a modern View Transitions API ugy %-os atmenetet ad,
   mintha SPA lenne, teljes újratöltődés nelkul (a böngésző animálja
   a `<main>` tartalmat a ket oldal között). Ehhez + precízia
   mikroanimációk (hover, focus, szamok, kártyák).
   ===================================================================== */

/* ----------------------------------------------------------------------
   VIEW TRANSITIONS (cross-document)
   A `navigation: auto` megmondja a böngészőnek, hogy a klasszikus
   következő-dokumentum navigációkat (a magyar menün kattintást) is
   animálja. A `::view-transition-*` felel a látványért. A smooth
   a lágyabb belépésért, a light gyors pagere-nél (pl. search) az
   egyszerű fade-t kap.
   ---------------------------------------------------------------------- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.32s;
  }
  /* A háttér (csillagos) NE animálja a gyökért, csak a <main> */
::view-transition-old(main) {
    animation: vt-main-out 0.30s cubic-bezier(0.4,0,0.2,1) both;
  }
::view-transition-new(main) {
    animation: vt-main-in 0.34s cubic-bezier(0.2,0,0,1) both;
  }
  @keyframes vt-main-out {
    from { opacity: 1; filter: blur(0); transform: translateY(0); }
    to   { opacity: 0; filter: blur(4px); transform: translateY(-8px); }
  }
  @keyframes vt-main-in {
    from { opacity: 0; filter: blur(4px); transform: translateY(12px); }
    to   { opacity: 1; filter: blur(0); transform: translateY(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(main),
::view-transition-new(main),
::view-transition-old(root),
::view-transition-new(root) { animation: none !important; }
}

/* ----------------------------------------------------------------------
   A fő tartalom stabil nézete (a navbar nem villog)
   ---------------------------------------------------------------------- */
main { view-transition-name: main; }

/* ----------------------------------------------------------------------
   KÁRTYÁK / PANÉLEK: finomabb hover, megemelkedés puha árnyékkal
   ---------------------------------------------------------------------- */
.gx-panel,
.gx-tech-card,
.adm-row,
.group-card,
.shop-card,
.review-card,
.trans-row,
.chan-item {
  transition:
    transform 0.24s cubic-bezier(.22,.61,.36,1),
    box-shadow 0.28s cubic-bezier(.22,.61,.36,1),
    border-color 0.18s ease,
    background 0.18s ease;
}
@media (hover: hover) {
.gx-panel:hover,
.gx-tech-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-lg);
    border-color: var(--border-accent);
  }
.adm-row:hover,
.group-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-md);
  }
.shop-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
}

/* ----------------------------------------------------------------------
   MIKRO-INTERAKCIÓK: ikon gombok, badge
   ---------------------------------------------------------------------- */
.gx-btn,
.gx-tab,
.gx-link-soft,
button.gx-btn-ghost {
  position: relative;
}
.gx-btn:active,
.gx-tab:active,
button:active:not(:disabled) {
  transform: scale(0.97);
}

/* ----------------------------------------------------------------------
   INPUT FOCUS: felderősített fókusz-vonal + parányi elmozdulás
   ---------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"],
textarea, select {
  transition: border-color.18s ease, box-shadow.18s ease, background.18s ease;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  box-shadow: 0 0 0 3px rgba(34,211,238,.18), 0 2px 14px rgba(34,211,238,.12);
  transform: translateY(-1px);
}

/* ----------------------------------------------------------------------
   NAVBAR: a hover-alla a szoveg ALA keruljon, ne AT

   A HIBA, amit ez zár: a::before/::after vonalat a link elem
   pozicioja hatarozza meg. A.nav-links a egy INLINE elem
   (display: inline), aminek a hatarodo doboza a sor-KOZEPEN van
   -> egy "bottom: 6px" a szoveg FEKETEJEN megy at, igy a
   hover-alla a "strikethrough" (athuzas) hatasaval rojt (a
   screenshoton latszik: a felul szovegek at vannak huzva).

   A JAVITAS: a link inline-block (a hatarodo doboza a sajat
   magassaga), es az alla a doboz ELEJE alatt, nem a belsejeben.
   ---------------------------------------------------------------------- */
.nav-links a {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  transition: color.18s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 8px rgba(34,211,238,.5);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform.26s cubic-bezier(.22,.61,.36,1);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); }
/* Az aktiv oldal: a sora mindig latszik, nem csak hoverre */
.nav-links a.is-active { color: var(--text); }
.nav-links a.is-active::after { transform: scaleX(1); }

/* A gomb stilusu linkeknek (a Regisztracio) NEM kell alla:
   az egy zart gomb, az alatta levo sor rosszul nez ki */
.nav-links a.btn-nav::after { display: none; }
.btn-nav:hover::after { display: none !important; }
.navbar.btn-nav { display: inline-block; }

/* ----------------------------------------------------------------------
   SZÁMOK: finom "tick" amikor valtozik (a.num-tick osztályhoz)
   ---------------------------------------------------------------------- */
.num-tick { display: inline-block; will-change: transform; }
.num-tick.tick { animation: num-tick.36s var(--mo-spring); }
@keyframes num-tick {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); color: var(--accent); }
  100% { transform: scale(1); }
}

/* ----------------------------------------------------------------------
   KÁRTYÁK: belépési "rise" nagyobb paneloknak (hero, stat-kartya)
   ---------------------------------------------------------------------- */
.gx-rise {
  opacity: 0;
  transform: translateY(14px);
  animation: gx-rise-in.46s cubic-bezier(.2,.65,.3,1) forwards;
}
@keyframes gx-rise-in {
  to { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------------
   GOMBOS: indikátor pip / siker anim
   ---------------------------------------------------------------------- */
.gx-dot-ok { animation: gx-dot-ok.4s var(--mo-spring); }
@keyframes gx-dot-ok {
  0% { transform: scale(0); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ----------------------------------------------------------------------
   SKIN-ARC: vibrálás megelőzése (a korábbi hiba: a CSS background
   váltás miatt pulzált). Fix: stabil méret, antialiased rendering,
   GPU gyorsítás, valamint a::before (a skin forrás) stack-el.
   ---------------------------------------------------------------------- */
.gx-sk {
  contain: layout style paint;
  transform: translateZ(0);
  backface-visibility: hidden;
  --webkit-font-smoothing: antialiased;
}
.gx-sk,.gx-sk::before {
  will-change: transform;
}
.gx-sk-img {
  image-rendering: auto;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.gx-sk[data-skin] { background: none; }
.gx-sk[data-skin]::before { animation: gx-sk-in.3s ease-out; }
@keyframes gx-sk-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ----------------------------------------------------------------------
   FLASH / TOAST: sima becsúsztatás, jobb entrance
   ---------------------------------------------------------------------- */
.flash {
  animation: flash-in.36s var(--mo-spring);
}
@keyframes flash-in {
  from { opacity: 0; transform: translateY(-12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------------
   LOADING SHEEN - skeleton shimmer */
.gx-skeleton::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.06) 50%,
    rgba(255,255,255,0) 100%);
  animation: gx-sheen 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gx-sheen {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.gx-skeleton { position: relative; overflow: hidden; }

/* ----------------------------------------------------------------------
   LAYOUT: részletesebb kártyák (racs) - az oldalakon a `.gx-grid`
   egyszerűbb elrendezéshez */
.gx-grid { display: grid; gap: var(--sp-4); }
.gx-grid-2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.gx-grid-3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 640px) {
.gx-grid-2,.gx-grid-3 { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------
   FÓKUSZ-VISIBLE GLOBÁL
   ---------------------------------------------------------------------- */
:focus-visible { outline: none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

/* ----------------------------------------------------------------------
   DARK LIGHT + prefers-color-scheme compat (not invert text)
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
.gx-rise,.gx-stagger > * {
    animation-fill-mode: both;
  }
}

/* ----------------------------------------------------------------------
   MODAL / OVERLAY - z-index rendezés (a csillag-háttér ne fedje)
   ---------------------------------------------------------------------- */
.gx-confirm,.gx-modal,.modal-backdrop { z-index: 1000; }
.gx-toasts { z-index: 1050; }

/* ----------------------------------------------------------------------
   PRIP-TIP (a gyorsgombokhoz) - holnem látszik a title)
   ---------------------------------------------------------------------- */
[data-title]:hover::after {
  content: attr(data-title);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px; border-radius: var(--r-md);
  background: rgba(4,5,18,.94); color: var(--text);
  font-size: var(--fs-xs); white-space: nowrap;
  box-shadow: var(--sh-md); pointer-events: none;
  z-index: 50; opacity: 0;
  animation: gx-tip.18s ease-out forwards;
}
@keyframes gx-tip { from { opacity:0; transform: translateX(-50%) translateY(4px); } to { opacity:1; transform: translateX(-50%); } }