/* =========================================================================
   Orang3 — Főoldal (látványterv: latvanytervek/indulas.png)
   Minden érték a látványterv pixelre kimért adataiból (1920×1080, 1rem = 16px).
   ========================================================================= */

.landing__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8.6875rem;                  /* 139 px a felirat és a gomb között */
  transform: translateY(6.03rem);  /* a terven a kompozíció a középvonal alatt ül */
}

/* --- „Indulás" gomb ---------------------------------------------------- */
.start {
  width: 27.375rem;                /* 438 px */
  height: 10.6875rem;              /* 171 px */
  border-radius: var(--r-pill);    /*  64 px */
  display: grid;
  place-items: center;
  font-size: var(--fs-start);      /*  76 px */
  line-height: 1;
  color: var(--ink);
  transition: filter 220ms var(--ease-out), transform var(--t-tick) var(--ease-out);
}

.start::before { transition: background 220ms var(--ease-out); }

/* A gomb a fény felé fordul, de NEM mozdul: se emelkedés, se árnyék.
   Egy gomb, ami hoverre megnő, játékgomb – ez nem az. */
.start:hover,
.start:focus-visible { filter: brightness(1.22); }

.start:hover::before,
.start:focus-visible::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.20) 46%,
    rgba(255, 255, 255, 0.30) 100%
  );
}

.start:active {
  transform: scale(0.988);
  transition-duration: var(--t-tick);
}

.start[aria-disabled='true'] { pointer-events: none; }

/* --- Belépés: egyszer, aztán teljes mozdulatlanság --------------------- *
   1. szabály: semmi nem ciklizik. Ez a képernyő a belépés után halott csendes. */
.landing.is-entering .brand__fruit   { animation: rise 620ms var(--ease-out)   0ms both; }
.landing.is-entering .brand__name    { animation: rise 520ms var(--ease-out) 140ms both; }
.landing.is-entering .brand__tagline { animation: rise 440ms var(--ease-out) 260ms both; }
.landing.is-entering .start::before  { animation: appear 300ms var(--ease-out) 420ms both; }
.landing.is-entering .start::after   { animation: appear 400ms var(--ease-out) 480ms both; }
.landing.is-entering .start__label   { animation: appear 360ms var(--ease-out) 560ms both; }
.landing.is-entering .fuleki         { animation: appear 500ms var(--ease-out) 900ms both; }

/* --- Kilépés (a feladat felé) ------------------------------------------ *
   A képernyő egészének kilépését a layout.css adja. Itt csak annyi a dolgunk,
   hogy a márkajel ne duplázódjon: az nem eltűnik, hanem ÁTÚSZIK a fejlécbe
   (a HUD-ban lévő példány veszi át, lásd core/motion.js flip()). */
.landing.is-leaving .brand__mark { opacity: 0; }

/* =========================================================================
   Kisebb képernyők
   ========================================================================= */

@media (max-height: 780px), (max-width: 900px) {
  .landing__inner {
    gap: 5.5rem;
    transform: none;
  }
}

@media (max-width: 700px) {
  .landing .brand { --brand-scale: 0.82; }
  .landing__inner { gap: 4.25rem; }
  .start {
    width: min(21rem, 84vw);
    height: 8rem;
    font-size: 3.6rem;
    border-radius: 3rem;
  }
}

/* =========================================================================
   A névbekérő

   Ugyanaz az üveg, mint a magyarázóké, és ugyanaz a gomb – a gyerek ezen a
   panelen tanulja meg, hogy így néz ki egy „ablak" ebben a játékban.

   Ez az EGYETLEN beviteli mező az egész termékben, és csak a főoldalon
   létezik. A `core/keys.js` szándékosan kiengedi a szűrőn a beviteli
   mezőkön álló eseményeket, tehát itt a gépelés normálisan működik, a
   feladatokban viszont soha nem lehet „elveszíteni a fókuszt".
   ========================================================================= */

.askname {
  padding: 0;
  border: 0;
  margin: auto;
  max-width: none;
  max-height: none;
  background: none;
  color: inherit;
  overflow: visible;
}

.askname::backdrop {
  background: rgba(8, 8, 9, .42);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
          backdrop-filter: blur(18px) saturate(120%);
  animation: appear 260ms var(--ease-out) both;
}

.askname__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  padding: 2.6rem 2.8rem 2rem;
  width: min(94vw, 38rem);
}

.askname__title {
  font-size: 2.4rem;
  line-height: 1.05;
  text-align: center;
}

.askname__sub {
  font-size: 1.3125rem;
  line-height: 1.4;
  color: var(--ink-2);
  text-align: center;
  max-width: 26rem;
}

/* A mező a termék felülete, nem a böngészőé: ugyanaz a hajszálkeret, mint
   mindenhol. Az `appearance: none` nélkül a Safari a saját dobozát rajzolja. */
.askname__input {
  -webkit-appearance: none;
          appearance: none;
  margin-top: .5rem;
  width: 100%;
  height: 4.25rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 1.125rem;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  font-family: inherit;
  font-size: 2rem;
  line-height: 1;
  color: var(--ink);
  text-align: center;
  user-select: text;                 /* a body globálisan tiltja */
  transition: box-shadow var(--t-fast) linear, background var(--t-fast) linear;
}

.askname__input::placeholder { color: var(--ink-4); }

.askname__input:focus {
  outline: none;                     /* a keret maga a fókuszjel */
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .48);
}

/* Üres névnél. NEM piros és nem rázkódik (8. szabály): egy halk mondat,
   ami elmegy, amint a gyerek gépelni kezd. */
.askname__warn {
  min-height: 1.4rem;
  font-size: var(--fs-hint);
  line-height: 1.4;
  color: var(--ink-3);
  text-align: center;
}

.askname__time {
  margin-top: .35rem;
  font-size: var(--fs-hint);
  color: var(--ink-3);
  text-align: center;
}

.askname__time:empty { display: none; }

@media (max-height: 620px), (max-width: 700px) {
  .askname__panel { padding: 1.8rem 1.8rem 1.4rem; gap: .6rem; }
  .askname__title { font-size: 1.9rem; }
  .askname__sub   { font-size: 1.0625rem; }
  .askname__input { height: 3.4rem; font-size: 1.6rem; }
}