/* =============================================
   STYLE SPOT – Extra Animations & Micro-interactions
   ============================================= */

/* ---- MARQUEE / TICKER ---- */
.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
}
.ticker {
  display: inline-flex;
  gap: 4rem;
  animation: ticker 30s linear infinite;
}
.ticker:hover { animation-play-state: paused; }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- SHIMMER SKELETON ---- */
.skeleton {
  background: linear-gradient(90deg, var(--light-gray) 25%, #e8e8e8 50%, var(--light-gray) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- MAGNETIC BUTTON ---- */
.btn-magnetic {
  transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---- RIPPLE ---- */
.ripple-btn {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ---- GLOW PULSE (CTA focus state) ---- */
.btn-primary:focus-visible {
  outline: none;
  animation: glowPulse 0.8s ease;
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,195,56,0); }
  50%       { box-shadow: 0 0 0 8px rgba(245,195,56,0.25); }
}

/* ---- FLOATING LABEL INPUTS ---- */
.floating-group {
  position: relative;
  margin-bottom: 1.2rem;
}
.floating-group input,
.floating-group textarea {
  width: 100%;
  padding: 1.2rem 1rem 0.5rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.3s;
  background: transparent;
}
.floating-group label {
  position: absolute;
  top: 0.9rem; left: 1rem;
  font-size: 0.875rem;
  color: var(--gray);
  pointer-events: none;
  transition: 0.25s ease;
  background: var(--white);
  padding: 0 0.2rem;
}
.floating-group input:focus,
.floating-group input:not(:placeholder-shown),
.floating-group textarea:focus,
.floating-group textarea:not(:placeholder-shown) {
  border-color: var(--primary);
}
.floating-group input:focus ~ label,
.floating-group input:not(:placeholder-shown) ~ label,
.floating-group textarea:focus ~ label,
.floating-group textarea:not(:placeholder-shown) ~ label {
  top: -0.55rem;
  font-size: 0.72rem;
  color: var(--primary);
}

/* ---- PRODUCT HOVER TILT ---- */
.product-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---- CATEGORY TAG HOVER ---- */
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid var(--border);
  color: var(--dark);
  background: var(--white);
}
.cat-pill:hover,
.cat-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--dark);
  transform: translateY(-2px);
}

/* ---- MODAL ---- */
.modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 1050;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal.open {
  display: flex;
  animation: modalFade 0.3s ease;
}
@keyframes modalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-inner {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: min(900px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 2.5rem;
  animation: modalSlideUp 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--light); border: none;
  font-size: 1.2rem; cursor: pointer;
  color: var(--dark); transition: var(--transition);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--primary); transform: rotate(90deg); }

/* ---- STICKY ADD-TO-CART (product page mobile) ---- */
.sticky-cart-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 1rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
  z-index: 500;
  transform: translateY(100%);
  transition: transform 0.35s ease;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.sticky-cart-bar.visible { transform: translateY(0); }
.sticky-cart-price { font-size: 1.2rem; font-weight: 700; color: var(--primary); }
.sticky-cart-name { font-size: 0.85rem; color: var(--gray); }

/* ---- COOKIE NOTICE ---- */
.cookie-notice {
  position: fixed; bottom: 1.5rem; left: 1.5rem;
  background: var(--dark);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  max-width: 360px;
  z-index: 9000;
  box-shadow: var(--shadow);
  animation: slideInLeft 0.5s ease;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}
.cookie-notice p { margin-bottom: 0.8rem; }
.cookie-notice a { color: var(--primary); }
.cookie-buttons { display: flex; gap: 0.6rem; }

/* ---- SCROLL SNAP GALLERY ---- */
.snap-gallery {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.snap-gallery::-webkit-scrollbar { display: none; }
.snap-item {
  flex: 0 0 calc(33.333% - 0.67rem);
  scroll-snap-align: start;
  border-radius: var(--radius);
  overflow: hidden;
}

/* ---- HOVER UNDERLINE LINKS ---- */
.hover-underline {
  position: relative;
  display: inline-block;
}
.hover-underline::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: currentColor;
  transition: width 0.3s ease;
}
.hover-underline:hover::after { width: 100%; }

/* ---- ALERT / FLASH ---- */
.alert {
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  display: flex; align-items: flex-start; gap: 0.8rem;
  margin-bottom: 1rem;
  animation: alertIn 0.35s ease;
}
@keyframes alertIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.alert-success { background: rgba(45,138,78,0.1); border-left: 3px solid #2d8a4e; color: #2d8a4e; }
.alert-error   { background: rgba(228,68,68,0.1); border-left: 3px solid #e44; color: #e44; }
.alert-warning { background: rgba(245,195,56,0.15); border-left: 3px solid var(--primary); color: var(--secondary); }
.alert-info    { background: rgba(74,144,217,0.1); border-left: 3px solid #4a90d9; color: #4a90d9; }

/* ---- ACCORDION ---- */
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-header {
  padding: 1.1rem 0;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; font-weight: 600; font-size: 0.9rem;
  transition: color 0.3s;
}
.accordion-header:hover { color: var(--primary); }
.accordion-header i { transition: transform 0.35s ease; color: var(--gray); font-size: 0.8rem; }
.accordion-item.open .accordion-header i { transform: rotate(180deg); color: var(--primary); }
.accordion-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  font-size: 0.875rem; color: var(--gray); line-height: 1.9;
}
.accordion-item.open .accordion-body { max-height: 500px; padding-bottom: 1rem; }

/* ---- PROGRESS STEPS (checkout) ---- */
.progress-steps {
  display: flex; align-items: center;
  gap: 0;
}
.progress-step {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0 1rem; font-size: 0.8rem; color: var(--gray);
  position: relative;
}
.progress-step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700;
  transition: var(--transition);
}
.progress-step.active .progress-step-num {
  border-color: var(--primary); background: var(--primary); color: var(--dark);
}
.progress-step.done .progress-step-num {
  border-color: #2d8a4e; background: #2d8a4e; color: var(--white);
}
.progress-step-connector {
  height: 2px; flex: 1; background: var(--border); min-width: 30px;
}
.progress-step.done + .progress-step-connector { background: #2d8a4e; }

/* ---- BACK TO TOP BUTTON ---- */
#back-to-top {
  position: fixed; bottom: 2rem; right: 2rem;
  z-index: 99;
  width: 46px; height: 46px;
  background: var(--primary); color: var(--dark);
  border: none; border-radius: 50%;
  cursor: pointer; font-size: 1.1rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: 0 4px 20px rgba(245,195,56,0.4);
  display: flex; align-items: center; justify-content: center;
}
#back-to-top:hover { transform: translateY(-3px) scale(1.05); }

/* ---- QUICK VIEW (in-grid pop) ---- */
.quick-view-panel {
  position: absolute; inset: 0;
  background: rgba(26,26,26,0.96);
  border-radius: var(--radius);
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  z-index: 5;
}
.product-card:hover .quick-view-panel { opacity: 1; }

/* ---- COMPARE TRAY ---- */
.compare-tray {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 3px solid var(--primary);
  padding: 1rem 2rem;
  display: flex; align-items: center; gap: 1.5rem;
  z-index: 500;
  transform: translateY(100%);
  transition: transform 0.4s ease;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.1);
}
.compare-tray.active { transform: translateY(0); }

/* ---- HOTSPOT (on product image) ---- */
.hotspot {
  position: absolute;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  animation: hotspotPulse 2s ease infinite;
  z-index: 3;
}
@keyframes hotspotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,195,56,0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(245,195,56,0); }
}

/* ---- SIZE GUIDE MODAL TABLE ---- */
.size-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.size-guide-table th {
  background: var(--dark);
  color: var(--primary);
  padding: 0.8rem 1rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1px;
}
.size-guide-table td {
  padding: 0.7rem 1rem;
  text-align: center;
  border: 1px solid var(--border);
  color: var(--gray);
}
.size-guide-table tr:nth-child(even) { background: var(--light); }
.size-guide-table tr:hover { background: rgba(245,195,56,0.05); }

/* ---- MINI CART ITEM COUNT ANIMATION ---- */
@keyframes badgeBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); }
  50%  { transform: scale(0.9); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.badge.bounce { animation: badgeBounce 0.5s ease; }

/* ---- PAGE TRANSITION ---- */
.page-transition {
  position: fixed; inset: 0;
  background: var(--primary);
  z-index: 99999;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.page-transition.enter {
  animation: pageEnter 0.4s ease forwards;
}
.page-transition.leave {
  animation: pageLeave 0.4s ease forwards;
}
@keyframes pageEnter {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
@keyframes pageLeave {
  from { transform: scaleX(1); transform-origin: right; }
  to   { transform: scaleX(0); transform-origin: right; }
}

/* ---- FLOATING CART BUTTON (mobile) ---- */
.fab-cart {
  position: fixed; bottom: 5rem; right: 1.5rem;
  background: var(--primary);
  color: var(--dark);
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 20px rgba(245,195,56,0.4);
  z-index: 100;
  cursor: pointer;
  transition: var(--transition);
  border: none;
}
.fab-cart:hover { transform: scale(1.1); }

/* ========================================
   TITLE ANIMATIONS & TEXT COLOR ACCENTS
   ======================================== */

/* Cycling gradient on colored spans inside section/newsletter titles */
.section-title span,
.newsletter-title span {
  background: linear-gradient(
    90deg,
    var(--primary)   0%,
    #e8a020         20%,
    var(--secondary) 45%,
    #ffd966         70%,
    var(--primary)  100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleGradient 6s linear infinite;
}
@keyframes titleGradient {
  from { background-position:   0% center; }
  to   { background-position: 300% center; }
}

/* Dramatic section-title entrance: skew + blur + lift */
.section-title.reveal {
  opacity: 0;
  transform: translateY(50px) skewY(2deg);
  filter: blur(3px);
  transition:
    opacity  0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
    filter   0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.section-title.reveal.revealed {
  opacity: 1;
  transform: translateY(0) skewY(0deg);
  filter: blur(0);
}

/* Section tag: letter-spacing burst on scroll-in */
.section-tag.reveal {
  opacity: 0;
  transform: translateY(12px);
  letter-spacing: 0;
  transition:
    opacity       0.5s ease,
    transform     0.5s ease,
    letter-spacing 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.section-tag.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
  letter-spacing: 3px;
}

/* Section description: delayed gentle fade-up */
.section-desc.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity   0.7s ease 0.32s,
    transform 0.7s ease 0.32s;
}
.section-desc.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Pulsing glow on offer percent highlight */
.offer-percent {
  animation: offerGlow 2.8s ease-in-out infinite;
}
@keyframes offerGlow {
  0%, 100% { text-shadow: 0 0  8px rgba(245,195,56,0.25); }
  50%       { text-shadow: 0 0 28px rgba(245,195,56,0.65), 0 0 55px rgba(245,195,56,0.25); }
}
/* gold card keeps dark text — don't apply glow there */
.offer-card.offer-gold .offer-percent { animation: none; text-shadow: none; }

/* Alternating brand marquee colors */
.brand-item:nth-child(odd)  { color: var(--primary); }
.brand-item:nth-child(even) { color: var(--secondary); opacity: 0.55; }
.brand-item:hover           { color: var(--primary) !important; opacity: 1 !important; }

/* ---- UTILITY ---- */
.text-primary   { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-dark      { color: var(--dark) !important; }
.text-white     { color: var(--white) !important; }
.text-gray      { color: var(--gray) !important; }
.bg-primary     { background: var(--primary) !important; }
.bg-secondary   { background: var(--secondary) !important; }
.bg-dark        { background: var(--dark) !important; }
.bg-light       { background: var(--light) !important; }
.hidden         { display: none !important; }
.visible        { display: block !important; }
.flex           { display: flex !important; }
.items-center   { align-items: center !important; }
.justify-center { justify-content: center !important; }
.gap-1          { gap: 0.5rem !important; }
.gap-2          { gap: 1rem !important; }
.gap-3          { gap: 1.5rem !important; }
.mt-1  { margin-top: 0.5rem !important; }
.mt-2  { margin-top: 1rem !important; }
.mt-3  { margin-top: 1.5rem !important; }
.mb-1  { margin-bottom: 0.5rem !important; }
.mb-2  { margin-bottom: 1rem !important; }
.mb-3  { margin-bottom: 1.5rem !important; }
.pt-2  { padding-top: 1rem !important; }
.pb-2  { padding-bottom: 1rem !important; }
.px-2  { padding-left: 1rem !important; padding-right: 1rem !important; }
.rounded     { border-radius: var(--radius) !important; }
.rounded-lg  { border-radius: var(--radius-lg) !important; }
.rounded-full { border-radius: 50% !important; }
.shadow      { box-shadow: var(--shadow) !important; }
.shadow-hover { box-shadow: var(--shadow-hover) !important; }
.w-full  { width: 100% !important; }
.h-full  { height: 100% !important; }
.overflow-hidden { overflow: hidden !important; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-only  { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }