/* =============================================================================
   Gisele's Princess Closet — Motion library
   =============================================================================
   Loaded AFTER app.css. Adds:
     - Page-load entrance animations (per-section reveal)
     - Scroll-triggered reveals (data-reveal attribute, JS-driven)
     - Hover affordances (card lift, image zoom, button shine)
     - Micro-interactions (CTA arrows, link underlines, focus glow)
     - Floating / drifting elements (hero inset, decorative bits)

   Everything respects prefers-reduced-motion. If a user prefers reduced
   motion, every animation here becomes a no-op (the element jumps to its
   final visual state) so content is never trapped behind animation.
   ============================================================================= */

/* ── 1. Reduced-motion shutoff ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ── 2. Smooth scroll for in-page anchors ──────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── 3. Page-load entrance for the hero ────────────────────────────────── */
.hero .hero-text > * {
  opacity: 0;
  transform: translateY(16px);
  animation: gpc-enter 720ms var(--gpc-ease-out) forwards;
}
.hero .hero-text > *:nth-child(1) { animation-delay: 60ms; }
.hero .hero-text > *:nth-child(2) { animation-delay: 200ms; }
.hero .hero-text > *:nth-child(3) { animation-delay: 340ms; }

.hero .hero-media {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  animation: gpc-enter-zoom 900ms var(--gpc-ease-out) 180ms forwards;
}

@keyframes gpc-enter {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes gpc-enter-zoom {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 4. Scroll-triggered reveals (JS adds .is-in) ──────────────────────── */
/* Any element with `data-reveal` starts in a low-opacity translated state
   and animates to visible when it enters the viewport.

   Variants:
     data-reveal           default = fade-up
     data-reveal="up"      fade-up
     data-reveal="left"    slide-from-left
     data-reveal="right"   slide-from-right
     data-reveal="zoom"    fade + scale
     data-reveal="rise"    bigger up-distance

   Optional `data-reveal-delay="200"` (ms) staggers the entrance. */
[data-reveal] {
  opacity: 0;
  transition:
    opacity 700ms var(--gpc-ease-out),
    transform 700ms var(--gpc-ease-out);
  transition-delay: var(--gpc-reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="up"], [data-reveal=""], [data-reveal]:not([data-reveal]) {
  transform: translateY(20px);
}
[data-reveal="left"]  { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="zoom"]  { transform: scale(0.96); }
[data-reveal="rise"]  { transform: translateY(40px); }
[data-reveal].is-in {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* ── 5. Card hover system ──────────────────────────────────────────────── */
/* Use .lift on any card-like element to get the canonical hover. */
.lift {
  transition:
    transform var(--gpc-dur-normal) var(--gpc-ease-out),
    box-shadow var(--gpc-dur-normal) var(--gpc-ease-out);
  will-change: transform, box-shadow;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--gpc-shadow-hover);
  }
}

/* Apply lift behavior to common cards automatically */
.featured-grid > .featured-card,
.dress-card,
.story-col,
.addon-card {
  transition:
    transform var(--gpc-dur-normal) var(--gpc-ease-out),
    box-shadow var(--gpc-dur-normal) var(--gpc-ease-out);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .featured-grid > .featured-card:hover,
  .dress-card:hover,
  .story-col:hover,
  .addon-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--gpc-shadow-hover);
  }
}

/* ── 6. Image zoom on card hover ───────────────────────────────────────── */
/* Wrap an <img> in a parent with overflow:hidden + radius. On parent hover,
   the image scales 1.05. */
.zoom-frame,
.featured-grid figure,
.dress-card figure,
.featured-card-main figure,
.story-col figure {
  overflow: hidden;
  border-radius: inherit;
}
.zoom-frame > img,
.featured-grid figure > img,
.dress-card figure > img,
.featured-card-main figure > img,
.story-col figure > img {
  transition: transform 600ms var(--gpc-ease-out);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .featured-grid > .featured-card:hover figure > img,
  .dress-card:hover figure > img,
  .story-col:hover figure > img,
  .featured-card-main:hover figure > img {
    transform: scale(1.04);
  }
}

/* ── 7. Button micro-interactions ──────────────────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,0.18) 50%,
    transparent 70%);
  transform: translateX(-120%);
  transition: transform 800ms var(--gpc-ease-out);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .btn-primary:hover::after { transform: translateX(120%); }
}

/* Arrow nudge on CTAs that end with → */
.btn-primary,
.btn-text,
.cta {
  --arrow-shift: 0;
}
.btn-primary > .arrow,
.btn-text > .arrow,
.btn-primary {
  transition: padding-right var(--gpc-dur-fast) var(--gpc-ease-out);
}

/* ── 8. Nav link sliding underline (desktop only) ──────────────────────── */
@media (min-width: 820px) and (prefers-reduced-motion: no-preference) {
  .site-nav a:not(.cta) {
    position: relative;
  }
  .site-nav a:not(.cta)::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    background: var(--gpc-royal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--gpc-dur-normal) var(--gpc-ease-out);
  }
  .site-nav a:not(.cta):hover::after,
  .site-nav a:not(.cta):focus-visible::after { transform: scaleX(1); }
}

/* ── 9. Float / drift on the hero inset ────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .hero-inset {
    animation: gpc-float 6.5s ease-in-out infinite alternate;
  }
}
@keyframes gpc-float {
  from { transform: rotate(3deg) translateY(0); }
  to   { transform: rotate(2deg) translateY(-8px); }
}

/* ── 10. Sticky CTA in catalog: pulse on first item added ──────────────── */
.sticky-cart.is-flash {
  animation: gpc-flash 600ms var(--gpc-ease-out);
}
@keyframes gpc-flash {
  0%   { transform: scale(1); box-shadow: var(--gpc-shadow-md); }
  40%  { transform: scale(1.04); box-shadow: 0 16px 36px rgba(46, 79, 167, 0.30); }
  100% { transform: scale(1); box-shadow: var(--gpc-shadow-lg); }
}

/* ── 11. Hero photo: subtle ken-burns drift (only on >820px) ───────────── */
@media (min-width: 820px) and (prefers-reduced-motion: no-preference) {
  .hero-media > img {
    animation: gpc-kenburns 18s ease-in-out infinite alternate;
    transform-origin: 60% 50%;
  }
}
@keyframes gpc-kenburns {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.04) translateY(-6px); }
}

/* ── 12. Section bg gradients drift (very subtle) ──────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .featured-strip,
  .how-strip {
    background-size: 100% 200%;
    animation: gpc-bg-drift 22s ease-in-out infinite alternate;
  }
}
@keyframes gpc-bg-drift {
  from { background-position: 50% 0%; }
  to   { background-position: 50% 100%; }
}

/* ── 13. Numbered step circle: hover pop ───────────────────────────────── */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .how-steps > li:hover .step-num {
    animation: gpc-pop 350ms var(--gpc-ease-out);
  }
}
@keyframes gpc-pop {
  0%   { transform: scale(1) rotate(0); }
  35%  { transform: scale(1.10) rotate(-4deg); }
  70%  { transform: scale(0.97) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ── 14. Confetti dot for birthday / featured highlights ──────────────── */
.dot-shimmer {
  position: relative;
}
.dot-shimmer::after {
  content: "";
  position: absolute;
  top: -2px; right: -2px;
  width: 10px; height: 10px;
  background: var(--gpc-butter);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--gpc-paper);
  animation: gpc-pulse 1.8s ease-in-out infinite;
}
@keyframes gpc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}

/* ── 15. "Magic" CTA: gentle gradient sweep on idle (for the big build-a-box CTA) */
.btn-magic {
  background: linear-gradient(
    100deg,
    var(--gpc-royal) 0%,
    var(--gpc-royal-soft) 35%,
    var(--gpc-gold) 50%,
    var(--gpc-royal-soft) 65%,
    var(--gpc-royal) 100%
  );
  background-size: 220% 100%;
  color: #fff;
  animation: gpc-magic 7s linear infinite;
}
@keyframes gpc-magic {
  from { background-position: 0% 50%; }
  to   { background-position: 220% 50%; }
}

/* ── 16. Bundle savings number: counter animation hook ─────────────────── */
.savings-num {
  font-family: var(--gpc-font-head);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--gpc-royal);
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── 17. Tier comparison row hover ─────────────────────────────────────── */
.tier-row {
  transition:
    background-color var(--gpc-dur-fast) var(--gpc-ease-out),
    transform var(--gpc-dur-fast) var(--gpc-ease-out);
  cursor: pointer;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tier-row:hover { background: var(--gpc-blush); transform: translateX(4px); }
}
.tier-row.is-selected {
  background: var(--gpc-blush);
  outline: 2px solid var(--gpc-royal);
  outline-offset: -2px;
}

/* ── 18. Sticky savings panel: slide in from right ─────────────────────── */
.savings-panel {
  position: sticky;
  top: 96px;
  transition: transform var(--gpc-dur-normal) var(--gpc-ease-out);
}
.savings-panel.is-hidden { transform: translateX(120%); }

/* ── 19. Dress slot in bundle builder: empty → filled animation ────────── */
.box-slot {
  border: 2px dashed var(--gpc-rose-deep);
  border-radius: var(--r-md);
  aspect-ratio: 4/5;
  background: var(--gpc-blush);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gpc-ink-mute);
  font-style: italic;
  font-size: 0.95rem;
  transition: all var(--gpc-dur-normal) var(--gpc-ease-out);
  position: relative;
  overflow: hidden;
}
.box-slot:hover { border-color: var(--gpc-royal); background: var(--gpc-paper); }
.box-slot.is-filled {
  border: 1px solid var(--gpc-line);
  background: var(--gpc-paper);
  padding: 0;
  animation: gpc-fill 420ms var(--gpc-ease-out);
}
.box-slot.is-filled img {
  width: 100%; height: 100%; object-fit: cover;
}
@keyframes gpc-fill {
  0%   { transform: scale(0.92); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}

/* ── 20. Scrollbar polish (webkit) ─────────────────────────────────────── */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gpc-line-strong);
  border-radius: var(--r-pill);
  border: 3px solid var(--gpc-paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--gpc-royal); }

/* ── 21. Focus ring with soft glow (preserves a11y baseline) ───────────── */
:focus-visible {
  box-shadow: 0 0 0 4px rgba(46, 79, 167, 0.18);
}