/* Broschi Digalytics – Baustein „Garagen als echte Reiter“ für start-interaktiv.html.
   Greift nur, wenn garagen.js die Wurzel [data-garages] mit .gar-ready markiert hat. Ohne Skript bleibt die Bühne,
   wie sie ist: alle Boxen untereinander, das offene Tor per clip-path eingerollt.
   Bewegung: Tor fährt hoch (transform, 350 ms), Licht fällt aus der Box auf den Boden (opacity), das alte Tor fährt
   schneller herunter (250 ms), Hover hebt ein geschlossenes Tor einen Spalt (150 ms), Tastaturfokus sofort.
   Schichten in der Garage: Innenlicht (::after) < Tor < Rollkasten (::before) < Nummer, Schild. */

:root { --gar-ease: cubic-bezier(0.16, 1, 0.3, 1); --gar-peek: 14px; }

/* ---------- Garage: Innenraum, Licht, Tor, Rollkasten ---------- */
.gar-ready .garage { isolation: isolate; background: linear-gradient(180deg, #0A2233 0%, #07141F 100%); }

/* Tor: endet auf dem Schild (--gar-sill misst garagen.js), damit seine Unterkante und ein Spalt sichtbar werden */
.gar-ready .garage .door {
  z-index: 1; bottom: var(--gar-sill, 0px); clip-path: none;
  transform: translateY(0);
  transition: transform 130ms var(--gar-ease), filter 120ms linear;
}
.gar-ready .garage .door::after { /* Bodenleiste des Tors */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: #1A2D4C; border-top: 1px solid var(--line-strong);
}
.gar-ready .garage.open .door { clip-path: none; transform: translateY(-100%); transition-duration: 350ms; }
.gar-ready .garage.gar-shut .door { transition-duration: 250ms; }

/* Innenlicht: von der Decke und als Lichtkante am Boden; liegt hinter dem Tor und wird beim Hochfahren frei */
.gar-ready .garage::after {
  content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0; bottom: var(--gar-sill, 0px);
  background:
    linear-gradient(0deg, rgba(0, 212, 255, 0.3), rgba(0, 212, 255, 0) 24px),
    linear-gradient(180deg, rgba(0, 212, 255, 0.24), rgba(0, 212, 255, 0) 90%);
  opacity: 0; pointer-events: none;
  transition: opacity 180ms var(--gar-ease);
}
.gar-ready .garage.open::after { top: 0; bottom: var(--gar-sill, 0px); opacity: 1; transition: opacity 350ms var(--gar-ease) 60ms; }

/* Rollkasten: erscheint, sobald das Tor hineinfährt, und geht beim Schließen am Ende weg */
.gar-ready .garage::before {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 22px;
  background: linear-gradient(180deg, #2A4466 0 6px, #1C3150 6px 11px, #2A4466 11px 16px, #13243B 16px 22px);
  border-bottom: 2px solid var(--cyan);
  opacity: 0; pointer-events: none;
  transition: opacity 100ms linear 150ms;
}
.gar-ready .garage.open::before { opacity: 1; transition: opacity 120ms var(--gar-ease) 0ms; }

/* Nummer rückt unter den Rollkasten (per transform statt top) */
.gar-ready .garage .no { z-index: 3; transition: transform 250ms var(--gar-ease); }
.gar-ready .garage.open .no { top: 10px; transform: translateY(20px); transition-duration: 350ms; }
.gar-ready .garage .plate { z-index: 3; }

/* Vorschau: geschlossenes Tor hebt sich einen Spalt, darunter das Licht. Nur mit echter Maus;
   beim Tastaturfokus steht der Spalt sofort da (kein Anheben bei jedem Pfeildruck) */
@media (hover: hover) and (pointer: fine) {
  .gar-ready .garage:not(.open):hover .door { transform: translateY(calc(-1 * var(--gar-peek))); transition-duration: 150ms; }
  .gar-ready .garage:not(.open):hover::after { opacity: 0.75; transition-duration: 150ms; }
}
.gar-ready .garage:not(.open):focus-visible .door { transform: translateY(calc(-1 * var(--gar-peek))); transition-duration: 0ms; }
.gar-ready .garage:not(.open):focus-visible::after { opacity: 0.75; transition-duration: 0ms; }
.gar-ready .garage:active .door { filter: brightness(1.15); }

/* Beim Einrichten und beim Laden mit #box-…: Tore stehen sofort richtig */
.gar-instant .garage .door, .gar-instant .garage::before, .gar-instant .garage::after,
.gar-instant .garage .no { transition: none !important; }

/* ---------- Boden: nur die offene Box ist sichtbar ---------- */
/* Die Bodenkante sitzt fest an der Reiterleiste (Hintergrund, scrollt nicht mit), damit sie beim Inhaltswechsel
   stehen bleibt; das Panel rückt 2 px darunter, seine eigene Kante ist durchsichtig. --gar-ring = Luft für den Fokusring. */
.gar-ready .gar-strip {
  --gar-ring: 0px;
  padding-bottom: 2px; margin-bottom: -2px;
  background: linear-gradient(var(--cyan), var(--cyan)) no-repeat;
  background-size: calc(100% - 2 * var(--gar-ring)) 2px;
  background-position: var(--gar-ring) 100%;
}
.gar-ready [data-garage-panel] { position: relative; z-index: 0; border-top-color: transparent; }
.gar-ready [data-garage-panel][hidden] { display: none; }
.gar-ready [data-garage-panel] + [data-garage-panel] { margin-top: 0; }
.gar-host { position: relative; }
.gar-ready [data-garage-panel].gar-leaving { position: absolute; left: 0; right: 0; margin: 0; pointer-events: none; }

/* Lichtkegel vor der offenen Box (--gar-x, --gar-w setzt garagen.js); keine Halos, nur eine Fläche mit Verlauf */
.gar-ready [data-garage-panel]::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 300px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.12), rgba(0, 212, 255, 0) 100%);
  clip-path: polygon(var(--gar-x, 0px) 0, calc(var(--gar-x, 0px) + var(--gar-w, 0px)) 0, calc(var(--gar-x, 0px) + var(--gar-w, 0px) + 72px) 100%, calc(var(--gar-x, 0px) - 72px) 100%);
  transform-origin: 50% 0;
  animation: gar-spill 520ms var(--gar-ease) 140ms both;
}
@keyframes gar-spill { from { opacity: 0; transform: scaleY(0.35); } }

/* ---------- Inhaltswechsel per View Transition: Inhalt fährt aus der Box nach vorn ---------- */
html.gar-vt::view-transition { pointer-events: none; }
html.gar-vt::view-transition-old(root), html.gar-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.gar-vt [data-garage-panel]:not([hidden]) { view-transition-name: gar-floor; }
html.gar-vt::view-transition-group(gar-floor) { animation-duration: 300ms; animation-timing-function: var(--gar-ease); }
html.gar-vt::view-transition-old(gar-floor) { animation: gar-vt-out 180ms var(--gar-ease) both; mix-blend-mode: normal; }
html.gar-vt::view-transition-new(gar-floor) { animation: gar-vt-in 300ms var(--gar-ease) 40ms both; mix-blend-mode: normal; transform-origin: var(--gar-ox, 50%) 0; }
@keyframes gar-vt-out { to { opacity: 0; transform: scale(0.985); } }
@keyframes gar-vt-in { from { opacity: 0; transform: translateY(-12px) scale(0.98); } }

/* ---------- Handy: Reiterleiste scrollt waagerecht; 4 px Luft rundum, damit sie den Fokusring nicht abschneidet ---------- */
@media (max-width: 980px) {
  .gar-ready .gar-strip { --gar-ring: 4px; padding: 4px 4px 10px; margin: -4px -4px -2px; scroll-padding-inline: 4px; }
  .gar-ready .garage:focus-visible { outline-offset: 1px; }
}

/* ---------- Reduzierte Bewegung: Tore wechseln sofort, nur kurze Überblendungen ---------- */
@media (prefers-reduced-motion: reduce) {
  .gar-ready .garage .door, .gar-ready .garage::before, .gar-ready .garage::after,
  .gar-ready .garage .no { transition: none; }
  .gar-ready .garage .door { transition: filter 120ms linear; }
  .gar-ready .garage:not(.open):hover .door, .gar-ready .garage:not(.open):focus-visible .door { transform: none; filter: brightness(1.3); }
  .gar-ready .garage:not(.open):hover::after, .gar-ready .garage:not(.open):focus-visible::after { opacity: 0; }
  .gar-ready [data-garage-panel]::before { animation: gar-spill-fade 200ms linear both; }
}
@keyframes gar-spill-fade { from { opacity: 0; } }