/* LABEL — progressive enhancements
   A) Cross-document view transitions (CSS only)
   B) Gilded cursor spotlight over hero areas
   C) Smart PWA install prompt card + iOS instruction sheet
   Pairs with assets/js/enhance.js. Safe to load on every page. */

/* ============================================================
   A) CROSS-DOCUMENT VIEW TRANSITIONS
   Refined crossfade with a subtle upward drift. Browsers without
   support ignore all of this silently.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  @keyframes enhance-vt-out {
    to {
      opacity: 0;
      transform: translateY(-10px);
    }
  }

  @keyframes enhance-vt-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  ::view-transition-old(root) {
    animation: enhance-vt-out 280ms ease-out both;
  }

  ::view-transition-new(root) {
    animation: enhance-vt-in 280ms ease-out both;
  }
}

/* ============================================================
   B) GILDED CURSOR SPOTLIGHT
   A soft radial gold light following the pointer over dark heroes.
   The .enhance-spot div is injected by enhance.js into each
   .hero / .page-hero; JS only writes --spot-x / --spot-y.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .enhance-spot-host {
    position: relative;
  }

  .enhance-spot {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
      circle 240px at var(--spot-x, 50%) var(--spot-y, 40%),
      rgba(201, 162, 39, 0.16),
      transparent 70%
    );
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.6s var(--ease, ease-out);
    will-change: opacity;
  }

  .enhance-spot.on {
    opacity: 1;
  }
}

/* Under reduced motion the JS never injects the spotlight, but if it
   somehow exists, keep it invisible. */
@media (prefers-reduced-motion: reduce) {
  .enhance-spot {
    display: none !important;
  }
}

/* ============================================================
   C) SMART PWA INSTALL PROMPT
   Slide-up corner-cut card, noir + gold, safe-area aware,
   sits above the mobile tab bar (tabbar z-index: 200, toast: 300).
   ============================================================ */
.enhance-install {
  position: fixed;
  left: 50%;
  bottom: calc(1.1rem + env(safe-area-inset-bottom));
  z-index: 290;
  width: min(420px, calc(100vw - 2rem));
  background: var(--espresso, #1C1712);
  border: 1px solid rgba(201, 162, 39, 0.55);
  clip-path: var(--cut, none);
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, calc(100% + 3rem));
  opacity: 0;
  transition: transform 0.55s var(--ease, ease-out), opacity 0.45s ease-out;
  outline: none;
}
.enhance-install.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.enhance-install-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.enhance-install-icon {
  width: 46px;
  height: 46px;
  flex: none;
  object-fit: contain;
  border: 1px solid rgba(201, 162, 39, 0.3);
  background: var(--noir, #0E0C09);
  padding: 5px;
}
.enhance-install-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 420;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--ivory, #F5EFE4);
  margin: 0 0 0.2rem;
}
.enhance-install-benefit {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--ash, #9A938A);
}

.enhance-install-actions {
  display: flex;
  gap: 0.7rem;
  margin-top: 1rem;
}
.enhance-btn {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.68rem 1.1rem;
  flex: 1;
  border: 1px solid transparent;
  clip-path: var(--cut, none);
  transition: background 0.3s var(--ease, ease-out), color 0.3s var(--ease, ease-out), border-color 0.3s var(--ease, ease-out);
}
.enhance-btn.gold {
  background: var(--gold, #C9A227);
  color: var(--noir, #0E0C09);
}
.enhance-btn.gold:hover {
  background: var(--champagne, #E8D5A3);
}
.enhance-btn.ghost {
  background: transparent;
  color: var(--champagne, #E8D5A3);
  border-color: rgba(245, 239, 228, 0.25);
}
.enhance-btn.ghost:hover {
  border-color: rgba(201, 162, 39, 0.6);
  color: var(--gold, #C9A227);
}
.enhance-btn:focus-visible {
  outline: 2px solid var(--gold, #C9A227);
  outline-offset: 2px;
}

/* On phones, clear the bottom tab bar (72px) + its safe-area padding. */
@media (max-width: 760px) {
  .enhance-install {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

/* ---------- iOS instruction bottom sheet ---------- */
.enhance-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 398;
  background: rgba(14, 12, 9, 0.6);
  opacity: 0;
  transition: opacity 0.35s ease-out;
}
.enhance-sheet-backdrop.show {
  opacity: 1;
}

.enhance-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 399;
  width: min(480px, 100vw);
  background: var(--espresso, #1C1712);
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-bottom: none;
  padding: 1.3rem 1.4rem calc(1.6rem + env(safe-area-inset-bottom));
  transform: translate(-50%, 105%);
  transition: transform 0.5s var(--ease, ease-out);
  outline: none;
}
.enhance-sheet.show {
  transform: translate(-50%, 0);
}

.enhance-sheet-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 420;
  font-size: 1.15rem;
  color: var(--ivory, #F5EFE4);
  margin: 0 2.2rem 1rem 0;
}
.enhance-sheet-step {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0;
  border-top: 1px solid rgba(201, 162, 39, 0.16);
  color: var(--champagne, #E8D5A3);
  font-size: 0.95rem;
  line-height: 1.4;
}
.enhance-sheet-step svg {
  width: 30px;
  height: 30px;
  flex: none;
  stroke: var(--gold, #C9A227);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.enhance-sheet-step .num {
  flex: none;
  width: 1.5rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.1rem;
  color: var(--gold, #C9A227);
}

.enhance-sheet-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(245, 239, 228, 0.25);
  border-radius: 50%;
  color: var(--champagne, #E8D5A3);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.3s var(--ease, ease-out), color 0.3s var(--ease, ease-out);
}
.enhance-sheet-close:hover {
  border-color: var(--gold, #C9A227);
  color: var(--gold, #C9A227);
}
.enhance-sheet-close:focus-visible {
  outline: 2px solid var(--gold, #C9A227);
  outline-offset: 2px;
}

/* Reduced motion: no slide/fade choreography — appear in place. */
@media (prefers-reduced-motion: reduce) {
  .enhance-install,
  .enhance-sheet,
  .enhance-sheet-backdrop {
    transition: none;
  }
}