/* Fit the complete photo mosaic and title below the initial header. */
.site-inner:has(.wf-photo-hero) { --photo-header-height: 105px; }
.site-inner:has(.wf-photo-hero) #main { padding-top: var(--photo-header-height); }
.wf-photo-hero { --photo-cutout-radius: clamp(28px, 4vw, 64px); position: relative; height: min(60vw, calc(100svh - var(--photo-header-height))); container-type: size; background: #fff; }
/* Each track contains two identical five-photo groups, so the loop has no gap. */
.wf-photo-hero__mosaic { display: grid; height: 100%; grid-template-rows: repeat(3, minmax(0, 1fr)); overflow: hidden; border-bottom-right-radius: clamp(180px, 24vw, 420px) clamp(36px, 6vw, 96px); }
.wf-photo-hero__row { min-height: 0; overflow: hidden; }
.wf-photo-hero__track { display: flex; width: 200%; height: 100%; animation: photo-row-drift 80s linear infinite; animation-play-state: paused; will-change: transform; }
.wf-photo-hero__row:nth-child(odd) .wf-photo-hero__track { animation-direction: reverse; }
.wf-photo-hero__group { flex: 0 0 50%; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 100%; }
.wf-photo-hero[data-photo-motion="running"] .wf-photo-hero__track { animation-play-state: running; }
@keyframes photo-row-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.wf-photo-hero__motion { position: absolute; right: clamp(16px, 3vw, 36px); bottom: clamp(42px, 5vw, 80px); z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: rgba(26,26,26,.8); color: #fff; cursor: pointer; }
.wf-photo-hero__motion:focus-visible { outline: 3px solid #b58acb; outline-offset: 3px; }
.wf-photo-hero__play-icon, .wf-photo-hero__motion[data-paused="true"] .wf-photo-hero__pause-icon { display: none; }
.wf-photo-hero__motion[data-paused="true"] .wf-photo-hero__play-icon { display: block; }
@media (max-width: 600px) { .wf-photo-hero__track { width: calc(100% * 10 / 3); } }
@media (prefers-reduced-motion: reduce) { .wf-photo-hero__track { animation: none; transform: none; } .wf-photo-hero__motion { display: none; } }
.wf-photo-hero .wf-image { min-width: 0; min-height: 0; }
.wf-photo-hero__overlay { position: absolute; inset: 0; pointer-events: none; }
.wf-photo-hero__inner { position: relative; width: 100%; height: 100%; }
/* A broad Bezier shoulder eases the title panel into the third photo row. */
.wf-photo-hero__title { position: absolute; bottom: 0; left: 0; width: clamp(340px, 40%, 640px); height: calc(100% / 3); box-sizing: border-box; padding: 2cqh clamp(24px, 3vw, 48px); padding-right: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 14px; background: #fff; color: #2c1e46; }
.wf-photo-hero__title::after { content: ""; position: absolute; left: calc(100% - 1px); bottom: 0; width: clamp(220px, 28vw, 480px); height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C45 0 55 100 100 100H0Z' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; }
.wf-photo-hero__title h1 { margin: 0; font-size: min(8.5vw, 18cqh, 144px); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700 !important; letter-spacing: 0; line-height: .9; display: flex; flex-wrap: nowrap; align-items: center; gap: .015em; }
.wf-photo-hero__letter { display: block; flex: 0 0 auto; }
.wf-photo-hero__description { display: flex; align-items: baseline; gap: 16px; white-space: nowrap; }
.wf-photo-hero__title p { margin: 0; }
.wf-photo-hero__label { font-family: "Shippori Mincho", serif; font-size: clamp(28px, 2.3vw, 34px); font-weight: 500; line-height: 1.5; letter-spacing: .045em; }
.wf-photo-hero__scope { font-family: "Zen Kaku Gothic New", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.9; letter-spacing: 0; color: #62596e; }
@media (max-width: 800px) {
  .site-inner:has(.wf-photo-hero) { --photo-header-height: 90px; }
  .wf-photo-hero__title { width: 50%; padding-left: 24px; padding-right: 32px; gap: 10px; }
  .wf-photo-hero__description { gap: 12px; }
  .wf-photo-hero__label { font-size: 26px; }
  .wf-photo-hero__scope { font-size: 14px; }
}
@media (max-width: 600px) {
  .wf-photo-hero { --photo-cutout-radius: 24px; height: min(100vw, calc(100svh - var(--photo-header-height))); }
  .wf-photo-hero__title { width: 100%; padding-left: 16px; padding-right: 28px; gap: 6px; border-top-right-radius: 80% 32px; }
  .wf-photo-hero__title::after { display: none; }
  .wf-photo-hero__title h1 { font-size: 17vw; }
  .wf-photo-hero__motion { top: 12px; bottom: auto; right: 12px; }
}
@media (max-width: 360px) {
  .wf-photo-hero__description { gap: 8px; }
  .wf-photo-hero__label { font-size: 24px; }
  .wf-photo-hero__scope { font-size: 12px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  .wf-photo-hero__title { padding: 1cqh 32px 1cqh 24px; gap: 6px; }
  .wf-photo-hero__title h1 { font-size: min(8.5vw, 14cqh); }
  .wf-photo-hero__label { font-size: 24px; }
  .wf-photo-hero__scope { font-size: 14px; }
}

/* Purple ink keeps the existing glitch readable on the white cutout. */
.wf-photo-hero__title[data-letter-style="glitch"] .kinetic-word .type-face {
  --glitch-ink: #2c1e46;
  --glitch-light: rgba(145,98,168,.85);
  --glitch-highlight: rgba(181,138,203,.6);
  display: block;
  padding-right: 0;
  filter: url('#photo-type-glitch');
}
.wf-photo-hero__title .kinetic-word .wf-photo-hero__letter:nth-child(2n) .type-face { animation-delay: -.17s; }
.wf-photo-hero__title[data-ink="brand"] .kinetic-word .wf-photo-hero__letter:nth-child(2n) .type-face::before { animation-delay: -.17s; }
.wf-photo-hero__title[data-ink="brand"] .kinetic-word .wf-photo-hero__letter:nth-child(2n) .type-face::after { animation-delay: -.57s; }
.wf-photo-hero__title[data-ink="brand"] .kinetic-word .wf-photo-hero__letter:nth-child(3n) .type-face::before { animation-delay: -.39s; }
.wf-photo-hero__title[data-ink="brand"] .kinetic-word .wf-photo-hero__letter:nth-child(3n) .type-face::after { animation-delay: -.82s; }
.wf-photo-hero:not([data-photo-motion="running"]) .type-face {
  animation: none !important; filter: none !important; translate: none !important;
}
.wf-photo-hero:not([data-photo-motion="running"]) .type-face::before,
.wf-photo-hero:not([data-photo-motion="running"]) .type-face::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .wf-photo-hero .type-face { animation: none !important; filter: none !important; translate: none !important; }
  .wf-photo-hero .type-face::before, .wf-photo-hero .type-face::after { display: none; }
}

/* Keep each original glyph's width while the TOP-style signal resolves into Japanese. */
.wf-photo-hero__copy-accessible { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wf-photo-hero__glyph { position: relative; display: inline-block; white-space: pre; vertical-align: baseline; }
.wf-photo-hero__glyph-metric { visibility: hidden; }
.wf-photo-hero__glyph::after { content: attr(data-glyph); position: absolute; inset: 0; white-space: pre; pointer-events: none; }
.wf-photo-hero [data-reveal-state="revealing"] .wf-photo-hero__glyph::before {
  content: attr(data-glyph); position: absolute; inset: 0; white-space: pre; pointer-events: none;
  color: #9162a8; text-shadow: -1px 0 #b58acb; opacity: 0;
  animation: photo-copy-signal 460ms steps(1, end) infinite;
}
.wf-photo-hero [data-reveal-state="revealing"] .wf-photo-hero__glyph::after { animation: photo-copy-twitch 460ms steps(1, end) infinite; }
@keyframes photo-copy-signal {
  0%, 19%, 31%, 60%, 76%, 100% { opacity: 0; transform: none; }
  20%, 25% { opacity: .85; transform: translateX(3px); clip-path: inset(22% 0 52%); }
  26%, 30% { opacity: .65; transform: translateX(-2px); clip-path: inset(64% 0 16%); }
  61%, 67% { opacity: .8; transform: translateX(-3px); clip-path: inset(40% 0 35%); }
  68%, 75% { opacity: .5; transform: translateX(2px); clip-path: inset(12% 0 70%); }
}
@keyframes photo-copy-twitch {
  0%, 23%, 29%, 63%, 70%, 100% { transform: none; text-shadow: none; }
  24%, 28% { transform: translateX(-1px); text-shadow: 1px 0 #9162a8; }
  64%, 69% { transform: translateX(1px); }
}