/* ================================================================
   RIGL v1.3 — Visual Upgrade Layer
   Layered on top of style.css (does not replace anything).
   Sections:
     1. Hero — WebGL canvas + reflection + glass cards v2
     2. Letter-Mask-Reveal Headlines
     3. Custom Cursor (desktop only)
     4. Card-Tilt 3D hover refinements
     5. Magnetic-Button polish + ripple
     6. Nav compact + stronger blur
     7. Reduced-motion fallbacks
   ================================================================ */

/* ─────────────────────────────────────────────────────────────── */
/* 1. HERO — WebGL canvas + reflection + glass cards v2            */
/* ─────────────────────────────────────────────────────────────── */

/* Replace old #hero-particles role with a single WebGL canvas */
#hero-webgl {
  position: absolute;
  inset: 0;
  z-index: 1;            /* Below vignette (z=2), above poly-bg (z=0) */
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

/* Quiet down legacy layers when v1.3 active */
#hero[data-v13="1"] .hero-bg-video,
#hero[data-v13="1"] #hero-particles,
#hero[data-v13="1"] .hero-craft-deco { display: none !important; }

/* Tone vignette: less aggressive now that we have a real shader floor */
#hero[data-v13="1"] .hero-vignette {
  background:
    radial-gradient(ellipse 78% 78% at 50% 56%, transparent 0%, rgba(26,26,26,0.30) 60%, rgba(26,26,26,0.85) 100%),
    linear-gradient(to bottom, rgba(26,26,26,0.60) 0%, transparent 18%, transparent 72%, rgba(26,26,26,0.96) 100%),
    linear-gradient(to right,  rgba(26,26,26,0.50) 0%, transparent 22%, transparent 78%, rgba(26,26,26,0.50) 100%);
}

/* ── Phone floor-reflection ──
   Implementation: a duplicate of .iphone-html-wrap is mirrored via
   transform: scaleY(-1) and faded with a mask. JS clones / syncs transform. */
.phone-reflection {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 50%;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Mask: top → fully opaque, bottom → 0 */
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0.32) 0%,
    rgba(0,0,0,0.16) 28%,
    rgba(0,0,0,0.06) 56%,
    rgba(0,0,0,0)    84%);
          mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0.32) 0%,
    rgba(0,0,0,0.16) 28%,
    rgba(0,0,0,0.06) 56%,
    rgba(0,0,0,0)    84%);
  filter: blur(0.6px);
  transform-origin: 50% 0;
}
.phone-reflection .iphone-mock {
  transform: scaleY(-1);
  transform-origin: 50% 0%;
}
/* A horizon-line / floor-meet gradient under the phone, on top of WebGL */
.hero-iphone-col::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 28%;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 100% at 50% 100%,
      rgba(160,120,48,0.20) 0%,
      rgba(61,90,128,0.10) 35%,
      transparent 65%);
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* ── Floating Cards — Glassmorphism v2 ── */
#hero[data-v13="1"] .hero-float-card {
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.07) 0%,
      rgba(255,255,255,0.02) 100%),
    rgba(18,18,18,0.42);
  border: 1px solid rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.45),
    0 2px 6px  rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 0 0 1px rgba(160,120,48,0.10);
  border-radius: 12px;
  padding: 12px 16px;
  /* Sine-easing float (running) */
  animation: hero-float-bob 7s ease-in-out infinite;
}
#hero[data-v13="1"] .hero-float-card.fc-2 { animation-delay: -2.3s; animation-duration: 8s; }
#hero[data-v13="1"] .hero-float-card.fc-3 { animation-delay: -4.6s; animation-duration: 9s; }

@keyframes hero-float-bob {
  0%, 100% { transform: translateY(0)    scale(1); }
  50%      { transform: translateY(-8px) scale(1.012); }
}
/* Stop the bob when entry transition is mid-flight */
#hero[data-v13="1"] .hero-float-card:not(.fc-visible) { animation: none; }

/* Subtle hover lift on float-cards (even though pointer-events:none by default,
   we re-enable so users can hover them for inspection) */
#hero[data-v13="1"] .hero-float-card {
  pointer-events: auto;
  transition:
    opacity 0.55s cubic-bezier(.22,1,.36,1),
    transform 0.55s cubic-bezier(.22,1,.36,1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}
#hero[data-v13="1"] .hero-float-card:hover {
  border-color: rgba(160,120,48,0.35);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.55),
    0 4px 10px  rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 1px rgba(160,120,48,0.18),
    0 0 30px rgba(160,120,48,0.10);
}

/* ─────────────────────────────────────────────────────────────── */
/* 2. LETTER-MASK-REVEAL HEADLINES                                 */
/* ─────────────────────────────────────────────────────────────── */
/* JS wraps each character in `.v13-char > span`, sets --i index.
   Reveal triggered by adding `.v13-headline-revealed` to the heading.
   Uses @keyframes (not transitions) with per-char animation-delay
   via CSS var(--i) — more reliable than transition+timeout chains. */

.v13-char {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: inherit;
}
.v13-char > span {
  display: inline-block;
  /* Start hidden, but DON'T animate until headline gets .v13-headline-revealed */
  transform: translateY(110%) skewY(6deg);
  transform-origin: 0 100%;
  opacity: 0;
  will-change: transform, opacity;
}
.v13-headline-revealed .v13-char > span {
  animation: v13-char-in 0.85s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
@keyframes v13-char-in {
  0%   { transform: translateY(110%) skewY(6deg); opacity: 0; }
  100% { transform: translateY(0)    skewY(0);    opacity: 1; }
}
/* Legacy compat: instant reveal if just .v13-in is added */
.v13-char.v13-in > span {
  animation: v13-char-in 0.85s cubic-bezier(.22,1,.36,1) both;
}

/* ─────────────────────────────────────────────────────────────── */
/* 3. CUSTOM CURSOR (desktop only)                                 */
/* ─────────────────────────────────────────────────────────────── */
.v13-cursor-dot,
.v13-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, width, height, opacity;
  mix-blend-mode: difference;
}
.v13-cursor-dot {
  width: 6px;
  height: 6px;
  background: #E8D59A;
  transition: width 0.22s ease, height 0.22s ease, opacity 0.2s ease;
}
.v13-cursor-ring {
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(232,213,154,0.55);
  background: transparent;
  transition: width 0.32s cubic-bezier(.22,1,.36,1),
              height 0.32s cubic-bezier(.22,1,.36,1),
              border-color 0.32s ease,
              opacity 0.22s ease,
              background-color 0.32s ease;
}
.v13-cursor-ring.hover {
  width: 56px;
  height: 56px;
  border-color: rgba(232,213,154,0.85);
  background: rgba(232,213,154,0.06);
}
.v13-cursor-ring.click {
  width: 28px;
  height: 28px;
  background: rgba(232,213,154,0.16);
}
.v13-cursor-dot.hide,
.v13-cursor-ring.hide { opacity: 0; }

/* Hide cursor entirely on touch / coarse-pointer */
@media (pointer: coarse) {
  .v13-cursor-dot,
  .v13-cursor-ring { display: none !important; }
}
/* Don't hide native cursor — keep accessibility */

/* ─────────────────────────────────────────────────────────────── */
/* 4. CARD-TILT REFINEMENTS                                        */
/* ─────────────────────────────────────────────────────────────── */
/* Pre-3D-prep: every tilt-target gets perspective + smoother transitions */
.leistung-card,
.pkg-card,
.why-card,
.ki-tool-card,
.partner-card,
.story-stat-card,
.angebot-block,
.faq-item {
  transform-style: preserve-3d;
  transition: box-shadow 0.5s cubic-bezier(.22,1,.36,1),
              border-color 0.4s ease;
}
/* Soft glow halo on hover for cards */
@media (hover: hover) {
  .leistung-card:hover,
  .pkg-card:hover,
  .why-card:hover {
    box-shadow:
      0 24px 60px rgba(0,0,0,0.55),
      0 8px 20px rgba(0,0,0,0.35),
      0 0 0 1px rgba(160,120,48,0.22),
      0 0 60px rgba(160,120,48,0.08);
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* 5. MAGNETIC-BUTTON POLISH + RIPPLE                              */
/* ─────────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::after { /* shine sweep on hover */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 0%,
    transparent 30%,
    rgba(255,255,255,0.18) 50%,
    transparent 70%,
    transparent 100%);
  transform: translateX(-120%);
  transition: transform 0.7s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  z-index: 1;
}
.btn:hover::after { transform: translateX(120%); }

/* Press-state */
.btn:active { transform: scale(0.97) translateZ(0); transition: transform 0.1s ease; }

/* Ripple — added dynamically by JS */
.btn .v13-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,213,154,0.42) 0%, rgba(232,213,154,0) 70%);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.9;
  animation: v13-ripple 0.7s cubic-bezier(.22,1,.36,1) forwards;
  z-index: 0;
}
@keyframes v13-ripple {
  to { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────── */
/* 6. NAV COMPACT + STRONGER BLUR ON SCROLL                        */
/* ─────────────────────────────────────────────────────────────── */
/* `.nav-compact` is already toggled by main.js — we just style it harder */
nav#nav {
  transition: padding 0.4s cubic-bezier(.22,1,.36,1),
              backdrop-filter 0.4s ease,
              background-color 0.4s ease,
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}
nav#nav.nav-compact {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  background: rgba(20,20,20,0.78) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%);
          backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid rgba(160,120,48,0.18);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
nav#nav.nav-compact .logo,
nav#nav.nav-compact .nav-brand { transform: scale(0.92); transition: transform 0.4s cubic-bezier(.22,1,.36,1); transform-origin: left center; }

/* ─────────────────────────────────────────────────────────────── */
/* 7. REDUCED-MOTION FALLBACKS                                     */
/* ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-float-card { animation: none !important; }
  .v13-char > span { transform: none !important; opacity: 1 !important; }
  .btn::after      { display: none !important; }
  .phone-reflection{ display: none !important; }
}

/* Mobile / coarse-pointer: hide the phone reflection (too costly for the payoff) */
@media (max-width: 900px) {
  .phone-reflection { display: none !important; }
  .hero-iphone-col::after { opacity: 0.5; height: 18%; }
}

/* ─────────────────────────────────────────────────────────────── */
/* 8. HERO TEXT — slight reflow + accent line animation            */
/* ─────────────────────────────────────────────────────────────── */
#hero[data-v13="1"] .hero-accent-line {
  position: relative;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  animation: v13-accent-grow 1.4s cubic-bezier(.22,1,.36,1) 0.2s forwards;
}
@keyframes v13-accent-grow {
  to { width: 72px; }
}

/* Hero title — slight breathing room when characters mask-reveal */
#hero[data-v13="1"] .hero-title { will-change: transform; }