/* ============================================================
   matterport-hint-overlay.css
   Wiederverwendbares Hinweis-Overlay fuer 360-Touren / iframes:
   ein animierter Mauszeiger mit Kreis und vier Richtungspfeilen,
   der dem Gast zeigt, wie man sich im Rundgang bewegt.

   - Voellig gekapselt unter .mph-overlay (keine Kollisionen).
   - Markup wird vom zugehoerigen JS injiziert (window.MatterportHint).
   - Tempo ueber --mph-f, Farbe ueber --mph-color anpassbar.
   - pointer-events:none -> der iframe bleibt bedienbar.
   - respektiert prefers-reduced-motion.

   Drop-in in anderen Projekten: diese CSS + matterport-hint-overlay.js
   einbinden, der Container (z.B. der iframe-Wrapper) muss positioniert
   sein (position:relative o.ae.).
   ============================================================ */

.mph-overlay {
  --mph-f: 0.66;          /* Geschwindigkeitsfaktor: kleiner = schneller */
  --mph-color: #fff;      /* Farbe von Zeiger, Kreis und Pfeilen */

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 90vmin);
  height: min(900px, 90vmin);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;   /* Klicks/Drag gehen an den iframe darunter */
  z-index: 5;
}

.mph-overlay .mph-svg {
  width: 90%;
  height: 80%;
}

.mph-overlay .mph-fill { fill: var(--mph-color); }

.mph-overlay .mph-ring-outer,
.mph-overlay .mph-ring-inner {
  fill: none;
  stroke: var(--mph-color);
  stroke-miterlimit: 10;
  stroke-width: 8.94px;
}
.mph-overlay .mph-ring-inner {
  stroke-width: 70px;
  opacity: 0.6;
}

/* ---------- Animations-Zuweisungen (gestaffelte Choreografie) ---------- */

.mph-overlay .mph-circle {
  animation:
    mphShow calc(var(--mph-f) * 0.2s) ease-in calc(var(--mph-f) * 6.5s) normal backwards,
    mphCirclePerspective calc(var(--mph-f) * 2.4s) ease-in-out calc(var(--mph-f) * 8.9s) normal forwards;
}

.mph-overlay .mph-mouse {
  transform-origin: center;
  perspective: 1200px;
  transform: translate(-80px, 40px);
  animation:
    mphMouseRight  calc(var(--mph-f) * 0.35s) ease-out calc(var(--mph-f) * 2.2s) normal forwards,
    mphMouseUp     calc(var(--mph-f) * 0.35s) ease-out calc(var(--mph-f) * 3.2s) normal forwards,
    mphMouseLeft   calc(var(--mph-f) * 0.35s) ease-out calc(var(--mph-f) * 4.4s) normal forwards,
    mphMouseDown   calc(var(--mph-f) * 0.35s) ease-out calc(var(--mph-f) * 5.4s) normal forwards,
    mphMouseMoveCircle calc(var(--mph-f) * 1.0s) ease-in-out calc(var(--mph-f) * 6.9s) normal forwards,
    mphMouseCircleClick calc(var(--mph-f) * 1.3s) ease-in-out calc(var(--mph-f) * 9s) normal forwards;
}

.mph-overlay .mph-cursor {
  transform-origin: initial;
  animation:
    mphCursorDrag     calc(var(--mph-f) * 0.04s) ease-in-out calc(var(--mph-f) * 3s)   normal forwards,
    mphCursorDragStop calc(var(--mph-f) * 0.04s) ease-out    calc(var(--mph-f) * 3.9s) normal forwards,
    mphCursorDrag     calc(var(--mph-f) * 0.04s) ease-out    calc(var(--mph-f) * 4.2s) normal forwards,
    mphCursorDragStop calc(var(--mph-f) * 0.04s) ease-out    calc(var(--mph-f) * 5s)   normal forwards,
    mphCursorDrag     calc(var(--mph-f) * 0.04s) ease-out    calc(var(--mph-f) * 5.2s) normal forwards,
    mphCursorDragStop calc(var(--mph-f) * 0.04s) ease-out    calc(var(--mph-f) * 6s)   normal forwards,
    mphCursorClick    calc(var(--mph-f) * 0.4s)  ease-in-out calc(var(--mph-f) * 10.3s) normal forwards,
    mphHide           calc(var(--mph-f) * 0.2s)  ease-in     calc(var(--mph-f) * 10.5s) normal forwards;
}

.mph-overlay .mph-arrows-group {
  animation: mphShow calc(var(--mph-f) * 0.5s) ease-in calc(var(--mph-f) * 1s) normal backwards;
}

.mph-overlay .mph-arrows {
  animation: mphHide calc(var(--mph-f) * 0.5s) ease-in calc(var(--mph-f) * 6s) normal forwards;
}

.mph-overlay .mph-arrow-right {
  animation:
    mphArrowRight calc(var(--mph-f) * 1s)   ease-in-out calc(var(--mph-f) * 2.2s) normal backwards,
    mphShow       calc(var(--mph-f) * 0.2s) ease-in     calc(var(--mph-f) * 2.1s) normal backwards,
    mphHide       calc(var(--mph-f) * 0.2s) ease-in     calc(var(--mph-f) * 3s)   normal forwards;
}
.mph-overlay .mph-arrow-up {
  animation:
    mphArrowUp calc(var(--mph-f) * 1s)   ease-in-out calc(var(--mph-f) * 3.4s) normal backwards,
    mphShow    calc(var(--mph-f) * 0.4s) ease-in     calc(var(--mph-f) * 3.3s) normal backwards,
    mphHide    calc(var(--mph-f) * 0.2s) ease-in     calc(var(--mph-f) * 4.2s) normal forwards;
}
.mph-overlay .mph-arrow-left {
  animation:
    mphArrowLeft calc(var(--mph-f) * 1s)   ease-in-out calc(var(--mph-f) * 4.4s) normal backwards,
    mphShow      calc(var(--mph-f) * 0.4s) ease-in     calc(var(--mph-f) * 4.3s) normal backwards,
    mphHide      calc(var(--mph-f) * 0.2s) ease-in     calc(var(--mph-f) * 5.2s) normal forwards;
}
.mph-overlay .mph-arrow-down {
  animation:
    mphArrowDown calc(var(--mph-f) * 1s)   ease-in-out calc(var(--mph-f) * 5.6s) normal backwards,
    mphShow      calc(var(--mph-f) * 0.4s) ease-in     calc(var(--mph-f) * 5.5s) normal backwards,
    mphHide      calc(var(--mph-f) * 0.2s) ease-in     calc(var(--mph-f) * 6.4s) normal forwards;
}

/* ---------- Keyframes ---------- */
@keyframes mphShow {
  from { opacity: 0; }
  to   { opacity: 1; visibility: visible; }
}
@keyframes mphHide {
  from { opacity: 1; }
  to   { width: 0; height: 0; visibility: hidden; opacity: 0; }
}

@keyframes mphMouseRight {
  0%   { transform: translate(-80px, 40px); }
  60%  { transform: translate(90px, 40px); }
  100% { transform: translate(80px, 40px); }
}
@keyframes mphMouseUp {
  0%   { transform: translate(80px, 40px); }
  60%  { transform: translate(90px, -170px); }
  100% { transform: translate(90px, -160px); }
}
@keyframes mphMouseLeft {
  0%   { transform: translate(90px, -160px); }
  60%  { transform: translate(-150px, -160px); }
  100% { transform: translate(-140px, -160px); }
}
@keyframes mphMouseDown {
  0%   { transform: translate(-140px, -160px); }
  60%  { transform: translate(-140px, 40px); }
  100% { transform: translate(-140px, 30px); }
}

@keyframes mphMouseMoveCircle {
  0%   { transform: translate(-140px, 30px); }
  30%  { transform: translate(-400px, 90px); }
  34%  { transform: translate(-390px, 90px); }
  60%  { transform: translate(190px, 90px); }
  64%  { transform: translate(180px, 90px); }
  80%  { transform: translate(50px, 90px); }
  84%  { transform: translate(40px, 90px); }
  100% { transform: translate(60px, 90px); }
}

@keyframes mphCirclePerspective {
  0%   { transform: none; }
  30%  { transform: rotate3d(0, 1, 0, 60deg); }
  34%  { transform: rotate3d(0, 1, 0, 60deg); }
  40%  { transform: none; }
  80%  { transform: rotate3d(1, 0, 0, 60deg); }
  84%  { transform: rotate3d(1, 0, 0, 60deg); }
  90%  { transform: none; opacity: 1; }
  100% { transform: scale(3); opacity: 0; }
}

@keyframes mphMouseCircleClick {
  0%   { transform: translate(60px, 90px); }
  20%  { transform: translate(-130px, -10px); }
  50%  { transform: translate(-130px, -10px); }
  70%  { transform: translate(90px, -100px); }
  100% { transform: translate(90px, -100px); }
}
@keyframes mphCursorClick {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
@keyframes mphCursorDrag {
  from { transform: scale(1); }
  to   { transform: scale(0.98); }
}
@keyframes mphCursorDragStop {
  to { transform: scale(1); }
}

@keyframes mphArrowRight {
  0%{transform:translateX(-60px);}30%{transform:translateX(20px);}70%{transform:translateX(-10px);}100%{transform:translateX(-3px);}
}
@keyframes mphArrowDown {
  0%{transform:translateY(-60px);}30%{transform:translateY(30px);}70%{transform:translateY(-3px);}100%{transform:translateY(3px);}
}
@keyframes mphArrowUp {
  0%{transform:translateY(60px);}30%{transform:translateY(-20px);}70%{transform:translateY(10px);}100%{transform:translateY(-3px);}
}
@keyframes mphArrowLeft {
  0%{transform:translateX(60px);}30%{transform:translateX(-20px);}70%{transform:translateX(10px);}100%{transform:translateX(-3px);}
}

/* Bewegungsreduktion respektieren: Overlay nicht zeigen.
   (Das JS unterdrueckt es zusaetzlich, das hier ist die zweite Sicherung.) */
@media (prefers-reduced-motion: reduce) {
  .mph-overlay { display: none !important; }
}