/* Edge-to-edge film collage. All ten photos settle before the title arrives. */
body { --title-start: 3.15s; --title-duration: .24s; }
/* A restrained anamorphic light bloom, timed to the title's exact arrival. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  background:
    radial-gradient(ellipse 27% 1px at 50% 47%, #efffffc4 0%, #b3ece975 45%, transparent 100%),
    radial-gradient(ellipse 23% 9px at 50% 47%, #8edfd65c 0%, #60cfc321 55%, transparent 100%),
    radial-gradient(ellipse 24% 13% at 50% 47%, #93d9ce26 0%, transparent 75%);
  opacity: 0;
  background-size: 20% 100%;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}
body.hero-intro-ready::after {
  animation: arrival-flash .85s cubic-bezier(.16,.7,.3,1) calc(var(--title-start) + var(--title-duration)) both;
}
body.motion-paused::after { animation-play-state: paused; }
body:has(.hero.intro-static)::after { display: none; }
@keyframes arrival-flash {
  0% { opacity: 0; background-size: 20% 100%; }
  18% { opacity: .8; }
  45% { opacity: .45; background-size: 100% 100%; }
  100% { opacity: 0; background-size: 155% 100%; }
}
.hero .memory-stage {
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    'a a b c'
    'a a d d'
    'e f d d'
    'g h i j';
  gap: 2px;
  padding: 2px;
  perspective: 1100px;
  perspective-origin: 50% 45%;
}
.hero .memory-frame {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: none;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: none;
  background: var(--deep);
  opacity: 0;
  transform: none;
  filter: none;
  animation: none;
  --arrival: 0s;
}
.hero .memory-0 { grid-area: a; }
.hero .memory-1 { grid-area: b; --arrival: .18s; }
.hero .memory-2 { grid-area: c; --arrival: .36s; }
.hero .memory-3 { grid-area: d; --arrival: .54s; }
.hero .memory-4 { grid-area: e; --arrival: .72s; }
.hero .memory-5 { grid-area: f; --arrival: .9s; }
.hero .memory-6 { grid-area: g; --arrival: 1.08s; }
.hero .memory-7 { grid-area: h; --arrival: 1.26s; }
.hero .memory-8 { grid-area: i; --arrival: 1.44s; }
.hero .memory-9 { grid-area: j; --arrival: 1.62s; }
.hero .memory-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero .memory-frame figcaption {
  position: absolute;
  inset: auto 0 0;
  height: auto;
  min-height: 40px;
  padding: 22px 14px 9px;
  justify-content: flex-end;
  color: white;
  background: linear-gradient(transparent, #002c4575);
  font-size: clamp(7px, .8vw, 11px);
  letter-spacing: .12em;
}
.hero .memory-frame figcaption span,
.hero .memory-frame figcaption b { display: none; }
.hero .hero-coordinate { z-index: 4; text-shadow: 0 1px 7px #002530; }
.hero .hero-bottom { text-shadow: 0 1px 7px #002530; }

.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 110px;
  background: linear-gradient(transparent, #012b3bc4);
  pointer-events: none;
  z-index: 2;
}
.hero .hero-title { perspective: 1200px; background: none; }
.hero .hero-title::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, #03282fce, #03282f68 75%);
  opacity: 0;
}
.hero .hero-title > * { position: relative; opacity: 0; animation: none; }
.hero .hero-link { visibility: hidden; }
.hero .hero-title h1 {
  transform: none;
  filter: none;
  font-size: clamp(60px, 8.4vw, 126px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .065em;
  text-shadow: 0 2px 24px #00191e45;
}
.hero .hero-title h1 em { color: #f3f1e6; }
.hero .hero-title .eyebrow { font-size: 10px; letter-spacing: .28em; }
.hero .hero-jp { font-size: clamp(17px, 1.6vw, 22px); margin-top: 28px; }
.hero.intro-ready .memory-frame {
  animation: photo-assemble 1.2s cubic-bezier(.16,.7,.2,1) var(--arrival) both;
}
.hero.intro-ready .hero-title::before { animation: title-shade .45s ease 3.05s both; }
.hero.intro-ready .hero-title h1 {
  animation: sea-memory-cinema var(--title-duration) cubic-bezier(.55,0,.18,1) var(--title-start) both;
}
.hero.intro-ready .hero-title .eyebrow { animation: title-copy .35s ease 3.6s both; }
.hero.intro-ready .hero-jp { animation: title-copy .35s ease 3.7s both; }
.hero.intro-ready .hero-link { animation: title-copy .35s ease 3.8s both; }
.motion-paused .hero .hero-title::before { animation-play-state: paused; }

@keyframes photo-assemble {
  from { opacity: 0; transform: translateZ(-1100px); filter: blur(5px); }
  35% { opacity: .7; }
  to { opacity: 1; transform: translateZ(0); filter: blur(0); }
}
@keyframes sea-memory-cinema {
  from { opacity: 0; transform: translateZ(-1400px); letter-spacing: .13em; }
  25% { opacity: 1; }
  to { opacity: 1; transform: translateZ(0); letter-spacing: .065em; }
}
@keyframes title-copy {
  from { opacity: 0; visibility: hidden; }
  to { opacity: 1; visibility: visible; }
}
@keyframes title-shade { from { opacity: 0; } to { opacity: 1; } }

/* An existing pause preference opens on the completed composition. */
.hero.intro-static .memory-frame,
.hero.intro-static .hero-title > *,
.hero.intro-static .hero-title::before {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  animation: none;
}
@media (max-width: 640px) {
  .hero .hero-title h1 { font-size: 16vw; line-height: 1.22; }
  .hero .hero-title h1 em { font-size: 1em; margin-top: 0; }
  .hero .hero-title .eyebrow { font-size: 9px; letter-spacing: .16em; }
  .hero .memory-stage {
    grid-template-rows: repeat(5, minmax(0, 1fr));
    grid-template-areas:
      'a a b b'
      'a a c c'
      'e f d d'
      'g h d d'
      'i i j j';
    gap: 2px;
  }
  .hero .memory-frame figcaption { padding: 18px 6px 7px; font-size: 6px; letter-spacing: .04em; }
  .hero .memory-4 figcaption,
  .hero .memory-5 figcaption,
  .hero .memory-6 figcaption,
  .hero .memory-7 figcaption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; animation: none !important; }
  .hero .memory-frame,
  .hero .hero-title > *,
  .hero .hero-title::before {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
    animation: none !important;
  }
  .hero .hero-link { display: flex; }
}