/* ============================================================
   Wezone — dominós intro stílusai
   A styles.css UTÁN töltődik, ezért felülírja a régi noir intro
   szabályait. A .intro-skip stílusát szándékosan örököljük.
   ============================================================ */

.intro {
  position: fixed; inset: 0; z-index: 100;
  background: #080b12;
  overflow: hidden;
}

.di-canvas { position: absolute; inset: 0; display: block; }

/* enyhe elsötétülés a széleken, hogy a tűz a közepén erősebb legyen */
.di-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at 50% 44%,
    rgba(0,0,0,0) 38%, rgba(0,0,0,0.45) 78%, rgba(0,0,0,0.75) 100%);
}

/* ============================================================
   A felirat: a lángoló W a .di-w-slot helyére úszik be,
   a többi betű tűzcseppként hullik mellé.
   ============================================================ */
.di-word {
  position: absolute; z-index: 3;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--font-display), "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 7.4vw, 100px);   /* a LaraCraft hosszabb szó */
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text, #ece9e2);
  user-select: none;
}

/* a lángoló W helye — a vászon ide igazítja a betűt */
.di-w-slot {
  display: inline-block;
  width: 0.5em; height: 0.86em;   /* az L keskenyebb, mint a W volt */
  vertical-align: baseline;
}

.di-l {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}
.di-l > b { font-weight: inherit; opacity: 0; display: inline-block; }
.di-l.amber > b { color: var(--amber, #f2a93b); }

/* a tűzcsepp: fehéren izzó mag, narancs test, fölfelé elnyúló csóva.
   A hegye FÖLFELÉ néz, mert esés közben a láng hátramarad. */
.di-l > i.drop { display: none;   /* a cseppeket mostantól a vászon rajzolja, élethűbben */
  position: absolute;
  left: 50%; top: 0.1em;
  width: 0.24em; height: 0.30em;
  margin-left: -0.12em;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  transform: translateY(-320%) scale(0.9);
  background:
    radial-gradient(circle at 50% 68%, rgba(255,255,240,0.98), rgba(255,214,140,0.9) 38%, rgba(255,150,40,0) 76%),
    linear-gradient(180deg, rgba(255,168,60,0.85), rgba(226,92,18,0.95));
  box-shadow:
    0 0 0.22em rgba(255,196,110,0.95),
    0 0 0.7em  rgba(242,140,40,0.7),
    0 0 1.5em  rgba(226,104,22,0.4);
  opacity: 0;
}
/* a csóva: vékony izzó csík a csepp fölött */
.di-l > i.drop::before {
  content: ""; position: absolute;
  left: 50%; bottom: 70%;
  width: 0.05em; height: 0.56em;
  margin-left: -0.025em;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(255,170,60,0) 0%,
    rgba(255,186,96,0.45) 42%,
    rgba(255,226,170,0.95) 100%);
  box-shadow: 0 0 0.28em rgba(242,150,50,0.8);
}

/* lobogó külső láng a csepp körül — ettől lesz tűzgolyó, nem gyöngy.
   A transform az esés-animációé, ezért a lobogás a pszeudo-elemeken fut. */
.di-l > i.drop::after {
  content: ""; position: absolute;
  inset: -45% -60% -25% -60%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 62%,
    rgba(255,206,140,0.70), rgba(255,140,36,0.30) 48%, rgba(226,90,16,0) 72%);
  animation: diFlameLick 0.22s steps(3, end) infinite;
}
@keyframes diFlameLick {
  0%   { transform: scale(1)    translateY(0);     opacity: 0.95; }
  33%  { transform: scale(1.16) translateY(-6%);   opacity: 0.78; }
  66%  { transform: scale(0.94) translateY(2%);    opacity: 1;    }
  100% { transform: scale(1.09) translateY(-3%);   opacity: 0.85; }
}
/* a csóva is remegjen, különben merev pálcikának látszik */
.di-l > i.drop::before { animation: diTailWaver 0.26s steps(3, end) infinite; }
@keyframes diTailWaver {
  0%   { transform: scaleY(1)    translateX(0);      opacity: 0.9; }
  33%  { transform: scaleY(1.22) translateX(0.012em); opacity: 0.7; }
  66%  { transform: scaleY(0.86) translateX(-0.01em); opacity: 1;   }
  100% { transform: scaleY(1.1)  translateX(0.006em); opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .di-l > i.drop::after, .di-l > i.drop::before { animation: none; }
}

/* becsapódás: szétfutó parázsgyűrű, nem vízkoszorú */
.di-l::after {
  content: ""; position: absolute;
  left: 50%; bottom: 0.02em;
  width: 0.5em; height: 0.18em;
  margin-left: -0.25em;
  border: 1px solid rgba(255,190,110,0.85);
  border-radius: 50%;
  box-shadow: 0 0 0.5em rgba(242,140,40,0.55);
  opacity: 0;
  transform: scale(0.3);
}

/* --- indítás: a motor teszi rá a .di-drops osztályt --- */
.intro.di-drops .di-l > i.drop { display: none;   /* a cseppeket mostantól a vászon rajzolja, élethűbben */
  animation: diDropFall 0.62s cubic-bezier(0.5, 0, 0.85, 0.4) forwards;
  animation-delay: calc(var(--i) * 0.10s);
}
.intro.di-drops .di-l > b {
  animation: diLetterIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 0.10s + 0.50s);
}
.intro.di-drops .di-l::after {
  animation: diSplash 0.55s ease-out forwards;
  animation-delay: calc(var(--i) * 0.10s + 0.46s);
}

@keyframes diDropFall {
  0%   { opacity: 0; transform: translateY(-320%) scale(0.8); }
  12%  { opacity: 1; }
  82%  { opacity: 1; transform: translateY(0%)    scale(1); }
  /* becsapódáskor nem lapul szét, hanem FELLOBBAN és elég —
     a betű a lobbanásból születik meg */
  100% { opacity: 0; transform: translateY(4%)    scale(1.8, 1.5); filter: brightness(1.8); }
}
@keyframes diLetterIn {
  /* a betű felizzva jelenik meg, aztán a saját színére hűl */
  0%   { opacity: 0; transform: translateY(-0.10em) scale(0.88); filter: blur(3px) brightness(2.4); }
  55%  { opacity: 1; filter: blur(0) brightness(1.6); }
  100% { opacity: 1; transform: translateY(0)       scale(1);    filter: blur(0) brightness(1); }
}
@keyframes diSplash {
  0%   { opacity: 0.9; transform: scale(0.3); }
  100% { opacity: 0;   transform: scale(1.6); }
}

/* ============================================================
   Tüzes aláhúzás a felirat alatt
   A feliraton BELÜL van, ezért pontosan olyan széles, mint a szó —
   nem kell kitalálni az em-értékét.
   ============================================================ */
.di-underline {
  position: absolute;
  left: 0; right: 0; top: 1.06em;
  height: 0.055em;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  background: linear-gradient(90deg,
    rgba(255,150,40,0) 0%,
    rgba(255,176,74,0.95) 10%,
    rgba(255,232,190,1) 50%,
    rgba(255,176,74,0.95) 90%,
    rgba(255,150,40,0) 100%);
  box-shadow:
    0 0 0.14em rgba(255,190,110,0.9),
    0 0 0.45em rgba(242,140,40,0.65),
    0 0.06em 0.7em rgba(226,104,22,0.45);
}
.intro.di-line .di-underline {
  animation:
    diLineGrow 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
    diLineFlicker 1.6s ease-in-out 0.85s infinite;
}
@keyframes diLineGrow {
  0%   { transform: scaleX(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}
@keyframes diLineFlicker {
  0%, 100% { filter: brightness(1); }
  38%      { filter: brightness(1.22); }
  64%      { filter: brightness(0.9); }
}

/* ============================================================
   Alsó sor
   ============================================================ */
.di-tagline {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: 15vh;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted, #9097a6);
  opacity: 0;
  transform: translateY(8px);
}
.intro.di-tag .di-tagline {
  transition: opacity 0.7s ease, transform 0.7s ease;
  opacity: 1; transform: translateY(0);
}

/* ============================================================
   Mobil
   ============================================================ */
@media (max-width: 700px) {
  .di-word      { font-size: clamp(32px, 10.5vw, 60px); }
  .di-tagline   { bottom: 12vh; font-size: 0.72rem; letter-spacing: 0.18em; }
}

/* Csökkentett mozgás: a JS eleve nem indítja el az introt, de ha
   mégis látszana, ne villogjon semmi. */
@media (prefers-reduced-motion: reduce) {
  .intro.di-line .di-underline { animation: diLineGrow 0.6s ease forwards; }
}

/* ============================================================
   A valódi lángoló W (fotó)
   A rajzolt tűz nem tud fotórealisztikus lenni, ezért a láng
   csúcspontján átveszi a valódi felvétel. A háttere fekete,
   ezért „screen" keveréssel nyom nélkül illeszkedik.
   ============================================================ */
.di-real {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  z-index: 2;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform, opacity;
  animation: diFireFlicker 2.6s ease-in-out infinite;
}
/* a fotó áll — egy halk villódzás kelti életre */
@keyframes diFireFlicker {
  0%, 100% { filter: brightness(1)    saturate(1.02); }
  28%      { filter: brightness(1.11) saturate(1.06); }
  53%      { filter: brightness(0.95) saturate(1);    }
  76%      { filter: brightness(1.06) saturate(1.04); }
}
@media (prefers-reduced-motion: reduce) { .di-real { animation: none; } }

/* ============================================================
   Átugrás gomb — jól látható, de nem tolakodó
   ============================================================ */
.intro .intro-skip {
  z-index: 10;
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: none;
  color: var(--text, #ece9e2);
  background: rgba(8,11,18,0.55);
  border: 1px solid rgba(242,169,59,0.45);
  padding: 10px 18px;
  cursor: pointer;
}
.intro .intro-skip:hover {
  color: #1a1205; background: var(--amber, #f2a93b); border-color: var(--amber, #f2a93b);
}