/* Shiny / Tilt Card — Pokemon-Holo-Style für Signature Dishes
   ---------------------------------------------------------------
   Anwendung: füge die Klasse "shiny-card" zu einem Element hinzu.
   JS (shiny-card.js) setzt --mx/--my (0..1) bei mousemove und
   --rx/--ry (Grad) für den 3D-Tilt.

   Mobile / kein Hover: dezenter Auto-Shimmer ohne JS.
*/

@property --mx { syntax: '<number>'; initial-value: 0.5; inherits: false; }
@property --my { syntax: '<number>'; initial-value: 0.5; inherits: false; }
@property --rx { syntax: '<angle>';  initial-value: 0deg; inherits: false; }
@property --ry { syntax: '<angle>';  initial-value: 0deg; inherits: false; }
@property --shine-opacity { syntax: '<number>'; initial-value: 0; inherits: false; }

.shiny-card {
  --mx: 0.5;
  --my: 0.5;
  --rx: 0deg;
  --ry: 0deg;
  --shine-opacity: 0;

  position: relative;
  overflow: hidden;
  isolation: isolate;                    /* eigene Stacking-Context für blend-modes */
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  will-change: transform;
}

/* Override für die bestehende .card-Hover-Translation auf /index, damit der Tilt
   nicht mit dem translateY der Standard-Karte kollidiert. */
.card.shiny-card:hover { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); }

/* Schimmernde Randzone — leichter feuriger Glow, immer sichtbar */
.shiny-card {
  box-shadow:
    0 0 0 1px rgba(234, 88, 12, .35) inset,
    0 8px 24px -8px rgba(234, 88, 12, .25),
    0 2px 8px rgba(0, 0, 0, .5);
}

.shiny-card:hover {
  box-shadow:
    0 0 0 1px rgba(251, 146, 60, .6) inset,
    0 16px 36px -8px rgba(234, 88, 12, .45),
    0 4px 12px rgba(0, 0, 0, .6);
}

/* Holo-Gradient-Layer — der bunte Schimmer */
.shiny-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    repeating-linear-gradient(
      calc(var(--mx) * 360deg),
      hsla(0,   90%, 65%, .35) 0%,
      hsla(45,  95%, 60%, .35) 10%,
      hsla(120, 80%, 60%, .35) 20%,
      hsla(180, 90%, 60%, .35) 30%,
      hsla(240, 90%, 65%, .35) 40%,
      hsla(300, 90%, 65%, .35) 50%,
      hsla(0,   90%, 65%, .35) 60%
    );
  background-size: 200% 200%;
  background-position:
    calc((1 - var(--mx)) * 100%)
    calc((1 - var(--my)) * 100%);
  mix-blend-mode: color-dodge;
  opacity: var(--shine-opacity);
  transition: opacity .25s ease;
}

/* Glare — heller Highlight, der dem Cursor folgt */
.shiny-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(
      circle at calc(var(--mx) * 100%) calc(var(--my) * 100%),
      rgba(255, 255, 255, .45) 0%,
      rgba(255, 255, 255, .15) 20%,
      transparent 50%
    );
  mix-blend-mode: overlay;
  opacity: var(--shine-opacity);
  transition: opacity .25s ease;
}

.shiny-card:hover { --shine-opacity: 1; }

/* "Signature"-Eckbadge: kleines glitzerndes Sigel rechts oben.
   In .shiny-card kann es als <span class="shiny-badge">…</span> stehen. */
.shiny-badge {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fed7aa;
  background: linear-gradient(135deg, rgba(124, 45, 18, .9), rgba(194, 65, 12, .9));
  border: 1px solid rgba(251, 146, 60, .6);
  backdrop-filter: blur(4px);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* Restaurant-Stempel unten links für Grid-Karten */
.shiny-restaurant-stamp {
  position: absolute;
  bottom: .5rem;
  left: .5rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: calc(100% - 1rem);
  padding: .2rem .5rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255,255,255,.95);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shiny-restaurant-stamp img {
  width: 14px; height: 14px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ── Mobile / Touch-Geräte: Auto-Shimmer ohne JS ────────────────────────── */
@media (hover: none) {
  .shiny-card {
    --shine-opacity: .75;
    animation: shiny-shimmer 6s ease-in-out infinite;
  }
  @keyframes shiny-shimmer {
    0%, 100% { --mx: 0.15; --my: 0.30; }
    25%      { --mx: 0.75; --my: 0.20; }
    50%      { --mx: 0.85; --my: 0.80; }
    75%      { --mx: 0.20; --my: 0.75; }
  }
}

/* Browser ohne @property fallback: --mx/--my springen, animation bleibt aus.
   Glare bleibt aber sichtbar weil opacity gesetzt ist. */
@supports not (background: paint(something)) {
  /* defensiver Fallback — niemand nutzt das, aber falls @property fehlt
     bleibt zumindest die statische Glanzschicht da */
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .shiny-card { transition: none; animation: none; }
  .shiny-card::before, .shiny-card::after { transition: none; }
}