/* ============================================================
   ZYRA — GLOBAL ANIMATION STYLES
   Micro-interactions, transitions, entrance helpers
   ============================================================ */

/* ── DIVIDER line-draw (starts collapsed, GSAP expands) ── */
.divider { transform-origin: left; }
.divider-center { transform-origin: center; }

/* ── OVERLINE slide-down (starts offset, GSAP reveals) ── */
html.js-ready section .overline:not(.page-hero .overline):not(.hero-content .overline) {
  display: inline-block;
}

/* ── GLASS-CARD shimmer on hover ── */
.glass-card {
  --shimmer-x: -100%;
  position: relative;
}
.glass-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.04) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  background-position-x: var(--shimmer-x, -100%);
  pointer-events: none;
  transition: none;
}

/* ── PRODUCT CARD image overlay ── */
.product-card .img-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,11,.5) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .4s;
}
.product-card:hover .img-wrap::after { opacity: 1; }

/* ── BUTTON ripple (contained inside overflow:hidden from global.css) ── */
.btn { overflow: hidden; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  transform: scale(0);
  animation: rippleAnim .6s ease-out forwards;
  pointer-events: none;
  z-index: 0;
}
/* ghost buttons never get ripple spans (blocked in initButtonRipple) */
@keyframes rippleAnim {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ── FORM CONTROL focus ring ── */
.form-control {
  transition: border-color .3s, box-shadow .3s, transform .2s;
}
.form-control:focus { transform: translateY(-1px); }

/* ── INFO CARD left border slide ── */
.info-card {
  position: relative;
  overflow: hidden;
}
.info-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .35s var(--ease-smooth);
}
.info-card:hover::before { transform: scaleY(1); }

/* ── CATEGORY CARD bottom border reveal ── */
.category-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-smooth);
}
.category-card:hover::after { transform: scaleX(1); }

/* ── MILESTONE dot pulse ── */
.milestone-dot {
  animation: milestonePulse 3s ease-in-out infinite;
}
@keyframes milestonePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,37,92,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(201,37,92,0); }
}

/* ── MASONRY item ── */
.masonry-item { transition: none; } /* GSAP handles */

/* ── VALUE CARD number glow on hover ── */
.value-card:hover .value-num {
  color: color-mix(in srgb, var(--red) 90%, transparent) !important;
  text-shadow: 0 0 30px color-mix(in srgb, var(--red) 30%, transparent);
}

/* ── TIMELINE item: number glow ── */
.timeline-item:hover .timeline-num {
  text-shadow: 0 0 20px rgba(201,37,92,.3);
}

/* ── STAT number glow ── */
.stat-num { transition: text-shadow .3s; }
.stat-item:hover .stat-num { text-shadow: 0 0 40px rgba(201,37,92,.6); }

/* ── SPEC ROW hover highlight ── */
.spec-row { transition: background .2s; }
.spec-row:hover { background: rgba(255,255,255,.025); }

/* ── PAGE TRANSITION line sweep ── */
.page-transition::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), #ff6b9d, var(--red));
  background-size: 200% 100%;
  animation: sweepLine 1s linear infinite;
}
@keyframes sweepLine {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ── SCROLL PROGRESS BAR ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red), #ff6b9d);
  z-index: 10001;
  transform-origin: left;
  transform: scaleX(0);
  pointer-events: none;
}

/* ── NAV LINK active underline ── */
#header nav a.active::after { transform: scaleX(1); }

/* ── CART ITEM entrance (GSAP sets these) ── */
.cart-item { transition: opacity .2s, transform .2s; }

/* ── BREADCRUMB ── */
.breadcrumb { overflow: hidden; }

/* ── THUMBNAIL active ring animation ── */
.thumb.active {
  box-shadow: 0 0 0 2px var(--red);
  animation: thumbPulse 2s ease-in-out infinite;
}
@keyframes thumbPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--red); }
  50%       { box-shadow: 0 0 0 4px rgba(201,37,92,.3); }
}

/* ── SUCCESS RING ── */
.success-ring {
  animation: ringPulse 3s ease-in-out infinite;
}
@keyframes ringPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(201,37,92,.2); }
  50%       { box-shadow: 0 0 80px rgba(201,37,92,.45); }
}

/* ── ABOUT BRAND MARK rings ── */
.brand-mark-ring   { animation: spin 20s linear infinite; }
.brand-mark-ring.ring-2 { animation-duration: 30s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }