/* Next: wrapper React wokół wstrzykniętej powłoki — display:contents żeby #navbar
   position:fixed liczył się względem viewportu jak w czystym index.html. */
.ghoosty-shell-before,
.ghoosty-shell-after {
  display: contents;
}

/*
 * Loader: nie używamy globalnego `#loader { display:none }` — przy pierwszym malowaniu
 * walczyło to z `html[data-show-home-loader='1'] #loader` i z krytycznym CSS,
 * co daje krótkie „mignięcie” / lukę wizualną w trace (PaintImage na #loader).
 * Ukrywamy tylko poza trybem splash (brak atrybutu, wartość !== '1', lub jawne '0').
 */
html:not([data-show-home-loader='1']) #loader {
  display: none !important;
}

/* Prevent first-paint flash before loader gate script sets its decision. */
html:not([data-show-home-loader]) body {
  visibility: hidden;
}

html[data-show-home-loader='1'] #loader {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid !important;
  place-items: center;
  pointer-events: auto;
  opacity: 1;
  background: radial-gradient(circle at 50% 42%, rgba(0, 212, 255, 0.1), rgba(0, 0, 0, 0.95) 55%);
}

/*
 * Ukrywamy wszystkie bezpośrednie dzieci body oprócz #loader — selektor #loader ~ * pomija
 * treść „sprzed” loadera (gdyby coś kiedykolwiek było wcześniej w DOM) oraz ryzykował być
 * przełamywany przez style hydracji. Przy data-show-home-loader='1' maskuje całą powłokę pod splash.
 */
html[data-show-home-loader='1'] body > *:not(#loader) {
  visibility: hidden !important;
}

html[data-show-home-loader='1'] #loader .loader-content {
  width: min(520px, 90vw);
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 18px;
  grid-template-rows: auto 36px auto auto;
}

html[data-show-home-loader='1'] #loader .loader-logo img {
  aspect-ratio: 1139 / 454;
}

html[data-show-home-loader='1'] #loader .loader-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #7cefff;
  filter: drop-shadow(0 0 12px rgba(0, 212, 255, 0.55));
}

html[data-show-home-loader='1'] #loader .loader-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

html[data-show-home-loader='1'] #loader .loader-track {
  width: min(420px, 78vw);
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(126, 238, 255, 0.35);
  background: rgba(0, 0, 0, 0.5);
}

html[data-show-home-loader='1'] #loader #loader-bar {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4fdfff, #00d4ff 55%, #8b74ff);
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.55);
}

html[data-show-home-loader='1'] #loader #loader-pct {
  font-size: clamp(20px, 4.2vw, 34px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: #dff9ff;
}

/* Smooth page entry after route transition to avoid "pop-in". */
html[data-route-enter='glitch'] body {
  animation: gh-route-enter-body 360ms cubic-bezier(0.22, 0.78, 0.24, 1) 70ms both;
}

html[data-route-enter='glitch'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(146, 245, 255, 0.16) 0 2px,
      rgba(0, 0, 0, 0) 2px 6px
    ),
    linear-gradient(180deg, rgba(2, 8, 16, 0.86), rgba(0, 0, 0, 0.92));
  animation: gh-route-enter-overlay 340ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/*
 * Tylko route z GhoostyContactChrome: main ma id="main-content".
 * main.js: .reveal / .reveal-fade czekają na IO, .process-grid > * — na .grid-in.
 * Przy długim zrzucie (RG) puste „okno” w środku = brak .visible / .grid-in w jednej kadrze.
 * Wymuszamy końcowy stan widoczności jak po scrollu na ghoosty.pl.
 */
main#main-content .reveal,
main#main-content .reveal-fade {
  opacity: 1;
  transform: none;
}

main#main-content .process-grid > * {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

/*
 * Fix: część nagłówków sekcyjnych na home potrafiła łamać się znak-po-znaku
 * i "wychodzić" nad kontener. Wymuszamy standardowy poziomy flow tekstu.
 */
main#main-content .section-tag,
main#main-content .section-title,
main#main-content .section-title .gradient,
main#main-content .section-title span {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}

main#main-content .section-title {
  display: block;
  line-height: 1.12;
}

@media (max-width: 768px) {
  main#main-content .container {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  main#main-content .section-header {
    display: block;
  }

  main#main-content .section-header > * {
    max-width: 100%;
  }

  main#main-content .section-tag,
  main#main-content .section-title,
  main#main-content .section-desc {
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  main#main-content .section-title {
    font-size: clamp(1.75rem, 7.2vw, 2.5rem);
  }
}

/*
 * Glitch page transition.
 */
#page-transition-quantum {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  overflow: hidden;
}

#page-transition-quantum .glitch-base,
#page-transition-quantum .glitch-flash,
#page-transition-quantum .glitch-line,
#page-transition-quantum .glitch-slices,
#page-transition-quantum .glitch-slice {
  position: absolute;
  inset: 0;
}

#page-transition-quantum .glitch-base {
  background:
    linear-gradient(180deg, rgba(2, 8, 16, 0.96), rgba(0, 0, 0, 0.97)),
    radial-gradient(circle at 48% 52%, rgba(0, 212, 255, 0.16), rgba(129, 93, 255, 0.12) 42%, rgba(0, 0, 0, 0) 70%);
  opacity: 0;
}

#page-transition-quantum .glitch-flash {
  background: repeating-linear-gradient(
    0deg,
    rgba(129, 245, 255, 0.2) 0 2px,
    rgba(0, 0, 0, 0) 2px 6px
  );
  mix-blend-mode: screen;
  opacity: 0;
}

#page-transition-quantum .glitch-line {
  border-top: 1px solid rgba(160, 248, 255, 0.5);
  transform: translateY(-120%);
  opacity: 0;
}

#page-transition-quantum .glitch-line-a {
  top: 26%;
}

#page-transition-quantum .glitch-line-b {
  top: 52%;
}

#page-transition-quantum .glitch-line-c {
  top: 74%;
}

#page-transition-quantum .glitch-slice {
  inset: auto 0 auto 0;
  top: var(--y, 0%);
  height: var(--h, 10%);
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.95),
    rgba(90, 238, 255, 0.22),
    rgba(168, 122, 255, 0.2),
    rgba(0, 0, 0, 0.95)
  );
  transform: translateX(0);
  opacity: 0;
}

#page-transition-quantum.glitch-in {
  opacity: 1;
}

#page-transition-quantum.glitch-in .glitch-base {
  animation: glitch-base-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#page-transition-quantum.glitch-in .glitch-flash {
  animation: glitch-flash-in 380ms ease-out both;
}

#page-transition-quantum.glitch-in .glitch-line-a {
  animation: glitch-line-scan 420ms linear 30ms both;
}

#page-transition-quantum.glitch-in .glitch-line-b {
  animation: glitch-line-scan 460ms linear 60ms both;
}

#page-transition-quantum.glitch-in .glitch-line-c {
  animation: glitch-line-scan 480ms linear 90ms both;
}

#page-transition-quantum.glitch-in .glitch-slice {
  animation: glitch-slice-jump var(--dur, 240ms) cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay, 0ms) both;
}

#page-transition-quantum.glitch-out {
  opacity: 0;
  transition: opacity 140ms ease;
}

@keyframes glitch-base-in {
  0% { opacity: 0; }
  12% { opacity: 0.92; }
  18% { opacity: 0.45; }
  26% { opacity: 0.88; transform: translateX(-7px); }
  40% { opacity: 0.76; transform: translateX(6px); }
  100% { opacity: 0.96; transform: translateX(0); }
}

@keyframes glitch-flash-in {
  0% { opacity: 0; }
  20% { opacity: 0.9; }
  35% { opacity: 0.22; }
  48% { opacity: 0.75; }
  100% { opacity: 0.12; }
}

@keyframes glitch-line-scan {
  0% { opacity: 0; transform: translateY(-120%); }
  20% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(210%); }
}

@keyframes glitch-slice-jump {
  0% { opacity: 0; transform: translateX(0); }
  25% { opacity: 0.92; transform: translateX(var(--dx, 0px)); }
  52% { opacity: 0.44; transform: translateX(calc(var(--dx, 0px) * -0.6)); }
  100% { opacity: 0; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  #page-transition-quantum,
  #page-transition-quantum * {
    animation: none !important;
    transition: none !important;
  }
  #page-transition-quantum.glitch-in {
    opacity: 0.62;
  }
  html[data-route-enter='glitch'] body {
    animation: none !important;
  }
  html[data-route-enter='glitch'] body::before {
    animation: none !important;
    opacity: 0 !important;
  }
}

@keyframes gh-route-enter-overlay {
  0% {
    opacity: 0.82;
  }
  35% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
  }
}

@keyframes gh-route-enter-body {
  0% {
    opacity: 0.8;
    filter: saturate(0.9) contrast(1.04);
  }
  100% {
    opacity: 1;
    filter: saturate(1) contrast(1);
  }
}