/*
  Hero / landing — three stacked layers.

  - .hero__stage  (z:1)  : the text content (names, subtitle, paragraph)
                            sitting centered on the cream "stage"
  - .hero__veil   (z:2)  : closed-curtain texture covering the stage, split
                            into two halves; on tap the halves slide outward
                            (left/right) revealing the stage underneath
  - .hero__frame  (z:3)  : open-curtain frame PNG (transparent middle) painted
                            on top of everything as a permanent decorative
                            border; never moves
  - .hero__hint   (z:4)  : "натисніть, щоб продовжити" label floating over
                            the veil; fades out together with the lift

  Scroll is locked by JS until the veil has finished lifting.
*/

#hero {
  position: relative;
  min-height: 100svh;
  background: var(--color-cream);
  color: var(--color-navy);
  overflow: hidden;
  isolation: isolate;
}

/* Pointer-cursor and tap-to-open semantics only apply while the curtain
   is gated. Once it opens, the hero is just a regular text region. */
#hero.is-gating {
  cursor: pointer;
}

/* On wider cards give the hero more vertical space so the open-curtain
   frame has room to breathe instead of feeling squat. The .is-gating
   override below keeps the closed-curtain landing locked to 100svh so
   the tap-to-open zone always fits on screen. */
@container card (min-width: 30rem) {
  #hero {
    min-height: clamp(100svh, calc(100svh + 40cqw), 140svh);
  }
}

/* While the curtain gate is active (set by curtain.js), hide everything
   below the hero so the document is only as tall as the hero itself. The
   user can scroll within the hero (e.g. on short landscape viewports to
   reach the tap-to-open zone) but can't scroll past into the rest of the
   invitation. */
#hero.is-gating ~ #date {
  display: none;
}

.hero__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7rem clamp(1rem, 10cqw, 5.5rem) 6rem;
  text-align: center;
  z-index: 1;
}

/* Force-restore text selection on the hero copy — some browsers apply
   user-select: none to descendants of role="button" via the UA stylesheet,
   and the rule isn't always picked up via inheritance. */
.hero__subtitle,
.hero__names,
.hero__message {
  -webkit-user-select: text !important;
          user-select: text !important;
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}
/* Once the curtain opens the veil halves slide off-screen, but the veil
   container itself stays at z:2/inset:0 and would intercept clicks and
   text-selection drags on the names/message below. Drop pointer-events
   so the hero copy underneath is reachable. */
#hero.hero--opened .hero__veil {
  pointer-events: none;
}
.hero__veil-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: url('/assets/closed-curtain.png') no-repeat;
  /* Cover both dimensions of the half so the curtain fully fills the hero
     vertically; top anchor keeps the valance pinned to the page top and any
     excess crops at the bottom of the drape (a uniform velvet area). */
  background-size: cover;
  transition: transform 2.4s cubic-bezier(0.6, 0.05, 0.3, 1);
  will-change: transform;
}
.hero__veil-half--left {
  left: 0;
  background-position: top left;
}
.hero__veil-half--right {
  right: 0;
  background-position: top right;
}
#hero.hero--opened .hero__veil-half--left {
  transform: translateX(-105%);
}
#hero.hero--opened .hero__veil-half--right {
  transform: translateX(105%);
}

.hero__frame {
  position: absolute;
  inset: 0;
  background: url('/assets/curtain-frame.png') center top/cover no-repeat;
  z-index: 3;
  pointer-events: none;
}

/* Landing label = cherub stacked above the "tap to continue" hint, the pair
   centered both axes on the veil. Sits above the veil; fades together with
   it on tap. */
.hero__landing-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  z-index: 4;
  pointer-events: none;
  text-align: center;
  animation: hero-hint-pulse 2.4s ease-in-out infinite;
}

.hero__cherub {
  width: clamp(7rem, 32cqw, 13rem);
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.55));
}

.hero__hint {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--color-cream);
  font-size: clamp(1.05rem, 3cqw, 1.4rem);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  text-transform: uppercase;
}

@keyframes hero-hint-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* When the veil lifts, kill the pulse and fade the whole label out. */
#hero.hero--opened .hero__landing-label {
  animation: hero-hint-fade 0.4s ease forwards;
}
@keyframes hero-hint-fade {
  to { opacity: 0; }
}

/* Stage text widths shrink toward the top of the section to match the curtain
   opening's narrower silhouette there (curtain pinches at the valance). */
.hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 2cqw, 0.85rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: clamp(2rem, 6cqw, 3.5rem);
  max-width: clamp(11rem, 32cqw, 15rem);
  line-height: 1.7;
}

/* On wider cards the curtain frame's central swag scales up and hangs into
   the subtitle area. Push the subtitle (and, by virtue of being the first
   flex item, the rest of the centered group) down so it clears the valance. */
@container card (min-width: 30rem) {
  .hero__subtitle {
    margin-top: clamp(5rem, 26cqw, 14rem);
  }
}

.hero__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  color: var(--color-navy);
  margin: 0;
  line-height: 0.95;
  letter-spacing: -0.01em;
  max-width: clamp(16rem, 42cqw, 18rem);
}
.hero__name {
  font-size: clamp(2.8rem, 15cqw, 6rem);
}
.hero__amp {
  font-size: clamp(1.8rem, 8cqw, 3.2rem);
  margin: -0.05em 0;
  color: var(--color-navy);
  font-style: normal;
}

.hero__message {
  margin-top: clamp(2rem, 6cqw, 3.25rem);
  font-size: clamp(0.85rem, 2.4cqw, 1rem);
  line-height: 1.75;
  color: var(--color-text);
  max-width: clamp(16rem, 42cqw, 18rem);
}
/* Second hero__message paragraph sits closer to the first — they're two
   sentences of the same thought, not separate paragraphs. */
.hero__message + .hero__message {
  margin-top: 1rem;
}