/* Valmoria Wars – zaślepka „Wkrótce” */

@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonty/alegreya-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonty/alegreya-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonty/alegreya-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonty/alegreya-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --noc: #1a0f2e;
  --noc-2: #2b1846;
  --noc-3: #120a20;
  --zloto: #f3c35a;
  --zloto-2: #e0a133;
  --pergamin: #f3e6d6;
  --braz: #3b2208;
  --cyjan: #5fd8ff;
  --px: 0;
  --py: 0;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--noc);
  background-image: radial-gradient(120% 80% at 50% 40%, var(--noc-2) 0%, var(--noc) 55%, var(--noc-3) 100%);
  color: var(--pergamin);
  font-family: "Alegreya", Georgia, "Times New Roman", serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

img { display: block; max-width: 100%; height: auto; }

/* ---------- Tło: plakat, mgła, zasłona ---------- */
.tlo {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--noc);
}
.tlo__warstwa {
  position: absolute;
  inset: -3%;
  background: var(--noc) url("wideo/mgla-1280.webp") center 40% / cover no-repeat;
  transform: translate3d(calc(var(--px) * -14px), calc(var(--py) * -10px), 0) scale(1.02);
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
@media (orientation: portrait) {
  .tlo__warstwa { background-image: url("wideo/mgla-720.webp"); background-position: center top; }
}
.tlo__wideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0;
  transition: opacity 1.8s ease;
}
@media (orientation: portrait) {
  .tlo__wideo { object-position: center top; }
}
.tlo__wideo.gra { opacity: 1; }

.tlo__zaslona {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 38%, rgba(43, 24, 70, .05) 0%, rgba(26, 15, 46, .45) 60%, rgba(18, 10, 32, .9) 100%),
    linear-gradient(180deg, rgba(18, 10, 32, .55) 0%, rgba(26, 15, 46, .1) 28%, rgba(26, 15, 46, .25) 60%, rgba(18, 10, 32, .92) 100%);
}

.iskry {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ---------- Narożniki z kryształem (komputer) ---------- */
.narozniki { display: none; }
@media (min-width: 900px) and (min-height: 560px) {
  .narozniki {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }
  .naroznik {
    position: absolute;
    width: clamp(70px, 6.5vw, 108px);
    opacity: 0;
    filter: drop-shadow(0 0 14px rgba(196, 120, 255, .35));
    animation: naroznik 1.4s 1.2s ease forwards;
  }
  .naroznik--pg { top: 22px; right: 22px; }
  .naroznik--lg { top: 22px; left: 22px; transform: scaleX(-1); }
  .naroznik--pd { bottom: 22px; right: 22px; transform: scaleY(-1); }
  .naroznik--ld { bottom: 22px; left: 22px; transform: scale(-1, -1); }
}
@keyframes naroznik { to { opacity: .85; } }

/* ---------- Scena ---------- */
.scena {
  position: relative;
  z-index: 3;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: max(48px, env(safe-area-inset-top)) 16px 24px;
  gap: clamp(10px, 1.6vh, 18px);
}

.logo {
  position: relative;
  margin: 0;
  /* logo mieści się razem z tekstem na jednym ekranie (proporcje logo 1.785) */
  width: min(1030px, 92vw, max(300px, calc((100vh - 455px) * 1.785)));
  width: min(1030px, 92vw, max(300px, calc((100svh - 455px) * 1.785)));
  transform: translate3d(calc(var(--px) * 12px), calc(var(--py) * 8px), 0);
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.logo__obraz {
  position: relative;
  width: 100%;
  animation:
    wejscie-logo 1.6s cubic-bezier(.16, .84, .3, 1) both,
    unoszenie 7s 1.6s ease-in-out infinite;
  filter: drop-shadow(0 18px 40px rgba(10, 4, 22, .65));
}
.logo__poswiata {
  position: absolute;
  inset: 8% 10% 4%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 72% 22%, rgba(190, 110, 255, .55), transparent 75%),
    radial-gradient(closest-side at 50% 58%, rgba(243, 195, 90, .32), transparent 80%),
    radial-gradient(closest-side at 30% 60%, rgba(95, 216, 255, .18), transparent 80%);
  filter: blur(28px);
  opacity: 0;
  animation: poswiata 5.5s 1.2s ease-in-out infinite alternate;
}

@keyframes wejscie-logo {
  from { opacity: 0; transform: scale(.9) translateY(14px); filter: blur(10px) drop-shadow(0 18px 40px rgba(10, 4, 22, .65)); }
  to   { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 18px 40px rgba(10, 4, 22, .65)); }
}
@keyframes unoszenie {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes poswiata {
  from { opacity: .55; transform: scale(.96); }
  to   { opacity: 1;   transform: scale(1.05); }
}

.separator {
  width: min(460px, 74vw);
  margin-top: clamp(-18px, -1.5vw, -6px);
  animation: wejscie-separator 1.4s .7s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes wejscie-separator {
  from { opacity: 0; clip-path: inset(0 50% 0 50%); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

.opis {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.15rem, .9rem + 1.05vw, 1.7rem);
  line-height: 1.35;
  color: var(--pergamin);
  text-shadow: 0 2px 14px rgba(10, 4, 22, .9), 0 0 2px rgba(10, 4, 22, .8);
  text-wrap: balance;
  animation: wejscie 1.1s 1s cubic-bezier(.2, .8, .2, 1) both;
}

/* Złota wstęga „Wkrótce” z przebiegającym blaskiem */
.wstega {
  position: relative;
  margin: clamp(6px, 1.4vh, 16px) 0 0;
  width: min(460px, 84vw);
  aspect-ratio: 900 / 155;
  display: grid;
  place-items: center;
  background: url("img/ribbon.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 22px rgba(10, 4, 22, .7));
  animation: wejscie 1.1s 1.25s cubic-bezier(.2, .8, .2, 1) both;
}
.wstega span {
  position: relative;
  z-index: 1;
  margin-top: -2.5%;
  font-weight: 800;
  font-size: clamp(1.15rem, .85rem + 1.2vw, 1.75rem);
  letter-spacing: .2em;
  padding-left: .2em;
  text-transform: uppercase;
  color: var(--braz);
  text-shadow: 0 1px 0 rgba(255, 236, 190, .55);
}
.wstega::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 248, 225, .75) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  background-position: 160% 0;
  -webkit-mask: url("img/ribbon.webp") center / 100% 100% no-repeat;
          mask: url("img/ribbon.webp") center / 100% 100% no-repeat;
  mix-blend-mode: soft-light;
  animation: blask 5s 2.6s ease-in-out infinite;
}
@keyframes blask {
  0%       { background-position: 160% 0; }
  45%, 100% { background-position: -60% 0; }
}

@keyframes wejscie {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Stopka ---------- */
.stopka {
  position: relative;
  z-index: 3;
  padding: 18px 16px max(20px, env(safe-area-inset-bottom));
  text-align: center;
  font-size: .9rem;
  letter-spacing: .06em;
  color: rgba(243, 230, 214, .55);
  animation: pojawienie 1s 1.6s ease both;
}
@keyframes pojawienie { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Telefon ---------- */
@media (max-width: 600px) {
  .scena { padding-top: max(36px, env(safe-area-inset-top)); justify-content: center; }
  .opis { max-width: 26ch; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .scena { padding-top: 20px; }
}

/* ---------- Ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .logo__poswiata { opacity: .8; }
  .naroznik { opacity: .85 !important; }
  .tlo__warstwa, .logo { transform: none !important; }
}