/* Costello homepage intro prototype — review-only motion layer.
   Scope: every rule is gated on an html-level intro state. When no state is present
   (reduced motion, return visit, or after the intro resolves) nothing here applies and
   the page renders from its own stylesheets exactly as the current homepage does.

   html.intro-pending  first paint → motion start: hero parts held in their opening state
   html.intro-run      motion in progress: transitions that let the chrome resolve
   html.intro-chrome   navigation and the rest of the page not yet revealed
   html.intro-frame    the composition's frame (background/border) not yet revealed
   html[data-intro]    this page view is owned by the intro: the page's own hero entrance
                       (home-motion.css) is neutralised so the two never fight. Its final
                       composition and the intro's final composition are the same. */

/* --- Opening state (before the Web Animations take over, same values as their first keyframes) --- */
html.intro-pending #top :is(h1, p, a.btn, a.line),
html.intro-pending #top :is(.visual-caption, .mobile-caption),
html.intro-pending #top .hero-endpoints .connection-point,
html.intro-pending .c-header--site .c-brand { opacity: 0; }

html.intro-pending #top :is(.hero-connected-panel, .mobile-cell) {
  clip-path: inset(50% calc(50% - 6px) 50% calc(50% - 6px));
}
html.intro-pending #top :is(.hero-cord, .mobile-lines) path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
/* The composition frame. The homepage sets this background with !important, so the opening
   state is held by a stronger !important rule and carried in by a transition at the settle beat. */
html:is(.intro-pending, .intro-frame) #top :is(.hero-connected, .mobile-hero-connected) {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
}
html.intro-run #top :is(.hero-connected, .mobile-hero-connected) {
  transition: background-color .4s ease, border-color .4s ease;
}
/* Desktop choreography spreads the fragments beyond the frame before they converge; the frame is
   invisible until they are back inside, so it may stop clipping for the run. */
html.intro-run #top .hero-connected { overflow: visible; }

/* --- Chrome: the warm canvas and the mark only, until the final beat --- */
html:is(.intro-pending, .intro-chrome) .c-header--site {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:is(.intro-pending, .intro-chrome) .c-header--site :is(.c-nav, .c-header-actions),
html:is(.intro-pending, .intro-chrome) #top ~ * { opacity: 0; }

/* Resolve of the chrome and the rest of the page (removing .intro-chrome triggers these). */
html.intro-run .c-header--site {
  transition: background-color .5s ease, border-color .5s ease, box-shadow .5s ease;
}
html.intro-run .c-header--site :is(.c-nav, .c-header-actions),
html.intro-run #top ~ * { transition: opacity .5s ease; }

/* --- Hand the hero to the intro: the page's own entrance sequence stands down --- */
html[data-intro] #top :is(.hero-connected, .mobile-hero-connected).motion-running :is(.hero-connected-panel, .mobile-cell, path, .connection-point) {
  animation: none !important;
}
html[data-intro] #top :is(.hero-connected, .mobile-hero-connected).motion-running { perspective: none; }