/* ============================================================
   MOTIONS.CSS
   Shared motion system for Newell House flow
   ============================================================ */

/* --------------------------------------------
   PAGE INTRO – generic slide/fade in
   (used by wrapper.page-intro, room-page, etc.)
   -------------------------------------------- */

.page-intro {
  animation: pageIntroFade 520ms var(--ease-enter) forwards;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}

@keyframes pageIntroFade {
  0% {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* --------------------------------------------
   STAGGERED REVEAL USING data-reveal ATTRIBUTE
   -------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  animation: revealUp 420ms var(--ease-enter) forwards;
}
/* If revealFade doesn't exist in your file, add it */
@keyframes revealFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Chevron should fade only (no translate) */
.page-intro__chevron[data-reveal] {
  transform: none !important;
  animation-name: revealFade !important;
}


/* Base delay – each reveal index adds a bit of time */
[data-reveal="1"] { animation-delay: 80ms; }
[data-reveal="2"] { animation-delay: 160ms; }
[data-reveal="3"] { animation-delay: 240ms; }
[data-reveal="4"] { animation-delay: 320ms; }
[data-reveal="5"] { animation-delay: 400ms; }
/* Add a step for data-reveal="6" if you don't already have it */
[data-reveal="6"] {
  animation-delay: 600ms; /* adjust to match your existing stagger */
}
/* =======================================
   Index chevron: fade-only reveal
   Prevent conflicts with global reveal transforms
   ======================================= */

.page-intro__chevron[data-reveal] {
  /* cancel any global slide/translate */
  transform: none !important;

  /* keep it subtle */
  opacity: 0;
  animation-name: revealChevronFade !important;
  animation-duration: var(--reveal-duration, 520ms);
  animation-timing-function: var(--reveal-ease, ease-out);
  animation-fill-mode: forwards;
}

@keyframes revealChevronFade {
  from { opacity: 0; }
  to   { opacity: 0.6; } /* subtle background like before */
}

@keyframes revealUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* --------------------------------------------
   ROOM PAGE STAGE SLIDE-IN
   (used for room.html, living-room, kitchen, etc.)
   -------------------------------------------- */

.page-stage {
  opacity: 0;
  transform: translate3d(12px, 0, 0);
  animation: roomStageIn 520ms var(--ease-enter) forwards;
}

@keyframes roomStageIn {
  0% {
    opacity: 0;
    transform: translate3d(12px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ============================================================
   HOTSPOTS
   ============================================================ */

/* Refined hotspot pulse with consistent 3px/80% white border */
@keyframes hotspotPulse {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.80),
      0 4px 10px rgba(0, 0, 0, 0.35),
      0 0 0 0 rgba(47, 155, 214, 0.22);
  }
  40% {
    transform: scale(1.02); /* was 1.06 – much more subtle */
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.80),
      0 6px 14px rgba(0, 0, 0, 0.38),
      0 0 0 12px rgba(47, 155, 214, 0.22);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.80),
      0 4px 10px rgba(0, 0, 0, 0.35),
      0 0 0 0 rgba(47, 155, 214, 0);
  }
}

/* ============================================================
   HOME COUNTER – ICON + BADGE MOTION
   ============================================================ */

.home-counter--animating .home-counter__icon {
  animation: homeCounterIconWiggle 400ms var(--ease-enter);
}

.home-counter--animating .home-counter__badge {
  animation:
    homeCounterBadgePop 420ms var(--ease-enter),
    homeCounterBadgeSpark 420ms var(--ease-enter);
}

@keyframes homeCounterIconWiggle {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-7deg); }
  45%  { transform: rotate(6deg); }
  70%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

@keyframes homeCounterBadgePop {
  0% {
    transform: scale(0.9);
    background-color: #F89849;
    box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.6);
  }
  30% {
    transform: scale(1.25);
    background-color: #E34154;
    box-shadow: 0 0 0 6px rgba(255, 138, 0, 0.25);
  }
  60% {
    transform: scale(0.96);
    background-color: #E34154;
    box-shadow: 0 0 0 10px rgba(255, 138, 0, 0.08);
  }
  100% {
    transform: scale(1);
    background-color: #F89849;
    box-shadow: 0 0 0 0 rgba(255, 138, 0, 0);
  }
}

@keyframes homeCounterBadgeSpark {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  40%  { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5); }
  100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
}

/* ============================================================
   SUCCESS PAGE – PAGE FADE + BADGE POP
   ============================================================ */

.success-page {
  position: relative;
  overflow: hidden;
}

.success-page::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  animation: successPageFade 600ms var(--ease-enter) forwards;
  z-index: 0;
}

@keyframes successPageFade {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.success-badge__wrap {
  animation: successBadgePop 620ms var(--ease-enter) forwards;
  position: relative;
  z-index: 2;
}

@keyframes successBadgePop {
  0% {
    transform: scale(0.86);
    opacity: 0;
  }
  55% {
    transform: scale(1.04);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.success-content,
.success-actions {
  position: relative;
  z-index: 2;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .page-intro,
  [data-reveal],
  .page-stage,
  .success-page::before,
  .success-badge__wrap {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .home-counter--animating .home-counter__icon,
  .home-counter--animating .home-counter__badge {
    animation: none !important;
  }
}

@keyframes tooltipFade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

.fade-in  { animation: fadeIn 120ms ease-out forwards; }
.fade-out { animation: fadeOut 120ms ease-in forwards; }

@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }