/* Landing-Intro-Animation. Greift nur wenn #werkGate die Klasse .gw-intro trägt. */

/* --- Schriftzug baut sich aus Segmenten auf --- */
.werk-gate.gw-intro .werk-gate__title{ letter-spacing:.05em; }
.werk-gate.gw-intro .gw-intro__ch{
  display:inline-block;
  opacity:0;
  transform:translateY(-38px) rotateX(90deg) scale(1.25);
  animation:gwIntroCh .5s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(var(--i) * .07s);
  position:relative;
}
/* gerüst-artiger Amber-Riegel, der beim Setzen kurz aufblitzt */
.werk-gate.gw-intro .gw-intro__ch::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:-4px; height:3px;
  background:linear-gradient(90deg,transparent,#f0a51f,transparent);
  opacity:0; animation:gwIntroBar .4s ease-out forwards;
  animation-delay:calc(var(--i) * .07s + .35s);
}
@keyframes gwIntroCh{
  0%{opacity:0; transform:translateY(-38px) rotateX(90deg) scale(1.25);}
  60%{opacity:1; transform:translateY(4px) rotateX(0) scale(1);}
  100%{opacity:1; transform:translateY(0) rotateX(0) scale(1);}
}
@keyframes gwIntroBar{ 0%{opacity:0;} 40%{opacity:1;} 100%{opacity:0;} }

/* --- Rollen-Kacheln schlagen gestaffelt ein --- */
/* Reihenfolge: top(2) dann bot(2). Start nach dem Wortmarken-Aufbau (~1s). */
.werk-gate.gw-intro .wg-role{
  opacity:0;
  transform:scale(2.4);
  animation:gwIntroSlam .42s cubic-bezier(.2,.9,.25,1) forwards;
}
.werk-gate.gw-intro .werk-gate__roles--top .wg-role:nth-child(1){ animation-delay:1.05s; }
.werk-gate.gw-intro .werk-gate__roles--top .wg-role:nth-child(2){ animation-delay:1.32s; }
.werk-gate.gw-intro .werk-gate__roles--bot .wg-role:nth-child(1){ animation-delay:1.59s; }
.werk-gate.gw-intro .werk-gate__roles--bot .wg-role:nth-child(2){ animation-delay:1.86s; }

@keyframes gwIntroSlam{
  0%{opacity:0; transform:scale(2.4); filter:blur(2px);}
  70%{opacity:1; transform:scale(.92); filter:blur(0);}
  85%{transform:scale(1.04);}
  100%{opacity:1; transform:scale(1);}
}

/* Shockwave-Ring beim Einschlag */
.werk-gate.gw-intro .wg-role::before{
  content:""; position:absolute; inset:0; border-radius:8px;
  border:2px solid rgba(240,165,31,.7);
  opacity:0; transform:scale(1); pointer-events:none;
}
.werk-gate.gw-intro .wg-role{ position:relative; }
.werk-gate.gw-intro .werk-gate__roles--top .wg-role:nth-child(1)::before{ animation:gwIntroWave .5s ease-out 1.35s; }
.werk-gate.gw-intro .werk-gate__roles--top .wg-role:nth-child(2)::before{ animation:gwIntroWave .5s ease-out 1.62s; }
.werk-gate.gw-intro .werk-gate__roles--bot .wg-role:nth-child(1)::before{ animation:gwIntroWave .5s ease-out 1.89s; }
.werk-gate.gw-intro .werk-gate__roles--bot .wg-role:nth-child(2)::before{ animation:gwIntroWave .5s ease-out 2.16s; }
@keyframes gwIntroWave{
  0%{opacity:.9; transform:scale(1);}
  100%{opacity:0; transform:scale(1.5);}
}

/* Screen-Shake der Gate-Inhalte bei jedem Einschlag */
.werk-gate.gw-intro .werk-gate__inner{
  animation:gwIntroShake .12s ease-in-out 1.35s 4 alternate;
}
@keyframes gwIntroShake{
  0%{transform:translate(0,0);} 100%{transform:translate(3px,-2px);}
}

/* --- Fallbacks --- */
@media (prefers-reduced-motion: reduce){
  .werk-gate.gw-intro .gw-intro__ch,
  .werk-gate.gw-intro .wg-role,
  .werk-gate.gw-intro .werk-gate__inner{ animation:none !important; opacity:1 !important; transform:none !important; }
  .werk-gate.gw-intro .gw-intro__ch::after,
  .werk-gate.gw-intro .wg-role::before{ display:none !important; }
}
/* Mobil (LITE): kürzer, kein Shake */
body.gw-mobile-app .werk-gate.gw-intro .werk-gate__inner{ animation:none !important; }
body.gw-mobile-app .werk-gate.gw-intro .gw-intro__ch{ animation-duration:.35s; }
body.gw-mobile-app .werk-gate.gw-intro .wg-role{ animation-duration:.3s; }