/* ────────────────────────────────────────────
   C·Lo · Letter Split (assemble on load / scroll)
   - 文字 / 単語の 2 粒度で分解
   - flip / drop / scatter / wave の 4 モーションモード
   - 想定 SaaS『STRATA』のミニ・ランディングで実用例を提示
   ──────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:where(html,body){line-break:strict;word-break:normal;overflow-wrap:break-word}
:where(h1,h2,h3,h4){text-wrap:balance}
:where(p,li){text-wrap:pretty}

:root{
  --bg:#f4f3ee;
  --ink:#0a0a0a;
  --muted:#6a6a6a;
  --line:#d8d6cc;
  --paper:#fff;
  --hi:#ff2d55;
  --alt:#0066ff;
  --font:'DM Sans','Noto Sans JP',sans-serif;
  --mono:'JetBrains Mono',monospace;

  /* component */
  --ls-dur:700ms;
  --ls-stagger:42ms;
  --ls-ease:cubic-bezier(.2,.8,.2,1);
  --ls-rise:1em;
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:400;line-height:1.65;min-height:100vh}
a{color:inherit;text-decoration:none}

/* ─── HEADER ─── */
header.site{
  position:sticky;top:0;z-index:50;background:var(--bg);
  padding:1rem clamp(1.2rem,4vw,3rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--ink);
}
.back{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;display:inline-flex;align-items:center;gap:.6em}
.back .arrow{transition:transform .25s}
.back:hover .arrow{transform:translateX(-.3em)}
.cell-marker{font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;color:var(--hi)}

/* ────────────────────────────────────────────
   COMPONENT
   ──────────────────────────────────────────── */
[data-split]{perspective:600px}
.ls-char,.ls-word{display:inline-block;transform-origin:center bottom;will-change:transform,opacity}
.ls-word{white-space:nowrap}

/* 再生前は伏せる（チラつき防止） */
[data-split]:not(.is-playing) .ls-char,
[data-split]:not(.is-playing) .ls-word{opacity:0}

/* 既定モード = flip。.mode-* で上書き */
[data-split].is-playing .ls-char,
[data-split].is-playing .ls-word{
  animation:ls-flip var(--ls-dur) var(--ls-ease) backwards;
  animation-delay:calc(var(--i,0) * var(--ls-stagger));
}
@keyframes ls-flip{
  from{opacity:0;transform:translateY(var(--ls-rise)) rotateX(-85deg)}
  to{opacity:1;transform:none}
}

.mode-drop [data-split].is-playing .ls-char,
.mode-drop [data-split].is-playing .ls-word{animation-name:ls-drop}
@keyframes ls-drop{
  from{opacity:0;transform:translateY(calc(-1 * var(--ls-rise))) rotateX(75deg)}
  to{opacity:1;transform:none}
}

.mode-scatter [data-split].is-playing .ls-char,
.mode-scatter [data-split].is-playing .ls-word{animation-name:ls-scatter}
@keyframes ls-scatter{
  from{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rot,0))}
  to{opacity:1;transform:none}
}

.mode-wave [data-split].is-playing .ls-char,
.mode-wave [data-split].is-playing .ls-word{animation-name:ls-wave}
@keyframes ls-wave{
  0%{opacity:0;transform:translateY(.9em)}
  55%{opacity:1;transform:translateY(-.18em)}
  100%{opacity:1;transform:none}
}
/* END COMPONENT */


/* ─── HERO ─── */
.hero{max-width:1100px;margin:0 auto;padding:clamp(4rem,11vw,9rem) clamp(1.5rem,4vw,3rem) clamp(3rem,6vw,5rem)}
.kicker{display:inline-block;font-family:var(--mono);font-size:.78rem;letter-spacing:.25em;padding:.3em .9em;border:1px solid var(--ink);margin-bottom:1.6rem}
.ls-title{font-weight:700;font-size:clamp(2.6rem,9vw,6rem);line-height:1.0;letter-spacing:-.02em;display:flex;flex-direction:column}
.ls-title .ls-line{display:block}
.ls-title .accent{
  background:linear-gradient(transparent 62%,var(--hi) 62%,var(--hi) 92%,transparent 92%);
  width:fit-content;padding:0 .06em;
}
.lead{font-size:clamp(1rem,1.3vw,1.1rem);color:var(--muted);max-width:36em;margin-top:1.6rem;line-height:1.95}

/* CTA */
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.cta{
  font-family:var(--mono);font-size:.86rem;letter-spacing:.14em;font-weight:500;
  padding:.95em 1.4em;background:var(--paper);border:1px solid var(--ink);color:var(--ink);
  cursor:pointer;transition:transform .2s,box-shadow .2s;display:inline-block;
}
.cta--solid{background:var(--ink);color:#fff}
.cta:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--hi)}

/* mode picker */
.mode-picker{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:2.2rem;padding-top:1.2rem;border-top:1px dashed var(--line)}
.mp-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;color:var(--muted);margin-right:.4rem}
.mp-btn{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  padding:.4em .9em;background:var(--paper);border:1px solid var(--ink);color:var(--ink);cursor:pointer;
  transition:background .15s,color .15s,transform .15s;
}
.mp-btn:hover{transform:translate(-1px,-1px)}
.mp-btn[aria-pressed="true"]{background:var(--ink);color:#fff}

.replay{
  display:inline-flex;align-items:center;gap:.7em;margin-top:1.2rem;
  padding:.7em 1.2em;background:transparent;color:var(--ink);border:1px solid var(--ink);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s;
}
.replay:hover{background:var(--ink);color:#fff}
.replay .dot{width:.55em;height:.55em;border-radius:50%;background:var(--hi);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ─── FEATURES ─── */
.features{
  max-width:1100px;margin:0 auto;padding:clamp(3rem,6vw,5rem) clamp(1.5rem,4vw,3rem) clamp(3rem,6vw,5rem);
}
.features .shou{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid var(--ink);margin-bottom:2rem}
.features .shou h2{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:700;letter-spacing:.04em}
.features .shou .no{font-family:var(--mono);font-size:.78rem;letter-spacing:.25em;color:var(--muted)}
.feature{padding:clamp(2.2rem,4vw,3rem) 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:.8rem}
@media(min-width:780px){.feature{grid-template-columns:auto 1fr;gap:2rem 3rem;align-items:baseline}}
.feature:last-child{border-bottom:none}
.ftag{font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;color:var(--hi);white-space:nowrap}
.fh{font-weight:700;font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.25;letter-spacing:-.01em}
.fp{font-size:clamp(.95rem,1.3vw,1.08rem);color:var(--muted);grid-column:1/-1;line-height:1.95;max-width:42em}
@media(min-width:780px){.fp{grid-column:2}}

/* ─── BAND ─── */
.band{
  background:var(--ink);color:#fff;
  padding:clamp(4rem,10vw,8rem) clamp(1.5rem,4vw,3rem);
  display:flex;flex-direction:column;align-items:center;gap:1.2rem;text-align:center;
}
.ls-big{font-weight:700;font-size:clamp(2rem,7vw,5rem);line-height:1.05;letter-spacing:-.01em}
.band-sub{font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;color:#bbb;max-width:32em}

/* ─── NOTES ─── */
.notes{max-width:1100px;margin:0 auto;padding:clamp(3rem,5vw,4.5rem) clamp(1.5rem,4vw,3rem)}
.shou{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid var(--ink);margin-bottom:2.5rem}
.shou h2{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:700;letter-spacing:.04em}
.shou .no{font-family:var(--mono);font-size:.78rem;letter-spacing:.25em;color:var(--muted)}
.frame{font-size:.92rem;line-height:1.9;color:var(--muted);max-width:46em;margin:-1rem 0 2rem;padding:1rem 1.2rem;border-left:3px solid var(--hi);background:var(--paper)}
.frame code{font-family:var(--mono);font-size:.88em;background:var(--bg);padding:.1em .35em;border:1px solid var(--line)}
.notes-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-bottom:3rem}
@media(min-width:780px){.notes-grid{grid-template-columns:repeat(3,1fr)}}
.note{position:relative;background:var(--paper);border:1px solid var(--ink);padding:1.5rem 1.4rem 1.4rem}
.note-no{position:absolute;top:1rem;right:1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--muted)}
.note h3{font-size:1.02rem;font-weight:700;margin-bottom:.7rem;letter-spacing:.02em}
.note p{font-size:.86rem;color:var(--muted);line-height:1.8}
.note code,.var span code{font-family:var(--mono);font-size:.85em;background:var(--bg);padding:.1em .35em;border:1px solid var(--line)}
.sub-h{font-size:1rem;font-weight:700;letter-spacing:.04em;margin:2rem 0 1rem;padding-bottom:.7rem;border-bottom:1px dashed var(--ink)}
.vars{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--ink);background:var(--paper)}
.var{display:grid;grid-template-columns:minmax(8rem,auto) 1fr auto;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);align-items:center}
.var:last-child{border-bottom:none}
.var code{font-family:var(--mono);font-size:.82rem;color:var(--hi);font-weight:500}
.var span{font-size:.85rem;color:var(--muted);line-height:1.5}
.var em{font-family:var(--mono);font-size:.78rem;font-style:normal;color:var(--ink);background:var(--bg);padding:.15em .55em;border:1px solid var(--line);white-space:nowrap}
@media(max-width:680px){.var{grid-template-columns:1fr;gap:.3rem;padding:.9rem 1rem}.var em{justify-self:start}}

/* ─── FOOTER ─── */
footer{
  padding:2rem clamp(1.2rem,4vw,3rem) 1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--muted);
  border-top:1px solid var(--ink);
}
footer a{color:var(--ink)}

/* Reduced motion: 組み上げず即表示 */
@media (prefers-reduced-motion: reduce){
  [data-split].is-playing .ls-char,
  [data-split].is-playing .ls-word{animation:none}
  [data-split] .ls-char,[data-split] .ls-word{opacity:1}
  .replay .dot{animation:none}
}