/* ==================== Premium "alive" hero ==================== */
.hero-premium { position: relative; overflow: hidden; isolation: isolate; padding-top: 140px; padding-bottom: 110px; }
.hero-premium .container { position: relative; z-index: 3; }

/* Base cinematic wash */
.hero-premium { background: radial-gradient(120% 120% at 80% 0%, #fff6ee 0%, var(--lighter) 42%, var(--light) 100%); }
[data-theme="dark"] .hero-premium { background: radial-gradient(120% 120% at 80% 0%, #241206 0%, var(--darker) 45%, #050505 100%); }

/* Particle canvas */
.hero-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

/* Drifting gradient-mesh blobs */
.hero-blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px); opacity: 0.55; pointer-events: none; will-change: transform; }
.blob-a { width: 460px; height: 460px; top: -120px; right: -80px; background: radial-gradient(circle, rgba(255,107,0,0.55), transparent 68%); animation: blobFloatA 18s ease-in-out infinite; }
.blob-b { width: 520px; height: 520px; bottom: -180px; left: -120px; background: radial-gradient(circle, rgba(30,58,95,0.45), transparent 66%); animation: blobFloatB 22s ease-in-out infinite; }
.blob-c { width: 360px; height: 360px; top: 30%; left: 45%; background: radial-gradient(circle, rgba(255,215,0,0.28), transparent 70%); animation: blobFloatC 26s ease-in-out infinite; }
[data-theme="dark"] .hero-blob { opacity: 0.5; }
@keyframes blobFloatA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,60px) scale(1.12); } }
@keyframes blobFloatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,-40px) scale(1.1); } }
@keyframes blobFloatC { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,-30px) scale(0.9); } }

/* Subtle engineered grid overlay */
.hero-grid-lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(rgba(120,120,120,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(120,120,120,0.06) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(circle at 70% 40%, black, transparent 75%); -webkit-mask-image: radial-gradient(circle at 70% 40%, black, transparent 75%); }

/* Cursor-follow light (upgraded, larger + softer) */
.hero-cursor-light { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
  background: radial-gradient(420px circle at var(--mx,60%) var(--my,40%), rgba(255,107,0,0.16), transparent 66%); }
.hero-premium:hover .hero-cursor-light { opacity: 1; }

/* Headline: gradient + light sweep */
.hero-premium .hero-title span { color: var(--primary); background: linear-gradient(100deg, var(--primary) 0%, #FFB067 45%, var(--primary) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 220% 100%; animation: titleSheen 6s ease-in-out infinite; }
@keyframes titleSheen { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* Premium CTA shimmer */
.hero-premium #heroCta { position: relative; overflow: hidden; }
.hero-premium #heroCta::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-18deg); animation: ctaShimmer 3.6s ease-in-out infinite; }
@keyframes ctaShimmer { 0% { left: -120%; } 55%,100% { left: 160%; } }

/* 3D shirt stage */
.hero-premium .hero-product-card { background: transparent; box-shadow: none; perspective: 1100px; overflow: visible; animation: float 6s ease-in-out infinite; }
.hero-premium .hero-product-card::before { display: none; }
.shirt-glow { position: absolute; inset: 8% 14%; z-index: 0; border-radius: 40px; background: radial-gradient(circle at 50% 45%, rgba(255,107,0,0.32), transparent 62%); filter: blur(38px); animation: glowPulse 5s ease-in-out infinite; }
@keyframes glowPulse { 0%,100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.hero-premium .shirt-3d { animation: none; transform-style: preserve-3d; transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,-8deg)); transition: transform 0.15s ease-out; z-index: 2; will-change: transform; }
.hero-premium .shirt-3d-body { box-shadow: inset -24px 0 46px rgba(0,0,0,0.14), inset 24px 0 46px rgba(255,255,255,0.14), 0 40px 70px rgba(255,107,0,0.28); }
.hero-premium .shirt-3d-collar, .hero-premium .shirt-3d-logo { transform: translateZ(40px); }
.hero-premium .shirt-3d-logo { transform: translateZ(55px); }

/* Moving specular sheen across the shirt */
.shirt-sheen { position: absolute; inset: 0; border-radius: 20px 20px 8px 8px; overflow: hidden; z-index: 3; pointer-events: none; }
.shirt-sheen::before { content: ''; position: absolute; top: -60%; left: -30%; width: 60%; height: 220%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent); transform: rotate(18deg); animation: shirtSheen 4.5s ease-in-out infinite; }
@keyframes shirtSheen { 0% { left: -40%; } 55%,100% { left: 130%; } }

/* Glassmorphic floating chips */
.hero-premium .hero-float-badge { background: rgba(255,255,255,0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 12px 32px rgba(0,0,0,0.12); color: #1a1a1a; z-index: 4; will-change: transform; }
[data-theme="dark"] .hero-premium .hero-float-badge { background: rgba(30,30,30,0.5); border-color: rgba(255,255,255,0.12); color: #f5f5f0; }

/* Scroll cue */
.hero-scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; opacity: 0.7; transition: opacity 0.3s; animation: fadeIn 1s ease 0.6s both; }
.hero-scroll:hover { opacity: 1; }
.hero-scroll-wheel { width: 24px; height: 38px; border: 2px solid var(--text-muted); border-radius: 100px; position: relative; }
.hero-scroll-wheel::after { content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background: var(--primary); border-radius: 100px; animation: scrollDot 1.8s ease-in-out infinite; }
.hero-scroll-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); }
@keyframes scrollDot { 0% { opacity: 0; transform: translate(-50%,0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translate(-50%,12px); } 100% { opacity: 0; } }

@media (max-width: 900px) { .hero-scroll { display: none; } .blob-a,.blob-b,.blob-c { opacity: 0.4; } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-blob, .shirt-glow, .shirt-sheen::before, .hero-premium #heroCta::after, .hero-premium .hero-title span, .hero-scroll-wheel::after, .shirt-3d { animation: none !important; }
  .hero-canvas { display: none; }
}