/* ============================================================
   MyCollection — hero.css
   Full-viewport hero: 3-col grid, poster columns, taglines,
   hero icon, Coming Soon button
   ============================================================ */

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

/* ── Layout ── */
.hero {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr minmax(0, 520px) 1fr;
  position: relative;
  overflow: hidden;
}

/* ── Vivid multi-layer background ── */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 900px 700px at 50% 45%, rgba(121,74,255,.28) 0%, transparent 60%),
    radial-gradient(ellipse 600px 800px at 10% 60%, rgba(74,40,200,.2) 0%, transparent 55%),
    radial-gradient(ellipse 600px 800px at 90% 55%, rgba(100,40,210,.16) 0%, transparent 55%),
    radial-gradient(ellipse 1200px 300px at 50% 0%, rgba(60,20,140,.25) 0%, transparent 50%),
    radial-gradient(ellipse 800px 200px at 50% 100%, rgba(20,10,60,.4) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}

/* Bottom fade into next section */
.hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 180px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none; z-index: 4;
}

/* ── Poster side columns ── */
.hero-posters {
  display: flex; gap: 10px;
  align-items: flex-start;
  overflow: hidden;
  z-index: 1;
  position: relative;
}
.hero-posters-left  { justify-content: flex-end; }
.hero-posters-right { justify-content: flex-start; }

/* Gradient fade overlay (replaces mask-image — fixes Firefox animation) */
.hero-posters-left::after,
.hero-posters-right::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 5;
}
.hero-posters-left::after {
  background: linear-gradient(to right,
    var(--bg) 0%,
    transparent 35%,
    transparent 65%,
    var(--bg) 100%
  );
}
.hero-posters-right::after {
  background: linear-gradient(to left,
    var(--bg) 0%,
    transparent 35%,
    transparent 65%,
    var(--bg) 100%
  );
}

.poster-col {
  display: flex; flex-direction: column; gap: 10px;
  will-change: transform;
}
.poster-col-offset { margin-top: 70px; }

/* ── Poster cards (hero) ── */
.hp {
  width: 185px; height: 278px;
  border-radius: 12px; overflow: hidden; flex-shrink: 0;
  transition: transform .5s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.hp:hover { transform: scale(1.03); }
.hp img { width: 100%; height: 100%; object-fit: cover; }

/* Gradient color fallbacks */
.hp.p1  { background: linear-gradient(160deg,#1a0533,#2d1b69); }
.hp.p2  { background: linear-gradient(160deg,#0d1b2a,#1a3a5c); }
.hp.p3  { background: linear-gradient(160deg,#1a1a0d,#3d3900); }
.hp.p4  { background: linear-gradient(160deg,#2a0d0d,#5c1a1a); }
.hp.p5  { background: linear-gradient(160deg,#0d1a1a,#0d3d3d); }
.hp.p6  { background: linear-gradient(160deg,#150d1a,#3d0d5c); }
.hp.p7  { background: linear-gradient(160deg,#1a150d,#5c3d0d); }
.hp.p8  { background: linear-gradient(160deg,#0d1a0d,#0d5c1a); }
.hp.p9  { background: linear-gradient(160deg,#1a0d15,#5c0d3d); }
.hp.p10 { background: linear-gradient(160deg,#0d0d1a,#1a0d5c); }
.hp.p11 { background: linear-gradient(160deg,#1a1a1a,#2a2a4a); }
.hp.p12 { background: linear-gradient(160deg,#1a0d0d,#3d1a2d); }

/* ── Hero center column ── */
.hero-center {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  padding: 80px 2.5rem 3rem;
  min-width: 0;
  z-index: 2; position: relative;
}

/* ── Sparkle icon above taglines ── */
.hero-top-icon {
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); margin-bottom: 1rem;
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.hero-top-icon.visible { opacity: 1; transform: translateY(0); }
.hero-top-icon svg { width: 32px; height: 32px; }

/* ── Taglines ── */
.hero-taglines { width: 100%; margin-bottom: 2rem; }

.tagline-row {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.tagline-row.visible { opacity: 1; transform: translateY(0); }

.tl-word {
  font-size: clamp(2.2rem, 3.5vw, 4.2rem);
  font-weight: 900; letter-spacing: -.04em; line-height: 1;
  color: var(--text-primary); display: block;
  word-break: break-word; overflow-wrap: break-word;
  hyphens: auto;
}
.tl-dot { color: var(--accent-light); }

.tl-desc {
  color: var(--text-secondary); font-size: .875rem;
  margin: .35rem 0 1rem; line-height: 1.5;
}

.tl-divider {
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); margin: .25rem 0 .75rem;
  opacity: .6;
}

/* ── "Coming Soon" hero button ── */
.btn-gplay-wrap {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.btn-gplay-wrap.visible { opacity: 1; transform: translateY(0); }

.hero-cs-btn {
  display: inline-flex; align-items: center; gap: .75rem;
  background: rgba(121,74,255,.08);
  border: 1px solid rgba(121,74,255,.35);
  padding: .9rem 2.2rem; border-radius: 50px;
  font-size: .9rem; font-weight: 600;
  color: var(--text-primary);
  cursor: default;
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 5px rgba(121,74,255,.06), 0 8px 32px rgba(121,74,255,.15);
  letter-spacing: -.01em;
}
.hero-cs-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  transform: translateX(-100%) skewX(-12deg);
  animation: cs-btn-shine 3.5s ease-in-out infinite;
}
.hero-cs-icon { font-size: 1.15rem; }
.hero-cs-label { letter-spacing: -.01em; }