/* ==========================================================================
   住吉映像制作 — motion layer (v3)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Chapters stack in page order
   -------------------------------------------------------------------------- */
:where(.stack > section, main > section) { position: relative; z-index: 1; background-color: var(--paper); }
:where(.stack > section.is-dark, main > section.is-dark, .reel, .page-hero) { background-color: var(--ink); }
.journal, .cost { background-color: var(--paper-2); }

/* --------------------------------------------------------------------------
   Display type drifting behind a chapter
   -------------------------------------------------------------------------- */
.bg-word {
  position: absolute; z-index: 0; pointer-events: none; white-space: nowrap; user-select: none;
  font-family: var(--f-en); font-weight: 900; font-stretch: 125%; font-variation-settings: "wdth" 125;
  text-transform: uppercase; letter-spacing: -.02em; line-height: .8;
  font-size: clamp(110px, 19vw, 330px); color: transparent;
  -webkit-text-stroke: 1px rgba(17, 20, 19, .085);
  opacity: 0; transition: opacity 2s var(--ease-out);
}
.bg-word.is-in { opacity: 1; }
.is-dark .bg-word, .bg-word--light { -webkit-text-stroke-color: rgba(246, 243, 236, .09); }
.bg-word--voices { left: -2vw; bottom: 30%; }
.bg-word--contact { right: -3vw; top: 10%; }
.bg-word--concept { right: -4vw; bottom: 4%; }
.bg-word--strengths { left: -3vw; top: 2%; font-size: clamp(90px, 15vw, 260px); }
.bg-word--cases { right: -3vw; top: 4%; }
.bg-word--themes { left: -2vw; top: 3%; }
@media (max-width: 760px) { .bg-word { font-size: 28vw; } }

/* --------------------------------------------------------------------------
   Frames: image moves inside its frame
   -------------------------------------------------------------------------- */
.px { position: absolute; left: 0; right: 0; top: -9%; bottom: -9%; display: block; overflow: hidden; }
.px > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-card__media .px > img { transform: scale(1.02); }
.svc-card:hover .svc-card__media .px > img { transform: scale(1.1); }

/* tilt toward the cursor */
.tilt { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s var(--ease-out); }

/* floating images (different depths) */
[data-float] { will-change: transform; }
.float { position: absolute; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35); clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--ease-io); }
.float.is-in { clip-path: inset(0 0 0 0); }
.float img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform 2.4s var(--ease-out); }
.float.is-in img { transform: scale(1.02); }
.float figcaption { position: absolute; left: 10px; bottom: 8px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--white); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }

/* --------------------------------------------------------------------------
   Marquee: the separators are small gold paws, walking
   -------------------------------------------------------------------------- */
.marquee__paw {
  width: .2em; height: .2em; flex: none; margin-inline: .38em; display: block; opacity: .42;
  animation: pawStep 2.8s ease-in-out infinite;
}
.marquee__item .marquee__paw:nth-of-type(2n) { animation-delay: -1.2s; }
@keyframes pawStep {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(8deg); }
}

/* --------------------------------------------------------------------------
   Voices: links from the top page
   -------------------------------------------------------------------------- */
.voices__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.voices__actions .voices__badge { margin-top: 0; }
.theme__link { position: absolute; inset: 0; z-index: 3; }
.theme:hover .theme__title { color: var(--gold-2); }
.theme__title { transition: color .4s; }
.theme::after { content: "→"; position: absolute; right: clamp(18px, 2.4vw, 36px); bottom: clamp(30px, 3.4vw, 50px); font-family: var(--f-en); color: var(--gold-2); opacity: .5; transition: transform .6s var(--ease-out), opacity .4s; }
.theme:hover::after { transform: translateX(6px); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .float, .float img, .bg-word { transition: none; clip-path: none; opacity: 1; }
  .marquee__paw { animation: none; }
}

/* display type inside chapters that have a background photograph */
.voices .bg-word, .contact .bg-word, .cta-band .bg-word { z-index: 2; }
.voices__content, .contact__inner, .cta-band__inner { position: relative; z-index: 3; }

/* --------------------------------------------------------------------------
   Film chapters open like a screen (clip-path driven by motion.js)
   -------------------------------------------------------------------------- */
.screen { will-change: clip-path; }
/* the frame catches a little light while it is narrowed */
.screen::after {
  content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(230, 200, 140, calc(var(--screen, 0) * .5)), inset 0 40px 80px -40px rgba(230, 200, 140, calc(var(--screen, 0) * .25));
}

/* --------------------------------------------------------------------------
   Text plays every time it comes into view (direction-aware, like a title card)
   -------------------------------------------------------------------------- */
.js-anim [data-split] .line__in { transform: translateY(112%) rotate(2deg); transform-origin: 0 100%; transition: none; }
.js-anim [data-split].is-tout .line__in { transform: translateY(-112%) rotate(-2deg); }
.js-anim [data-split].is-tin .line__in { transform: none; transition: transform 1.5s cubic-bezier(.19, 1, .22, 1); transition-delay: calc(var(--rd, 0s) + var(--li, 0) * .1s); }

.js-anim [data-reveal]:not([data-reveal="img"]):not([data-reveal="img-x"]) { opacity: 0; transform: translate3d(0, 46px, 0); transition: none; }
.js-anim [data-reveal]:not([data-reveal="img"]):not([data-reveal="img-x"]).is-tout { transform: translate3d(0, -46px, 0); }
.js-anim [data-reveal]:not([data-reveal="img"]):not([data-reveal="img-x"]).is-tin {
  opacity: 1; transform: none;
  transition: opacity 1.1s cubic-bezier(.25, .8, .25, 1), transform 1.5s cubic-bezier(.19, 1, .22, 1);
  transition-delay: var(--rd, 0s);
}

/* reasons: the number rises, then the text, then the rule draws */
.js-anim .reason .reason__no { opacity: 0; transform: translateY(60%); transition: none; }
.js-anim .reason > div { opacity: 0; transform: translateY(28px); transition: none; }
.js-anim .reason.is-tout .reason__no { transform: translateY(-60%); }
.js-anim .reason.is-tout > div { transform: translateY(-28px); }
.js-anim .reason.is-tin .reason__no { opacity: 1; transform: none; transition: opacity 1s, transform 1.4s cubic-bezier(.19, 1, .22, 1), color .6s; }
.js-anim .reason.is-tin > div { opacity: 1; transform: none; transition: opacity 1s .12s, transform 1.4s cubic-bezier(.19, 1, .22, 1) .12s; }
.js-anim .reason::after { transform: scaleX(0); transition: none; }
.js-anim .reason.is-tin::after { transform: scaleX(1); transition: transform 1.4s cubic-bezier(.77, 0, .175, 1) .2s; }

/* journey line & dividers */
.js-anim [data-journey] i { transform: scaleX(0); transition: none; }
.js-anim [data-journey].is-tin i { transform: scaleX(1); transition: transform 1s cubic-bezier(.77, 0, .175, 1); }
.js-anim [data-journey].is-tin i:nth-of-type(2) { transition-delay: .35s; }
.js-anim [data-reveal-line] { transform: scaleX(0); transition: none; }
.js-anim [data-reveal-line].is-tin { transform: scaleX(1); transition: transform 1.6s cubic-bezier(.77, 0, .175, 1); }

/* big WORKS letters */
.js-anim [data-replay-chars] .wl { transform: translateY(100%); opacity: 0; transition: none; }
.js-anim [data-replay-chars].is-tout .wl { transform: translateY(-100%); }
.js-anim [data-replay-chars].is-tin .wl { transform: none; opacity: 1; transition: transform 1.3s cubic-bezier(.19, 1, .22, 1), opacity .8s; transition-delay: calc(var(--ci, 0) * .06s); }

/* a hover lift that composes with the reveal transform */
.factor:hover { transform: none; translate: 0 -3px; }

/* closing headings keep each line whole on desktop */
@media (min-width: 761px) {
  .contact__copy .h-display, .cta-band .h-display { font-size: clamp(34px, 4.2vw, 62px); }
  .contact__copy .h-display .line, .cta-band .h-display .line { white-space: nowrap; }
}