/* Headley's PC Parts — premium homepage art direction
   Scoped entirely to .home so store/admin behavior stays untouched. */

.home {
  --glass: rgba(9, 12, 22, .58);
  --glass-strong: rgba(7, 9, 17, .76);
  --glass-line: rgba(255,255,255,.12);
  --glass-line-hot: rgba(147, 126, 255, .38);
  --ink: #f7f8ff;
  --muted-ink: #b9bed0;
  --violet: #8b5cf6;
  --violet-hot: #a78bfa;
  --cyan-hot: #67e8f9;
  --stage-shadow: 0 28px 80px rgba(0,0,0,.48);
  background: #05060a;
}

.home::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -4;
  background: #04050a url('/images/hero/headleys-hardware-desktop.png') 68% 44% / cover no-repeat;
  transform: scale(1.025);
}

.home::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 30%, rgba(100, 68, 255, .16), transparent 31%),
    radial-gradient(circle at 84% 58%, rgba(42, 211, 238, .10), transparent 25%),
    linear-gradient(90deg, rgba(3,4,9,.93) 0%, rgba(3,4,9,.75) 26%, rgba(3,4,9,.22) 62%, rgba(3,4,9,.56) 100%),
    linear-gradient(180deg, rgba(2,3,8,.45), rgba(2,3,8,.18) 35%, rgba(2,3,8,.68) 100%);
}

.home .site-stage-noise {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E");
}

/* Chrome becomes part of the glass world */
.home .announce {
  background: rgba(3,4,9,.40);
  border-bottom: 1px solid rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
}

.home .site-header,
.home .site-header.is-stuck {
  background: rgba(7,9,17,.48);
  border-bottom-color: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
  box-shadow: 0 16px 50px rgba(0,0,0,.24);
}

.home .site-header .container {
  position: relative;
}

.home .site-header .container::after {
  content: '';
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.45), rgba(34,211,238,.26), transparent);
  opacity: .55;
}

.home .search-form input,
.home .site-header.is-stuck .search-form input {
  background: rgba(10,12,22,.58);
  border-color: rgba(255,255,255,.11);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.home .cat-nav {
  background: rgba(5,7,14,.38);
  border-bottom: 1px solid rgba(255,255,255,.055);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}

.home .brand-mark {
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 30px rgba(124,58,237,.27), inset 0 0 18px rgba(34,211,238,.08);
}

/* Hero */
.home .hero-premium {
  min-height: min(900px, calc(100svh - 10px));
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  margin-top: 0;
}

.home .hero-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 22% 46%, rgba(14,18,34,.36), transparent 42%),
    linear-gradient(180deg, transparent 70%, rgba(4,5,10,.58) 100%);
}

.home .hero-premium .container {
  width: 100%;
  padding-top: clamp(70px, 11vh, 150px);
  padding-bottom: clamp(80px, 12vh, 150px);
}

.home .hero-glass {
  position: relative;
  width: min(760px, 72vw);
  padding: clamp(26px, 4.2vw, 56px) clamp(24px, 4.8vw, 62px);
  border: 1px solid rgba(255,255,255,.115);
  border-radius: 32px;
  background:
    linear-gradient(145deg, rgba(18,22,40,.66), rgba(7,9,17,.36) 62%, rgba(10,13,24,.47));
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);
  box-shadow:
    0 38px 100px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.095),
    inset 0 -1px 0 rgba(139,92,246,.07);
  overflow: hidden;
}

.home .hero-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 70%) var(--my, 20%), rgba(134,119,255,.18), transparent 28%);
  transition: opacity .3s ease;
}

.home .hero-glass::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 1px;
  left: 34px;
  top: 0;
  background: linear-gradient(90deg, transparent, rgba(103,232,249,.92), rgba(167,139,250,.95), transparent);
  filter: drop-shadow(0 0 12px rgba(103,232,249,.8));
  animation: hpc-glass-scan 5.5s ease-in-out infinite;
}

@keyframes hpc-glass-scan {
  0%, 100% { transform: translateX(-110px); opacity: .25; }
  45%, 55% { opacity: 1; }
  50% { transform: translateX(520px); }
}

.home .hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #d9dcff;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.home .hero-kicker::before {
  content: '';
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan-hot), var(--violet));
  box-shadow: 0 0 12px rgba(103,232,249,.7);
}

.home .hero-premium .hero-title {
  font-size: clamp(3.45rem, 7.8vw, 7.45rem);
  line-height: .82;
  letter-spacing: -.065em;
  margin: 0 0 24px;
  max-width: 10ch;
  text-transform: uppercase;
  text-wrap: balance;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.38));
}

.home .hero-premium .hero-title .line-1,
.home .hero-premium .hero-title .line-2 {
  display: block;
}

.home .hero-premium .hero-title .line-2 {
  color: transparent;
  -webkit-text-stroke: 1px rgba(239,241,255,.94);
  background: linear-gradient(92deg, #fff 4%, #d9d3ff 40%, #8eeeff 78%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: hpc-title-light 6s ease-in-out infinite;
}

@keyframes hpc-title-light {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(139,92,246,0)); background-position: 0% 50%; }
  50% { filter: drop-shadow(0 0 18px rgba(139,92,246,.24)); background-position: 100% 50%; }
}

.home .hero-premium .hero-sub {
  max-width: 520px;
  color: #d1d6e6;
  font-size: clamp(1rem, 1.45vw, 1.2rem);
  margin-bottom: 30px;
}

.home .hero-premium .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.home .hero-premium .btn-primary {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(184,167,255,.45);
  box-shadow: 0 12px 34px rgba(98,55,230,.30), inset 0 1px 0 rgba(255,255,255,.26);
}

.home .hero-premium .btn-primary::after {
  content: '';
  position: absolute;
  inset: -80% -30%;
  background: linear-gradient(108deg, transparent 39%, rgba(255,255,255,.38) 49%, transparent 59%);
  transform: translateX(-70%) rotate(4deg);
  transition: transform .7s var(--ease-out);
}

.home .hero-premium .btn-primary:hover::after { transform: translateX(70%) rotate(4deg); }

.home .hero-premium .btn-ghost {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.home .hero-premium .hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.home .hero-premium .hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #aeb5c7;
  font-size: .78rem;
}

.home .hero-premium .hero-trust .icon { color: var(--cyan-hot); }

.home .hero-side-readout {
  position: absolute;
  right: clamp(24px, 4vw, 72px);
  bottom: clamp(42px, 7vh, 90px);
  display: grid;
  gap: 7px;
  color: rgba(224,229,244,.58);
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.home .hero-side-readout::before {
  content: '';
  width: 1px;
  height: 72px;
  margin: 0 auto 8px;
  background: linear-gradient(180deg, transparent, rgba(103,232,249,.75), rgba(139,92,246,.72));
}

/* Glass section architecture */
.home main > .section,
.home .ebay-band {
  background: transparent !important;
}

.home .section { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }

.home .glass-shell {
  position: relative;
  padding: clamp(26px, 4vw, 54px);
  border: 1px solid var(--glass-line);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(14,17,31,.66), rgba(7,9,17,.49));
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
  box-shadow: var(--stage-shadow), inset 0 1px 0 rgba(255,255,255,.07);
  overflow: hidden;
}

.home .glass-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 0%, rgba(139,92,246,.12), transparent 30%),
    radial-gradient(circle at 92% 100%, rgba(34,211,238,.07), transparent 25%);
}

.home .section-head,
.home .cat-grid,
.home .trust-strip,
.home .product-grid,
.home .why-grid { position: relative; z-index: 1; }

.home .section-title {
  font-size: clamp(2rem, 4.2vw, 4.15rem);
  letter-spacing: -.055em;
  line-height: .95;
  text-transform: none;
}

.home .section-head { align-items: end; margin-bottom: 32px; }

.home .section-link {
  position: relative;
  color: #dfe3ef;
  padding-bottom: 5px;
}

.home .section-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--violet), var(--cyan-hot));
  transform: scaleX(.3); transform-origin: left;
  transition: transform .35s ease;
}
.home .section-link:hover::after { transform: scaleX(1); }

/* Categories become floating panes, not ordinary cards */
.home .cat-grid {
  gap: 14px;
}

.home .cat-tile {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(10,12,20,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 18px 40px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform .45s var(--ease-out), border-color .35s ease, box-shadow .45s ease;
  overflow: hidden;
}

.home .cat-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(160,140,255,.18), transparent 32%);
  opacity: 0;
  transition: opacity .3s ease;
}

.home .cat-tile:hover {
  transform: translateY(-7px) scale(1.012);
  border-color: rgba(151,130,255,.40);
  box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 32px rgba(104,77,255,.08);
}
.home .cat-tile:hover::after { opacity: 1; }
.home .cat-tile img { transition: transform .75s var(--ease-out), filter .6s ease; }
.home .cat-tile:hover img { transform: scale(1.055); filter: saturate(1.12) contrast(1.05); }

/* Trust strip as a transparent instrument readout */
.home .trust-strip {
  margin-top: 28px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: transparent;
}
.home .trust-item { background: transparent; }
.home .trust-item .icon { color: var(--cyan-hot); filter: drop-shadow(0 0 10px rgba(103,232,249,.2)); }

/* Product spotlight */
.home .section-featured .glass-shell { background: linear-gradient(145deg, rgba(7,9,17,.55), rgba(8,10,19,.34)); }
.home .product-card {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(20,23,37,.65), rgba(8,10,18,.55));
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 20px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
  transition: transform .42s var(--ease-out), border-color .35s ease, box-shadow .42s ease;
}
.home .product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 20%), rgba(117,94,255,.16), transparent 30%);
  opacity: 0;
  transition: opacity .25s ease;
}
.home .product-card:hover {
  transform: translateY(-8px);
  border-color: rgba(156,135,255,.34);
  box-shadow: 0 30px 70px rgba(0,0,0,.33), 0 0 38px rgba(110,73,255,.07);
}
.home .product-card:hover::before { opacity: 1; }
.home .product-card-img { background: linear-gradient(180deg, rgba(19,23,37,.65), rgba(9,11,19,.2)); }
.home .product-card-img img { transition: transform .62s var(--ease-out), filter .45s ease; }
.home .product-card:hover .product-card-img img { transform: scale(1.035) translateY(-3px); filter: contrast(1.05) saturate(1.08); }
.home .add-to-cart-btn {
  border: 1px solid rgba(159,137,255,.22);
  background: rgba(110,72,235,.15);
  color: #ebe7ff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.home .add-to-cart-btn:hover { background: linear-gradient(135deg, #7c3aed, #5b4ef4); border-color: transparent; box-shadow: 0 10px 28px rgba(92,63,230,.28); }

/* eBay credibility as a floating lit glass slab */
.home .ebay-band { padding: 30px 0; }
.home .ebay-band .container {
  position: relative;
}
.home .ebay-band-inner {
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  background: linear-gradient(105deg, rgba(12,15,27,.78), rgba(20,15,40,.55) 52%, rgba(6,20,28,.48));
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
  box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
  overflow: hidden;
}
.home .ebay-band-inner::before {
  content: '';
  position: absolute;
  inset: -100% 45% -100% -20%;
  transform: rotate(9deg);
  background: linear-gradient(90deg, transparent, rgba(117,94,255,.13), rgba(103,232,249,.08), transparent);
  animation: hpc-ebay-breathe 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hpc-ebay-breathe { 0%,100%{ transform: translateX(-7%) rotate(9deg); opacity:.42; } 50%{ transform: translateX(25%) rotate(9deg); opacity:1; } }

/* why section */
.home .why-grid { gap: 14px; }
.home .why-item {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 22px 18px;
  background: rgba(8,10,18,.36);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform .35s var(--ease-out), border-color .3s ease, background .3s ease;
}
.home .why-item:hover { transform: translateY(-5px); border-color: rgba(139,92,246,.28); background: rgba(19,18,36,.48); }
.home .why-item .icon { color: var(--violet-hot); filter: drop-shadow(0 0 12px rgba(139,92,246,.2)); }

/* Reveal choreography */
.home [data-premium-reveal] {
  opacity: 0;
  transform: translateY(28px) scale(.99);
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
}
.home [data-premium-reveal].is-visible { opacity: 1; transform: translateY(0) scale(1); }
.home [data-premium-reveal='left'] { transform: translateX(-28px); }
.home [data-premium-reveal='left'].is-visible { transform: translateX(0); }

.home .hero-glass { opacity: 0; transform: translateY(18px) scale(.985); animation: hpc-hero-in 1s .12s var(--ease-out) forwards; }
@keyframes hpc-hero-in { to { opacity: 1; transform: translateY(0) scale(1); } }

/* Fine pointer spotlight behavior */
@media (hover:hover) and (pointer:fine) {
  .home .hero-glass,
  .home .cat-tile,
  .home .product-card { will-change: transform; }
}

@media (max-width: 900px) {
  .home::before {
    background-image: url('/images/hero/headleys-hardware-mobile.png');
    background-position: 62% 22%;
    transform: scale(1.01);
  }
  .home::after {
    background:
      linear-gradient(180deg, rgba(3,4,9,.60) 0%, rgba(3,4,9,.34) 32%, rgba(3,4,9,.64) 100%),
      linear-gradient(90deg, rgba(3,4,9,.76), rgba(3,4,9,.17) 62%, rgba(3,4,9,.44));
  }
  .home .hero-premium { min-height: 760px; align-items: flex-end; }
  .home .hero-premium .container { padding-top: 110px; padding-bottom: 76px; }
  .home .hero-glass { width: 100%; border-radius: 26px; }
  .home .hero-side-readout { display: none; }
  .home .section-title { font-size: clamp(2rem, 8vw, 3.2rem); }
}

@media (max-width: 620px) {
  .home .hero-premium { min-height: 720px; }
  .home .hero-premium .hero-title { font-size: clamp(3rem, 17vw, 5rem); max-width: 8.5ch; }
  .home .hero-glass { padding: 25px 20px; border-radius: 22px; }
  .home .hero-premium .hero-trust { gap: 8px 12px; }
  .home .hero-premium .hero-trust li { font-size: .72rem; }
  .home .glass-shell { padding: 22px 16px; border-radius: 22px; }
  .home .section { padding-top: 36px; padding-bottom: 36px; }
  .home .section-head { margin-bottom: 22px; }
  .home .ebay-band-inner { border-radius: 22px; }
}

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