.intro {
  --cover-gold: #d7a94f;
  --cover-ivory: #f7f0df;
  --cover-green: #233d27;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(72, 104, 61, .28), transparent 42%),
    linear-gradient(145deg, #1b3421, var(--cover-green) 52%, #18301e);
}

.intro::after {
  box-shadow: inset 0 0 10rem rgba(4, 18, 8, .42);
}

.intro-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  height: 100vh;
  min-height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  padding: max(1rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 4rem) max(.75rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.cover-floral-side {
  position: absolute;
  z-index: 0;
  bottom: -1%;
  width: clamp(18rem, 30vw, 31rem);
  height: 106%;
  overflow: hidden;
  pointer-events: none;
  transform-origin: bottom;
  animation: cover-floral-grow 2.25s cubic-bezier(.18, .76, .2, 1) .1s both;
}

.cover-floral-side img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  filter: saturate(.78) sepia(.08) drop-shadow(0 .75rem 1.4rem rgba(4, 16, 8, .16));
}

.cover-floral-left { left: -1.2%; }
.cover-floral-right { right: -1.2%; }
.cover-floral-right img { transform: scaleX(-1); }

.intro-card > .seal {
  z-index: 3;
  flex: 0 0 auto;
  width: clamp(4.8rem, 6.8vw, 6.5rem);
  height: clamp(4.8rem, 6.8vw, 6.5rem);
  margin: 0 auto clamp(.65rem, 1.4vh, .9rem);
  border-color: rgba(215, 169, 79, .9);
  background: rgba(21, 53, 30, .18);
  color: var(--cover-ivory);
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  box-shadow: 0 0 0 1px rgba(215, 169, 79, .08) inset;
}

.intro-card > .seal::before,
.intro-card > .seal::after { width: clamp(1.2rem, 3.2vw, 2.8rem); }

.intro-card > .kicker {
  z-index: 3;
  width: min(76vw, 40rem);
  margin: 0;
  color: rgba(247, 240, 223, .96);
  font-size: clamp(.64rem, 1.15vw, .82rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .34em;
}

.cover-ornament {
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: clamp(.4rem, .9vh, .65rem) 0 clamp(.25rem, .7vh, .5rem);
  color: var(--cover-gold);
  font-size: .9rem;
}

.cover-ornament i {
  width: 2.1rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}

.cover-ornament i:last-child { transform: scaleX(-1); }

.intro-card > h1 {
  z-index: 3;
  margin: 0;
  color: var(--cover-ivory);
  font-size: clamp(5.3rem, 9vw, 8rem);
  line-height: .72;
  letter-spacing: -.03em;
  text-shadow: 0 4px 28px rgba(5, 15, 9, .34);
}

.intro-card .name-line { margin-top: .1em; }
.intro-card .name-line em { color: var(--cover-gold); }

.intro-card > p.cover-date {
  z-index: 3;
  margin: clamp(.9rem, 1.8vh, 1.25rem) 0 clamp(.7rem, 1.5vh, 1rem);
  color: rgba(247, 240, 223, .9);
  font-size: clamp(.68rem, 1.05vw, .82rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.intro-card > .pill {
  z-index: 5;
  flex: 0 0 auto;
  width: min(26rem, 42vw);
  min-width: 19rem;
  padding: .85rem 1.5rem;
  border-color: rgba(215, 169, 79, .92);
  color: rgba(247, 240, 223, .98);
  background: rgba(17, 48, 27, .36);
  backdrop-filter: blur(3px);
}

.intro-card > .pill span {
  margin-left: clamp(2.2rem, 5vw, 4.2rem);
  font-size: 1.25em;
}

.cover-ganpati-stage {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(-20rem, -28vh, -13rem);
  width: clamp(21rem, 29vw, 30rem);
  aspect-ratio: 1099 / 1431;
  margin: 0;
  overflow: visible;
  clip-path: none;
  filter: drop-shadow(0 1rem 2rem rgba(3, 14, 7, .25));
  transform: translateX(-50%);
  animation: cover-ganpati-rise 1.55s cubic-bezier(.18, .78, .22, 1) .35s both;
  pointer-events: none;
}

.cover-ganpati {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 760px) {
  .intro-card { gap: 0; padding-inline: .8rem; }
  .cover-floral-side { width: clamp(13rem, 58vw, 20rem); height: 100%; opacity: .78; }
  .cover-floral-left { left: -20%; }
  .cover-floral-right { right: -20%; }
  .intro-card > .seal { width: clamp(4.5rem, 18vw, 5.2rem); height: clamp(4.5rem, 18vw, 5.2rem); margin-bottom: clamp(.45rem, 1.1vh, .7rem); }
  .intro-card > .kicker { width: 92vw; font-size: clamp(.58rem, 2.5vw, .7rem); letter-spacing: .22em; }
  .cover-ornament { margin-block: .35rem .2rem; }
  .intro-card > h1 { font-size: clamp(4.4rem, 20vw, 6rem); }
  .intro-card > p.cover-date { max-width: 94vw; margin: clamp(.65rem, 1.4vh, .9rem) 0; font-size: clamp(.61rem, 2.7vw, .72rem); line-height: 1.5; letter-spacing: .1em; }
  .intro-card > .pill { width: min(88vw, 23rem); min-width: 0; padding: .8rem 1.15rem; }
  .cover-ganpati-stage { bottom: clamp(-18rem, -32vh, -10rem); width: clamp(20rem, 78vw, 28rem); }
}

@media (min-width: 761px) and (max-height: 900px) and (orientation: landscape) {
  .intro-card { padding-top: max(.7rem, env(safe-area-inset-top)); }
  .intro-card > .seal { width: clamp(4.25rem, 10vh, 5.2rem); height: clamp(4.25rem, 10vh, 5.2rem); margin-bottom: .45rem; }
  .intro-card > .kicker { font-size: clamp(.58rem, 1.45vh, .72rem); }
  .cover-ornament { margin-block: .25rem .1rem; }
  .intro-card > h1 { font-size: clamp(4.4rem, 12vh, 6.4rem); }
  .intro-card > p.cover-date { margin: .55rem 0 .6rem; }
  .intro-card > .pill { padding-block: .68rem; }
  .cover-ganpati-stage { bottom: clamp(-19rem, -38vh, -12rem); width: clamp(19rem, 36vh, 24rem); }
}

@media (max-height: 620px) and (orientation: landscape) {
  .intro-card { padding-block: .45rem; }
  .intro-card > .seal { width: 3.8rem; height: 3.8rem; margin-bottom: .2rem; font-size: 1.08rem; }
  .intro-card > .kicker { font-size: .56rem; }
  .cover-ornament { margin-block: .12rem 0; }
  .intro-card > h1 { font-size: clamp(3.65rem, 14vh, 4.8rem); }
  .intro-card > p.cover-date { margin: .35rem 0; font-size: .6rem; }
  .intro-card > .pill { width: min(22rem, 42vw); padding-block: .55rem; }
  .cover-ganpati-stage { bottom: -52%; width: min(35vh, 18rem); }
  .cover-floral-side { width: min(30vw, 18rem); }
}

@media (prefers-reduced-motion: reduce) {
  .cover-floral-side,
  .cover-ganpati-stage { animation: none; }
}

@keyframes cover-floral-grow {
  0% { clip-path: inset(100% 0 0 0); opacity: 0; transform: translateY(5%) scaleY(.9); }
  100% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateY(0) scaleY(1); }
}

@keyframes cover-ganpati-rise {
  0% { opacity: 0; transform: translate(-50%, 18%); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}