/* Homepage premium hero art direction - light / minimal-red theme */
.hero.hero-premium { background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%); }
.hero-premium .hero-slide { background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%); }
.hero-premium .hero-slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 60% at 85% 20%, rgba(235,10,30,.05), transparent 70%); }
.hero-premium .hero-container { grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: 30px; }
.hero-premium .hero-left, .hero-premium .hero-right { position: relative; z-index: 2; }
.hero-premium .hero-left { padding-left: 28px; border-left: 3px solid var(--red); }
.hero-premium .hero-left .eyebrow { color: var(--red); }
.hero-premium .hero-left h1 { max-width: 650px; font-size: clamp(2.4rem, 5.6vw, 4.3rem); letter-spacing: normal; color: var(--ink); }
.hero-premium .hero-left h1 span { display: inline; color: var(--red); }
.hero-premium .hero-text { max-width: 510px; font-size: 1rem; }
.hero-premium .hero-pills { margin: 24px 0 28px; }.hero-premium .hero-pills span { padding: 8px 12px; font-size: .78rem; }
.hero-artwork { position: relative; width: min(100%, 600px); margin-left: auto; padding: 18px 0 18px 18px; }
.hero-artwork::before { content: ""; position: absolute; top: 0; right: 18px; width: 86%; height: 88%; border: 1px solid rgba(235,10,30,.35); transform: translate(-22px, 26px); }
.hero-artwork::after { content: attr(data-number); position: absolute; right: -5px; bottom: -28px; z-index: -1; color: rgba(17,17,17,.06); font-family: "Bebas Neue", sans-serif; font-size: clamp(9rem, 17vw, 16rem); line-height: .7; }
.hero-artwork img { width: 100%; height: min(62vh, 585px); min-height: 415px; border-radius: 3px; object-fit: cover; box-shadow: 22px 24px 0 rgba(235,10,30,.14), 0 28px 60px rgba(0,0,0,.15); }
.hero-art-label { position: absolute; left: 0; bottom: 42px; z-index: 2; padding: 14px 18px; background: var(--red); color: #ffffff; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.hero-art-stamp { position: absolute; top: 38px; right: 12px; z-index: 2; display: grid; place-items: center; width: 92px; height: 92px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: var(--red); color: var(--white); font-family: "Bebas Neue", sans-serif; font-size: 1.05rem; line-height: 1.05; text-align: center; transform: rotate(12deg); }
.hero-premium .hero-slide-two { background: linear-gradient(180deg, var(--surface) 0%, #ffffff 100%); }.hero-premium .hero-slide-three { background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%); }
.hero-premium .particle-layer { opacity: .5; }.hero-premium .orb { opacity: .5; }.hero-premium .orb-two { background: rgba(235,10,30,.10); }
@media (max-width: 1024px) { .hero-premium .hero-container { grid-template-columns: 1fr; }.hero-premium .hero-left { text-align: left; }.hero-premium .hero-artwork { margin: 0 auto; }.hero-premium .hero-left h1 { max-width: none; } }
@media (max-width: 768px) { .hero-premium .hero-slide { padding: 108px 0 68px; }.hero-premium .hero-container { display: grid; text-align: left; gap: 30px; }.hero-premium .hero-left { display: block; padding-left: 18px; }.hero-premium .hero-left .eyebrow,.hero-premium .hero-left h1,.hero-premium .hero-text,.hero-premium .hero-pills,.hero-premium .hero-actions,.hero-premium .hero-right { width: auto; order: unset; }.hero-premium .hero-left h1 { font-size: clamp(2rem, 9vw, 3.1rem); }.hero-premium .hero-pills,.hero-premium .hero-actions { justify-content: flex-start; }.hero-premium .hero-artwork { padding: 12px 0 12px 12px; }.hero-premium .hero-artwork img { height: 360px; min-height: 0; }.hero-premium .hero-artwork::before { transform: translate(-16px, 20px); }.hero-premium .hero-art-stamp { width: 72px; height: 72px; font-size: .8rem; }.hero-premium .hero-art-label { bottom: 28px; padding: 10px 12px; font-size: .62rem; } }

/* Dynamic banner slider (Swiper) */
.hero-swiper { position: relative; min-height: 100vh; }
.hero-swiper .swiper-slide { height: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: opacity; transform: translateZ(0); }
.hero-swiper .swiper-slide img { will-change: auto; }
.hero-swiper .swiper-slide .hero-slide { min-height: 100vh; }
.hero-swiper .hero-pagination { position: absolute; left: 50%; bottom: 28px; z-index: 5; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 9px; width: auto; }
.hero-swiper .hero-pagination .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0; border-radius: 999px; background: rgba(17, 17, 17, .25); box-shadow: 0 0 0 1px rgba(17, 17, 17, .12); opacity: 1; transition: background .25s ease, transform .25s ease; }
.hero-swiper .hero-pagination .swiper-pagination-bullet-active { background: var(--red); transform: scale(1.25); }
.hero-swiper .hero-nav-prev, .hero-swiper .hero-nav-next { z-index: 5; width: 46px; height: 46px; margin-top: -23px; color: var(--red); background: #ffffff; border: 1px solid var(--border); border-radius: 50%; box-shadow: 0 6px 18px rgba(0,0,0,.10); transition: background .25s ease, border-color .25s ease, color .25s ease; }
.hero-swiper .hero-nav-prev:hover, .hero-swiper .hero-nav-next:hover { background: var(--red); color: #ffffff; border-color: var(--red); }
.hero-swiper .hero-nav-prev:after, .hero-swiper .hero-nav-next:after { font-size: 1rem; font-weight: 700; }
@media (max-width: 900px) { .hero-swiper .hero-nav-prev, .hero-swiper .hero-nav-next { display: none; } }

/* ===== Hero motion: staggered content entrance, parallax drift, gentle float ===== */
/* Content is only hidden once JS adds .hero-anim-ready, so a script failure never blanks the hero. */
.hero-anim-ready .swiper-slide .hero-left > *,
.hero-anim-ready .swiper-slide .hero-artwork { opacity: 0; }

@keyframes heroContentIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes heroArtIn { from { opacity: 0; transform: translateX(46px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.hero-anim-ready .swiper-slide-active .hero-left .eyebrow { animation: heroContentIn .6s cubic-bezier(.16,1,.3,1) both; animation-delay: .12s; }
.hero-anim-ready .swiper-slide-active .hero-left h1 { animation: heroContentIn .65s cubic-bezier(.16,1,.3,1) both; animation-delay: .24s; }
.hero-anim-ready .swiper-slide-active .hero-left .hero-text { animation: heroContentIn .6s cubic-bezier(.16,1,.3,1) both; animation-delay: .38s; }
.hero-anim-ready .swiper-slide-active .hero-left .hero-pills { animation: heroContentIn .6s cubic-bezier(.16,1,.3,1) both; animation-delay: .48s; }
.hero-anim-ready .swiper-slide-active .hero-left .hero-actions { animation: heroContentIn .6s cubic-bezier(.16,1,.3,1) both; animation-delay: .56s; }
.hero-anim-ready .swiper-slide-active .hero-artwork { animation: heroArtIn .85s cubic-bezier(.16,1,.3,1) both; animation-delay: .2s; }

/* Parallax layer (script.js sets --move-x/--move-y on .hero on mousemove). */
.hero-premium .hero-right { transition: transform .25s ease-out; transform: translate3d(var(--move-x, 0px), var(--move-y, 0px), 0); }
/* Gentle continuous float on the artwork image (separate element from the parallax + entrance layers). */
.hero-premium .hero-artwork img { animation: heroFloat 5.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .hero-anim-ready .swiper-slide .hero-left > *,
  .hero-anim-ready .swiper-slide .hero-artwork { opacity: 1; animation: none; }
  .hero-premium .hero-right { transform: none; }
  .hero-premium .hero-artwork img { animation: none; }
}