/* ==========================================================================
   月灯り鑑定室 — Motion layer
   Everything here is decorative. Content, copy and layout live in style.css;
   this file only adds movement on top. Motion is switched on by js/motion.js
   (html.motion) and never runs for prefers-reduced-motion.
   ========================================================================== */

/* ---- sky canvas (replaces the SVG starfield when motion is on) ---- */
.atmosphere .sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.motion .atmosphere .stars { display: none; }

.motion .atmosphere { overflow: hidden; }
html.motion { overflow-x: clip; }

/* slow drifting moonlit haze behind everything */
.motion .atmosphere::before,
.motion .atmosphere::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  will-change: transform;
}
.motion .atmosphere::before {
  width: 70vmax; height: 50vmax;
  left: -20vmax; top: -12vmax;
  background: radial-gradient(closest-side, rgba(72, 88, 170, .30), transparent);
  animation: haze-a 38s ease-in-out infinite alternate;
}
.motion .atmosphere::after {
  width: 60vmax; height: 44vmax;
  right: -22vmax; top: 30vh;
  background: radial-gradient(closest-side, rgba(201, 169, 97, .10), transparent);
  animation: haze-b 46s ease-in-out infinite alternate;
}
@keyframes haze-a { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.15); } }
@keyframes haze-b { to { transform: translate3d(-12vmax, -8vmax, 0) scale(.9); } }

/* ==========================================================================
   HERO — moonrise intro
   ========================================================================== */
.hero .thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.hero > *:not(.thread) { position: relative; z-index: 1; }
.hero > .hero-scrolldown { position: absolute; }

.thread .t-line {
  fill: none;
  stroke: url(#threadGrad);
  stroke-width: 1;
  stroke-linecap: round;
}
.thread .t-pulse {
  fill: none;
  stroke: #f3e2b4;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(243, 226, 180, .9));
}
.thread .t-node { fill: #e3cd94; }
.thread .t-node-halo { fill: none; stroke: #c9a961; stroke-opacity: .5; }
.thread .t-dot { fill: #efe7d6; }

.motion .thread .t-line {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: draw 2.6s cubic-bezier(.65, 0, .35, 1) 1.9s forwards;
}
.motion .thread .t-pulse {
  stroke-dasharray: 26 var(--len);
  stroke-dashoffset: 26;
  animation: pulse-run 5.5s linear 4.6s infinite;
}
.motion .thread .t-node,
.motion .thread .t-dot { opacity: 0; transform-box: fill-box; transform-origin: center; animation: node-in 1s var(--ease) forwards; }
.motion .thread .t-node.a { animation-delay: 1.7s; }
.motion .thread .t-node.b { animation-delay: 4.2s; }
.motion .thread .t-node-halo { opacity: 0; transform-box: fill-box; transform-origin: center; }
.motion .thread .t-node-halo.a { animation: halo 3.6s ease-out 1.9s infinite; }
.motion .thread .t-node-halo.b { animation: halo 3.6s ease-out 4.4s infinite; }
.motion .thread .t-dot { animation-delay: calc(2.2s + var(--d, 0s)); }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse-run {
  0% { stroke-dashoffset: 26; opacity: 0; }
  8% { opacity: .95; }
  60% { opacity: .95; }
  72% { stroke-dashoffset: calc(-1 * var(--len)); opacity: 0; }
  100% { stroke-dashoffset: calc(-1 * var(--len)); opacity: 0; }
}
@keyframes node-in {
  0% { opacity: 0; transform: scale(.2); }
  60% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes halo {
  0% { opacity: .8; transform: scale(.6); }
  100% { opacity: 0; transform: scale(3.2); }
}

/* moon: rises, blooms, then keeps breathing (glow keyframes in style.css) */
.motion .hero-moon {
  animation: moonrise 2.4s cubic-bezier(.2, .8, .2, 1) .15s both;
}
@keyframes moonrise {
  0% { opacity: 0; transform: translateY(46px) scale(.82); filter: blur(6px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
.hero-moon .orbit {
  position: absolute;
  inset: -26%;
  width: 152%;
  height: 152%;
  overflow: visible;
  pointer-events: none;
}
.hero-moon .orbit circle { fill: none; stroke: #c9a961; }
.hero-moon .orbit .o1 { stroke-opacity: .28; stroke-dasharray: 2 7; }
.hero-moon .orbit .o2 { stroke-opacity: .16; }
.hero-moon .orbit .sat { fill: #f3e2b4; stroke: none; filter: drop-shadow(0 0 3px #f3e2b4); }
.motion .hero-moon .orbit { opacity: 0; animation: fade-in 1.6s ease 1.4s forwards; }
.motion .hero-moon .orbit .spin { transform-origin: 50% 50%; transform-box: view-box; animation: spin 26s linear infinite; }
.motion .hero-moon .orbit .spin.rev { animation-duration: 60s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { to { opacity: 1; } }

/* scroll-linked parallax for hero pieces (JS writes --hy / --ho) */
.motion .hero-moon-wrap {
  transform: translate3d(0, calc(var(--hy, 0) * 1px), 0);
  opacity: var(--ho, 1);
  will-change: transform, opacity;
}

/* brandmark: tracking settles in */
.motion .hero .brandmark {
  animation: track-in 2s cubic-bezier(.2, .8, .2, 1) .9s both;
}
@keyframes track-in {
  0% { opacity: 0; letter-spacing: .7em; filter: blur(4px); }
  100% { opacity: 1; letter-spacing: .22em; filter: none; }
}

/* hide the headline until motion.js has split it into characters (no flash) */
.motion .hero h1:not(.split),
.motion .hero .hero-voice:not(.split) { opacity: 0; }

/* per-character reveal (JS wraps characters in .ch, sets --i) */
.motion .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(.45em);
  filter: blur(8px);
  animation: ch-in 1.1s cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: calc(var(--base, 1.4s) + var(--i) * 55ms);
}
@keyframes ch-in { to { opacity: 1; transform: none; filter: blur(0); } }
.motion .hero h1 { --base: 1.35s; }
.motion .hero .hero-voice { --base: 2.9s; }
.motion .hero .hero-voice .ch { animation-duration: 1.4s; }

/* moonlight sweep across the headline once the letters have settled */
.hero h1 { position: relative; }
.motion .hero h1::after {
  content: "";
  position: absolute;
  inset: -10% -20%;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 244, 214, .5) 50%, transparent 62%);
  mix-blend-mode: soft-light;
  transform: translateX(-120%);
  animation: sweep 2.6s cubic-bezier(.45, 0, .2, 1) 3.6s;   /* no fill: it returns off-screen left, never widening the page */
  pointer-events: none;
}
@keyframes sweep { to { transform: translateX(120%); } }

.motion .hero-scrolldown { opacity: 0; animation: fade-in 1.2s ease 4.4s forwards; }

/* ==========================================================================
   Moon-phase reading progress (top right)
   ========================================================================== */
.phase {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  z-index: 900;
  width: 40px;
  height: 40px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.phase.on { opacity: 1; transform: none; }
.phase svg { width: 100%; height: 100%; overflow: visible; }
.phase .ring-bg { fill: none; stroke: rgba(201, 169, 97, .18); }
.phase .ring { fill: none; stroke: #c9a961; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 20px 20px; }
.phase .disc { fill: rgba(92, 90, 118, .45); }
.phase .lit { fill: url(#phaseGrad); }
.phase .bloom { fill: rgba(227, 205, 148, .0); transition: fill .8s ease; }
.phase.full .bloom { fill: rgba(227, 205, 148, .35); }
@media (min-width: 768px) {
  .phase { top: 22px; right: 22px; width: 46px; height: 46px; }
}

/* ==========================================================================
   Section headings — ornament draws, heading breathes in
   ========================================================================== */
.motion .s-head .divider::before,
.motion .s-head .divider::after {
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(.65, 0, .35, 1) .15s;
}
.motion .s-head .divider::before { transform-origin: right center; }
.motion .s-head .divider::after { transform-origin: left center; }
.motion .s-head .divider i {
  transform: rotate(-135deg) scale(0);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
.motion .s-head.is-visible .divider::before,
.motion .s-head.is-visible .divider::after { transform: scaleX(1); }
.motion .s-head.is-visible .divider i { transform: rotate(45deg) scale(1); }
.motion .s-head.is-visible .divider i { box-shadow: 0 0 10px rgba(227, 205, 148, .5); }

.motion .s-head h2 {
  transition: letter-spacing 1.4s cubic-bezier(.2, .8, .2, 1), filter 1.2s ease, opacity 1.2s ease;
}
.motion .s-head:not(.is-visible) h2 { letter-spacing: .34em; filter: blur(5px); opacity: 0; }

/* final moon — blooms and gathers a few sparkles */
.final .s-head { position: relative; }
.final .sparkles {
  position: absolute;
  left: 50%;
  top: 0;
  width: 220px;
  height: 120px;
  transform: translateX(-50%);
  pointer-events: none;
  overflow: visible;
}
.final .sparkles path { fill: #e3cd94; opacity: 0; transform-box: fill-box; transform-origin: center; }
.motion .final .s-head.is-visible .sparkles path { animation: twinkle-in 3.2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes twinkle-in {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  45% { opacity: .9; transform: scale(1) rotate(45deg); }
}
.motion .final .moon-final { transition: filter 1.6s ease, transform 1.6s cubic-bezier(.2, .8, .2, 1); transform: translateY(18px) scale(.9); filter: drop-shadow(0 0 0 rgba(227, 205, 148, 0)); }
.motion .final .s-head.is-visible .moon-final { transform: none; filter: drop-shadow(0 0 18px rgba(227, 205, 148, .45)); }

/* ==========================================================================
   Flow steps — a thread of light follows your scroll
   ========================================================================== */
.steps .beam {
  position: absolute;
  left: 18px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: linear-gradient(180deg, #f3e2b4, var(--gold));
  transform-origin: top;
  transform: scaleY(var(--p, 0));
  box-shadow: 0 0 8px rgba(243, 226, 180, .7);
  pointer-events: none;
}
.steps .beam::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff6de;
  transform: translateX(-50%) scaleY(calc(1 / max(var(--p, 1), .02)));
  box-shadow: 0 0 10px 3px rgba(243, 226, 180, .8);
  opacity: calc(var(--p, 0) * 10);
}
@media (min-width: 480px) { .steps .beam { left: 21px; } }
.steps .beam { z-index: 0; }
.motion .steps .step { z-index: 1; }
.motion .step .num { transition: box-shadow .6s ease, background .6s ease, color .6s ease; }
.motion .step.lit .num {
  background: radial-gradient(circle at 40% 35%, #2a3570, var(--n1));
  box-shadow: 0 0 0 4px rgba(201, 169, 97, .12), 0 0 18px rgba(227, 205, 148, .45);
  color: #fff3d6;
}

/* ==========================================================================
   Before → After moons
   ========================================================================== */
.motion .transform .arrow path { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset 1.2s ease .5s; }
.motion .transform.is-visible .arrow path { stroke-dashoffset: 0; }
.motion .transform-card.after { transition: box-shadow 1.4s ease 1s, border-color 1.4s ease 1s; }
.motion .transform.is-visible .transform-card.after {
  border-color: rgba(201, 169, 97, .5);
  box-shadow: 0 0 40px -18px rgba(227, 205, 148, .55) inset;
}
.transform-card.after .moonicon { overflow: visible; }
.motion .transform.is-visible .transform-card.after .moonicon { filter: drop-shadow(0 0 8px rgba(227, 205, 148, .55)); transition: filter 1.4s ease 1.2s; }

/* numbered list: gold hairline draws under each item */
.motion .numlist > li { position: relative; }
.motion .numlist > li::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e3cd94, transparent);
  transform: scaleX(0);
  transition: transform 1.4s cubic-bezier(.65, 0, .35, 1);
}
.motion .numlist > li.is-visible::after { transform: scaleX(1); }
.motion .numlist .n { transition: text-shadow 1.2s ease .4s, opacity 1s ease; }
.motion .numlist > li:not(.is-visible) .n { opacity: 0; }
.motion .numlist > li.is-visible .n { text-shadow: 0 0 14px rgba(227, 205, 148, .55); }

/* ==========================================================================
   Plans — light orbits the recommended card
   ========================================================================== */
@property --ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.motion .plan.recommended::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  background: conic-gradient(from var(--ang), transparent 0deg, transparent 250deg, rgba(243, 226, 180, .15) 290deg, #fff3d6 350deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: orbit 6s linear infinite;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(243, 226, 180, .8));
}
@keyframes orbit { to { --ang: 360deg; } }
.motion .plan { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
@media (hover: hover) {
  .motion .plan:hover { transform: translateY(-4px); }
}

/* ==========================================================================
   Fixed CTA — occasional glint
   ========================================================================== */
.motion .btn-line { position: relative; overflow: hidden; }
.motion .btn-line::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 38%;
  left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  animation: glint 7.5s ease-in-out 5s infinite;
  pointer-events: none;
}
@keyframes glint {
  0% { left: -50%; }
  14% { left: 130%; }
  100% { left: 130%; }
}