/* =========================================================
   MatWeb — strona główna: napis-hero + 4 równorzędne wejścia
   ========================================================= */

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--pad);
  padding-top: max(var(--pad), env(safe-area-inset-top));
  padding-bottom: max(var(--pad), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page > .topbar {
  position: absolute;
  top: max(var(--pad), env(safe-area-inset-top));
  left: var(--pad);
  right: var(--pad);
  animation: up 800ms var(--ease-out) 900ms both;
}

/* Hero: napis + 4 opcje, wyśrodkowane na stronie */
.hero {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 8vh, 88px) 0;
}

.hero__inner {
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(22px, 3.4vw, 44px);
}

/* ---------- Napis ---------- */
.mark {
  position: relative;
  max-width: 100%;
  animation: mark-in 1300ms var(--ease-quint) 150ms both;
}

.word {
  display: block;
  font-weight: 700;
  font-size: clamp(60px, 17vw, 340px);
  line-height: .82;
  letter-spacing: -.012em;
  padding: .04em .02em .06em 0;
  white-space: nowrap;
  user-select: none;
}

/* Bazowe litery — widać je tylko w ułamku sekundy podczas zmiany */
.word--base { color: #EDEEF0; }

/* Warstwy produktu: tło przycięte do kształtu liter */
.word--layer,
.word--sheen {
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.word--layer {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 900ms var(--ease-quint);
}
.word--layer.is-before { clip-path: inset(0 0 0 100%); }
.word--layer.is-active { clip-path: inset(0 0 0 0); }
.word--layer.no-anim { transition: none; }

/* LeadList — zieleń, linie listy płynące w dół */
.word--ll {
  background-image:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #34D08E 0%, #22AE72 60%, #1A955F 100%);
  background-size: 100% 22px, 100% 100%;
  animation: list-scroll 3.5s linear infinite;
}

/* WebiGames — fiolet, kropki w powolnym dryfie */
.word--wg {
  background-image:
    radial-gradient(rgba(255, 255, 255, .22) 1.8px, transparent 2.2px),
    linear-gradient(180deg, #9473FF 0%, #7647F5 60%, #6436E0 100%);
  background-size: 22px 22px, 100% 100%;
  animation: dots-drift 6s linear infinite;
}

/* CVix — pomarańcz, kratka jak na kartce */
.word--cv {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 1.5px, transparent 1.5px 26px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .14) 0 1.5px, transparent 1.5px 26px),
    linear-gradient(180deg, #FFA06A 0%, #F5843F 60%, #E2702E 100%);
  background-size: 26px 26px, 26px 26px, 100% 100%;
  animation: grid-rise 5s linear infinite;
}

/* Matura — niebieski, ukośne pasy */
.word--mt {
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .13) 0 10px, transparent 10px 24px),
    linear-gradient(180deg, #6B8EFF 0%, #3E68FF 60%, #2A55F0 100%);
  background-size: 34px 34px, 100% 100%;
  animation: stripes-move 4s linear infinite;
}

/* Odblask przejeżdżający po literach przy zmianie produktu */
.word--sheen {
  pointer-events: none;
  background-image: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255, 255, 255, .7) 50%, transparent 60%, transparent 100%);
  background-size: 260% 100%;
  background-position: 120% 0;
  opacity: 0;
}
.word--sheen.is-run { animation: sheen 1300ms var(--ease-out) both; }

/* ---------- Wejścia ---------- */
.segments {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 32px);
  animation: up 900ms var(--ease-out) 1250ms both;
}

.seg {
  flex: 1 1 140px;
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--fg);
  opacity: .45;
  transition: opacity 400ms ease;
  -webkit-tap-highlight-color: transparent;
}
.seg.is-active,
.seg:hover { opacity: 1; }
.seg:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 6px;
  border-radius: 2px;
}

.seg__track {
  display: block;
  height: 2px;
  background: rgba(237, 238, 240, .18);
  overflow: hidden;
}
.seg__fill {
  display: block;
  height: 100%;
  background: var(--seg, #FFFFFF);
  transform: scaleX(0);
  transform-origin: left center;
}
.seg__meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(237, 238, 240, .7);
}
.seg__name {
  display: flex;
  align-items: center;
  gap: .3em;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1;
  letter-spacing: -.03em;
}
.seg__arrow {
  width: .62em;
  height: .62em;
  flex: none;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 300ms ease, transform 400ms var(--ease-out);
}
.seg.is-active .seg__arrow,
.seg:hover .seg__arrow,
.seg:focus-visible .seg__arrow {
  opacity: 1;
  transform: none;
}

/* Telefon: 2 × 2 pod napisem */
@media (max-width: 560px) {
  .word { font-size: 22.5vw; }
  .segments { gap: 22px 18px; }
  .seg { flex: 1 1 calc(50% - 9px); }
  .seg__name { font-size: 22px; }
}

/* ---------- Animacje ---------- */
@keyframes mark-in {
  from { clip-path: inset(100% 0 0 0); transform: translateY(8%); }
  to   { clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes list-scroll  { from { background-position: 0 0, 0 0; } to { background-position: 0 22px, 0 0; } }
@keyframes dots-drift   { from { background-position: 0 0, 0 0; } to { background-position: 22px 22px, 0 0; } }
@keyframes grid-rise    { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 -26px, 0 -26px, 0 0; } }
@keyframes stripes-move { from { background-position: 0 0, 0 0; } to { background-position: 34px 0, 0 0; } }
@keyframes sheen {
  0%   { opacity: 0; background-position: 120% 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; background-position: -20% 0; }
}