/* ============================================
   motion.css — ページの動き
   方針：1画面で目立つ動きは1つ。ほかは控えめに、上品に。
   JSが動いたときだけ（html.js-motion）隠してから出す。JSが失敗しても文章は必ず読める。
   ============================================ */

:root {
  --ease-soft: cubic-bezier(0.22, 0.7, 0.2, 1);
  --ease-curtain: cubic-bezier(0.7, 0, 0.2, 1);
}

/* --- 1 トップ写真がゆっくり寄る＋文字が順にふわっと --- */
.js-motion .hero__media {
  overflow: hidden;
}

/* 写真は暗い状態からふわっと明るくなり、ゆっくり寄りきる。最初の画面で「動いた」と分かる程度に */
.js-motion .hero__image {
  opacity: 0;
  transform: scale(1.16);
  transition: opacity 2s ease, transform 11s var(--ease-soft);
}

.js-motion .hero.is-in .hero__image {
  opacity: 1;
  transform: scale(1);
}

.js-motion .hero__media {
  background-color: var(--color-ink);
}

.js-motion .hero__body > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.4s ease, transform 1.4s var(--ease-soft);
}

.js-motion .hero.is-in .hero__body > * {
  opacity: 1;
  transform: none;
}

.js-motion .hero.is-in .hero__body > :nth-child(1) { transition-delay: 0.6s; }
.js-motion .hero.is-in .hero__body > :nth-child(2) { transition-delay: 1.05s; }
.js-motion .hero.is-in .hero__body > :nth-child(3) { transition-delay: 1.5s; }
.js-motion .hero.is-in .hero__body > :nth-child(4) { transition-delay: 1.95s; }

/* --- 2 ロゴの葉っぱが芽吹いて、そっと揺れる（サロンについて） --- */
.js-motion .brand-logo {
  opacity: 0;
  transform: scale(0.7) rotate(-6deg);
  transform-origin: 50% 70%;
  transition: opacity 1.9s ease, transform 2.1s var(--ease-soft);
}

.js-motion .brand-logo.is-in {
  opacity: 1;
  transform: none;
  animation: motion-sway 8s 2.3s ease-in-out infinite;
}

@keyframes motion-sway {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(2deg); }
}

/* --- 3 スクロールで、カードや項目が順番にふわっと --- */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.3s ease, transform 1.3s var(--ease-soft);
  transition-delay: var(--reveal-delay, 0s);
}

.js-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --- 4 写真が幕を開けるように現れる --- */
.js-motion [data-curtain] {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.08);
  transition: clip-path 1.9s var(--ease-curtain), transform 2.6s var(--ease-soft);
  transition-delay: var(--reveal-delay, 0s);
}

.js-motion [data-curtain].is-in {
  clip-path: inset(0 0 0 0);
  transform: none;
}

/* 帯の写真は、スクロールに合わせてわずかに動く（奥行き） */
.js-motion .quote-band__image {
  transform: translateY(var(--parallax, 0px)) scale(1.12);
  will-change: transform;
}

/* --- 5 見出し：英字が1文字ずつ、日本語の下に線がすっと伸びる --- */
.js-motion .section-heading__en .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s ease, transform 0.8s var(--ease-soft);
  transition-delay: calc(var(--i) * 0.09s);
}

.js-motion .section-heading.is-in .section-heading__en .char {
  opacity: 1;
  transform: none;
}

.js-motion .section-heading__ja {
  position: relative;
  padding-block-end: 0.6em;
}

.js-motion .section-heading__ja::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  max-width: 6rem;
  height: 1px;
  background: var(--color-accent);
  transform: translateX(-50%);
  transition: width 1.5s 0.9s var(--ease-soft);
}

/* 左寄せの見出しは、線も左から伸ばす（左右どちらかはJSが文字の揃えを見て決める） */
.js-motion .section-heading.is-left .section-heading__ja::after {
  left: 0;
  transform: none;
}

.js-motion .section-heading.is-in .section-heading__ja::after {
  width: 6rem;
}

/* --- 6 予約ボタンに光が流れる＋スマホで画面下に予約・相談ボタン --- */
.button--primary {
  position: relative;
  overflow: hidden;
}

.js-motion .button--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: motion-shine 9s 2.5s ease-in-out infinite;
}

@keyframes motion-shine {
  0% { left: -60%; }
  14%, 100% { left: 130%; }
}

.mobile-cta {
  display: none;
}

@media (max-width: 767px) {
  .mobile-cta {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-sm) calc(var(--space-2xs) + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--color-line);
    box-shadow: 0 -4px 16px rgba(59, 51, 44, 0.06);
    transform: translateY(110%);
    transition: transform 0.9s var(--ease-soft);
  }

  .mobile-cta.is-in {
    transform: none;
  }

  .mobile-cta a {
    flex: 1;
    padding: 0.8em 0.5em;
    border-radius: var(--radius);
    font-size: 0.875rem;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.04em;
  }

  .mobile-cta__reserve {
    background: var(--color-accent);
    color: #fff;
  }

  .mobile-cta__line {
    border: 1px solid var(--color-accent);
    color: var(--color-accent-deep);
    background: #fff;
  }

  /* 下のボタンでフッターが隠れないように */
  .has-mobile-cta .site-footer {
    padding-block-end: 5rem;
  }
}

/* --- ヘッダー：スクロールしたら、うっすら影 --- */
.site-header {
  transition: box-shadow var(--transition), background-color var(--transition);
}

.site-header.is-scrolled {
  box-shadow: 0 2px 14px rgba(59, 51, 44, 0.07);
}

/* --- 8 葉っぱがゆっくり舞う（トップ・写真の帯・各ページの最初・ご相談ください） --- */
.leaf-host {
  position: relative;
  overflow: hidden;
}

/* 文字は葉っぱより手前に出す */
.leaf-host .hero__body,
.leaf-host .quote-band__text,
.leaf-host > .l-container,
.cta > *:not(.leaf) {
  position: relative;
  z-index: 2;
}

.leaf-host .leaf {
  position: absolute;
  top: -40px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  animation: motion-fall linear infinite;
}

/* 暗い写真の上では、少し明るめに見せる */
.hero .leaf,
.quote-band .leaf {
  filter: brightness(1.25);
}

@keyframes motion-fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  12% { opacity: 0.5; }
  88% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(50px, var(--fall, 420px)) rotate(200deg); }
}

/* --- 動きを減らす設定の人には、最初から完成形を見せる --- */
@media (prefers-reduced-motion: reduce) {
  .js-motion *,
  .js-motion *::before,
  .js-motion *::after {
    animation: none !important;
    transition: none !important;
  }

  .js-motion .hero__image,
  .js-motion .hero__body > *,
  .js-motion .brand-logo,
  .js-motion [data-reveal],
  .js-motion [data-curtain],
  .js-motion .section-heading__en .char,
  .js-motion .quote-band__image {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .js-motion .section-heading__ja::after {
    width: 6rem;
  }

  .leaf-host .leaf {
    display: none;
  }
}