/* One permanent photo surface, from the small waterdrop to the finished page.
   Move the existing header clearance inside Hero, not during the animation:
   copy/next-section positions stay put while photography reaches the top edge. */
body.home-floating-nav{--home-hero-clearance:var(--header-height-expanded)}
body.home-floating-nav .hero{margin-top:calc(-1 * var(--home-hero-clearance));min-height:100svh}
.hero-masthead-space{height:var(--home-hero-clearance);pointer-events:none}
@media(max-width:900px){body.home-floating-nav{--home-hero-clearance:96px}}
html.home-opening-pending{background:var(--paper,#fff)}
.home-opening{display:none;position:fixed;inset:0;z-index:100;pointer-events:none;--opening-paper:var(--paper,#fff)}
.home-opening-pending .home-opening{display:block}
.home-opening-curtain{position:absolute;inset:0;width:100%;height:100%;display:block}
.home-opening-cutout{visibility:hidden;transform-box:view-box;transform-origin:0 0;transform:var(--opening-small)}
.home-opening-ink{visibility:hidden;fill:#000;transform-box:view-box;transform-origin:0 0;transform:var(--opening-small)}
.home-opening-ready .home-opening-ink{visibility:visible}
/* A small wave moves sideways while its level rises. Only this cover moves;
   the photo and mark stay put until the fill is complete. */
.home-opening-fill-level{transform-box:view-box;transform-origin:0 0;transform:translate(0,340px)}
.home-opening-playing .home-opening-cutout{visibility:visible}
.home-opening-playing .home-opening-fill-level{animation:home-opening-fill-up 900ms linear both}
.home-opening-expanding .home-opening-ink{visibility:hidden}
/* The actual logo/labels appear over the photo under the opening aperture;
   the navigation remains transparent when the entrance finishes. */
.home-opening-pending:not(.home-opening-content) .hero>.hero-copy{opacity:0!important}
.home-opening-pending:not(.home-opening-labels) body.home-floating-nav .site-header>:is(.brand,.header-main,.menu-toggle,.mobile-menu,.nav-language,.drawer-controls){opacity:0!important;pointer-events:none!important}
.home-opening-pending body.home-floating-nav .site-header{pointer-events:none}
.home-opening-pending body.home-floating-nav .site-header::after{opacity:0!important;visibility:hidden!important}
.home-opening-labels body.home-floating-nav .site-header>:is(.brand,.header-main,.menu-toggle,.nav-language,.drawer-controls){animation:home-opening-navigation-in 320ms ease-out both}
.home-opening-expanding .home-opening-cutout{animation:home-waterdrop-open 1200ms linear both}
/* A decorative rule, not a loading indicator: no looping and no width layout.
   Leave it drawn after completion, so removing the opening never causes a snap. */
.hero-opening-progress{position:absolute;z-index:3;left:var(--page-left);right:var(--section-right);top:calc(100svh - 24px);height:1px;background:rgba(var(--paper-rgb),.5);transform:scaleX(1);transform-origin:left center;pointer-events:none}
.home-opening-pending .hero-opening-progress{transform:scaleX(0)}
.home-opening-content .hero-opening-progress{animation:home-opening-progress 1000ms cubic-bezier(.22,.61,.36,1) both}
@media(max-width:900px){.hero-opening-progress{left:24px;right:24px;top:calc(100svh - 20px)}}
/* Do not expose every dim word at once before its individual fade starts. */
.hero.is-text-animating .hero-word:not(.is-flashing):not(.is-lit){opacity:0}
.hero.is-text-animating:not(.hero-copy-visible) .scroll-prompt{opacity:0;animation:none}
/* One silhouette, including all four ripples; only the mask grows, not Hero. */
@keyframes home-opening-fill-up{from{transform:translate(0,340px)}to{transform:translate(-160px,0)}}
@keyframes home-waterdrop-open{
  0%{transform:var(--opening-small)}
  5%{transform:var(--opening-zoom-5)}
  10%{transform:var(--opening-zoom-10)}
  15%{transform:var(--opening-zoom-15)}
  20%{transform:var(--opening-zoom-20)}
  25%{transform:var(--opening-zoom-25)}
  30%{transform:var(--opening-zoom-30)}
  35%{transform:var(--opening-zoom-35)}
  40%{transform:var(--opening-zoom-40)}
  45%{transform:var(--opening-zoom-45)}
  50%{transform:var(--opening-zoom-50)}
  55%{transform:var(--opening-zoom-55)}
  60%{transform:var(--opening-zoom-60)}
  65%{transform:var(--opening-zoom-65)}
  70%{transform:var(--opening-zoom-70)}
  75%{transform:var(--opening-zoom-75)}
  80%{transform:var(--opening-zoom-80)}
  85%{transform:var(--opening-zoom-85)}
  90%{transform:var(--opening-zoom-90)}
  95%{transform:var(--opening-zoom-95)}
  100%{transform:var(--opening-large)}
}
@keyframes home-opening-navigation-in{from{opacity:0}to{opacity:1}}
@keyframes home-opening-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){
  .home-opening-pending .home-opening{display:none}
  .home-opening-pending:not(.home-opening-content) .hero>.hero-copy,
  .home-opening-pending body.home-floating-nav .site-header>:is(.brand,.header-main,.menu-toggle,.mobile-menu,.nav-language,.drawer-controls){opacity:1!important;animation:none;pointer-events:auto!important}
  .home-opening-pending body.home-floating-nav .site-header::before,
  .home-opening-pending .hero-opening-progress{animation:none;transform:none}
  .home-opening-pending body.home-floating-nav .site-header{pointer-events:auto}
  .hero.is-text-animating .hero-word:not(.is-flashing):not(.is-lit),
  .hero.is-text-animating:not(.hero-copy-visible) .scroll-prompt{opacity:1}
}