/* ────────────────────────────────────────────
   A·Ho · Rect Ripple (directional fill + click ripple)
   入った辺から矩形が満ち、クリックで矩形リップル
   Pure CSS + JS、外部依存ゼロ
   ──────────────────────────────────────────── */

*,*::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;
}

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)}

/* ─── HERO ─── */
.hero{max-width:1000px;margin:0 auto;padding:clamp(4rem,10vw,8rem) clamp(1.5rem,4vw,3rem) clamp(2rem,4vw,3rem)}
.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.5rem}
.hero h1{font-weight:700;font-size:clamp(2.4rem,8vw,5.2rem);line-height:1.02;letter-spacing:-.02em}
.lead{font-size:clamp(1rem,1.3vw,1.1rem);color:var(--muted);max-width:38em;margin-top:1.5rem}

/* ─── playground ─── */
.play,.notes{max-width:1000px;margin:0 auto;padding:clamp(2.5rem,5vw,4rem) 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 h2 small{font-family:var(--mono);font-size:.55em;letter-spacing:.15em;color:var(--hi);font-weight:500}
.shou .no{font-family:var(--mono);font-size:.78rem;letter-spacing:.25em;color:var(--muted)}
.mode-note{font-size:.9rem;color:var(--muted);margin:-1.5rem 0 1.6rem;line-height:1.7}
.mode-note code{font-family:var(--mono);font-size:.88em;background:var(--paper);padding:.1em .35em;border:1px solid var(--line)}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}
.btn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:680px){.btn-grid{grid-template-columns:repeat(3,1fr)}}

/* ────────────────────────────────────────────
   COMPONENT: .rect-btn
   ──────────────────────────────────────────── */
.rect-btn{
  position:relative;overflow:hidden;isolation:isolate;
  font-family:var(--mono);font-size:.86rem;letter-spacing:.14em;font-weight:500;
  padding:1.1em 1.6em;min-height:3.2em;
  background:var(--paper);border:1px solid var(--ink);color:var(--ink);
  cursor:pointer;

  /* component variables */
  --rr-fill:#0a0a0a;
  --rr-text:#fff;
  --rr-ripple:rgba(255,45,85,.5);
  --rr-dur:540ms;
  --rr-ease:cubic-bezier(.6,0,.2,1);
  --rr-cell:22px;          /* grid モードのマス目サイズ */
}
.rect-btn--solid{background:var(--ink);color:#fff;--rr-fill:#ff2d55;--rr-text:#fff;--rr-ripple:rgba(255,255,255,.45)}

.rr-label{position:relative;z-index:2;transition:color .18s ease}
.rect-btn.is-filled .rr-label{color:var(--rr-text)}

/* directional hover fill（JS が transform / origin を制御） */
.rr-fill{
  position:absolute;inset:0;z-index:1;
  background:var(--rr-fill);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--rr-dur) var(--rr-ease);
  pointer-events:none;
}

/* grid モード（モザイク伝播フィル） */
.rr-grid{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  grid-template-rows:repeat(var(--rows),1fr);
}
.rr-cell{
  background:var(--rr-fill);
  transform:scale(0);transform-origin:center;
  transition:transform var(--rr-dur) var(--rr-ease);
}

/* click ripple（矩形） */
.rr-ripple{
  position:absolute;z-index:1;width:12px;height:12px;
  background:var(--rr-ripple);
  transform:translate(-50%,-50%) scale(0);
  animation:rr-rip var(--rr-dur) ease-out forwards;
  pointer-events:none;
}
@keyframes rr-rip{
  from{transform:translate(-50%,-50%) scale(0);opacity:.6}
  to{transform:translate(-50%,-50%) scale(48);opacity:0}
}
/* END COMPONENT */


/* ─── NOTES ─── */
.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:.76rem;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){
  .rr-fill,.rr-cell{transition:none}
  .rr-ripple{display:none}
}