/* Kino-Intro St. Hubert — eigenständig, ergänzt die Übergabe V52 (Pixelmeister, 13.11.2026).
   Neue CI Tecklenburg · Geiger Gruppe: Schwarzgrün, Blassgrün, Rot, Geiger Build.
   Einbindung: 2 Zeilen im <head> der index.html (intro.css + intro.js).
   ⚠ Flüssigkeit: Während des Intros lädt und parst model-viewer 26 MB auf dem Hauptthread.
   Deshalb animiert hier NUR transform und opacity auf eigenen HTML-Ebenen (läuft im Compositor).
   Keine animierten Masken, keine background-position, keine Pfade im SVG bewegen, kein blend-mode. */
@font-face{font-family:"Geiger Build Headline";src:url(font/GeigerBuildHeadline-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geiger Build Text";src:url(font/GeigerBuildText-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
html.ti-pre body::before{content:'';position:fixed;inset:0;z-index:2147483646;background:#011a13}
html.ti-lock,html.ti-lock body{overflow:hidden}
#ti{--gruen:#bed7aa;--rot:#e4032e;--grund:#02211a;position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;overflow:hidden;
  color:#fff;font-family:"Geiger Build Text",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;contain:strict}
/* Hintergrund inkl. Vignette, statisch */
#ti .ti-bg{position:absolute;inset:0;
  background:radial-gradient(130% 100% at 50% 46%,transparent 45%,rgba(0,8,5,.6) 100%),
             radial-gradient(120% 85% at 50% 42%,#0b3d2e 0%,#03261c 52%,#011a13 100%)}
/* Iris: ein Ring mit Loch, wird nur skaliert (Compositor) */
#ti .ti-iris{position:absolute;left:50%;top:46%;width:60vmax;height:60vmax;margin:-30vmax 0 0 -30vmax;opacity:0;
  background:radial-gradient(circle closest-side,transparent 0 2%,var(--grund) 6%);transform:scale(4);will-change:transform,opacity}
/* Licht hinter dem Logo, atmet */
#ti .ti-glow{position:absolute;left:50%;top:46%;width:90vmax;height:90vmax;margin:-45vmax 0 0 -45vmax;pointer-events:none;
  will-change:transform,opacity;opacity:0;transform:scale(.6);animation:ti-glow 2.6s .3s cubic-bezier(.2,.7,.2,1) forwards}
/* Atmen auf eigener Ebene — zwei opacity-Animationen am selben Element fallen aus dem Compositor (#64) */
#ti .ti-glow::before{content:'';position:absolute;inset:0;will-change:opacity;
  background:radial-gradient(closest-side,rgba(190,215,170,.2),rgba(190,215,170,.05) 45%,transparent 70%);
  animation:ti-breathe 5s 2.9s ease-in-out infinite alternate}
/* Letterbox */
#ti .ti-bar{position:absolute;left:0;right:0;height:var(--lb,9vh);background:#000a07;z-index:3;transition:transform 1.1s cubic-bezier(.7,0,.2,1);will-change:transform}
#ti .ti-bar.top{top:0;transform:translateY(-100%);animation:ti-bar-in .9s .05s cubic-bezier(.2,.8,.2,1) forwards}
#ti .ti-bar.bot{bottom:0;transform:translateY(100%);animation:ti-bar-in .9s .05s cubic-bezier(.2,.8,.2,1) forwards;
  display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,3vw,40px);gap:16px}
#ti .ti-meta{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap;opacity:0;animation:ti-fade .8s 1s forwards}
#ti .ti-pct{font-variant-numeric:tabular-nums;display:inline-block;min-width:13.5em}
#ti .ti-skip{all:unset;cursor:pointer;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);
  padding:10px 2px;border-bottom:1px solid rgba(255,255,255,.25);opacity:0;animation:ti-fade .6s 1.2s forwards;transition:color .2s,border-color .2s}
#ti .ti-skip:hover,#ti .ti-skip:focus-visible{color:#fff;border-color:var(--gruen)}
#ti .ti-skip:focus-visible{outline:2px solid var(--gruen);outline-offset:4px}
#ti .ti-load{position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:left;transform:scaleX(var(--p,0));will-change:transform;
  background:linear-gradient(90deg,transparent,var(--gruen) 35%,#fff);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
/* Bühne */
#ti .ti-stage{position:relative;z-index:2;display:grid;justify-items:center;gap:clamp(22px,4.2vh,42px);margin-top:-4vh;will-change:transform,opacity;
  animation:ti-push 7s .2s cubic-bezier(.25,.1,.25,1) forwards}
#ti .ti-mark{position:relative;width:min(80vw,640px);aspect-ratio:557.58/134.76}
#ti .ti-logo{position:absolute;inset:0}
#ti .ti-logo i{position:absolute;display:block;will-change:transform,opacity}
#ti .ti-logo svg{display:block;width:100%;height:100%;overflow:visible;fill:currentColor}
/* Die drei Balken der beiden E sind das Zeichen der Marke: sie schießen als Träger von links ein */
#ti .ti-e{color:#fff;transform-origin:left center;opacity:0;transform:translateX(-520%) scaleX(2.6);
  animation:ti-beam .95s calc(.45s + var(--i)*.09s) cubic-bezier(.16,1,.3,1) forwards}
/* Dann steigen die übrigen Buchstaben auf */
#ti .ti-w{color:#fff;transform-origin:center bottom;opacity:0;transform:translateY(42%) scaleY(1.12);
  animation:ti-letter .9s calc(1.3s + var(--i)*.06s) cubic-bezier(.16,1,.3,1) forwards}
/* GEIGER Gruppe in Rot */
#ti .ti-s{color:var(--rot);opacity:0;transform:translateY(30%);
  animation:ti-letter .7s calc(2.25s + var(--i)*.04s) cubic-bezier(.16,1,.3,1) forwards}
/* Glanzlicht: Maske steht still, nur der Lichtstreifen darin wandert */
#ti .ti-sheen{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  -webkit-mask:url(intro-mask.svg) center/100% 100% no-repeat;mask:url(intro-mask.svg) center/100% 100% no-repeat}
#ti .ti-sheen i{position:absolute;top:0;bottom:0;left:-30%;width:30%;will-change:transform;
  background:linear-gradient(105deg,transparent 15%,rgba(240,250,232,.9) 50%,transparent 85%);
  transform:translateX(0);animation:ti-sheen 1.5s 2.95s cubic-bezier(.45,0,.2,1) forwards}
#ti .ti-rule{width:min(46vw,320px);height:1px;background:linear-gradient(90deg,transparent,var(--gruen),transparent);will-change:transform;
  transform:scaleX(0);animation:ti-grow-x 1.1s 2.95s cubic-bezier(.7,0,.2,1) forwards}
#ti .ti-title{text-align:center;line-height:1.1}
#ti .ti-title b{display:block;font-family:"Geiger Build Headline","Geiger Build Text",Inter,sans-serif;font-weight:500;
  font-size:clamp(30px,5.6vw,64px);letter-spacing:.06em;text-transform:uppercase;will-change:transform,opacity;
  opacity:0;transform:scale(1.35);animation:ti-title 1.8s 3.2s cubic-bezier(.16,1,.3,1) forwards}
#ti .ti-title span{display:block;margin-top:.9em;font-size:clamp(11px,1.2vw,13px);letter-spacing:.36em;text-transform:uppercase;
  color:var(--gruen);opacity:0;animation:ti-up 1s 3.75s cubic-bezier(.16,1,.3,1) forwards}
/* Abgang: Inhalte ziehen nach vorn weg, Grund blendet aus, Iris öffnet auf das Modell */
#ti.ti-out{pointer-events:none}
#ti.ti-out .ti-bg{opacity:0;transition:opacity .45s .3s ease-in}
#ti.ti-out .ti-iris{animation:ti-iris 1.6s .3s cubic-bezier(.65,0,.15,1) forwards}
#ti.ti-out .ti-bar.top{transform:translateY(-100%)!important;animation:none}
#ti.ti-out .ti-bar.bot{transform:translateY(100%)!important;animation:none}
#ti.ti-out .ti-stage{animation:none;transition:opacity .7s ease-in,transform .9s cubic-bezier(.5,0,.75,0);opacity:0;transform:scale(1.18)}
#ti.ti-out .ti-glow{animation:none;transform:scale(1);transition:opacity .6s;opacity:0}
@keyframes ti-bar-in{to{transform:none}}
@keyframes ti-fade{to{opacity:1}}
@keyframes ti-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ti-glow{to{opacity:1;transform:scale(1)}}
@keyframes ti-breathe{from{opacity:1}to{opacity:.72}}
@keyframes ti-push{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes ti-grow-x{to{transform:scaleX(1)}}
@keyframes ti-beam{0%{opacity:0;transform:translateX(-520%) scaleX(2.6)}25%{opacity:1}100%{opacity:1;transform:none}}
@keyframes ti-letter{to{opacity:1;transform:none}}
@keyframes ti-sheen{to{transform:translateX(450%)}}
@keyframes ti-title{to{opacity:1;transform:none}}
@keyframes ti-iris{0%{opacity:1;transform:scale(4)}80%{opacity:1}100%{opacity:0;transform:scale(140)}}
@media (max-width:700px){#ti{--lb:6vh}#ti .ti-meta.l{display:none}#ti .ti-bar.bot{justify-content:flex-end}}
@media (prefers-reduced-motion:reduce){
  #ti *,#ti{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.4s!important;transition-delay:0s!important}
  #ti .ti-stage{animation:none;opacity:0;animation:ti-fade .6s forwards!important}
  #ti.ti-out .ti-iris{display:none}
  /* Abgang ohne Bewegung: Bühne nur ausblenden (schlägt das ti-fade-!important oben) */
  #ti.ti-out .ti-stage{animation:none!important;opacity:0;transform:none}
}