/* CylixZens UI Enhancements — drop-in polish & animations */

html { scroll-behavior: smooth; }

::selection { background: rgba(225,29,72,0.55); color: #fff; }
::-moz-selection { background: rgba(225,29,72,0.55); color: #fff; }

:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid rgba(225,29,72,0.85);
  outline-offset: 3px;
  border-radius: 6px;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(225,29,72,0.45), rgba(190,18,60,0.45));
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(225,29,72,0.75), rgba(190,18,60,0.75));
  background-clip: padding-box;
}

body { animation: cz-page-in 0.55s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes cz-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.cz-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1),
              transform 0.9s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.cz-reveal.is-visible { opacity: 1; transform: none; }
.cz-reveal-delay-1 { transition-delay: 0.07s; }
.cz-reveal-delay-2 { transition-delay: 0.14s; }
.cz-reveal-delay-3 { transition-delay: 0.21s; }

.cz-magnetic { transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); will-change: transform; }
.cz-tilt     { transform-style: preserve-3d; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); will-change: transform; }

.cz-ripple-container { position: relative; overflow: hidden; }
.cz-ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,0.32); pointer-events: none;
  animation: cz-ripple 0.65s cubic-bezier(0.16,1,0.3,1) forwards;
  mix-blend-mode: screen;
}
@keyframes cz-ripple { to { transform: scale(2.6); opacity: 0; } }

/* Subtle product-card lift upgrade (won't fight existing styles) */
.product-card { transition: transform 0.45s cubic-bezier(0.16,1,0.3,1),
                            box-shadow 0.45s cubic-bezier(0.16,1,0.3,1),
                            border-color 0.45s cubic-bezier(0.16,1,0.3,1); }
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px -20px rgba(225,29,72,0.38),
              0 0 0 1px rgba(225,29,72,0.18) inset;
  border-color: rgba(225,29,72,0.32);
}

/* Animated underline beneath section <h2>s when they scroll into view */
.cz-title-underline { position: relative; display: inline-block; }
.cz-title-underline::after {
  content: "";
  position: absolute; left: 0; bottom: -10px;
  width: 0; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #e11d48, #f43f5e, transparent);
  box-shadow: 0 0 18px rgba(225,29,72,0.5);
  transition: width 1.2s cubic-bezier(0.16,1,0.3,1);
}
.cz-title-underline.is-visible::after { width: 72%; }

/* Drifting shine on primary CTAs */
.btn-primary, .mobile-menu-cta {
  position: relative; overflow: hidden;
}
.btn-primary::after, .mobile-menu-cta::after {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: cz-cta-shine 5s ease-in-out infinite;
}
@keyframes cz-cta-shine {
  0%, 78% { left: -120%; }
  100%    { left: 220%; }
}

/* Marquee edge fade */
.marquee, .marquee-track-wrap, .games-marquee, .marquee-pill-row {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Nav link micro-lift */
.nav-links a { transition: color 0.3s, transform 0.3s; }
.nav-links a:hover { transform: translateY(-1px); }

/* Pulsing announcement dot */
.announcement-bar__dot { animation: cz-pulse-dot 1.8s ease-in-out infinite; }
@keyframes cz-pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(225,29,72,0.6); transform: scale(1); }
  50%     { box-shadow: 0 0 0 8px rgba(225,29,72,0); transform: scale(1.15); }
}

/* Accordion glide */
details > summary { cursor: pointer; transition: background 0.3s, color 0.3s; }
details[open] > summary { color: #fff; }
details[open] > *:not(summary) {
  animation: cz-details-in 0.35s cubic-bezier(0.16,1,0.3,1);
}
@keyframes cz-details-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Image fade-in */
img.cz-img-reveal { opacity: 0; transition: opacity 0.6s ease-out; }
img.cz-img-reveal.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { animation: none !important; }
  .cz-reveal, .cz-magnetic, .cz-tilt,
  .btn-primary::after, .mobile-menu-cta::after,
  .announcement-bar__dot, details[open] > *:not(summary) {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .cz-title-underline::after { transition: none !important; width: 72%; }
  .cz-reveal { opacity: 1; transform: none; }
}