/* ============================================================
   MORINGATO · story.css — loaded ONLY where needed (see the
   conditional enqueue in functions.php).
   Story page (template-story.php) — hero, timeline, moments strip.
   Split from the monolithic style.css (v2.30.0 refactor) —
   same rules, same order, zero visual change intended.
   ============================================================ */

/* ============================================================
   STORY PAGE (template-story.php) — hero, scroll-drawn timeline,
   usage-moments strip, Coming Soon 2027. Scoped .mt-sp / .mt-tl;
   self-contained media queries + reduced-motion at the end.
   ============================================================ */
.mt-sp__progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  height: 3px; pointer-events: none;
}

.mt-sp__progress i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--green), var(--green-bright));
  transform: scaleX(0); transform-origin: 0 50%;
}

.mt-sp__hero { text-align: center; padding: 92px 24px 64px; }

.mt-sp__hero h1 { font-size: clamp(44px, 7vw, 76px); letter-spacing: -.02em; margin: 0 0 10px; }

.mt-sp__hero p { color: var(--text-muted); font-size: 17px; margin: 0; }

.mt-sp__scrollhint {
  position: relative; width: 2px; height: 52px;
  margin: 36px auto 0; background: rgba(30, 54, 32, .14);
  border-radius: 2px; overflow: hidden;
}

.mt-sp__scrollhint i {
  position: absolute; inset: 0; background: var(--green);
  transform-origin: 50% 0;
  animation: mt-sp-hint 2.2s cubic-bezier(.22, 1, .36, 1) infinite;
}

@keyframes mt-sp-hint {
  0%   { transform: scaleY(0); opacity: 1; }
  70%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

.mt-sp__intro { max-width: 640px; padding-bottom: 72px; text-align: center; }

.mt-sp__intro p { color: var(--text-muted); font-size: 17px; line-height: 1.75; margin: 0; }

/* --- timeline shell --- */
.mt-tl { position: relative; max-width: 1040px; padding-bottom: 32px; }

.mt-tl__line {
  position: absolute; top: 8px; bottom: 8px; left: 50%;
  width: 2px; translate: -50% 0;
  background: rgba(30, 54, 32, .1); border-radius: 2px;
}

.mt-tl__line i {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, var(--green-bright), var(--green));
  transform: scaleY(0); transform-origin: 50% 0;  /* driven by scroll (JS) */
}

/* --- milestones: alternate sides on desktop --- */
.mt-tl__item { position: relative; width: calc(50% - 48px); margin: 0 0 56px; }

.mt-tl article:nth-of-type(even) { margin-left: auto; }

.mt-tl__item:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; border-radius: 24px; }

.mt-tl__dot {
  position: absolute; top: 34px; right: -55px; z-index: 2;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--green);
  transition: background .4s ease, box-shadow .4s ease;
}

.mt-tl article:nth-of-type(even) .mt-tl__dot { right: auto; left: -55px; }

.mt-tl__item.is-active .mt-tl__dot { background: var(--green); box-shadow: 0 0 0 6px rgba(93, 139, 49, .18); }

.mt-tl__card {
  position: relative;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: 24px;
  padding: 26px 28px 24px;
  box-shadow: var(--shadow-card);
}

.mt-tl__year { display: block; font: 700 clamp(26px, 3vw, 34px)/1 var(--font); color: var(--green); letter-spacing: -.01em; margin: 0 0 14px; }

.mt-tl__photo {
  margin: 0 0 16px; aspect-ratio: 14 / 9;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, var(--green-pale), #fff);
}

.mt-tl__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* .mt-tl__photo span (placeholder) is styled by the shared .mt-rt__ph rule. */
.mt-tl__card h2 { font-size: 22px; margin: 0 0 8px; }

.mt-tl__card p { color: var(--text-muted); font-size: 14.5px; line-height: 1.7; margin: 0; }

/* staggered entrance: year → photo → title/text (JS adds .is-active) */
.mt-tl__year,
.mt-tl__photo,
.mt-tl__card h2,
.mt-tl__card p {
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), scale .7s cubic-bezier(.22, 1, .36, 1);
}

.mt-js .mt-tl__item:not(.is-active) .mt-tl__year { opacity: 0; transform: translateY(16px); }

.mt-js .mt-tl__item:not(.is-active) .mt-tl__photo { opacity: 0; scale: .95; }

.mt-js .mt-tl__item:not(.is-active) .mt-tl__card :is(h2, p) { opacity: 0; transform: translateY(18px); }

.mt-tl__item.is-active .mt-tl__photo { transition-delay: .15s; }

.mt-tl__item.is-active .mt-tl__card h2 { transition-delay: .3s; }

.mt-tl__item.is-active .mt-tl__card p { transition-delay: .38s; }

/* very light photo parallax where scroll-driven animations exist */
@supports (animation-timeline: view()) {
.mt-tl__photo > * {
    animation: mt-tl-parallax linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

/* final 2027 milestone: centered, bigger, glowing, pulsing dot */
.mt-tl__item--soon,
.mt-tl article.mt-tl__item--soon {
  width: min(640px, 100%); margin-left: auto; margin-right: auto;
}

.mt-tl__item--soon .mt-tl__dot,
.mt-tl article.mt-tl__item--soon .mt-tl__dot {
  top: -28px; right: auto; left: 50%; translate: -50% 0;
  background: var(--green);
  animation: mt-tl-dot-pulse 1.8s ease-out infinite;
}

@keyframes mt-tl-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(93, 139, 49, .45); }
  70%  { box-shadow: 0 0 0 12px rgba(93, 139, 49, 0); }
  100% { box-shadow: 0 0 0 0 rgba(93, 139, 49, 0); }
}

.mt-tl__item--soon .mt-tl__card {
  padding: 36px 36px 32px;
  box-shadow: 0 0 0 1px rgba(93, 139, 49, .35), 0 0 44px rgba(93, 139, 49, .22), var(--shadow-card);
}

.mt-tl__badge {
  position: absolute; top: -13px; right: 24px;
  background: var(--green-bright); color: #fff;
  border-radius: var(--r-pill); padding: 7px 13px;
  font: 700 10.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(14, 26, 15, .14);
}

/* usage-moments strip (between 2022 and 2024) */
.mt-tl__moments {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 14px; margin: -4px 0 56px;
}

.mt-tl__moments span {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-pill); padding: 10px 16px;
  font: 500 13px/1 var(--font); color: var(--ink);
  box-shadow: 0 6px 18px rgba(14, 26, 15, .06);
}

.mt-tl__moments svg { width: 18px; height: 18px; color: var(--green); }

/* closing */
.mt-sp__closing { text-align: center; padding-top: 16px; padding-bottom: 96px; }

.mt-sp__mission {
  max-width: 34ch; margin: 0 auto 44px;
  font: 600 clamp(18px, 2.2vw, 24px)/1.5 var(--font); color: var(--ink);
}

.mt-sp__soon {
  max-width: 560px; margin: 0 auto;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--r-story);
  padding: 40px 36px;
  box-shadow: 0 0 0 1px rgba(93, 139, 49, .3), 0 0 44px rgba(93, 139, 49, .18), var(--shadow-card);
}

.mt-sp__soon h2 { font-size: clamp(24px, 3vw, 32px); margin: 16px 0 8px; }

.mt-sp__soon p { color: var(--text-muted); margin: 0 0 24px; }

@media (max-width: 900px) {
.mt-sp__hero { padding: 64px 24px 48px; }
.mt-tl__line { left: 11px; translate: 0 0; }
.mt-tl__item,
.mt-tl article:nth-of-type(even),
.mt-tl__item--soon {
    width: auto; margin: 0 0 44px 36px;
  }
.mt-tl__dot,
.mt-tl article:nth-of-type(even) .mt-tl__dot,
.mt-tl__item--soon .mt-tl__dot {
    top: 30px; left: -32px; right: auto; translate: 0 0;
  }
.mt-tl__moments { justify-content: flex-start; margin-left: 36px; }
}

@media (prefers-reduced-motion: reduce) {
.mt-sp__scrollhint i { animation: none; transform: none; }
.mt-tl__dot { animation: none !important; }
.mt-tl__year,
.mt-tl__photo,
.mt-tl__card h2,
.mt-tl__card p { transition: none; }
.mt-js .mt-tl__item:not(.is-active) .mt-tl__year,
.mt-js .mt-tl__item:not(.is-active) .mt-tl__photo,
.mt-js .mt-tl__item:not(.is-active) .mt-tl__card :is(h2, p) { opacity: 1; transform: none; scale: 1; }
.mt-tl__photo > * { animation: none; }
}

.mt-tl__photo span {
  display: grid; place-content: center; justify-items: center; gap: 11px;
  height: 100%; padding: 22px 20px; text-align: center; border-radius: inherit;
  background:
    radial-gradient(110% 110% at 50% 0%, rgba(255, 255, 255, .6), transparent 70%),
    linear-gradient(150deg, var(--green-pale), #fff);
  box-shadow: inset 0 0 0 1px rgba(79, 122, 61, .12);
  font: 500 12.5px/1.55 var(--font); letter-spacing: .01em; text-transform: none;
  color: var(--green);
}

.mt-tl__photo span::before {
  content: ""; width: 32px; height: 32px; opacity: .55;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F7A3D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4C9 5 4 11 4 20c9 0 15-5 16-16Z'/%3E%3Cpath d='M4 20C8 14 13 10 19 8'/%3E%3C/svg%3E");
}

.mt-tl__card,
.mt-sp__soon,
.mt-tl__moments span {
  background: var(--pane-bg);
  backdrop-filter: var(--pane-filter);
  -webkit-backdrop-filter: var(--pane-filter);
  border: var(--pane-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),   /* specular top edge */
    inset 0 -1px 0 rgba(255, 255, 255, .25),
    0 14px 34px rgba(14, 26, 15, .10);
}

.mt-sp__soon,
.mt-tl__item--soon .mt-tl__card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 0 0 1px rgba(93, 139, 49, .32),
    0 0 44px rgba(93, 139, 49, .22),
    var(--shadow-card);
}