/* Alternative hero: logo + rotating "Portfolio of" ring badge.
   Loaded after style.css — reuses its color/font variables.
   This is the responsive (≤1080px) replacement for the drag-and-build hero
   in index.html — desktop keeps that one untouched, so the two sections
   are swapped purely by hiding/showing them here. */

.ring-hero-section {
  display: none;
  /* content-sized, not a full screen — less empty space is left above/below
     the logo than a 100svh, center-aligned box would leave */
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 4vh, 2.25rem) var(--gutter);
}

@media (max-width: 1080px) {
  .hero-section { display: none; }
  .ring-hero-section { display: flex; }
}

.ring-hero-frame {
  position: relative;
  width: min(72vw, 620px);
  aspect-ratio: 1 / 1;
}

/* Stacking order (back → front) creates the "over Zoe, under Luca" effect
   automatically: wherever an opaque letter pixel sits above the ring in this
   order, it visually covers it — no masking needed thanks to PNG alpha. */
.ring-word {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.ring-word-zoe { top: 50%; z-index: 1; }

.ring-badge {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.ring-badge-svg {
  width: 100%;
  height: 100%;
  animation: ring-spin 22s linear infinite;
  transform-origin: 50% 50%;
}

.ring-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: .04em;
  fill: var(--ink);
  text-transform: uppercase;
}

.ring-word-luca { top: 14%; z-index: 3; }

@keyframes ring-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ring-badge-svg { animation: none; }
}

@media (max-width: 640px) {
  .ring-hero-frame { width: min(88vw, 420px); }
  .ring-text { font-size: 11.5px; }
}