/* ── Home page — centered logo with interactive gold foil ───────────────── */

body.home {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: #36251d;
  overflow: hidden;
}

.stage {
  width: 100%;
  display: grid;
  place-items: center;
}

/* The foil element is the logo sized up; both layers are masked to its shape.
   No 3D tilt — only the reflection (gradient + sheen) moves. */
.foil {
  --mx: 50%;             /* light position, driven by JS */
  --my: 50%;
  position: relative;
  width: min(58vw, 340px);
  aspect-ratio: 116 / 47;            /* logo.svg intrinsic ratio */
}

.foil__layer {
  position: absolute;
  inset: 0;
  -webkit-mask: url('../icons/logo.svg') no-repeat center / contain;
  mask: url('../icons/logo.svg') no-repeat center / contain;
}

/* Base metallic gold: a diagonal band that shifts with the pointer. */
.foil__gold {
  background:
    linear-gradient(
      115deg,
      var(--gold-5) 0%,
      var(--gold-4) 18%,
      var(--gold-1) 33%,
      var(--gold-2) 48%,
      var(--gold-3) 60%,
      var(--gold-4) 74%,
      var(--gold-5) 100%
    );
  background-size: 250% 250%;
  background-position: var(--mx) var(--my);
}

/* Specular highlight that tracks the pointer for the "catching light" effect. */
.foil__sheen {
  background:
    radial-gradient(
      circle at var(--mx) var(--my),
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.35) 12%,
      rgba(255, 255, 255, 0) 38%
    );
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* iOS motion-permission affordance */
.motion-cta {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  color: var(--brand);
  font: inherit;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
}

/* Looping sheen sweep when there is no pointer/motion (and a base for mobile). */
@keyframes foil-sweep {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body.home.is-auto .foil__gold {
  animation: foil-sweep 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .foil { transition: none; transform: none !important; }
  .foil__gold { animation: none !important; background-position: 50% 50% !important; }
  .foil__sheen { opacity: 0.5; }
}