/* hexart.io: strona przejścia do hexart.pl.
   Własne style poza warstwami hx.*, więc wygrywają z hexart.css bez !important.
   Kolory, odstępy, czasy i krzywe pochodzą z tokenów --hx-* (brandbook 1.1).

   Układ pionowy (telefon, tablet pionowo): znak u góry na Onyksie, pod nim pas filmu wtopiony
   w tło, niżej tekst. Układ poziomy (od 768 px w poziomie): film na całym kadrze, znak i tekst
   w spokojnej, ciemnej lewej części kadru, znaczniki wizjera w narożnikach. Złoty znak zawsze
   stoi na Onyksie, nigdy na obrazie (logo.md). */

:root {
  --pad: clamp(var(--hx-space-6), 1rem + 3vw, var(--hx-space-24)); /* margines treści: 24 do 96 px */
  /* Boki z wcięciem ekranu (iPhone poziomo, viewport-fit=cover): treść nigdy pod wyspą. */
  --pad-left: max(var(--pad), env(safe-area-inset-left, 0px));
  --pad-right: max(var(--pad), env(safe-area-inset-right, 0px));
  --frame: clamp(var(--hx-space-3), 0.5rem + 1vw, var(--hx-space-6)); /* znaczniki wizjera od krawędzi */
  --mark-w: clamp(11.25rem, 6rem + 14vw, 20rem); /* logo poziome 180 do 320 px (minimum marki 140 px) */
  --measure: calc(100vw - var(--pad-left) - var(--pad-right)); /* szerokość kolumny tekstu */
}

body {
  display: grid;
  grid-template-rows: auto auto;
}

/* Kadr ------------------------------------------------------------------------------------- */

.stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(clamp(8rem, 26svh, 26rem), 1fr) auto;
  min-height: 100svh;
  overflow: clip;
}

/* Znak: poziome logo z pliku, złote na Onyksie. Pole ochronne x = 1/4 wysokości znaku. */
.mark {
  grid-area: 1 / 1;
  z-index: 1;
  justify-self: start;
  width: var(--mark-w);
  height: auto;
  margin: max(var(--pad), env(safe-area-inset-top, 0px)) var(--pad-right) var(--hx-space-4) var(--pad-left);
  overflow: visible;
  color: var(--hx-gold);
  fill: currentColor;
}

.intro {
  grid-area: 3 / 1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hx-space-6);
  padding: var(--hx-space-6) var(--pad-right) var(--pad) var(--pad-left);
}

/* Esencja marki w Outfit 200, druga linia złota (jak na planszy esencji w brandbooku).
   Stopień liczony od szerokości kolumny: „Inżynieryjna precyzja.” mieści się w jednej linii. */
.intro__title {
  font-size: min(3.5rem, calc(var(--measure) / 10.8));
  font-weight: var(--hx-weight-extralight);
  line-height: var(--hx-leading-h2);
  letter-spacing: var(--hx-tracking-h1);
}
.intro__line {
  display: block;
}
.intro__line--art {
  color: var(--hx-accent-text);
}

.intro__lead {
  max-width: 34rem;
}

/* Przycisk i odliczanie mają wspólną szerokość: linia czasu biegnie pod przyciskiem.
   W kodzie strony odliczanie stoi przed nagłówkiem, żeby czytnik ekranu dotarł do „Zatrzymaj”
   w pierwszych sekundach. Na ekranie order stawia je pod przyciskiem. */
.intro__cta,
.redirect {
  align-self: stretch;
  max-width: 28rem; /* na tablecie pionowo przycisk nie rozlewa złota na całą szerokość */
}
.intro__cta {
  order: 1;
  margin-top: var(--hx-space-2);
}

.redirect {
  order: 2;
  margin-top: calc(var(--hx-space-6) * -1); /* odstęp od przycisku daje sama linia czasu */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--hx-space-4);
  visibility: hidden;
}
.redirect.is-live {
  visibility: visible;
}
.redirect__track {
  grid-column: 1 / -1;
  height: var(--hx-border-hairline);
  margin-block: var(--hx-space-3) var(--hx-space-1);
  background-color: var(--hx-line);
}
.redirect__line {
  display: block;
  height: 100%;
  background-color: var(--hx-accent);
  clip-path: inset(0 100% 0 0);
}
.redirect__status {
  font-size: var(--hx-text-small);
  line-height: var(--hx-leading-small);
  color: var(--hx-fg-muted);
  font-variant-numeric: tabular-nums;
}
.redirect__stop {
  justify-self: end;
  margin-right: calc(var(--hx-btn-px) * -1); /* tekst kończy się równo z linią */
}
.redirect.is-stopped .redirect__track,
.redirect.is-stopped .redirect__stop {
  visibility: hidden;
}
/* Bez JS i przy ograniczonym ruchu nie ma odliczania: zostaje sam przycisk. */
html:not(.js) .redirect {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .redirect {
    display: none;
  }
}

/* Film ------------------------------------------------------------------------------------- */

.film {
  grid-area: 2 / 1 / 3 / 2;
  z-index: 0;
  overflow: hidden;
}
/* Obraz i ziarno wchodzą przez 1200 ms, oznaczenie AI od razu w pełni: widoczne od pierwszej
   klatki. Kontener filmu zostaje widoczny (sama przezroczystość), bo WebKit nie odtwarza
   ukrytego wideo; do startu etykietę ukrywa visibility, także przed czytnikiem ekranu. */
.film__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% 50%;
  opacity: 0;
  transition: opacity var(--hx-duration-cinematic) var(--hx-ease-standard);
}
.film.is-on .film__media {
  opacity: 1;
}
.film::after {
  transition: opacity var(--hx-duration-cinematic) var(--hx-ease-standard);
}
.film:not(.is-on)::after {
  opacity: 0;
}
.film:not(.is-on) .film__label {
  visibility: hidden;
}
/* Pas filmu wychodzi z Onyksu pod znakiem i w niego wraca nad tekstem: bez twardych krawędzi. */
.film::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--hx-bg) 0%, color-mix(in srgb, var(--hx-bg) 55%, transparent) 14%, transparent 34%),
    linear-gradient(0deg, var(--hx-bg) 0%, color-mix(in srgb, var(--hx-bg) 60%, transparent) 20%, transparent 46%);
}
/* Oznaczenie AI widoczne razem z pierwszą klatką, w lewym dolnym rogu kadru (forma-obraz.md, v1.1).
   W układzie poziomym ten róg zajmuje tekst, więc etykieta idzie w prawy górny, po przekątnej. */
.film__label {
  position: absolute;
  z-index: 3;
  left: var(--pad-left);
  bottom: var(--hx-space-4);
}

.frame {
  display: none;
}

/* Stopka rejestrowa (KSH art. 206) ---------------------------------------------------------- */

.legal {
  padding: var(--hx-space-4) var(--pad-right) calc(var(--hx-space-4) + env(safe-area-inset-bottom, 0px)) var(--pad-left);
  background-color: var(--hx-bg-deep);
  border-top: var(--hx-border-hairline) solid var(--hx-line);
}
.legal__text {
  font-size: var(--hx-text-label);
  line-height: var(--hx-leading-small);
  color: var(--hx-fg-subtle);
}

/* Układ poziomy ------------------------------------------------------------------------------ */

@media (min-width: 48rem) and (orientation: landscape) {
  :root {
    --measure: clamp(22rem, 36vw, 38rem);
  }

  body {
    grid-template-rows: 1fr auto;
  }

  /* Treść odrobinę nad środkiem: środek optyczny. */
  .stage {
    grid-template-rows: minmax(var(--pad), 0.9fr) auto auto minmax(var(--pad), 1.1fr);
    min-height: 0;
  }

  .mark {
    grid-area: 2 / 1;
    margin: 0 var(--pad-right) var(--hx-space-12) var(--pad-left);
  }

  .intro {
    grid-area: 3 / 1;
    width: calc(var(--measure) + var(--pad-left) + var(--pad-right));
    padding: 0 var(--pad-right) 0 var(--pad-left);
  }

  .intro__cta,
  .redirect {
    align-self: flex-start;
    width: 20rem;
  }

  .film {
    grid-area: 1 / 1 / -1 / -1;
  }
  .film__media {
    object-position: 70% 50%;
  }
  /* Lewa część kadru zostaje spokojna i ciemna pod tekstem, film żyje po prawej. */
  .film::before {
    background:
      linear-gradient(
        90deg,
        var(--hx-bg) 0%,
        color-mix(in srgb, var(--hx-bg) 94%, transparent) calc(var(--pad-left) + var(--measure)),
        transparent calc(var(--pad-left) + var(--measure) + 18vw)
      ),
      linear-gradient(0deg, color-mix(in srgb, var(--hx-bg) 80%, transparent) 0%, transparent 28%),
      linear-gradient(180deg, color-mix(in srgb, var(--hx-bg) 45%, transparent) 0%, transparent 24%);
  }
  .film__label {
    inset: var(--pad) var(--pad-right) auto auto;
  }

  /* Znaczniki narożne jak ramka wizjera kamery: złota linia włosowa 40%. */
  .frame {
    --arm: var(--hx-space-6);
    --ink: var(--hx-line-accent);
    display: block;
    grid-area: 1 / 1 / -1 / -1;
    z-index: 2;
    margin: var(--frame) max(var(--frame), env(safe-area-inset-right, 0px)) var(--frame)
      max(var(--frame), env(safe-area-inset-left, 0px));
    pointer-events: none;
    background:
      linear-gradient(var(--ink) 0 0) left top / var(--arm) var(--hx-border-hairline),
      linear-gradient(var(--ink) 0 0) left top / var(--hx-border-hairline) var(--arm),
      linear-gradient(var(--ink) 0 0) right top / var(--arm) var(--hx-border-hairline),
      linear-gradient(var(--ink) 0 0) right top / var(--hx-border-hairline) var(--arm),
      linear-gradient(var(--ink) 0 0) left bottom / var(--arm) var(--hx-border-hairline),
      linear-gradient(var(--ink) 0 0) left bottom / var(--hx-border-hairline) var(--arm),
      linear-gradient(var(--ink) 0 0) right bottom / var(--arm) var(--hx-border-hairline),
      linear-gradient(var(--ink) 0 0) right bottom / var(--hx-border-hairline) var(--arm);
    background-repeat: no-repeat;
  }
}

/* Animacja znaku (brandbook 03.12, logo.md pkt 15) -------------------------------------------
   Linia heksagonu, potem ściany: górna, lewa, prawa. Logotyp wchodzi na końcu, refleks przechodzi
   raz. Całość 3,1 s. Klasę is-intro dodaje js/boot.js tylko bez ograniczenia ruchu. */

.mark path,
.mark use {
  shape-rendering: geometricPrecision;
}
.mark__hex {
  fill: none;
  stroke: var(--hx-gold-light);
  stroke-width: 12;
  opacity: 0;
}
.mark__face {
  opacity: 0;
}
.mark__glint-edge {
  stop-color: var(--hx-gold-light);
  stop-opacity: 0;
}
.mark__glint-core {
  stop-color: var(--hx-white);
  stop-opacity: 0.85;
}

@media (prefers-reduced-motion: no-preference) {
  .is-intro .mark__hex {
    animation:
      mk-hex-draw var(--hx-duration-slow) var(--hx-ease-standard) both,
      mk-hex-out var(--hx-duration-slow) var(--hx-ease-standard) 1.3s forwards;
  }
  .is-intro .mark__face {
    animation:
      mk-face var(--hx-duration-cinematic) var(--hx-ease-enter) both,
      mk-off 1ms linear 1.88s forwards;
  }
  .is-intro .mark__face--top {
    --from: translate(0, -64px);
    animation-delay: 0.2s, 1.88s;
  }
  .is-intro .mark__face--left {
    --from: translate(-56px, 32px);
    animation-delay: 0.44s, 1.88s;
  }
  .is-intro .mark__face--right {
    --from: translate(56px, 32px);
    animation-delay: 0.68s, 1.88s;
  }
  .is-intro .mark__full {
    animation: mk-on 1ms linear 1.88s both;
  }
  .is-intro .mark__type {
    animation: mk-type var(--hx-duration-slow) var(--hx-ease-enter) 1.3s both;
  }
  .is-intro .mark__band {
    animation: mk-glint var(--hx-duration-cinematic) var(--hx-ease-standard) 1.9s both;
  }
}

@keyframes mk-hex-draw {
  from {
    opacity: 1;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
  }
  to {
    opacity: 1;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
  }
}
@keyframes mk-hex-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mk-face {
  from {
    opacity: 0;
    transform: var(--from);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mk-off {
  from,
  to {
    opacity: 0;
  }
}
@keyframes mk-on {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mk-type {
  from {
    opacity: 0;
    transform: translate(-48px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mk-glint {
  from {
    transform: translate(0);
  }
  to {
    transform: translate(1900px);
  }
}

/* Tryb wysokiego kontrastu: linia czasu w kolorach systemu. */
@media (forced-colors: active) {
  .redirect__track {
    forced-color-adjust: none;
    background-color: GrayText;
  }
  .redirect__line {
    forced-color-adjust: none;
    background-color: Highlight;
  }
}