/*
  Hikari D11 motion, part 1 of 2: only what must be ready at first paint (MOTION-D11.md).
  The world is the still surface of water (D10's single drop fell into it): things surface,
  a framed photograph is poured in from the top, a line spreads from where it is touched, the lockup breathes in.
  D14: M1, the water in the header logo, is gone (owner #39558 3-1); the lockup's breath and page
  transitions must be known before anything late arrives. Everything else is motion-layer.css,
  loaded by motion.js, so motion never holds back the hero words or poster (TECH-SPEC 15).
  One easing, four durations (240 / 480 / 800 / 1200ms), nothing loops. Reduced motion,
  no JavaScript and ?static show the finished page.
  Resting values motion needs live here (first paint); motion-layer.css only adds transitions
  and animations, so its late arrival starts nothing.
*/
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
/* two breaths (yusen's lockup rhythm, one of our durations): it rises to .4, slows, then fills */
@keyframes mast-breathe {
  0%   { opacity: 0; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  40%  { opacity: 0.4; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  100% { opacity: 0.94; }
}
/* fix1: the lockup is an opening title; it leaves once (800) before the first face in the film */
@keyframes mast-out {
  from { opacity: 0.94; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}
@keyframes pool-in { from { opacity: 0; } }
@keyframes pool-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes qa-open { from { opacity: 0; } }

/* M1 (the water in the header logo, first page of a session) removed in D14: owner #39558 3-1
   asked for no animation on the top and bottom logos (ledger 3-H1). The header logo is the
   official artwork from the first frame, and the film no longer waits for it (site.js, 3-H1x). */

/* D11 lockup breath: the white lockup appears over the film only once the film has left its
   opening shot of the real sign (site.js sets html[data-mast="in"]); it breathes in (1200) as
   the header logo steps aside (480, motion-layer.css). Declared here, not in the late layer, so
   a late stylesheet can never restart it over a lockup already standing. Without motion the
   lockup never shows (site.css), so there is nothing to finish. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"])[data-mast="in"]:not([data-mast-tight]) .hero__mast {
    animation: mast-breathe var(--dur-tide) var(--ease) both;
  }
  /* fix1: the pool of scrim behind it comes and goes with it; at film 7.0s (site.js,
     data-film-mast-out) both fade out in 800, done by 7.8s, before the first face at 7.97s.
     The header logo comes back in the same moment (480, motion-layer.css). */
  html:not([data-motion="off"])[data-mast="in"]:not([data-mast-tight]) .home-hero .hero__scrim::before {
    animation: pool-in var(--dur-tide) var(--ease) both;
  }
  html:not([data-motion="off"])[data-mast="out"]:not([data-mast-tight]) .hero__mast {
    animation: mast-out var(--dur-enter) var(--ease) both;
  }
  html:not([data-motion="off"])[data-mast="out"]:not([data-mast-tight]) .home-hero .hero__scrim::before {
    animation: pool-out var(--dur-enter) var(--ease) both;
  }
}

/* FAQ answers surface when the visitor opens them (240, opacity only; the visitor's hand) */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) [data-accordion="on"] .qa[data-open] .qa__a { animation: qa-open var(--dur-micro) var(--ease); }
}

/* M9 page transitions: the page settles into ivory (240), the next surfaces (480), the header
   stays, one photo pair of the same file travels (800, named by motion.js / the head script). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: var(--dur-ui); animation-timing-function: var(--ease); }
  ::view-transition-old(root) { animation: vt-fade-out var(--dur-micro) var(--ease) both; }
  ::view-transition-new(root) { animation: vt-fade-in var(--dur-ui) var(--ease) both; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-group(site-header) { animation-duration: var(--dur-ui); animation-timing-function: var(--ease); }
  ::view-transition-group(vt-photo) { animation-duration: var(--dur-enter); animation-timing-function: var(--ease); }
  ::view-transition-old(vt-photo),
  ::view-transition-new(vt-photo) { height: 100%; object-fit: cover; overflow: clip; }
  /* D11: the two ends of a pair are different crops of one photograph (a 4:5 card, a wide
     opening), so they dissolve in the first 240 only; the other 560 is the arriving picture alone,
     growing into place (a full 800 dissolve showed two heads at once, qa/motion/vt) */
  ::view-transition-old(vt-photo) { animation: vt-fade-out var(--dur-micro) var(--ease) both; }
  ::view-transition-new(vt-photo) { animation: vt-fade-in var(--dur-micro) var(--ease) both; }
  html[data-vt-from="menu"] .site-header { view-transition-name: none; }
  /* D11: The Hikari Way lays its heading and scrim on the arriving photograph. When that
     photograph travels in from the home page, the whole opening (photograph, scrim, words, at
     their final size) is the arriving layer, so the home photograph opens into the page in one
     gesture and nothing appears at once when the transition ends. Only while the head script
     names the pair (its inline style); every other arrival on the page is unchanged. */
  html:has(.g1-head--photo img[style*="vt-photo"]) .g1-head--photo { view-transition-name: vt-photo; }
  .g1-head--photo img[style*="vt-photo"] { view-transition-name: none !important; }
}

/* button fill at rest (the rise is in motion-layer.css) */
@media (prefers-reduced-motion: no-preference) {
  .btn::before { opacity: 1; transform: scaleY(0); transform-origin: 50% 100%; }
  .btn:hover::before,
  .btn:focus-visible::before { transform: none; }
}

@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}