/* Headley's PC Parts — cinematic accent pass.
   Layered after premium-home.css so this file can intensify motion/light without
   disturbing ecommerce behavior or the broader responsive system. */

.home {
  --cinema-violet: 139, 92, 246;
  --cinema-cyan: 103, 232, 249;
  --cinema-blue: 59, 130, 246;
}

/* HERO: float the glass card instead of dragging a shine around its border. */
.home .hero-glass {
  animation:
    hpc-hero-in 1s .12s var(--ease-out) forwards,
    hpc-hero-float 6.2s 1.2s ease-in-out infinite;
  box-shadow:
    0 44px 120px rgba(0,0,0,.52),
    0 18px 58px rgba(var(--cinema-violet), .10),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(var(--cinema-violet), .08);
}

.home .hero-glass::after {
  content: '';
  position: absolute;
  inset: -30% 54% -35% -18%;
  width: auto;
  height: auto;
  left: auto;
  top: auto;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(var(--cinema-cyan), .09), rgba(var(--cinema-violet), .045) 34%, transparent 68%);
  filter: blur(18px);
  opacity: .62;
  animation: hpc-hero-ambient 8s ease-in-out infinite;
}

@keyframes hpc-hero-float {
  0%, 100% { translate: 0 0; }
  45% { translate: 0 -8px; }
  65% { translate: 0 -5px; }
}

@keyframes hpc-hero-ambient {
  0%, 100% { transform: translate3d(-4%, 2%, 0) scale(.96); opacity: .42; }
  50% { transform: translate3d(9%, -3%, 0) scale(1.08); opacity: .82; }
}

/* The primary CTA now owns the obvious cinematic shine. */
.home .hero-premium .btn-primary {
  isolation: isolate;
  border-color: transparent;
  background:
    linear-gradient(135deg, rgba(124,58,237,.98), rgba(91,78,244,.98)) padding-box,
    linear-gradient(100deg, rgba(var(--cinema-cyan), .92), rgba(255,255,255,.92), rgba(var(--cinema-violet), .98), rgba(var(--cinema-cyan), .86)) border-box;
  background-size: 100% 100%, 240% 100%;
  box-shadow:
    0 14px 36px rgba(84,50,220,.34),
    0 0 0 1px rgba(174,156,255,.08),
    0 0 24px rgba(var(--cinema-violet), .16),
    inset 0 1px 0 rgba(255,255,255,.30);
  animation: hpc-cta-border 3.6s linear infinite, hpc-cta-breathe 4.8s ease-in-out infinite;
}

.home .hero-premium .btn-primary::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(124,58,237,.97), rgba(80,67,229,.97));
}

.home .hero-premium .btn-primary::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: -80% -34%;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 39%, rgba(255,255,255,.50) 49%, transparent 59%);
  transform: translateX(-72%) rotate(4deg);
  animation: hpc-cta-sweep 3.9s 1.1s ease-in-out infinite;
}

.home .hero-premium .btn-primary > * { position: relative; z-index: 2; }
.home .hero-premium .btn-primary:hover { transform: translateY(-3px) scale(1.012); }

@keyframes hpc-cta-border {
  to { background-position: 0 0, 240% 0; }
}

@keyframes hpc-cta-breathe {
  0%, 100% { box-shadow: 0 14px 36px rgba(84,50,220,.34), 0 0 0 1px rgba(174,156,255,.08), 0 0 20px rgba(var(--cinema-violet), .12), inset 0 1px 0 rgba(255,255,255,.30); }
  50% { box-shadow: 0 18px 46px rgba(84,50,220,.42), 0 0 0 1px rgba(174,156,255,.14), 0 0 34px rgba(var(--cinema-cyan), .20), inset 0 1px 0 rgba(255,255,255,.34); }
}

@keyframes hpc-cta-sweep {
  0%, 48% { transform: translateX(-78%) rotate(4deg); opacity: 0; }
  56% { opacity: .85; }
  72% { transform: translateX(76%) rotate(4deg); opacity: .78; }
  80%, 100% { transform: translateX(76%) rotate(4deg); opacity: 0; }
}

/* SECTION SHELLS: give each slab a living edge, not another giant animation. */
.home .glass-shell {
  transition: transform .5s var(--ease-out), border-color .45s ease, box-shadow .5s ease;
}

.home .glass-shell::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: -18%;
  top: 0;
  width: 36%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--cinema-cyan), .78), rgba(255,255,255,.82), rgba(var(--cinema-violet), .82), transparent);
  filter: drop-shadow(0 0 10px rgba(var(--cinema-cyan), .50));
  opacity: .68;
  animation: hpc-shell-edge 7.2s ease-in-out infinite;
}

.home .glass-shell.is-visible {
  border-color: rgba(255,255,255,.15);
  box-shadow:
    0 34px 90px rgba(0,0,0,.43),
    0 0 42px rgba(var(--cinema-violet), .055),
    inset 0 1px 0 rgba(255,255,255,.075);
}

@keyframes hpc-shell-edge {
  0%, 15% { transform: translateX(0); opacity: 0; }
  28% { opacity: .9; }
  62% { opacity: .72; }
  80%, 100% { transform: translateX(340%); opacity: 0; }
}

/* Headings get a restrained light accent when their section is visible. */
.home .section-title {
  position: relative;
  display: inline-block;
}

.home .section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -12px;
  width: clamp(56px, 7vw, 104px);
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(var(--cinema-cyan), .92), rgba(var(--cinema-violet), .84), transparent);
  box-shadow: 0 0 16px rgba(var(--cinema-cyan), .28);
  transform-origin: left;
  animation: hpc-heading-pulse 5.5s ease-in-out infinite;
}

@keyframes hpc-heading-pulse {
  0%, 100% { transform: scaleX(.56); opacity: .58; }
  50% { transform: scaleX(1); opacity: 1; }
}

/* Category panes: a little physical drift plus a light kiss on the edge. */
.home .cat-tile {
  transform-origin: 50% 60%;
}

.home .cat-tile:nth-child(3n + 1) { animation: hpc-tile-drift-a 7.8s ease-in-out infinite; }
.home .cat-tile:nth-child(3n + 2) { animation: hpc-tile-drift-b 8.6s .6s ease-in-out infinite; }
.home .cat-tile:nth-child(3n) { animation: hpc-tile-drift-a 9.1s 1.2s ease-in-out infinite reverse; }

.home .cat-tile::before {
  content: '';
  position: absolute;
  z-index: 3;
  pointer-events: none;
  left: 10%;
  right: 52%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--cinema-cyan), .75), rgba(var(--cinema-violet), .70), transparent);
  filter: drop-shadow(0 0 8px rgba(var(--cinema-cyan), .45));
  opacity: .5;
}

.home .cat-tile:hover { animation-play-state: paused; }

@keyframes hpc-tile-drift-a {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@keyframes hpc-tile-drift-b {
  0%, 100% { translate: 0 -1px; }
  50% { translate: 0 4px; }
}

/* Product cards: keep the grid usable, but let featured hardware feel energized. */
.home .section-featured .product-card:nth-child(odd) {
  animation: hpc-product-breathe 7s ease-in-out infinite;
}

.home .section-featured .product-card:nth-child(even) {
  animation: hpc-product-breathe 7s 1.4s ease-in-out infinite reverse;
}

.home .section-featured .product-card:hover { animation-play-state: paused; }

.home .product-card::after {
  content: '';
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: 16%;
  right: 16%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--cinema-violet), .48), rgba(var(--cinema-cyan), .62), transparent);
  opacity: .48;
}

@keyframes hpc-product-breathe {
  0%, 100% { box-shadow: 0 20px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05); }
  50% { box-shadow: 0 24px 58px rgba(0,0,0,.28), 0 0 28px rgba(var(--cinema-violet), .07), inset 0 1px 0 rgba(255,255,255,.07); }
}

/* eBay slab already has movement; make the CTA participate without stealing focus. */
.home .ebay-band .btn {
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.20), 0 0 24px rgba(var(--cinema-violet), .07);
}

.home .ebay-band .btn::after {
  content: '';
  position: absolute;
  inset: -70% -35%;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 42%, rgba(255,255,255,.20) 50%, transparent 58%);
  transform: translateX(-72%);
  animation: hpc-secondary-sweep 6.4s 2.2s ease-in-out infinite;
}

@keyframes hpc-secondary-sweep {
  0%, 60% { transform: translateX(-74%); opacity: 0; }
  69% { opacity: .58; }
  84% { transform: translateX(74%); opacity: .42; }
  90%, 100% { transform: translateX(74%); opacity: 0; }
}

/* Bottom value cards get staggered icon energy, visible enough to feel intentional. */
.home .why-item .icon {
  animation: hpc-icon-charge 4.8s ease-in-out infinite;
}
.home .why-item:nth-child(2) .icon { animation-delay: .55s; }
.home .why-item:nth-child(3) .icon { animation-delay: 1.1s; }
.home .why-item:nth-child(4) .icon { animation-delay: 1.65s; }
.home .why-item:nth-child(5) .icon { animation-delay: 2.2s; }

@keyframes hpc-icon-charge {
  0%, 68%, 100% { filter: drop-shadow(0 0 8px rgba(var(--cinema-violet), .18)); transform: translateY(0); }
  80% { filter: drop-shadow(0 0 18px rgba(var(--cinema-cyan), .48)); transform: translateY(-2px); }
}

/* Mobile keeps the character while reducing constant motion and preventing crop issues. */
@media (max-width: 700px) {
  .home .hero-glass {
    animation:
      hpc-hero-in 1s .08s var(--ease-out) forwards,
      hpc-hero-float-mobile 7s 1.2s ease-in-out infinite;
  }

  .home .hero-premium .btn-primary {
    animation: hpc-cta-border 3.6s linear infinite, hpc-cta-breathe-mobile 5s ease-in-out infinite;
  }

  .home .cat-tile,
  .home .section-featured .product-card { animation: none !important; }

  .home .glass-shell::after { animation-duration: 8.6s; }
  .home .section-title::after { bottom: -8px; }

  @keyframes hpc-hero-float-mobile {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -4px; }
  }

  @keyframes hpc-cta-breathe-mobile {
    0%, 100% { box-shadow: 0 12px 30px rgba(84,50,220,.30), 0 0 20px rgba(var(--cinema-violet), .10), inset 0 1px 0 rgba(255,255,255,.28); }
    50% { box-shadow: 0 14px 36px rgba(84,50,220,.38), 0 0 28px rgba(var(--cinema-cyan), .17), inset 0 1px 0 rgba(255,255,255,.32); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .hero-glass,
  .home .hero-premium .btn-primary,
  .home .glass-shell::after,
  .home .section-title::after,
  .home .cat-tile,
  .home .section-featured .product-card,
  .home .ebay-band .btn::after,
  .home .why-item .icon {
    animation: none !important;
    translate: none !important;
  }
}