/* =============================================================
   HERO — Full-bleed cover art hero section
   Reference: Chelsea Cutler layout — photo fills viewport,
   dark overlay, left-anchored title stack, teal CTA button.
   Depends on: tokens.css, global.css
   ============================================================= */


/* -----------------------------------------------------------
   .hero — full-viewport container
----------------------------------------------------------- */
.hero {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: var(--color-platform);
}


/* -----------------------------------------------------------
   .hero__bg — absolutely fills the section
----------------------------------------------------------- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}


/* -----------------------------------------------------------
   .hero__overlay — two-layer darkness over the image
   Layer 1 (::before): flat dark base — makes text readable
   Layer 2 (::after):  gradient — darker at top + bottom,
                        transparent at centre so the image breathes
----------------------------------------------------------- */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-void);
  opacity: 0.55;
}

.hero__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  /* color-mix() lets us use the token with opacity in gradients (Chrome 111+, FF 113+, Safari 16.2+) */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-void) 50%, transparent) 0%,    /* top — nav readability */
    color-mix(in srgb, var(--color-void) 0%, transparent) 30%,    /* open — image breathes */
    color-mix(in srgb, var(--color-void) 0%, transparent) 65%,    /* open — image breathes */
    color-mix(in srgb, var(--color-void) 70%, transparent) 100%   /* bottom — footer readability */
  );
}


/* -----------------------------------------------------------
   .hero__grain — canvas texture overlay
----------------------------------------------------------- */
.hero__grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.045;
  mix-blend-mode: overlay;
}


/* -----------------------------------------------------------
   .hero__content — left-anchored content block
   Sits at ~38% from left edge via padding-left on the block.
   Left-aligned text within the block.
----------------------------------------------------------- */
.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
  padding-left: clamp(var(--space-6), 10vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 80px; /* offset for fixed nav */
}


/* -----------------------------------------------------------
   .hero__eyebrow — "SHOONYA / presents" label
----------------------------------------------------------- */
.hero__eyebrow {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.hero__eyebrow-name {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-chai);
}

.hero__eyebrow-presents {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-signal);
}


/* -----------------------------------------------------------
   .hero__title — stacked Devanagari display heading
----------------------------------------------------------- */
.hero__title {
  display: block;
  margin: 0 0 var(--space-2);
}

.hero__title-line {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 180px);
  font-weight: 300;
  font-style: italic;
  color: var(--color-fluorescent);
  line-height: 0.92;
  letter-spacing: -0.02em;
  /* Initial state for scroll reveal */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.hero__title-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for hero elements — triggered on load, not by observer */
[data-reveal-index="0"] { transition-delay: 0ms; }
[data-reveal-index="1"] { transition-delay: 150ms; }
[data-reveal-index="2"] { transition-delay: 300ms; }
[data-reveal-index="3"] { transition-delay: 450ms; }

/* No-JS fallback — show hero content if JS never runs */
.no-js .hero [data-reveal-index] {
  opacity: 1;
  transform: none;
}


/* -----------------------------------------------------------
   .hero__romanised — "Yeh Shehar" subtitle
----------------------------------------------------------- */
.hero__romanised {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-mist);
  margin-bottom: var(--space-8);
  opacity: 0;
  transition: opacity 0.8s ease 0.4s;
}

.hero__romanised.is-visible {
  opacity: 1;
}


/* -----------------------------------------------------------
   .hero__cta — button wrapper
----------------------------------------------------------- */
.hero__cta {
  opacity: 0;
  transition: opacity 0.8s ease 0.55s;
}

.hero__cta.is-visible {
  opacity: 1;
}


/* -----------------------------------------------------------
   .hero__btn--primary — "OUT NOW" gold button
----------------------------------------------------------- */
.hero__btn--primary {
  display: inline-block;
  background-color: var(--color-chai);
  color: var(--color-void);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 28px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

.hero__btn--primary:hover {
  background-color: color-mix(in srgb, var(--color-chai) 85%, white);
  color: var(--color-void);
}


/* -----------------------------------------------------------
   .hero__scroll — bottom centre scroll indicator
----------------------------------------------------------- */
.hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  justify-content: center;
}

.hero__scroll-line {
  display: block;
  width: 1px;
  height: 48px;
  background-color: var(--color-signal);
  margin: 0 auto;
  transform-origin: top;
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%   { transform: scaleY(1);   opacity: 1; }
  50%  { transform: scaleY(0.3); opacity: 0.3; }
  100% { transform: scaleY(1);   opacity: 1; }
}


/* -----------------------------------------------------------
   RESPONSIVE — mobile (< 768px)
----------------------------------------------------------- */
@media (max-width: 767px) {
  .hero__content {
    margin-left: 0;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
    padding-top: 22vh;
    width: 100%;
  }

  .hero__title-line {
    font-size: clamp(52px, 18vw, 80px);
    line-height: 0.88;
  }

  .hero__eyebrow {
    font-size: 9px;
    letter-spacing: 0.18em;
    flex-wrap: wrap;
    gap: 4px;
  }

  .hero__romanised {
    font-size: 9px;
    letter-spacing: 0.2em;
    margin-bottom: var(--space-6);
  }

  .hero__btn--primary {
    display: block;
    text-align: center;
    padding: 12px 20px;
    width: 100%;
    max-width: 200px;
  }

  .hero__scroll {
    bottom: var(--space-6);
  }
}


/* -----------------------------------------------------------
   RESPONSIVE — tablet (768px–1023px)
----------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__content {
    padding-left: clamp(var(--space-6), 6vw, 80px);
  }

  .hero__title-line {
    font-size: clamp(80px, 12vw, 130px);
  }
}


/* -----------------------------------------------------------
   REDUCED MOTION — disable grain + title animations
----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__title-line,
  .hero__romanised,
  .hero__cta {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__scroll-line {
    animation: none;
  }
}


/* -----------------------------------------------------------
   .hero__socials — vertical social icon strip, bottom right
   Desktop only — hidden on mobile
----------------------------------------------------------- */
.hero__socials {
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-8);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* Decorative vertical line above icons */
.hero__socials::before {
  content: '';
  display: block;
  width: 1px;
  height: 48px;
  background: var(--color-signal);
  opacity: 0.4;
  margin-bottom: var(--space-2);
}

.hero__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.hero__social-link:hover {
  transform: scale(1.15);
}

.hero__social-icon {
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--color-signal);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transition: background-color 0.2s ease;
}

.hero__social-link:hover .hero__social-icon {
  background-color: var(--color-chai);
}

.hero__social-icon--spotify {
  mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/spotify.svg');
  -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/spotify.svg');
}

.hero__social-icon--applemusic {
  mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/applemusic.svg');
  -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/applemusic.svg');
}

.hero__social-icon--amazonmusic {
  mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/amazonmusic.svg');
  -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/amazonmusic.svg');
}

.hero__social-icon--instagram {
  mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/instagram.svg');
  -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/instagram.svg');
}

.hero__social-icon--youtube {
  mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/youtube.svg');
  -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/youtube.svg');
}

@media (max-width: 768px) {
  .hero__socials {
    display: none;
  }
}