/* ===================== style.css (1:1 kopieren) ===================== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;background:#000;overflow:hidden}

/* master = landschaft (ebene 0) */
#master-landscape{
  position:relative;
  width:100vw;
  height:100vh;
  background:#000;
  overflow:hidden;
}

/* landschaft: full cover */
#img-landscape{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
}

/* tor-container (ebene 1) */
#tor-container{
  position:absolute;
  top:50%;
  left:50%;
  width:min(95vw, calc(95vh * (16/9)));
  aspect-ratio:16/9;
  height:auto;
  transform:translate(-50%,-50%) scale(0.9);
  transform-origin:center center;
  z-index:10;
  overflow:visible;
}

/* handy + tablet: größer */
@media (max-width:1024px){
  #tor-container{ transform:translate(-50%,-50%) scale(1.63); }
}

/* tor-bild */
#img-tor{
  position:absolute;
  inset:0;
  width:80%;
  height:80%;
  margin:auto;
  object-fit:contain;
  z-index:0;
  pointer-events:none;
}

/* steinplatz-container */
#steinplatz-container{
  position:absolute;
  inset:0;
  z-index:10;
}

/* ===================== STELLSCHRAUBEN ===================== */
:root{
  /* stein/platz */
  --steinplatz-x: 43%;
  --steinplatz-y: 82%;
  --steinplatz-w: 30%;

  --steinpfeiler-x: 45%;
  --steinpfeiler-y: 60%;
  --steinpfeiler-w: 15%;

  /* glow */
  --glow-blur: 18px;
  --glow-scale-1: 1.02;
  --glow-scale-2: 1.06;
  --glow-scale-3: 1.10;

  /* dissolve stein */
  --dissolve-ms: 1200ms;
  --dissolve-y: 18%;
  --dissolve-scale: 0.72;

  /* ===================== ANGELIKA (GLOBAL) ===================== */
  /* anchor: rechts unten im torwaechter-layer */
  --ani-right: 6%;
  --ani-bottom: 0%;

  /* globale feinjustage */
  --ani-x: -75%;       /* <0 = nach links, >0 = nach rechts */
  --ani-y:  14%;       /* <0 = nach oben, >0 = nach unten */
  --ani-scale: 1.00;   /* gesamtgröße */
  --ani-h: 86%;        /* figurhöhe */
}

/* ===================== GLOW (WEISS, NIE RECHTECKIG) ===================== */
#stein-glow{
  position:absolute;
  left:var(--steinpfeiler-x);
  top:var(--steinpfeiler-y);
  width:calc(var(--steinpfeiler-w) * 3.2);
  height:calc(var(--steinpfeiler-w) * 3.2);
  transform:translate(-50%,-50%);
  z-index:0;
  opacity:0;
  pointer-events:none;

  filter:blur(var(--glow-blur));
  border-radius:999px;             /* killt rounded-rectangle */
  mix-blend-mode:normal;           /* screen kann flächig werden */

  background:radial-gradient(circle,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.20) 38%,
    rgba(255,255,255,0.00) 72%
  );

  transition:opacity 260ms ease, transform 260ms ease, filter 260ms ease;
}

/* glow-states (weiss + stärker) */
body.state-1 #stein-glow{
  opacity:1;
  transform:translate(-50%,-50%) scale(var(--glow-scale-1));
  background:radial-gradient(circle,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.22) 38%,
    rgba(255,255,255,0.00) 72%
  );
  animation:naduGlowPulse 1.35s ease-in-out infinite;
}
body.state-2 #stein-glow{
  opacity:1;
  transform:translate(-50%,-50%) scale(var(--glow-scale-2));
  background:radial-gradient(circle,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.30) 38%,
    rgba(255,255,255,0.00) 74%
  );
  filter:blur(calc(var(--glow-blur) + 1px));
  animation:naduGlowPulse 1.25s ease-in-out infinite;
}
body.state-3 #stein-glow{
  opacity:1;
  transform:translate(-50%,-50%) scale(var(--glow-scale-3));
  background:radial-gradient(circle,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.36) 36%,
    rgba(255,255,255,0.00) 70%
  );
  filter:blur(calc(var(--glow-blur) + 2px));
  animation:naduGlowPulse 1.15s ease-in-out infinite;
}

@keyframes naduGlowPulse{
  0%   { transform:translate(-50%,-50%) scale(1); }
  50%  { transform:translate(-50%,-50%) scale(1.03); }
  100% { transform:translate(-50%,-50%) scale(1); }
}

/* ===================== STEINPFEILER ===================== */
#steinpfeiler-wrap{
  position:absolute;
  left:var(--steinpfeiler-x);
  top:var(--steinpfeiler-y);
  width:var(--steinpfeiler-w);
  transform:translate(-50%,-50%);
  z-index:1;
}

#img-steinpfeiler{
  width:80%;
  height:auto;
  display:block;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}

#steinpfeiler-hit{
  position:absolute;
  inset:-12% -22%;
  z-index:3;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color: transparent;
}

#img-steinplatz{
  position:absolute;
  left:var(--steinplatz-x);
  top:var(--steinplatz-y);
  width:var(--steinplatz-w);
  height:auto;
  transform:translate(-50%,-50%);
  z-index:2;
  pointer-events:none;
}

/* pfeiler lebendig */
body.state-2 #steinpfeiler-wrap{ transform:translate(-50%,-50%) scale(0.99); opacity:0.98; }
body.state-3 #steinpfeiler-wrap{ transform:translate(-50%,-50%) scale(0.97) translateY(1.2%); opacity:0.95; }

/* dissolve stein */
#steinpfeiler-wrap.dissolve{
  animation: naduStoneDissolve var(--dissolve-ms) ease-in forwards;
  transform-origin: 50% 80%;
}
@keyframes naduStoneDissolve{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  100%{ transform:translate(-50%,-50%) translateY(var(--dissolve-y)) scale(var(--dissolve-scale)); opacity:0; }
}

/* ===================== TORWÄCHTER LAYER ===================== */
#torwaechter-layer{
  position:absolute;
  inset:0;
  z-index:999;          /* vor steinplatz/pfeiler */
  pointer-events:none;
}

/* DAS EINZIGE #angelika-seq (keine doppelte definition mehr!) */
#angelika-seq{
  position:absolute;
  right:var(--ani-right);
  bottom:var(--ani-bottom);

  height:var(--ani-h);
  width:auto;

  transform: translate(var(--ani-x), var(--ani-y)) scale(var(--ani-scale));
  transform-origin: 100% 100%;
  will-change: transform, opacity;

  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}

/* Endsequenz-Image (dein JS nutzt #endsequenz-seq) */
#endsequenz-seq{
  position:absolute;
  right:var(--ani-right);
  bottom:var(--ani-bottom);

  height:var(--ani-h);
  width:auto;

  transform: translate(var(--ani-x), var(--ani-y)) scale(var(--ani-scale));
  transform-origin: 100% 100%;
  z-index: 10000;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}

/* ===================== FRAME-OVERRIDES (optional per JS-Klasse) ===================== */
/* Beispiel: img.classList.add("f07") um nur Frame 7 zu korrigieren */
#angelika-seq.f07{ transform: translate(calc(var(--ani-x) - 18px), var(--ani-y)) scale(calc(var(--ani-scale) * 0.98)); }
#angelika-seq.f08{ transform: translate(calc(var(--ani-x) - 12px), calc(var(--ani-y) + 6px)) scale(calc(var(--ani-scale) * 0.98)); }
#angelika-seq.f21{ transform: translate(var(--ani-x), var(--ani-y)) scale(calc(var(--ani-scale) * 1.02)); }

/* ===================== IMPRESSUM ===================== */
#impressum-btn{
  position:fixed;
  right:calc(16px + env(safe-area-inset-right));
  top:calc(16px + env(safe-area-inset-top));
  z-index:9999;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 14px;
  border-radius:999px;

  text-decoration:none;
  font:600 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  color:rgba(255,255,255,0.92);
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.20);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:0 8px 18px rgba(0,0,0,0.35);
  -webkit-tap-highlight-color: transparent;
}
#impressum-btn:active{ transform:scale(0.98); }

/* helper */
.layer{position:absolute}
.nohit{pointer-events:none}

/* ===================== HANDY LANDSCAPE FEINTUNING ===================== */
@media (max-width:1024px) and (orientation:landscape){
  #tor-container{ transform:translate(-50%,-50%) scale(1.25); }

  :root{
    --steinplatz-x: 43%;
    --steinplatz-y: 84%;
    --steinplatz-w: 32%;

    --steinpfeiler-x: 45%;
    --steinpfeiler-y: 62%;
    --steinpfeiler-w: 16%;

    /* ===== Angelika NUR fürs Handy Landscape weiter nach rechts ===== */
    --ani-x: -80%;   /* vorher -125% -> weniger negativ = weiter nach rechts */
    --ani-y:  14%;   /* leicht höher (optional) */
    --ani-h:  88%;
    --ani-scale: 0.9;
  }
}

@media (max-width:1024px) and (orientation:landscape) and (max-height:430px){
  #tor-container{ transform:translate(-50%,-50%) scale(1.12); }

  :root{
    /* sehr flache handys: nochmal minimal nach rechts */
    --ani-x: -72%;
    --ani-y:  14%;
    --ani-h:  90%;
    --ani-scale: 0.9;
  }
}

/* ===================== TOR-ZOOM (Patch) ===================== */
:root{
  --tor-zoom: 1;        /* wird von JS animiert */
  --tor-zoom-max: 5.45; /* Komma -> Punkt (CSS braucht Punkt) */
  --tor-base: 0.9;
}

/* Desktop */
#tor-container{
  transform:translate(-50%,-50%) scale(calc(var(--tor-base) * var(--tor-zoom))) !important;
  will-change: transform;
}

/* Handy + Tablet */
@media (max-width:1024px){
  :root{ --tor-base: 1.63; }
}

/* Handy Landscape Feintuning */
@media (max-width:1024px) and (orientation:landscape){
  :root{ --tor-base: 1.25; }
}
@media (max-width:1024px) and (orientation:landscape) and (max-height:430px){
  :root{ --tor-base: 1.12; }
}