/*!
 * FERNER · MATILDE TRANSIT v2.0.0
 * Transparenter, additiver Transit-Layer. Keine Würfel- oder Seitenlogik wird verändert.
 */

:root {
  --fmt2-ink: 6, 10, 13;
  --fmt2-glass: 170, 211, 220;
  --fmt2-line: 190, 225, 231;
  --fmt2-warm: 233, 230, 218;
  --fmt2-duration: 6200ms;
  --fmt2-progress: 0;
}

#fmt2-root {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  overflow: hidden;
  isolation: isolate;
  contain: strict;
  pointer-events: none;
  opacity: 0;
  color-scheme: dark;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

#fmt2-root,
#fmt2-root * {
  box-sizing: border-box;
}

#fmt2-root.fmt2-active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.fmt2-canvas,
.fmt2-ambient,
.fmt2-fallback,
.fmt2-final {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fmt2-canvas {
  z-index: 2;
  display: block;
  opacity: 1;
  transform: translateZ(0);
  image-rendering: auto;
}

.fmt2-ambient {
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0) 0 25%, rgba(var(--fmt2-ink),.015) 56%, rgba(var(--fmt2-ink),.12) 100%),
    linear-gradient(180deg, rgba(255,255,255,.006), rgba(var(--fmt2-ink),.035));
  opacity: 0;
  animation: fmt2Ambient var(--fmt2-duration) linear both;
  will-change: opacity;
}

.fmt2-final {
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--fmt2-warm),.98) 0 24%, rgba(219,225,222,.96) 58%, rgba(20,25,27,.98) 145%);
}

.fmt2-fallback {
  z-index: 2;
  display: none;
  perspective: 900px;
  background: radial-gradient(circle at 50% 50%, transparent 0 20%, rgba(var(--fmt2-ink),.08) 75%, rgba(var(--fmt2-ink),.28));
}

#fmt2-root.fmt2-use-fallback .fmt2-canvas {
  display: none;
}

#fmt2-root.fmt2-use-fallback .fmt2-fallback {
  display: block;
}

.fmt2-fallback-tunnel,
.fmt2-fallback-gate {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(88vw, 1280px);
  height: min(76vh, 820px);
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}

.fmt2-fallback-tunnel i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(var(--fmt2-line),.16);
  border-radius: clamp(14px, 2.2vw, 34px);
  box-shadow: inset 0 0 20px rgba(var(--fmt2-glass),.02), 0 0 18px rgba(var(--fmt2-glass),.025);
  transform: translate(-50%, -50%) scale(.08);
  opacity: 0;
  animation: fmt2FallbackRing var(--fmt2-duration) cubic-bezier(.18,.65,.2,1) both;
}

.fmt2-fallback-tunnel i:nth-child(1) { animation-delay: calc(var(--fmt2-duration) * -.00); }
.fmt2-fallback-tunnel i:nth-child(2) { animation-delay: calc(var(--fmt2-duration) * -.07); }
.fmt2-fallback-tunnel i:nth-child(3) { animation-delay: calc(var(--fmt2-duration) * -.14); }
.fmt2-fallback-tunnel i:nth-child(4) { animation-delay: calc(var(--fmt2-duration) * -.21); }
.fmt2-fallback-tunnel i:nth-child(5) { animation-delay: calc(var(--fmt2-duration) * -.28); }
.fmt2-fallback-tunnel i:nth-child(6) { animation-delay: calc(var(--fmt2-duration) * -.35); }
.fmt2-fallback-tunnel i:nth-child(7) { animation-delay: calc(var(--fmt2-duration) * -.42); }
.fmt2-fallback-tunnel i:nth-child(8) { animation-delay: calc(var(--fmt2-duration) * -.49); }

.fmt2-fallback-gate {
  width: min(86vw, 1160px);
  height: min(72vh, 760px);
  transform: translate(-50%, -50%) scale(.05);
  opacity: 0;
  border: 1px solid rgba(var(--fmt2-line),.32);
  border-radius: clamp(16px, 2.5vw, 36px);
  overflow: hidden;
  animation: fmt2FallbackGate var(--fmt2-duration) cubic-bezier(.2,.66,.24,1) both;
}

.fmt2-fallback-gate b {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.2%;
  display: block;
  border: 1px solid rgba(var(--fmt2-line),.24);
  background:
    linear-gradient(112deg, rgba(255,255,255,.10), rgba(255,255,255,.015) 34%, rgba(var(--fmt2-glass),.06) 64%, rgba(var(--fmt2-ink),.26)),
    rgba(7,13,16,.28);
  -webkit-backdrop-filter: blur(7px) saturate(1.04);
  backdrop-filter: blur(7px) saturate(1.04);
  animation-duration: var(--fmt2-duration);
  animation-timing-function: cubic-bezier(.16,.72,.2,1);
  animation-fill-mode: both;
}

.fmt2-gate-left {
  left: 0;
  transform-origin: right center;
  animation-name: fmt2GateLeft;
}

.fmt2-gate-right {
  right: 0;
  transform-origin: left center;
  animation-name: fmt2GateRight;
}

.fmt2-skip {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 8;
  display: none;
  appearance: none;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.22);
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,.66);
  font: 500 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
  cursor: pointer;
}

#fmt2-root.fmt2-show-skip .fmt2-skip {
  display: block;
}

.fmt2-skip:focus-visible {
  outline: 1px solid rgba(255,255,255,.72);
  outline-offset: 6px;
}

html.fmt2-lock,
html.fmt2-lock body,
body.fmt2-lock {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

@keyframes fmt2Ambient {
  0%, 3% { opacity: 0; }
  17% { opacity: .18; }
  52% { opacity: .48; }
  84% { opacity: .72; }
  96%, 100% { opacity: 1; }
}

@keyframes fmt2FallbackRing {
  0%, 4% { transform: translate(-50%,-50%) scale(.07); opacity: 0; }
  16% { opacity: .18; }
  68% { opacity: .30; }
  88% { transform: translate(-50%,-50%) scale(1.34); opacity: .12; }
  100% { transform: translate(-50%,-50%) scale(2.1); opacity: 0; }
}

@keyframes fmt2FallbackGate {
  0%, 56% { transform: translate(-50%,-50%) scale(.04); opacity: 0; }
  66% { opacity: .34; }
  90% { transform: translate(-50%,-50%) scale(.82); opacity: .74; }
  100% { transform: translate(-50%,-50%) scale(1.25); opacity: 1; }
}

@keyframes fmt2GateLeft {
  0%, 77% { transform: translateX(0); }
  94%, 100% { transform: translateX(-96%); }
}

@keyframes fmt2GateRight {
  0%, 77% { transform: translateX(0); }
  94%, 100% { transform: translateX(96%); }
}

#fmt2-root.fmt2-reduced .fmt2-canvas,
#fmt2-root.fmt2-reduced .fmt2-fallback {
  display: none;
}

#fmt2-root.fmt2-reduced .fmt2-ambient {
  opacity: 1;
  animation: fmt2ReducedAmbient var(--fmt2-duration) ease both;
}

#fmt2-root.fmt2-reduced .fmt2-final {
  animation: fmt2ReducedFinal var(--fmt2-duration) ease both;
}

@keyframes fmt2ReducedAmbient {
  0% { opacity: 0; backdrop-filter: blur(0); }
  65% { opacity: .35; backdrop-filter: blur(2px); }
  100% { opacity: .72; backdrop-filter: blur(5px); }
}

@keyframes fmt2ReducedFinal {
  0%, 56% { opacity: 0; }
  100% { opacity: 1; }
}

@media (max-width: 760px) {
  .fmt2-fallback-tunnel,
  .fmt2-fallback-gate {
    width: 90vw;
    height: 68vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fmt2-skip { transition: none; }
}