/*
 * GBoost Nav – Front CSS v3.3
 */

/* ════════════════════════════════════════
   FOUC PREVENTION — ukryj menu do załadowania CSS vars
   JS dodaje .gbn-ready po inicjalizacji
════════════════════════════════════════ */
.gbn-root:not(.gbn-ready) .gbn-bar {
  /* Zarezerwuj miejsce — zapobiega skokowi layoutu */
  visibility: hidden;
}
.gbn-root.gbn-ready .gbn-bar {
  visibility: visible;
  animation: gbn-fadein .15s ease;
}
@keyframes gbn-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Logo — zawsze rezerwuj width żeby nie skakało */
.gbn-logo img {
  /* aspect-ratio z width/height atrybutów zapobiega CLS */
  height: auto;
  max-height: calc(var(--gbn-h, 70px) - 20px);
}

/* ── Root ── */
.gbn-root {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: normal;
  position: relative;
  overflow: visible;
}
.gbn-root *, .gbn-root *::before, .gbn-root *::after { box-sizing: border-box !important; }
.gbn-root ul, .gbn-root ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.gbn-root li { list-style: none !important; }
.gbn-root a { text-decoration: none !important; }
.gbn-root button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; padding: 0; }
.gbn-root img { display: block; max-width: 100%; height: auto; }

/* ── Pasek ── */
.gbn-bar {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  clear: both !important;
  margin: 0 !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: 9000;
  background: var(--gbn-bg);
  border-bottom: 1px solid var(--gbn-border);
  box-shadow: var(--gbn-sh);
  border-radius: var(--gbn-r);
  transition: background .3s, box-shadow .3s;
  overflow: visible;
}
.gbn-bar.is-sticky { position: sticky !important; top: var(--gbn-offset, 0) !important; }
.gbn-bar.is-scrolled { background: var(--gbn-bg-s) !important; box-shadow: var(--gbn-sh-s) !important; }
.gbn-bar.is-glass { backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); }
.gbn-bar.has-accent-top { border-top: var(--gbn-at-h) solid var(--gbn-at-c) !important; }
.gbn-bar.is-gradient { background-image: var(--gbn-bg) !important; background-color: transparent !important; }

/* ── Wrapper ── */
.gbn-wrap {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: var(--gbn-mw) !important;
  margin: 0 auto !important;
  padding: 0 var(--gbn-px) !important;
  height: var(--gbn-h) !important;
  min-height: var(--gbn-h) !important;
  transition: height .25s;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  position: relative !important;
  left: auto !important;
  transform: none !important;
}
.gbn-bar.is-scrolled .gbn-wrap { height: var(--gbn-hs) !important; min-height: var(--gbn-hs) !important; }

/* ── Logo ── */
.gbn-logo { display: flex !important; align-items: center !important; flex-shrink: 0 !important; text-decoration: none !important; }
.gbn-logo img { display: block !important; width: var(--gbn-lw) !important; max-width: var(--gbn-lw) !important; height: auto !important; max-height: calc(var(--gbn-h) - 20px) !important; object-fit: contain !important; }
.gbn-logo-text { font-size: 1.1em; font-weight: 700; color: var(--gbn-lc) !important; white-space: nowrap; }

/* ── Layouts ── */
.gbn-layout-between .gbn-logo { margin-right: auto !important; }
.gbn-layout-center .gbn-list  { flex: 1; justify-content: center; }
.gbn-layout-left   .gbn-logo  { margin-right: 24px !important; }
.gbn-layout-left   .gbn-right { margin-left: auto !important; }
.gbn-layout-right  .gbn-logo  { order: 3; margin-left: auto !important; }
.gbn-layout-right  .gbn-list  { order: 2; margin-left: auto !important; }
.gbn-layout-right  .gbn-right { order: 1; }

.gbn-right { display: flex !important; align-items: center !important; gap: 12px !important; flex-shrink: 0 !important; margin-left: auto !important; }

/* ── Lista desktop ── */
.gbn-list { display: flex !important; align-items: center !important; gap: var(--gbn-lgap) !important; list-style: none !important; margin: 0 !important; padding: 0 !important; flex-wrap: nowrap !important; }
.gbn-item { position: relative !important; list-style: none !important; display: block !important; }

/* ── Linki ── */
.gbn-link {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  color: var(--gbn-lc) !important; font-size: var(--gbn-lfs) !important; font-weight: var(--gbn-lfw) !important;
  text-transform: var(--gbn-ltt) !important; letter-spacing: var(--gbn-lls) !important;
  white-space: nowrap !important; padding: var(--gbn-lpy) var(--gbn-lpx) !important;
  border-radius: var(--gbn-lr) !important; text-decoration: none !important;
  transition: color .2s, background .2s; position: relative !important;
  cursor: pointer !important; background: transparent !important; border: none !important;
}
.gbn-item:hover > .gbn-link, .gbn-item:focus-within > .gbn-link, .gbn-cur > .gbn-link { color: var(--gbn-lh) !important; }
.gbn-link[aria-current="page"] { color: var(--gbn-la) !important; }

/* Hover effects */
.gbn-fx-underline .gbn-link:not(.gbn-sub)::after { content:''; position:absolute; bottom:0; left:var(--gbn-lpx); right:var(--gbn-lpx); height:2px; background:var(--gbn-lh); transform:scaleX(0); transform-origin:left; transition:transform .25s; border-radius:2px; }
.gbn-fx-underline .gbn-item:hover > .gbn-link:not(.gbn-sub)::after, .gbn-fx-underline .gbn-cur > .gbn-link:not(.gbn-sub)::after { transform:scaleX(1); }
.gbn-fx-pill .gbn-item:hover > .gbn-link:not(.gbn-sub), .gbn-fx-pill .gbn-cur > .gbn-link:not(.gbn-sub) { background:color-mix(in srgb,var(--gbn-lh) 12%,transparent) !important; }
.gbn-fx-glow .gbn-item:hover > .gbn-link:not(.gbn-sub) { text-shadow:0 0 14px var(--gbn-lh); }

.gbn-chev { flex-shrink:0; opacity:1; transition:transform .25s; }
.gbn-has-sub:hover > .gbn-link .gbn-chev, .gbn-has-sub:focus-within > .gbn-link .gbn-chev { transform:rotate(180deg); }

/* ── Dropdown ── */
/* Bridge: wypełnia gap między linkiem a dropem — mysz nie "wypada" */
.gbn-drop::before {
  content: '';
  position: absolute;
  /* Rozciągnij w górę o offset + parę px zapasu */
  top: calc(-1 * var(--gbn-ddo, 8px) - 8px);
  left: -8px;
  right: -8px;
  bottom: 100%;
  /* Niewidzialne ale łapie pointer-events */
}
.gbn-drop { position:absolute !important; top:calc(100% + var(--gbn-ddo)) !important; left:0 !important; min-width:var(--gbn-ddw) !important; background:var(--gbn-ddbg) !important; color:var(--gbn-ddt) !important; border-radius:var(--gbn-ddr) !important; box-shadow:var(--gbn-ddsh) !important; padding:6px 0 !important; z-index:9100 !important; opacity:0; visibility:hidden; pointer-events:none; }
.gbn-has-sub:hover > .gbn-drop, .gbn-has-sub:focus-within > .gbn-drop { opacity:1; visibility:visible; pointer-events:auto; }
.gbn-dd-fade .gbn-drop { transition:opacity .22s,visibility .22s; }
.gbn-dd-slide .gbn-drop { transform:translateY(-8px); transition:opacity .22s,visibility .22s,transform .22s; }
.gbn-dd-slide .gbn-has-sub:hover > .gbn-drop { transform:translateY(0); }
.gbn-dd-scale .gbn-drop { transform:scale(.94) translateY(-6px); transform-origin:top left; transition:opacity .2s,visibility .2s,transform .2s; }
.gbn-dd-scale .gbn-has-sub:hover > .gbn-drop { transform:scale(1) translateY(0); }
.gbn-sub { display:block !important; padding:var(--gbn-dd-ipy,10px) var(--gbn-dd-ipx,20px); color:var(--gbn-ddt) !important; font-size:calc(var(--gbn-lfs) - 1px); white-space:nowrap; text-decoration:none !important; transition:background .15s,color .15s,padding-left .15s; }
.gbn-sub:hover { background:var(--gbn-ddh) !important; color:var(--gbn-ddht) !important; padding-left:calc(var(--gbn-dd-ipx,20px) + 6px); }
.gbn-drop .gbn-drop { top:-6px !important; left:100% !important; }

/* ── CTA ── */
.gbn-cta { margin-left: var(--gbn-cta-ml, 0) !important; /* Odstęp od menu — sumuje się z gap gbn-right */ display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:var(--gbn-ctapy) var(--gbn-ctapx) !important; font-size:var(--gbn-ctafs) !important; font-weight:var(--gbn-ctafw) !important; border-radius:var(--gbn-ctar) !important; white-space:nowrap !important; flex-shrink:0 !important; text-decoration:none !important; transition:filter .2s,transform .15s; border:2px solid transparent !important; line-height:1.2 !important; cursor:pointer !important; }
.gbn-cta:hover { filter:brightness(1.08); transform:translateY(-1px); }
.gbn-cta-filled  { background:var(--gbn-ctabg) !important; color:var(--gbn-ctac) !important; border-color:var(--gbn-ctabg) !important; }
.gbn-cta-outline { background:transparent !important; color:var(--gbn-ctabg) !important; border-color:var(--gbn-ctabg) !important; }
.gbn-cta-pill    { background:var(--gbn-ctabg) !important; color:var(--gbn-ctac) !important; border-radius:999px !important; border-color:var(--gbn-ctabg) !important; }
.gbn-cta-ghost   { background:color-mix(in srgb,var(--gbn-ctabg) 12%,transparent) !important; color:var(--gbn-ctabg) !important; }
.gbn-cta-bold    { background:transparent !important; color:var(--gbn-ctabg) !important; font-weight:800 !important; padding-inline:0 !important; }
.gbn-cta-shadow  { background:var(--gbn-ctabg) !important; color:var(--gbn-ctac) !important; box-shadow:0 6px 20px color-mix(in srgb,var(--gbn-ctabg) 35%,transparent); border-color:var(--gbn-ctabg) !important; }

/* ── Extras ── */
.gbn-extras { display:flex !important; align-items:center; gap:12px; }
.gbn-ex { display:inline-flex !important; align-items:center; gap:6px; font-size:14px; color:var(--gbn-lc) !important; text-decoration:none !important; white-space:nowrap; transition:color .2s; }
.gbn-ex:hover { color:var(--gbn-lh) !important; }
.gbn-ex-btn { padding:6px 14px; border-radius:7px; background:var(--gbn-lh); color:#fff !important; font-weight:600; }
.gbn-icon { flex-shrink:0; opacity:.7; }

/* ════════════════════════════════════════
   HAMBURGER — naprawiony SVG
   Używamy path zamiast line, transform przez CSS klasy
════════════════════════════════════════ */
.gbn-ham {
  display: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--gbn-ham-size,24px) + 16px);
  height: calc(var(--gbn-ham-size,24px) + 16px);
  border-radius: var(--gbn-ham-r,8px);
  background: var(--gbn-ham-bg,transparent);
  color: var(--gbn-ham-c,currentColor);
  flex-shrink: 0;
  transition: background .2s;
  cursor: pointer;
}
.gbn-ham:hover { background: var(--gbn-ham-bgh,rgba(0,0,0,.06)) !important; }

/* SVG wewnątrz — dziedziczy color z .gbn-ham */
.gbn-ham-svg {
  width: var(--gbn-ham-size,24px);
  height: var(--gbn-ham-size,24px);
  display: block;
  overflow: visible;
  /* Kolor SVG przez CSS — inherituje z .gbn-ham color */
  fill: none;
  stroke: currentColor;
}
/* Wszystkie elementy w SVG dziedziczą stroke */
.gbn-ham-svg line,
.gbn-ham-svg path {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
/* Animacja hamburger ↔ X przez opacity grup */
.gbn-ham-lines { opacity: 1; transition: opacity .22s; }
.gbn-ham-x     { opacity: 0; transition: opacity .22s; }
.gbn-ham[aria-expanded="true"] .gbn-ham-lines { opacity: 0; }
.gbn-ham[aria-expanded="true"] .gbn-ham-x     { opacity: 1; }

/* Mobilny tryb — JS dodaje .gbn-mob-mode */
.gbn-bar.gbn-mob-mode .gbn-ham    { display: flex; }
.gbn-bar.gbn-mob-mode .gbn-list   { display: none !important; }
.gbn-bar.gbn-mob-mode .gbn-extras { display: none !important; }
.gbn-bar.gbn-mob-mode .gbn-cta:not(.gbn-cta-mob) { display: none !important; }

/* Fallback CSS media query */
@media (max-width: 991px) {
  .gbn-ham    { display: flex; }
  .gbn-list   { display: none !important; }
  .gbn-extras { display: none !important; }
  .gbn-cta:not(.gbn-cta-mob) { display: none !important; }
}

/* ════════════════════════════════════════
   PANEL MOBILNY
════════════════════════════════════════ */
.gbn-mob-panel {
  position: fixed !important;
  z-index: 99999 !important;
  top: 0 !important; bottom: 0 !important;
  background: var(--gbn-mbbg,#ffffff) !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--gbn-mob-sh,0 8px 40px rgba(0,0,0,.2));
}
.gbn-mob-slide   { right:0; width:min(var(--gbn-mob-w,360px),88vw); transform:translateX(100%); transition:transform .34s cubic-bezier(.4,0,.2,1),visibility .34s; border-radius:var(--gbn-mob-r,0) 0 0 var(--gbn-mob-r,0); }
.gbn-mob-overlay { inset:0; width:100%; transform:translateX(100%); transition:transform .34s cubic-bezier(.4,0,.2,1),visibility .34s; box-shadow:none; }
.gbn-mob-drop    { left:0; right:0; width:100%; top:0; bottom:auto; max-height:90vh; transform:translateY(-100%); transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s; border-radius:0 0 var(--gbn-mob-r,0) var(--gbn-mob-r,0); }
.gbn-mob-panel.is-open { visibility:visible !important; transform:none !important; }

/* Tryb podglądu — panel scoped do root */
.gbn-root.gbn-prev-mode {
  overflow: hidden;
  /* Wysokość musi być wystarczająca żeby panel był widoczny */
  min-height: 320px;
}
.gbn-root.gbn-prev-mode .gbn-mob-panel {
  position: absolute !important;
  z-index: 999 !important;
  /* top/bottom relatywne do root */
  top: 0 !important;
  bottom: 0 !important;
  min-height: 100%;
}
.gbn-root.gbn-prev-mode .gbn-mob-slide {
  right: 0; top: 0; bottom: 0;
  width: min(var(--gbn-mob-w,360px), 75%);
}
.gbn-root.gbn-prev-mode .gbn-mob-drop {
  top: 0; bottom: auto; left: 0; right: 0; max-height: 100%;
}
.gbn-root.gbn-prev-mode .gbn-mob-overlay { inset: 0; }
.gbn-root.gbn-prev-mode .gbn-veil {
  position: absolute !important;
  z-index: 998 !important;
  top: 0; left: 0; right: 0; bottom: 0;
  min-height: 100%;
}

/* Panel inner */
.gbn-mob-inner { padding:0 24px 32px; flex:1; display:flex; flex-direction:column; }
.gbn-mob-head  { display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--gbn-mob-sep,rgba(0,0,0,.08)); margin-bottom:4px; gap:12px; }
.gbn-mob-close { padding:6px; border-radius:7px; color:var(--gbn-mbt); display:flex; align-items:center; transition:background .2s; cursor:pointer; }
.gbn-mob-close:hover { background:rgba(0,0,0,.06); }

/* Lista mobilna */
.gbn-ml { display:flex; flex-direction:column; list-style:none; margin:0; padding:0; }
.gbn-mi-row { display:flex; align-items:center; }
.gbn-mi { background: var(--gbn-mob-ibg, transparent); border-radius: var(--gbn-mob-ir, 0); }
.gbn-mi-a { flex:1; padding:var(--gbn-mob-lpy,14px) 2px; color:var(--gbn-mbt) !important; font-size:var(--gbn-mob-lfs,16px); font-weight:var(--gbn-mob-lfw,500); border-bottom:1px solid var(--gbn-mob-sep,rgba(0,0,0,.08)); text-decoration:none !important; transition:color .18s, background .18s; display:block; }
.gbn-mi-a:hover, .gbn-cur .gbn-mi-a { color:var(--gbn-lh) !important; }
.gbn-mi-tog { padding:8px; border-radius:6px; color:var(--gbn-mbt); transition:transform .25s,background .2s; display:flex; align-items:center; cursor:pointer; flex-shrink:0; }
.gbn-mi-tog:hover { background:rgba(0,0,0,.06); }
.gbn-mi-tog[aria-expanded="true"] { transform:rotate(180deg); }
.gbn-mi-sub { padding:0 0 0 var(--gbn-mob-sind,16px); list-style:none; margin:0; }
.gbn-mi-sub:not([hidden]) { display:flex; flex-direction:column; }
/* KLUCZOWE: hidden atrybut musi bić display:flex */
.gbn-mi-sub[hidden] { display:none !important; }
.gbn-mi-sub-seg[hidden] { display:none !important; }
.gbn-mi-sub .gbn-mi-a { font-size:calc(var(--gbn-mob-lfs,16px) - 2px); opacity:.8; padding-left:var(--gbn-mob-spx,0px) !important; }

.gbn-mob-contacts { margin-top:auto; padding-top:20px; border-top:1px solid var(--gbn-mob-sep,rgba(0,0,0,.08)); display:flex; flex-direction:column; gap:10px; }
.gbn-mob-contact { display:flex; align-items:center; gap:10px; color:var(--gbn-mbt) !important; font-size:15px; padding:4px 0; text-decoration:none !important; transition:color .2s; }
.gbn-mob-contact:hover { color:var(--gbn-lh) !important; }
.gbn-cta-mob { width:var(--gbn-mob-cta-w,100%) !important; justify-content:var(--gbn-mob-cta-align,center) !important; align-self:var(--gbn-mob-cta-self,auto) !important; margin-top:16px; padding-top:13px !important; padding-bottom:13px !important; font-size:16px !important; }

/* Veil */
.gbn-veil { position:fixed !important; inset:0; z-index:99998; background:rgba(0,0,0,.48); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; }
.gbn-veil.is-open { opacity:1 !important; visibility:visible !important; }

/* Focus */
.gbn-link:focus-visible, .gbn-cta:focus-visible, .gbn-mi-a:focus-visible, .gbn-ham:focus-visible, .gbn-mob-close:focus-visible { outline:2px solid var(--gbn-lh) !important; outline-offset:3px; border-radius:3px; }
@media (prefers-reduced-motion:reduce) { .gbn-bar,.gbn-bar *,.gbn-mob-panel,.gbn-veil { transition:none !important; } }

/* ham-svg styles moved to main section above */

/* Custom ikona hamburgera */
.gbn-ham-img { display: block; width: var(--gbn-ham-size,24px); height: var(--gbn-ham-size,24px); object-fit: contain; }

/* ════════════════════════════════════════
   MOBILNE - HOVER
════════════════════════════════════════ */
.gbn-mi-a:hover {
  color: var(--gbn-mob-lh, var(--gbn-lh)) !important;
  background: var(--gbn-mob-lbgh, transparent) !important;
}
.gbn-cur > .gbn-mi-row > .gbn-mi-a,
.gbn-cur > .gbn-mi-seg { color: var(--gbn-mob-lh, var(--gbn-lh)) !important; }

/* ════════════════════════════════════════
   MOBILNE - TRYB SEGMENTOWY
════════════════════════════════════════ */
/* Menu segmentowe: każdy element to wyraźny "kafelek" */
.gbn-ml-seg { gap: 6px; padding: 8px 0; }
.gbn-ml-seg > .gbn-mi { border-radius: 10px; overflow: hidden; }

.gbn-mi-seg {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  background: color-mix(in srgb, var(--gbn-mbt) 5%, transparent);
  border-radius: 10px;
  color: var(--gbn-mbt) !important;
  text-decoration: none !important;
  font-size: var(--gbn-mob-lfs, 16px) !important;
  font-weight: var(--gbn-mob-lfw, 500) !important;
  transition: background .18s, color .18s;
  border-bottom: none !important;
  margin-bottom: 6px;
}
.gbn-mi-seg:hover, .gbn-cur .gbn-mi-seg {
  background: color-mix(in srgb, var(--gbn-mob-lh, var(--gbn-lh)) 12%, transparent) !important;
  color: var(--gbn-mob-lh, var(--gbn-lh)) !important;
}
.gbn-mi-seg-arr { flex-shrink: 0; opacity: .5; }

/* Podmenu segmentowe */
.gbn-mi-sub-seg {
  padding: 4px 0 8px 12px !important;
  background: transparent !important;
}
/* Segment podmenu hidden fix */
.gbn-mi-sub-seg[hidden] { display: none !important; }
.gbn-mi-sub-seg .gbn-mi-seg {
  font-size: calc(var(--gbn-mob-lfs, 16px) - 2px) !important;
  padding: 10px 12px !important;
  opacity: .85;
}

/* ════════════════════════════════════════
   MOBILNE - TRYB FLAT (bez wcięć)
════════════════════════════════════════ */
.gbn-mi-sub-flat {
  padding-left: 0 !important;
}
.gbn-mi-sub-flat .gbn-mi-a {
  font-size: calc(var(--gbn-mob-lfs, 16px) - 1px) !important;
  opacity: .75;
  padding-left: 16px !important;
}

/* ════════════════════════════════════════
   PARENT NOLINK — element nadrzędny tylko otwiera dropdown
════════════════════════════════════════ */
/* Desktop — button stylowany identycznie jak <a> */
.gbn-link-nolink {
  cursor: pointer !important;
  user-select: none;
}

/* Mobile — cały wiersz to przycisk */
.gbn-mi-a-nolink {
  all: unset;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 1;
  padding: var(--gbn-mob-lpy,14px) 2px !important;
  color: var(--gbn-mbt) !important;
  font-size: var(--gbn-mob-lfs,16px) !important;
  font-weight: var(--gbn-mob-lfw,500) !important;
  border-bottom: 1px solid var(--gbn-mob-sep,rgba(0,0,0,.08)) !important;
  cursor: pointer;
  transition: color .18s;
  width: 100%;
  background: var(--gbn-mob-ibg,transparent) !important;
  border-radius: var(--gbn-mob-ir,0) !important;
}
.gbn-mi-a-nolink:hover { color: var(--gbn-mob-lh,var(--gbn-lh)) !important; }
/* Strzałka w nolink button obraca się */
.gbn-mi-a-nolink[aria-expanded="true"] svg { transform: rotate(180deg); }
.gbn-mi-a-nolink svg { transition: transform .25s; flex-shrink: 0; }

/* Podmenu — animacja rozwinięcia */
.gbn-mi-sub:not([hidden]) {
  animation: gbn-slide-down .22s ease;
}
@keyframes gbn-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}