/* ════════════════════════════════════════════════════════════════════
   TEMPORÄR: EUHA-2026-Intro (15 s) – nur auf euha-2026-hoergeraete-highlights.html
   Entfernen nach der Kampagne: diese Datei, assets/euha-intro.js und den
   markierten Block im HTML (<!-- TEMPORÄR: EUHA-INTRO -->) löschen.
   ════════════════════════════════════════════════════════════════════ */

.ei {
  --r: 0px;
  position: fixed; inset: 0; z-index: 3000;
  overflow: hidden;
  background: #1c1d16;
  color: var(--cream);
  font-family: var(--serif);
  perspective: 1400px;
}
.ei.is-hidden { display: none; }
.ei.is-iris {
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1px));
          mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1px));
}

.ei-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Filmkorn + Vignette */
.ei-grain {
  position: absolute; inset: -50%;
  pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: eiGrain 0.6s steps(3) infinite;
}
@keyframes eiGrain {
  0% { transform: translate(0, 0); } 33% { transform: translate(-4%, 3%); } 66% { transform: translate(3%, -5%); } 100% { transform: translate(0, 0); }
}
.ei-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.65) 100%);
}

/* Letterbox-Balken */
.ei-bar { position: absolute; left: 0; right: 0; height: 9vh; background: #0e0f0b; z-index: 6; transition: transform 1.1s cubic-bezier(.7,0,.2,1); }
.ei-bar--t { top: 0; transform: translateY(-100%); }
.ei-bar--b { bottom: 0; transform: translateY(100%); }
.ei.is-letterbox .ei-bar { transform: translateY(0); }

/* HUD: Timecode + Kennung */
.ei-hud {
  position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; height: 9vh;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1rem, 4vw, 3rem);
  font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(240,206,122,0.55);
  opacity: 0; transition: opacity 0.8s 0.6s;
}
.ei.is-letterbox .ei-hud { opacity: 1; }
.ei-hud b { color: var(--gold-2); font-weight: 400; }
.ei-tc { font-variant-numeric: tabular-nums; letter-spacing: 0.18em; }

/* Szenen */
.ei-scene {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  visibility: hidden;
}
.ei-scene.is-on { visibility: visible; }

/* Szene 1: Untertitel unter dem Partikel-Schriftzug */
.ei-sub {
  position: absolute; left: 0; right: 0; top: 64%;
  text-align: center;
  font-size: clamp(0.8rem, 1.6vw, 1.15rem);
  letter-spacing: 1.4em; text-transform: uppercase;
  color: var(--cream);
  opacity: 0; filter: blur(8px);
  transition: letter-spacing 1.4s cubic-bezier(.16,1,.3,1), opacity 0.6s, filter 0.6s;
}
.ei-s-title.is-on .ei-sub { letter-spacing: 0.55em; opacity: 1; filter: blur(0); }
.ei-s-title.is-out .ei-sub { opacity: 0; filter: blur(10px); letter-spacing: 1.2em; transition-duration: 0.5s; }
.ei-sub em { font-style: normal; color: var(--gold-1); }

/* Szene 2: Geräte */
.ei-dev { overflow: hidden; }
.ei-ghost {
  position: absolute; top: 50%; left: 0;
  white-space: nowrap;
  font-size: clamp(7rem, 26vw, 24rem); font-weight: 700; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(209,175,52,0.22);
  transform: translate(8%, -50%);
  transition: transform 2.2s linear, opacity 0.5s;
  opacity: 0;
}
.ei-dev.is-on .ei-ghost { opacity: 1; transform: translate(-28%, -50%); }

.ei-dev-grid {
  position: relative; z-index: 2;
  width: min(1100px, 90vw);
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 4vw;
}
.ei-dev-visual { position: relative; height: min(56vh, 460px); display: flex; align-items: center; justify-content: center; }
.ei-halo {
  position: absolute; width: min(46vh, 380px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(240,206,122,0.35) 0%, rgba(209,175,52,0.12) 38%, transparent 66%);
  transform: scale(0.3); opacity: 0;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1), opacity 0.8s;
}
.ei-halo::before {
  content: ''; position: absolute; inset: -6%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(240,206,122,0.9) 82%, transparent 94%);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%, #000 66.5%, transparent 67.5%);
          mask: radial-gradient(circle, transparent 64%, #000 65%, #000 66.5%, transparent 67.5%);
  animation: eiSpin 2.4s linear infinite;
}
.ei-halo::after {
  content: ''; position: absolute; inset: 8%; border-radius: 50%;
  border: 1px solid rgba(209,175,52,0.35);
}
@keyframes eiSpin { to { transform: rotate(360deg); } }
.ei-dev.is-on .ei-halo { transform: scale(1); opacity: 1; }

.ei-dev-img {
  position: relative; z-index: 2;
  max-height: 100%; max-width: 88%; object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6)) drop-shadow(0 0 30px rgba(240,206,122,0.18));
  transform: translate3d(0, 40px, -500px) rotateY(-70deg) rotateZ(-8deg);
  opacity: 0;
  transition: transform 1.3s cubic-bezier(.16,1,.3,1), opacity 0.6s;
}
.ei-dev.is-on .ei-dev-img { transform: translate3d(0, 0, 0) rotateY(0) rotateZ(0); opacity: 1; animation: eiFloat 3s 1.3s ease-in-out infinite; }
@keyframes eiFloat { 50% { transform: translate3d(0, -10px, 0) rotateZ(1.5deg); } }

.ei-dev-meta { position: relative; }
.ei-num {
  display: block; font-size: 0.72rem; letter-spacing: 0.3em; color: var(--gold-1); margin-bottom: 1.4rem;
  opacity: 0; transform: translateX(-20px); transition: all 0.6s 0.15s cubic-bezier(.16,1,.3,1);
}
.ei-brand {
  display: block; font-size: clamp(0.8rem, 1.2vw, 1rem); letter-spacing: 0.45em; text-transform: uppercase; color: rgba(245,240,232,0.7);
  opacity: 0; transform: translateY(12px); transition: all 0.6s 0.2s cubic-bezier(.16,1,.3,1);
}
.ei-model {
  font-size: clamp(2.6rem, 6.4vw, 5.4rem); font-weight: 300; line-height: 1.02; margin: 0.4rem 0 1.2rem;
  color: var(--cream);
}
.ei-model span { display: block; overflow: hidden; }
.ei-model i {
  display: block; font-style: normal;
  transform: translateY(105%); transition: transform 0.9s cubic-bezier(.16,1,.3,1);
}
.ei-model span:nth-child(2) i { transition-delay: 0.08s; font-style: italic; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ei-tag {
  font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 300; color: rgba(245,240,232,0.85);
  padding-left: 1.1rem; border-left: 2px solid var(--gold-1);
  opacity: 0; clip-path: inset(0 100% 0 0);
  transition: clip-path 0.7s 0.3s cubic-bezier(.7,0,.2,1), opacity 0.2s 0.3s;
}
.ei-dev.is-on .ei-num, .ei-dev.is-on .ei-brand { opacity: 1; transform: none; }
.ei-dev.is-on .ei-model i { transform: translateY(0); }
.ei-dev.is-on .ei-tag { opacity: 1; clip-path: inset(0 0 0 0); }

.ei-dev.is-out .ei-dev-grid { transform: translateX(-12vw) scale(0.94); opacity: 0; filter: blur(6px); transition: all 0.45s cubic-bezier(.7,0,.8,.3); }
.ei-dev.is-out .ei-ghost { opacity: 0; }

/* Blitz-Schnitt zwischen den Geräten */
.ei-flash {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,241,196,0.9), rgba(240,206,122,0.35) 35%, transparent 70%);
  opacity: 0;
}
.ei-flash.is-go { animation: eiFlash 0.5s ease-out; }
@keyframes eiFlash { 0% { opacity: 0.9; } 100% { opacity: 0; } }

/* Szene 3: Finale */
.ei-final { flex-direction: column; text-align: center; }
.ei-logo {
  width: clamp(60px, 6.5vw, 92px); margin-bottom: 1.8rem;
  opacity: 0; transform: scale(0.4) rotate(-20deg);
  filter: drop-shadow(0 0 20px rgba(240,206,122,0.6));
  transition: all 1s cubic-bezier(.34,1.56,.64,1);
}
.ei-trio { display: flex; align-items: flex-end; justify-content: center; gap: clamp(1.5rem, 5vw, 4.5rem); margin-bottom: 2.4rem; }
.ei-trio figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; opacity: 0; transform: translateY(60px) scale(0.8); transition: all 0.9s cubic-bezier(.16,1,.3,1); }
.ei-trio figure:nth-child(2) { transition-delay: 0.12s; }
.ei-trio figure:nth-child(3) { transition-delay: 0.24s; }
.ei-trio img { height: clamp(90px, 17vh, 170px); width: auto; object-fit: contain; filter: drop-shadow(0 0 18px rgba(240,206,122,0.25)); }
.ei-trio figcaption { font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(245,240,232,0.65); }
.ei-claim {
  font-size: clamp(1.6rem, 4.2vw, 3.4rem); font-weight: 300; line-height: 1.15; color: var(--cream);
  margin: 0;
}
.ei-claim span { display: block; overflow: hidden; }
.ei-claim i { display: block; font-style: normal; transform: translateY(105%); transition: transform 1s cubic-bezier(.16,1,.3,1); }
.ei-claim span:nth-child(2) i { transition-delay: 0.12s; font-style: italic; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ei-final.is-on .ei-logo { opacity: 1; transform: none; }
.ei-final.is-on .ei-trio figure { opacity: 1; transform: none; }
.ei-final.is-on .ei-claim i { transform: translateY(0); }
.ei-final.is-out { transform: scale(1.08); opacity: 0; transition: all 0.7s cubic-bezier(.7,0,.8,.3); }

/* Gold-Lichtschwung vor der Iris */
.ei-sweep {
  position: absolute; z-index: 5; top: -30%; bottom: -30%; width: 34vw; left: -40vw;
  background: linear-gradient(90deg, transparent, rgba(240,206,122,0.18) 35%, rgba(255,246,214,0.55) 50%, rgba(240,206,122,0.18) 65%, transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.ei-sweep.is-go { animation: eiSweep 1s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes eiSweep { to { left: 120vw; } }

/* Skip */
.ei-skip {
  position: absolute; z-index: 9; top: calc(9vh + 1rem); right: clamp(1rem, 3vw, 2rem);
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 1rem 0.55rem 1.1rem;
  background: rgba(14,15,11,0.55); border: 1px solid rgba(209,175,52,0.4);
  color: var(--cream); font-family: var(--serif); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.6s 1.2s, border-color 0.2s;
}
.ei.is-letterbox .ei-skip { opacity: 1; }
.ei-skip:hover, .ei-skip:focus-visible { border-color: var(--gold-2); outline: none; }
.ei-skip svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.ei-skip circle { fill: none; stroke-width: 2; }
.ei-skip .bg { stroke: rgba(245,240,232,0.15); }
.ei-skip .fg { stroke: var(--gold-1); stroke-dasharray: 56.55; stroke-dashoffset: 56.55; }

@media (max-width: 760px) {
  .ei-dev-grid { grid-template-columns: 1fr; gap: 1rem; text-align: center; }
  .ei-dev-visual { height: 34vh; }
  .ei-tag { border-left: 0; padding-left: 0; }
  .ei-hud span:first-child { display: none; }
  .ei-trio img { height: 12vh; }
}
@media (prefers-reduced-motion: reduce) {
  .ei { display: none !important; }
}