/* =====================================================================
   BoxInteraction -- independent, self-contained component.

   Visuals are a hand-drawn 12-frame flipbook (assets/box/BOX_001..012.png):
   001/002/005 = closed box mid-sway, 003/004 = closed box at rest,
   006 = anticipation, 007 = lids open (empty), 008-012 = HARO rising out.
   js/box-interaction.js swaps the single <img> src through these frames on
   a GSAP timeline; this file only sizes/crops/centers that image so the
   swap reads as one continuous animation instead of a jump cut.
   ===================================================================== */
.box-interaction {
  /* Figma's box is 540px. Bumped to 150% of the previous 486px (90% of
     Figma), desktop only. Absolutely centered inside .hero__visual-wrap's
     fixed-size footprint (see sections.css) so growing this doesn't move
     the title/tagline/CTA around it -- it just overflows outward from
     the same center point. */
  --box-width: 729px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 100px));
  width: var(--box-width);
  max-width: 78vw;
}

@media (max-width: 1024px) {
  .box-interaction {
    --box-width: 307px;
  }
}

@media (max-width: 599px) {
  .box-interaction {
    --box-width: 243px;
  }
}

.box-interaction__stage {
  display: block;
  width: 100%;
  cursor: pointer;
}

.box-interaction__stage:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 8px;
  border-radius: var(--radius-lg);
}

/* Every frame shares the same 1024x1024 canvas and registration, so a
   fixed crop window (centered, zoomed to the box+cat's common bounding
   box) keeps the subject the same size/position across every swap. */
.box-interaction__frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 690 / 638;
  overflow: hidden;
}

.box-interaction__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 148%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  display: block;
  pointer-events: none;
}

/* ---------- Hint (tagline + CLICK button) ---------- */
.hero__hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  transition: opacity var(--duration-ui) var(--ease-out);
}

.hero__hint.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.hero__hint-text {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-brand-title);
}

@media (max-width: 599px) {
  .hero__hint-text {
    font-size: 16px;
  }
}

/* ---------- Scroll indicator (revealed once HARO is out) ---------- */
.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  opacity: 0;
  transition: opacity var(--duration-ui) var(--ease-out);
}

.hero__scroll.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.hero__scroll-text {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
}

@media (max-width: 599px) {
  .hero__scroll-text {
    font-size: 13px;
  }
}