/* A „Hamarosan” lap (döntés 090). A színek a SOTET_PALETTA-éi (kozos/src/profil.ts:
   alap, hos-szoveg, halvany, akcent), a gőz és a kalap a weboldal zárásáé (3-filmszeru). */

/* A Caveat magyar készlete (OFL, betuk/OFL-caveat.txt); az ő és az ű külön, apró fájlban. */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/betuk/caveat-hu-700.woff2) format('woff2');
  unicode-range:
    U+20-7E, U+A0, U+A9, U+AD, U+B0, U+B7, U+BC-BE, U+C1, U+C9, U+CD, U+D3, U+D6, U+D7, U+DA, U+DC,
    U+E1, U+E9, U+ED, U+F3, U+F6, U+FA, U+FC, U+2013-2014, U+2019, U+201C-201E, U+2022, U+2026,
    U+20AC, U+2212;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/betuk/caveat-hu-kieg-700.woff2) format('woff2');
  unicode-range: U+150-151, U+170-171;
}

:root {
  color-scheme: dark;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: #0b1022;
  color: #ffffff;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
}
main {
  text-align: center;
  padding: 96px 16px 0;
}

/* A kalap, fölötte a gőz: a zárás arányai, egy kicsit nagyobban. */
.kalap {
  position: relative;
  display: block;
  width: 132px;
  margin: 0 auto 18px;
}
.kalap img {
  display: block;
  width: 100%;
  height: auto;
}
.goz {
  position: absolute;
  left: 50%;
  top: -93px;
  width: 88px;
  aspect-ratio: 70 / 90;
  translate: -50% 0;
}
.goz svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  animation: goz 2.7s ease-out infinite;
}
.goz .g2 {
  animation-delay: 0.6s;
}
.goz .g3 {
  animation-delay: 1.2s;
}
.goz path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 4;
  stroke-linecap: round;
}
@keyframes goz {
  0% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(10px);
  }
  25% {
    opacity: 0.85;
  }
  70% {
    opacity: 0.45;
  }
  100% {
    opacity: 0;
    clip-path: inset(0 0 0 0);
    transform: translateY(-18px);
  }
}

h1 {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(56px, 16vw, 104px);
  line-height: 1;
  margin: 0;
  letter-spacing: 0.01em;
}
.vonal {
  width: 72px;
  height: 3px;
  border-radius: 3px;
  background: #e6002e;
  margin: 22px auto 18px;
}
p {
  margin: 0;
  color: #b4bad6;
  font-size: 13px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  padding-left: 0.42em;
}

/* Kevesebb mozgás: a gőz áll, de látszik. */
@media (prefers-reduced-motion: reduce) {
  .goz svg {
    animation: none;
    opacity: 0.55;
    clip-path: none;
  }
}