:root {
  --motion-ink: var(--primary-text, #1a1a1a);
  --motion-muted: var(--secondary-text, #5c5c5c);
  --motion-surface: var(--surface, #f7f6f2);
}

.reveal,
.fade-up {
  opacity: 1;
  transform: none;
}

html.temoto-motion .reveal,
html.temoto-motion .fade-up {
  opacity: 0;
  transform: translateY(12px);
}

html.temoto-motion .reveal.is-visible,
html.temoto-motion .fade-up.is-visible {
  opacity: 1;
  transform: none;
}

html.temoto-motion .section-head.reveal {
  clip-path: inset(0 100% 0 0);
  transform: translateY(12px);
}

html.temoto-motion .section-head.reveal.is-visible {
  clip-path: inset(0 0 0 0);
  transition: opacity 760ms ease, transform 760ms ease, clip-path 880ms cubic-bezier(.22, 1, .36, 1);
}

.temoto-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  width: 100%;
  height: 3px;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--motion-ink);
  box-shadow: none;
  pointer-events: none;
}

.temoto-aurora {
  display: none;
}

.hero__layout {
  isolation: isolate;
}

.hero__copy,
.hero-panel {
  transform-style: flat;
}

.temoto-split-char {
  display: inline-block;
  white-space: pre;
}

html.temoto-motion .temoto-split-char {
  opacity: 0;
  filter: none;
  transform: translateY(12px);
}

html.temoto-motion .is-visible .temoto-split-char,
html.temoto-motion .temoto-hero-ready .temoto-split-char {
  opacity: 1;
  filter: none;
  transform: translateY(0);
  transition: opacity 480ms ease, transform 560ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--char-index, 0) * 28ms);
}

html.temoto-motion .hero__lead {
  transition: opacity 820ms ease 320ms, transform 820ms ease 320ms;
}

html.temoto-motion .hero__copy:not(.is-visible) .hero__lead {
  opacity: 0;
  transform: translateY(12px);
}

.temoto-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}

.temoto-tilt::after {
  content: none;
}

.temoto-tilt:hover::after {
  opacity: 0;
}

.plan-card.temoto-tilt:hover,
.work-price-card.temoto-tilt:hover,
.process-card.temoto-tilt:hover,
.mini-card.temoto-tilt:hover,
.work-card.temoto-tilt:hover {
  box-shadow: 0 0 0 1px var(--motion-ink);
}

.plan-card--featured,
.work-price-card--featured {
  /* overflow:hidden は「おすすめ」バッジ(top:-15px)を切るので外す */
  overflow: visible;
  z-index: 0;
  border: 1px solid var(--motion-ink);
}

.plan-card--featured::before,
.work-price-card--featured::before {
  content: none;
}

.btn,
.header-cta,
.form-submit {
  position: relative;
  overflow: hidden;
}

.temoto-ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255,255,255,.55);
  pointer-events: none;
  animation: temoto-ripple 620ms ease-out;
}

@keyframes temoto-ripple {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(18);
  }
}

.temoto-marquee {
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  /* トラックの max-content 幅が親グリッドの最小幅に波及してスマホで横はみ出しする事故を防ぐ */
  contain: inline-size;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hero__layout > *,
.hero__copy,
.hero-panel {
  min-width: 0;
}

.temoto-marquee__track {
  display: flex;
  width: max-content;
  gap: 18px;
  animation: temoto-marquee 34s linear infinite;
}

.temoto-marquee__track > * {
  flex: 0 0 auto;
}

.temoto-marquee .work-card {
  width: min(300px, 78vw);
}

.hero__facts.temoto-marquee {
  max-width: min(720px, 100%);
}

.hero__facts.temoto-marquee .temoto-marquee__track {
  gap: 10px;
}

@keyframes temoto-marquee {
  to { transform: translateX(-50%); }
}

[data-parallax-soft] {
  will-change: transform;
}

@media (max-width: 560px) {
  .temoto-progress {
    height: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .temoto-progress,
  .temoto-aurora,
  .temoto-ripple {
    display: none !important;
  }

  .reveal,
  .fade-up,
  html.temoto-motion .reveal,
  html.temoto-motion .fade-up,
  .temoto-split-char,
  html.temoto-motion .temoto-split-char,
  [data-parallax-soft],
  .temoto-tilt {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }

  .temoto-marquee__track {
    animation: none !important;
    transform: none !important;
  }
}