/* ==========================================================================
   住吉映像制作 — quiet details (v2)
   Paw watermarks pressed into the paper, a trail that walks with the scroll,
   and a spotlight on photographs.
   ========================================================================== */

/* Content always sits above the decorative paper layers */
.section > .container, .about__body > *:not(.paw-mark), .footer > .container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Paw watermark — like a blind emboss in heavy paper
   -------------------------------------------------------------------------- */
.paw-mark {
  position: absolute; z-index: 0; pointer-events: none; display: block;
  width: var(--w, 460px); aspect-ratio: 1; will-change: transform;
}
.paw-mark img {
  display: block; width: 100%; height: 100%;
  rotate: var(--rot, 0deg); mix-blend-mode: multiply;
  opacity: 0; scale: 1.08; filter: blur(8px);
  transition: opacity 2.6s var(--ease-out), scale 2.6s var(--ease-out), filter 2.2s var(--ease-out);
}
.paw-mark.is-in img { opacity: var(--o, .05); scale: 1; filter: blur(0); }
/* a faint "deboss" highlight under the mark */
.paw-mark::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .5), transparent 70%);
  transition: opacity 2.6s var(--ease-out);
}
.paw-mark.is-in::after { opacity: .5; }

.paw-mark--services { --w: clamp(300px, 34vw, 540px); --rot: -16deg; --o: .058; right: -7vw; top: clamp(10px, 3vw, 50px); }
.paw-mark--about { --w: clamp(260px, 28vw, 440px); --rot: 21deg; --o: .055; right: -7%; bottom: -8%; }
.paw-mark--faq { --w: clamp(280px, 30vw, 480px); --rot: 13deg; --o: .06; left: -5vw; bottom: -6%; }
.paw-mark--statement { --w: clamp(220px, 22vw, 360px); --rot: -11deg; --o: .058; left: -4vw; top: 4%; }
.paw-mark--cost { --w: clamp(240px, 26vw, 420px); --rot: 17deg; --o: .06; right: -5vw; top: 6%; }
.paw-mark--journal { --w: clamp(200px, 18vw, 300px); --rot: -22deg; --o: .065; right: -2vw; top: 6%; }
.paw-mark--footer { --w: clamp(200px, 17vw, 290px); --rot: 14deg; --o: .055; right: -4vw; top: 2%; }
.paw-mark--strengths { --w: clamp(240px, 24vw, 380px); --rot: -19deg; --o: .055; right: -5vw; top: 2%; }
.paw-mark--others { --w: clamp(240px, 24vw, 380px); --rot: 9deg; --o: .055; right: -5vw; top: 3%; }
.paw-mark--gallery { --w: clamp(260px, 26vw, 420px); --rot: 23deg; --o: .055; right: -6vw; top: 2%; }
.paw-mark--cases { --w: clamp(260px, 26vw, 420px); --rot: -14deg; --o: .058; left: -5vw; bottom: -6%; }
.paw-mark--intro { --w: clamp(240px, 24vw, 380px); --rot: 18deg; --o: .055; right: -5vw; top: 4%; }
.about__body { position: relative; overflow: hidden; }
.section.faq, .section.services, .section.statement, .section.cost, .journal, .section.strengths, .section.others, .section.gallery, .section.cases, .footer { overflow: hidden; }
@media (max-width: 760px) {
  .paw-mark { --w: 260px; }
  .paw-mark--services { right: -90px; top: 10px; }
  .paw-mark--faq, .paw-mark--statement { left: -80px; }
  /* on a phone the column is narrow: fewer, quieter marks */
  .paw-mark--journal, .paw-mark--footer { display: none; }
  .paw-mark--statement { top: -70px; }
  .paw-mark--others { right: -110px; top: -40px; }
  .paw-mark--faq { bottom: -120px; }
  .paw-mark[class] { --o: .042; }
}

/* --------------------------------------------------------------------------
   Paw trail
   -------------------------------------------------------------------------- */
.paw-trail { position: absolute; z-index: 0; pointer-events: none; }
.paw-print {
  position: absolute; display: block; height: auto; aspect-ratio: 1; mix-blend-mode: multiply;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.4);
  opacity: 0; filter: blur(2px);
  transition: opacity .9s var(--ease-out), transform 1.1s cubic-bezier(.2, 1.35, .35, 1), filter .9s var(--ease-out);
}
.paw-print.is-on { opacity: var(--po, .085); transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1); filter: blur(0); }
.paw-trail--flow { left: calc(100% / var(--steps, 5) / 2 - 10px); right: calc(100% / var(--steps, 5) / 2 - 10px); top: calc(100% + 26px); height: 54px; }
.paw-trail--flow .paw-print { --po: .1; }
@media (max-width: 760px) { .paw-trail--flow { display: none; } }

/* --------------------------------------------------------------------------
   Stamp left where you tap on the paper
   -------------------------------------------------------------------------- */
.paw-stamp {
  position: absolute; z-index: 60; width: 42px; height: 42px; margin: -21px 0 0 -21px; pointer-events: none;
  mix-blend-mode: multiply; opacity: 0; animation: pawStamp 2.8s var(--ease-out) forwards;
}
@keyframes pawStamp {
  0% { opacity: 0; transform: rotate(var(--rot)) scale(1.6); filter: blur(3px); }
  9% { opacity: .2; transform: rotate(var(--rot)) scale(.94); filter: blur(0); }
  16% { transform: rotate(var(--rot)) scale(1); }
  55% { opacity: .15; }
  100% { opacity: 0; transform: rotate(var(--rot)) scale(1); }
}

.flow__track { position: relative; }
.flow.is-complete .flow__step:last-child .flow__dot { box-shadow: 0 0 0 6px rgba(201, 163, 91, .18), 0 0 26px rgba(230, 200, 140, .5); }

/* --------------------------------------------------------------------------
   Spotlight on photographs
   -------------------------------------------------------------------------- */
.spot-layer {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .7s var(--ease-out);
  background:
    radial-gradient(220px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 228, 182, .3), rgba(255, 228, 182, .06) 48%, rgba(255, 228, 182, 0) 70%),
    radial-gradient(760px circle at var(--sx, 50%) var(--sy, 50%), rgba(6, 7, 7, 0) 30%, rgba(6, 7, 7, .34) 100%);
}
:is(.svc-card__media, .work-item, .post__thumb, .mcard__media, .shot, .statement__img, .player):hover > .spot-layer { opacity: 1; }
.svc-card__no, .svc-card__en, .work-item__info, .shot__info, .mcard__no, .mcard__en, .statement__img figcaption { z-index: 2; }
.player:not(.is-paused) > .spot-layer { opacity: 0 !important; }

/* --------------------------------------------------------------------------
   Footer (v2): the large brush logo is gone — a quieter, finer close
   -------------------------------------------------------------------------- */
.footer { padding: 64px 0 30px; }
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 163, 91, .6) 30%, rgba(201, 163, 91, .6) 70%, transparent);
}
.footer__bottom { align-items: center; }
.footer__totop { display: inline-flex; align-items: center; gap: 12px; }
.paw-trail--footer { position: relative; display: block; width: 92px; height: 26px; }
.paw-trail--footer .paw-print { --po: .32; }
@media (max-width: 560px) { .paw-trail--footer { width: 64px; } }

@media (prefers-reduced-motion: reduce) {
  .paw-mark img, .paw-print { transition: none; }
  .paw-stamp { display: none; }
}

/* --------------------------------------------------------------------------
   Finishing touches (v2)
   -------------------------------------------------------------------------- */
/* hero: the scene that is on screen */
.hero__left { display: grid; gap: 14px; }
.hero__scene { display: flex; align-items: baseline; gap: 14px; font-size: 13px; letter-spacing: .14em; color: rgba(246, 243, 236, .86); }
.hero__scene-no { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .2em; color: var(--gold-2); }
.hero__scene-txt { font-family: var(--f-serif); font-weight: 600; }
@media (max-width: 560px) { .hero__scene { display: none; } }

/* where paper meets a dark chapter, a thin horizon of light */
.works::before, .voices::before, .contact::before, .cta-band::before, .hmenu::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 4%, rgba(230, 200, 140, .55) 50%, transparent 96%) top / 100% 1px no-repeat,
    radial-gradient(60% 100% at 50% 0%, rgba(230, 200, 140, .09), transparent 70%);
}

/* the chapter numbers carry the warm accent */
.label__num { color: #9b7637; }
.is-dark .label__num, .label--light .label__num, .reel .label__num { color: var(--gold-2); }


/* thank-you after sending */
.form__done-paw { display: block; width: 40px; height: 40px; margin: 0 auto 14px; filter: invert(1) brightness(1.6); opacity: .5; }
.form.is-sent .form__done-paw { animation: pawStamp 2.8s var(--ease-out) both; --rot: -12deg; animation-name: doneStamp; }
@keyframes doneStamp { 0% { opacity: 0; transform: rotate(-12deg) scale(1.6); } 20% { opacity: .55; transform: rotate(-12deg) scale(.95); } 30%, 100% { opacity: .5; transform: rotate(-12deg) scale(1); } }
@media (max-width: 760px) { .paw-mark[class] { --o: .045; } }

/* phone apps: keep the fixed header clear of the status bar */
.site-header { padding-top: env(safe-area-inset-top, 0px); height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }