/* Shared runtime, template-specific motion language */
@media (prefers-reduced-motion: no-preference) {
  /* Scaled photographs stay inside their visual frames at narrow widths. */
  html.template-motion body[data-template-id="premium_studio_01"] .k-hero,
  html.template-motion body[data-template-id="premium_studio_01"] .k-material,
  html.template-motion body[data-template-id="beauty_lux_01"] .b-hero,
  html.template-motion body[data-template-id="beauty_lux_01"] .b-care,
  html.template-motion body[data-template-id="consulting_trust_01"] .c-hero,
  html.template-motion body[data-template-id="consulting_trust_01"] .c-framework {
    overflow: hidden;
    overflow: clip;
  }
  html.template-motion .motion-item {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity .8s cubic-bezier(.2, .75, .25, 1) var(--motion-delay, 0ms),
      transform .8s cubic-bezier(.2, .75, .25, 1) var(--motion-delay, 0ms),
      clip-path 1s cubic-bezier(.2, .75, .25, 1) var(--motion-delay, 0ms);
  }

  html.template-motion .motion-item.is-inview { opacity: 1; transform: none; clip-path: inset(0); }

  /* premium_studio_01: photographic depth and editorial rhythm */
  html.template-motion body[data-template-id="premium_studio_01"] .k-hero > img {
    transform: scale(1.06) translate3d(0, var(--template-hero-shift, 0px), 0);
    transform-origin: 60% 50%;
    will-change: transform;
  }

  html.template-motion body[data-template-id="premium_studio_01"] .k-hero-copy > * {
    opacity: 0;
    transform: translateY(24px);
    animation: template-rise .85s cubic-bezier(.16, 1, .3, 1) forwards;
  }

  html.template-motion body[data-template-id="premium_studio_01"] .k-hero-copy > :last-child { animation-delay: .16s; }
  html.template-motion body[data-template-id="premium_studio_01"] .k-service-row.motion-item { transform: translateX(38px); }
  html.template-motion body[data-template-id="premium_studio_01"] .k-material img.motion-item { clip-path: inset(0 18% 0 0); transform: scale(1.04); }
  html.template-motion body[data-template-id="premium_studio_01"] .k-material img.motion-item.is-inview { clip-path: inset(0); transform: scale(1); }
  html.template-motion body[data-template-id="premium_studio_01"] .k-process-item.motion-item { transform: translateX(28px); }

  /* beauty_lux_01: soft light, calm arrival, booking cadence */
  html.template-motion body[data-template-id="beauty_lux_01"] .b-hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(105deg, transparent 22%, rgba(255, 248, 238, .16) 46%, transparent 68%);
    transform: translateX(-35%);
    animation: beauty-light-pass 7s 1s ease-in-out infinite alternate;
    pointer-events: none;
  }

  html.template-motion body[data-template-id="beauty_lux_01"] .b-hero img {
    transform: scale(1.045) translate3d(0, var(--template-hero-shift, 0px), 0);
    transform-origin: 66% 50%;
    will-change: transform;
  }

  html.template-motion body[data-template-id="beauty_lux_01"] .b-hero-copy > * {
    opacity: 0;
    transform: translateY(20px);
    animation: beauty-copy-in .9s cubic-bezier(.16, 1, .3, 1) forwards;
  }

  html.template-motion body[data-template-id="beauty_lux_01"] .b-hero-copy > :nth-child(2) { animation-delay: .12s; }
  html.template-motion body[data-template-id="beauty_lux_01"] .b-hero-copy > :nth-child(3) { animation-delay: .22s; }
  html.template-motion body[data-template-id="beauty_lux_01"] .b-booking > * { opacity: 0; animation: beauty-booking-in .65s cubic-bezier(.16, 1, .3, 1) forwards; }
  html.template-motion body[data-template-id="beauty_lux_01"] .b-booking > :nth-child(2) { animation-delay: .08s; }
  html.template-motion body[data-template-id="beauty_lux_01"] .b-booking > :nth-child(3) { animation-delay: .16s; }
  html.template-motion body[data-template-id="beauty_lux_01"] .b-menu-row.motion-item { transform: translateY(24px); }
  html.template-motion body[data-template-id="beauty_lux_01"] .b-care img.motion-item { clip-path: inset(0 0 0 20%); transform: scale(1.035); }
  html.template-motion body[data-template-id="beauty_lux_01"] .b-care img.motion-item.is-inview { clip-path: inset(0); transform: scale(1); }

  /* consulting_trust_01: decisive typography and sequential comparison */
  html.template-motion body[data-template-id="consulting_trust_01"] .c-hero { overflow: hidden; }
  html.template-motion body[data-template-id="consulting_trust_01"] .c-boundary { overflow: hidden; }

  html.template-motion body[data-template-id="consulting_trust_01"] .c-hero-copy > * {
    opacity: 0;
    transform: translateX(-24px);
    animation: consulting-copy-in .78s cubic-bezier(.16, 1, .3, 1) forwards;
  }

  html.template-motion body[data-template-id="consulting_trust_01"] .c-hero-copy > :nth-child(2) { animation-delay: .08s; }
  html.template-motion body[data-template-id="consulting_trust_01"] .c-hero-copy > :nth-child(3) { animation-delay: .16s; }
  html.template-motion body[data-template-id="consulting_trust_01"] .c-hero-copy > :nth-child(4) { animation-delay: .24s; }
  html.template-motion body[data-template-id="consulting_trust_01"] .c-hero img {
    clip-path: inset(0 0 0 16%);
    transform: scale(1.035) translate3d(0, var(--template-hero-shift, 0px), 0);
    animation: consulting-image-in 1.1s .1s cubic-bezier(.16, 1, .3, 1) forwards;
    transform-origin: 70% 50%;
    will-change: transform;
  }

  html.template-motion body[data-template-id="consulting_trust_01"] .c-decision-strip > div.motion-item { transform: translateY(-16px); }
  html.template-motion body[data-template-id="consulting_trust_01"] .c-service.motion-item { transform: translateX(34px); }
  html.template-motion body[data-template-id="consulting_trust_01"] .c-boundary article.motion-item:first-child { transform: translateX(-42px); }
  html.template-motion body[data-template-id="consulting_trust_01"] .c-boundary article.motion-item:last-child { transform: translateX(42px); }
  html.template-motion body[data-template-id="consulting_trust_01"] .c-boundary article.motion-item.is-inview { transform: none; }
  html.template-motion body[data-template-id="consulting_trust_01"] .c-framework img {
    transform: scale(1.04) translate3d(0, var(--template-detail-shift, 0px), 0);
    will-change: transform;
  }

  @keyframes template-rise { to { opacity: 1; transform: none; } }
  @keyframes beauty-copy-in { to { opacity: 1; transform: none; } }
  @keyframes beauty-booking-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes beauty-light-pass { to { transform: translateX(35%); } }
  @keyframes consulting-copy-in { to { opacity: 1; transform: none; } }
  @keyframes consulting-image-in { to { clip-path: inset(0); transform: scale(1.035) translate3d(0, var(--template-hero-shift, 0px), 0); } }
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.template-motion .motion-item { transform: translateY(20px); }
  html.template-motion body[data-template-id="premium_studio_01"] .k-service-row.motion-item,
  html.template-motion body[data-template-id="premium_studio_01"] .k-process-item.motion-item,
  html.template-motion body[data-template-id="consulting_trust_01"] .c-service.motion-item { transform: translateY(20px); }
  html.template-motion body[data-template-id="consulting_trust_01"] .c-boundary article.motion-item { transform: translateY(20px); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-item,
  .k-hero > img,
  .b-hero img,
  .c-hero img,
  .c-framework img { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; }
  .b-hero::before { display: none !important; }
}

/* Extended catalog: each family has its own motion language. */
@media (prefers-reduced-motion: no-preference) {
  html.template-motion body[data-template-id="hospitality_cinematic_01"] .h-chapter,
  html.template-motion body[data-template-id="education_story_01"] .e-scene,
  html.template-motion body[data-template-id="product_focus_01"] .p-detail,
  html.template-motion body[data-template-id="wellness_clarity_01"] .w-first,
  html.template-motion body[data-template-id="creative_event_01"] .v-collage { overflow:hidden; overflow:clip; }

  html.template-motion body[data-template-id="hospitality_cinematic_01"] .h-hero > img { transform:scale(1.06) translate3d(0,var(--template-hero-shift,0px),0); transform-origin:66% 50%; }
  html.template-motion body[data-template-id="hospitality_cinematic_01"] .h-hero-copy > * { opacity:0; transform:translateY(28px); animation:template-rise 1s cubic-bezier(.16,1,.3,1) forwards; }
  html.template-motion body[data-template-id="hospitality_cinematic_01"] .h-hero-copy > :nth-child(2) { animation-delay:.18s; }
  html.template-motion body[data-template-id="hospitality_cinematic_01"] .h-chapter > img.motion-item { clip-path:inset(0 0 0 28%); transform:scale(1.05); }
  html.template-motion body[data-template-id="hospitality_cinematic_01"] .h-chapter > img.motion-item.is-inview { clip-path:inset(0); transform:scale(1); }
  html.template-motion body[data-template-id="hospitality_cinematic_01"] .h-table-grid article.motion-item { transform:translateY(44px); }

  html.template-motion body[data-template-id="education_story_01"] .e-hero-copy > * { opacity:0; transform:translateX(28px); animation:education-enter .82s cubic-bezier(.16,1,.3,1) forwards; }
  html.template-motion body[data-template-id="education_story_01"] .e-hero-copy > :nth-child(2) { animation-delay:.08s; }
  html.template-motion body[data-template-id="education_story_01"] .e-hero-copy > :nth-child(3) { animation-delay:.16s; }
  html.template-motion body[data-template-id="education_story_01"] .e-hero-copy > :nth-child(4) { animation-delay:.24s; }
  html.template-motion body[data-template-id="education_story_01"] .e-shape-red { animation:education-float 5s ease-in-out infinite alternate; }
  html.template-motion body[data-template-id="education_story_01"] .e-shape-blue { animation:education-float 4s .5s ease-in-out infinite alternate-reverse; }
  html.template-motion body[data-template-id="education_story_01"] .e-orbit article.motion-item { transform:scale(.9) rotate(-2deg); }
  html.template-motion body[data-template-id="education_story_01"] .e-orbit article.motion-item.is-inview { transform:none; }

  html.template-motion body[data-template-id="product_focus_01"] .p-hero figure img { transform:scale(1.045) translate3d(0,var(--template-hero-shift,0px),0); transform-origin:70% 50%; }
  html.template-motion body[data-template-id="product_focus_01"] .p-hero-copy > * { opacity:0; transform:translateY(18px); animation:template-rise .76s cubic-bezier(.16,1,.3,1) forwards; }
  html.template-motion body[data-template-id="product_focus_01"] .p-hero-copy > :nth-child(n+2) { animation-delay:.1s; }
  html.template-motion body[data-template-id="product_focus_01"] .p-story-list article.motion-item { transform:translateX(48px); }
  html.template-motion body[data-template-id="product_focus_01"] .p-detail img.motion-item { clip-path:inset(12%); transform:scale(1.08); }
  html.template-motion body[data-template-id="product_focus_01"] .p-detail img.motion-item.is-inview { clip-path:inset(0); transform:scale(1); }

  html.template-motion body[data-template-id="wellness_clarity_01"] .w-hero-copy > * { opacity:0; transform:translateY(18px); animation:wellness-enter 1s cubic-bezier(.16,1,.3,1) forwards; }
  html.template-motion body[data-template-id="wellness_clarity_01"] .w-hero-copy > :nth-child(2) { animation-delay:.1s; }
  html.template-motion body[data-template-id="wellness_clarity_01"] .w-hero-copy > :nth-child(n+3) { animation-delay:.2s; }
  html.template-motion body[data-template-id="wellness_clarity_01"] .w-topic-list article.motion-item { transform:translateX(24px); }
  html.template-motion body[data-template-id="wellness_clarity_01"] .w-first img.motion-item { clip-path:inset(8%); transform:scale(1.035); }
  html.template-motion body[data-template-id="wellness_clarity_01"] .w-first img.motion-item.is-inview { clip-path:inset(0); transform:scale(1); }

  html.template-motion body[data-template-id="creative_event_01"] .v-hero h1 > * { opacity:0; transform:translateX(-50px); animation:creative-line .7s cubic-bezier(.16,1,.3,1) forwards; }
  html.template-motion body[data-template-id="creative_event_01"] .v-hero h1 > :nth-child(2) { animation-delay:.1s; }
  html.template-motion body[data-template-id="creative_event_01"] .v-hero h1 > :nth-child(3) { animation-delay:.2s; }
  html.template-motion body[data-template-id="creative_event_01"] .v-program-grid article.motion-item { clip-path:inset(100% 0 0); transform:none; }
  html.template-motion body[data-template-id="creative_event_01"] .v-program-grid article.motion-item.is-inview { clip-path:inset(0); }
  html.template-motion body[data-template-id="creative_event_01"] .v-collage img.motion-item { clip-path:inset(0 22% 0 0); transform:scale(1.04); }
  html.template-motion body[data-template-id="creative_event_01"] .v-collage img.motion-item.is-inview { clip-path:inset(0); transform:scale(1); }

  @keyframes education-enter { to { opacity:1; transform:none; } }
  @keyframes education-float { to { transform:translateY(16px) rotate(8deg); } }
  @keyframes wellness-enter { to { opacity:1; transform:none; } }
  @keyframes creative-line { to { opacity:1; transform:none; } }
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference) {
  html.template-motion body[data-template-id="product_focus_01"] .p-story-list article.motion-item,
  html.template-motion body[data-template-id="wellness_clarity_01"] .w-topic-list article.motion-item { transform:translateY(20px); }
}
@media (prefers-reduced-motion:reduce) {
  .h-hero img,.e-hero img,.p-hero img,.w-hero img,.v-hero img,.h-chapter img,.e-scene img,.p-detail img,.w-first img,.v-collage img,.e-shape,.v-marquee div { opacity:1!important; transform:none!important; clip-path:none!important; animation:none!important; transition:none!important; }
}