/* =========================================================================
   app.css — Act 1 landing composition
   Background scene is a single pixel-art PNG; this file positions overlays
   (BrandMark, orbiting boards, portal kanji, Koro, CTA, easter egg) on top.
   ========================================================================= */

.app-root {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 600px;
  overflow: hidden;
  background-color: var(--color-bg-deep);
  background-image: url("/assets/environments/Hamster_Hustle_Landing_Page_Background.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Cinematic vignette — darkens edges, focuses eye toward the center */
.app-root::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 80% at 50% 50%,
    transparent 40%,
    rgba(0, 0, 0, 0.55) 75%,
    rgba(0, 0, 0, 0.85) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Uniform-scaling stage for Act 1 overlays (jury Pass 12). On desktop
   the stage fills the viewport (inset:0) — children's percentage
   positioning maps to viewport, behaviour identical to pre-stage code.
   At small landscape, the stage becomes a fixed 1280x720 logical canvas
   scaled via transform so the composition (BrandMark, Koro, CTAs, wheel
   chrome) shrinks together to fit the short phone-landscape viewport
   without overlap. BackstoryModal and CopyrightMark sit outside the
   stage in the DOM and so are unaffected. */
.act1-stage {
  position: absolute;
  inset: 0;
}

@media (orientation: landscape) and (max-height: 500px) {
  /* Drop the min-height:600px so .app-root respects 100dvh on a
     393-tall viewport instead of forcing a 600px scrollable area. */
  .app-root {
    min-height: 0;
  }
  .act1-stage {
    --act1-scale: min(calc(100vw / 1280px), calc(100svh / 720px));
    inset: auto;
    width: 1280px;
    height: 720px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(var(--act1-scale));
    transform-origin: center center;
    /* Explicit compositor-layer hint (jury Pass 13) so Chrome doesn't
       JIT-decide layer promotion mid-animation — a known source of
       cross-browser divergence with transformed ancestors of animated
       descendants. */
    will-change: transform;
  }
  /* Dialog positioning for the scaled stage is handled in koro.css's
     landscape gate — switched from position:fixed to position:absolute
     so it lives in the 1280x720 stage coordinate space. */

  /* Lift CTA stack so scaled buttons clear the copyright mark below */
  .act1-cta-stack {
    bottom: 80px;
  }
}

/* =========================================================================
   Koro — anchored on the grassy area to the right of the portal
   PNG portal center is roughly at left:46%, top:50%. Koro stands at ~60%.
   ========================================================================= */
.act1-koro-slot {
  position: absolute;
  left: 58%;
  top: 56%;
  z-index: var(--z-ui);
  opacity: 0;
  animation: fadeSlideUp 0.8s ease-out 0.6s forwards;
}

/* Landing-page only: purple energy aura outside the persistent gold glow.
   Evokes the acorn transferring power to Bob. Scoped to act1-koro-slot
   so it never appears in the dojo or quiz. */
.act1-koro-slot .koro-sprite.active {
  filter:
    drop-shadow(0 0 6px var(--color-gold))
    drop-shadow(0 0 18px rgba(160, 108, 213, 0.7))
    drop-shadow(0 0 36px rgba(160, 108, 213, 0.35));
  animation:
    koroBreath 2.5s ease-in-out infinite,
    act1PurpleAura 2.4s ease-in-out infinite;
}

@keyframes act1PurpleAura {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px var(--color-gold))
      drop-shadow(0 0 16px rgba(160, 108, 213, 0.65))
      drop-shadow(0 0 32px rgba(160, 108, 213, 0.3));
  }
  50% {
    filter:
      drop-shadow(0 0 10px var(--color-gold))
      drop-shadow(0 0 28px rgba(160, 108, 213, 0.9))
      drop-shadow(0 0 52px rgba(160, 108, 213, 0.5));
  }
}

/* Soft golden ground glow under Koro to anchor him to the grass */
.act1-koro-slot::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 320%;
  height: 100px;
  background: radial-gradient(
    ellipse,
    rgba(255, 209, 102, 0.18) 0%,
    rgba(255, 209, 102, 0.05) 50%,
    transparent 75%
  );
  pointer-events: none;
  z-index: -1;
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.7;
    transform: translateX(-50%) scaleX(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.05);
  }
}

/* =========================================================================
   Easter egg — hidden in the grass between Koro and the CTA
   ========================================================================= */
.easter-egg {
  position: absolute;
  z-index: var(--z-scene);
  cursor: pointer;
  transition: filter 300ms ease, opacity 300ms ease;
}

.easter-acorn {
  bottom: 14%;
  left: 47%;
  width: min(2.5vw, 22px);
  opacity: 0.35;
  filter: saturate(0.5) brightness(0.7);
}

.easter-acorn:hover {
  opacity: 1;
  filter: saturate(1) brightness(1) drop-shadow(0 0 10px rgba(230, 57, 70, 0.7));
}

/* =========================================================================
   CTA stack — bottom center, dual choice (Walk / Sit)
   ========================================================================= */
.act1-cta-stack {
  position: absolute;
  bottom: clamp(20px, 5vh, 56px);
  left: 45%;
  transform: translateX(-50%);
  z-index: var(--z-ui);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 22px);
  pointer-events: none;
}

.act1-cta-primary-wrap,
.act1-cta-secondary-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

/* Buttons themselves must always receive clicks */
.act1-cta,
.act1-cta-secondary {
  pointer-events: auto;
}

.act1-cta-primary-wrap {
  opacity: 0;
  animation: fadeSlideUp 0.8s ease-out 1s forwards;
}

.act1-cta-secondary-wrap {
  opacity: 0;
  animation: fadeSlideUp 0.8s ease-out 1.35s forwards;
}

.act1-cta {
  position: relative;
  min-height: 44px;
  padding: calc(var(--px-unit) * 3.5) calc(var(--px-unit) * 8);
  font-family: var(--font-display);
  font-size: clamp(12px, 1.6vw, 16px);
  line-height: 1;
  color: var(--color-pixel-cream);
  background: var(--color-meadow-green);
  border: none;
  cursor: pointer;
  letter-spacing: 1.5px;

  box-shadow:
    0 0 0 4px var(--color-pixel-cream),
    0 0 0 8px var(--color-bg-deep),
    0 0 24px rgba(45, 122, 77, 0.4),
    0 6px 0 0 rgba(0, 0, 0, 0.4);

  transition: transform 120ms ease, background 120ms ease, box-shadow 200ms ease;
}

.act1-cta:hover {
  background: var(--color-gold);
  color: var(--color-bg-deep);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 4px var(--color-pixel-cream),
    0 0 0 8px var(--color-bg-deep),
    0 0 36px rgba(255, 209, 102, 0.5),
    0 8px 0 0 rgba(0, 0, 0, 0.4);
}

.act1-cta:active {
  transform: translateY(1px);
}

/* Pulsing glow ring behind the primary CTA */
.act1-cta::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 4px;
  background: transparent;
  border: 2px solid rgba(46, 196, 182, 0);
  animation: ctaPulse 2.5s ease-in-out 4s infinite;
  pointer-events: none;
}

/* Secondary CTA — parchment-styled, clearly subordinate */
.act1-cta-secondary {
  position: relative;
  min-height: 44px;
  padding: calc(var(--px-unit) * 2.5) calc(var(--px-unit) * 5);
  font-family: var(--font-display);
  font-size: clamp(10px, 1.2vw, 12px);
  line-height: 1;
  color: var(--color-bg-deep);
  background: var(--color-pixel-cream);
  border: 2px solid var(--color-gold);
  cursor: pointer;
  letter-spacing: 1px;
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.35);
  transition: transform 120ms ease, background 120ms ease, box-shadow 200ms ease;
}

.act1-cta-secondary:hover {
  background: var(--color-gold);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.35);
}

.act1-cta-secondary:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.35);
}

@keyframes ctaPulse {
  0%, 100% { border-color: rgba(46, 196, 182, 0); transform: scale(1); }
  50% { border-color: rgba(46, 196, 182, 0.3); transform: scale(1.04); }
}

/* =========================================================================
   Mobile — Koro slides under the portal area, smaller easter egg hidden
   ========================================================================= */
@media (max-width: 600px) {
  .act1-koro-slot {
    left: 50%;
    top: auto;
    bottom: clamp(96px, 18vh, 160px);
    transform: translateX(-50%);
  }

  .act1-cta-stack {
    /* Re-center on mobile (desktop pulls left to clear Koro) */
    left: 50%;
    width: min(86vw, 320px);
    gap: 14px;
  }

  .act1-cta-primary-wrap,
  .act1-cta-secondary-wrap {
    width: 100%;
  }

  .act1-cta {
    width: 100%;
    font-size: 11px;
    padding: calc(var(--px-unit) * 3.5) calc(var(--px-unit) * 5);
  }

  .act1-cta-secondary {
    width: 100%;
    font-size: 10px;
    padding: calc(var(--px-unit) * 3) calc(var(--px-unit) * 4);
  }

  .easter-acorn {
    display: none;
  }
}