/* One complete opening screen, with content-driven overflow on small screens. */
.hero {
  min-height: calc(100vh - var(--entry-header-height, var(--header-height, 100px)));
  min-height: calc(var(--entry-viewport-height, 100svh) - var(--entry-header-height, var(--header-height, 100px)));
  height: auto;
  padding: clamp(32px, 6svh, 80px) 7%;
  justify-content: center;
  overflow: visible;
}
.hero h1 { width: min(780px, 100%); }
.hero > p { margin-top: clamp(24px, 4svh, 40px); }
.hero-event { margin-top: clamp(28px, 6svh, 64px); }
.hero.intro-enter h1 { animation: entry-logo 2s cubic-bezier(.2,.65,.2,1) both; }
.hero.intro-enter > p,
.hero.intro-enter .hero-event { animation: entry-copy 2s ease-out both; }
.hero.intro-enter::before { animation: entry-texture 2s ease-out both; }
@keyframes entry-logo {
  from { opacity: .15; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes entry-copy {
  from { opacity: .45; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes entry-texture {
  from { opacity: 0; }
  to { opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .hero.intro-enter h1, .hero.intro-enter > p,
  .hero.intro-enter .hero-event, .hero.intro-enter::before { animation: none; }
}

/* A single visible brand mark: hero first, navigation after it leaves view. */
.home-page header>.wordmark{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease,visibility .25s}
.home-page.brand-in-header header>.wordmark{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.hero.intro-enter h1{animation:entry-logo-clear 1.8s cubic-bezier(.2,.35,.3,1) both}
.hero.intro-enter>p{animation:entry-copy-clear 1.75s .15s ease-out both}
.hero.intro-enter .hero-event{animation:entry-copy-clear 1.65s .3s ease-out both}
.hero.intro-enter::before{animation:entry-texture 2s ease-out both}
@keyframes entry-logo-clear{from{opacity:.035;transform:translateY(12px);filter:none}to{opacity:1;transform:none;filter:none}}
@keyframes entry-copy-clear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.home-page header>.wordmark{transition:none;transform:none}.hero.intro-enter h1,.hero.intro-enter>p,.hero.intro-enter .hero-event,.hero.intro-enter::before{animation:none}}


/* Scroll-linked opacity: no time-based transition or delayed completion. */
.home-page header>.wordmark,
.home-page.brand-in-header header>.wordmark {
  opacity: var(--brand-progress, 0);
  transform: none;
  filter: blur(var(--brand-blur, 3px));
  transition: none;
}
.home-page .hero h1 img,
.home-page.brand-in-header .hero h1 img {
  opacity: calc(1 - var(--brand-progress, 0));
  transition: none;
}
@media(prefers-reduced-motion:reduce) {
  .home-page header>.wordmark,
  .home-page.brand-in-header header>.wordmark { filter: none; }
}

/* A staggered, soft-focus entrance for the opening copy. */
.hero.intro-enter > p {
  animation: entry-text-reveal 1.15s .25s cubic-bezier(.16,1,.3,1) both;
}
.hero.intro-enter .hero-event { animation: none; }
.hero.intro-enter .hero-event > span {
  animation: entry-text-reveal 1.1s .55s cubic-bezier(.16,1,.3,1) both;
}
.hero.intro-enter .hero-event > span + span { animation-delay: .8s; }
@keyframes entry-text-reveal {
  from { opacity: 0; transform: translateY(22px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero.intro-enter > p,
  .hero.intro-enter .hero-event > span { animation: none; }
}

/* Quiet full-screen opening, with a separate cue at its foot. */
.home-page .hero { padding: 88px 7%; }
.home-page .hero > p { margin-top: clamp(16px, 3svh, 28px); }
.home-page .hero::before {
  opacity: .42;
  background-image: linear-gradient(#a35bf51c, #a35bf51c), url('/assets/pink-liquid-background.jpeg');
  background-blend-mode: color;
}
.scroll-cue {
  position: absolute; bottom: max(22px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 8px 16px; color: #b9b3c2; font-size: 14px;
  white-space: nowrap; opacity: 1; transition: opacity .25s ease;
}
.scroll-cue svg { animation: cue-drift 2.6s ease-in-out infinite; }
.scroll-cue:hover { color: #eee5ff; }
.scroll-cue:focus-visible { outline: 1px solid #c7a2ee; outline-offset: 3px; border-radius: 4px; }
.home-page.has-scrolled .scroll-cue { opacity: 0; pointer-events: none; visibility: hidden; }
@keyframes cue-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media(prefers-reduced-motion:reduce) { .scroll-cue { transition: none; } .scroll-cue svg { animation: none; } }