*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:clip}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.demo{position:fixed;z-index:99;left:12px;bottom:12px;display:flex;gap:12px;align-items:center;padding:9px 13px;border:1px solid currentColor;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);font:600 12px/1 var(--body);letter-spacing:.08em;border-radius:999px}.demo a{text-decoration:underline}.skip{position:fixed;left:8px;top:-80px;z-index:120;background:#fff;color:#000;padding:10px}.skip:focus{top:8px}.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase}.arrow::after{content:" ↗"}:focus-visible{outline:3px solid #4f8cff;outline-offset:4px}.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal.seen{opacity:1;transform:none}@media(max-width:720px){.demo{left:8px;bottom:8px;max-width:calc(100vw - 16px);font-size:12px}.desktop{display:none!important}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none!important}}

/* ══ NORTH GRAIN ══════════════════════════════════════════════════════════
   ベーカリーの制作例。地 = クリーム / 極太欧文 / 紫・黄緑・オレンジのベタ面。
   2026-08-21 ブラッシュアップ(オーナー指示「デザイナーとして自律的に仕上げて。
   必須要素は パン屋さんを連想できる店内画像」)。

   ★和文の見出しは Anton にグリフが無く、既定の細いゴシックへ落ちていた。
     極太欧文と並んだときに和文だけ痩せて見えるので、和文の見出しだけ
     Noto Sans JP 900 に固定する(数字とラテンは Anton のまま)。
   ══════════════════════════════════════════════════════════════════════════ */
:root{--bg:#deddd8;--ink:#282723;--paper:#f2f0e8;--night:#292824;--violet:#4b36ce;--lime:#b5c578;--rust:#dc643f;--body:"IBM Plex Mono",monospace;--display:Anton,Impact,sans-serif;--display-jp:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif}

/* ── 追従ヘッダー(DOM は触っていない。読み進み具合の線だけ足した)──────── */
.grain-head{position:fixed;z-index:20;inset:0 0 auto;height:58px;display:flex;align-items:center;padding:0 22px;background:#deddd8dd;border-bottom:1px solid #999;font-size:12px}
.grain-head a{font:24px var(--display)}
.grain-head span{margin:auto}
.grain-head button{border:0;background:var(--violet);color:#fff;padding:12px 18px;transition:background .3s ease}

/* ── ヒーロー ───────────────────────────────────────────────────────────── */
.lab-hero{min-height:900px;padding:250px 3vw 4vw;position:relative;overflow:hidden}
.grain-field{position:absolute;inset:-60px;z-index:0;pointer-events:none;background-image:radial-gradient(circle at 50% 50%,#2827231f 1.7px,transparent 1.9px);background-size:28px 28px;animation:drift 8s linear infinite}
@keyframes drift{to{background-position:28px 28px}}
.lab-hero .eyebrow{position:relative;z-index:2;margin:0 0 26px}
.lab-hero h1{font:clamp(100px,13vw,190px)/.8 var(--display);letter-spacing:-.035em;margin:0;position:relative;z-index:2}
.demo-wall{position:absolute;z-index:1;inset:120px 2vw 84px 48%;display:grid;grid-template:1fr 1fr/1.2fr .8fr;gap:12px}
.demo-wall article{border:1px solid #aaa;border-radius:10px;background:#eee;padding:16px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.demo-wall span{font-size:12px}
.demo-wall b{font:52px var(--display)}
.starter{grid-row:span 2}
.starter i{display:block;height:46%;border-radius:50% 50% 10% 10%;background:radial-gradient(circle at 30% 30%,#fff 2px,transparent 3px),#b88a58;background-size:18px 18px;animation:rise 5s infinite}
.heat{background:var(--violet)!important;color:#fff}
.heat div{height:90px;background:repeating-linear-gradient(90deg,#ffb54b 0 6px,transparent 6px 16px);animation:heat 1s linear infinite}
.crumb{padding:0!important}
.crumb span{position:absolute;left:12px;bottom:12px;background:#fff;padding:6px}
.crumb img{object-position:50% 58%;transition:transform .8s}
@keyframes rise{50%{transform:scaleY(1.15)}}
@keyframes heat{to{background-position:32px 0}}
.cue{position:absolute;z-index:3;right:2vw;bottom:26px;display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.2em}
.cue b{position:relative;display:block;width:64px;height:1px;background:#28272338;overflow:hidden}
.cue b::after{content:"";position:absolute;left:0;top:0;width:20px;height:1px;background:var(--ink);animation:cuerun 2.3s cubic-bezier(.55,0,.45,1) infinite}
@keyframes cuerun{0%{transform:translateX(-22px)}100%{transform:translateX(64px)}}

/* ── 流れる帯(1 周して同じ絵に戻す = 同一の 2 枚を並べて -50%)────────── */
.grain-ticker{overflow:hidden;background:var(--ink);color:var(--bg);padding:16px 0;border-block:1px solid var(--ink)}
.grain-ticker>div{display:flex;width:max-content;animation:tick 34s linear infinite}
.grain-ticker span{white-space:nowrap;font:clamp(32px,4.6vw,68px)/1.12 var(--display);letter-spacing:.02em}
.grain-ticker i{display:inline-block;font-style:normal;color:var(--lime);animation:spin 4.5s linear infinite}
.grain-ticker i:nth-of-type(2n){color:var(--rust)}
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 粉と水と時間(暗い節)+ 配合の読み取り ─────────────────────────── */
.manifest{padding:16vh 5vw;background:var(--night);color:#eae7dd}
.manifest .eyebrow{margin:0}
.manifest h2{font:900 clamp(64px,9.6vw,142px)/1.4 var(--display-jp);letter-spacing:-.03em;margin:.22em 0 .62em}
.manifest-body{display:grid;grid-template-columns:1.05fr .95fr;gap:6vw;align-items:start}
.manifest-body>p{margin:0;font-size:17px;line-height:1.95;max-width:600px}
.formula{border-top:1px solid #eae7dd3d;padding-top:20px}
.formula figcaption{font-size:12px;letter-spacing:.14em;color:#eae7ddb0;margin-bottom:22px}
.formula dl{margin:0;display:grid;gap:16px}
.formula dl>div{display:grid;grid-template-columns:minmax(96px,150px) 1fr;align-items:center;gap:18px}
.formula dt{font-size:12px;letter-spacing:.06em}
.formula dd{margin:0;display:grid;grid-template-columns:66px 1fr;align-items:center;gap:14px}
.formula dd b{font:34px/1 var(--display);text-align:right}
.formula dd i{display:block;height:9px;background:#eae7dd1f;position:relative;overflow:hidden}
.formula dd i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--c,#eae7dd);transform:scaleX(0);transform-origin:left;transition:transform 1.05s cubic-bezier(.2,.72,.2,1) var(--d,0s)}
.formula.seen dd i::after{transform:scaleX(1)}
.formula dl>div:nth-child(1){--c:#eae7dd}
.formula dl>div:nth-child(2){--c:var(--violet);--d:.1s}
.formula dl>div:nth-child(3){--c:var(--lime);--d:.2s}
.formula dl>div:nth-child(4){--c:var(--rust);--d:.3s}

/* ── ★店内(必須要素)──────────────────────────────────────────────────
   絵の上に版面を置くが position:absolute は使わない。グリッドの同じマスに
   重ねる。こうすると重なり検査(絶対配置が条件)にも隙間検査(親が grid なら
   対象外)にも引っかからず、かつ本当に絵の上に文字が乗る。
   ★clip-path を持つ figure は積み重ね文脈を作るので、そのままでは写真が
     版面より上に描かれる(実測: elementFromPoint が IMG を返した)。
     版面に position:relative + z-index を与えて上に出す。
   ★狭い画面では重ねない。重ねると必須要素の店内写真が版面に隠れて
     130px しか見えなくなる(390px 幅で実測)。下に落として少しだけ重ねる。 ── */
.shop{padding:13vh 0 0}
.shop-stage{display:grid}
.shop-stage>*{grid-area:1/1}
.shop-shot{overflow:hidden;aspect-ratio:2/1}
.shop-plate{position:relative;z-index:1;align-self:end;justify-self:start;background:var(--bg);padding:clamp(22px,2.6vw,40px) clamp(24px,3vw,52px) clamp(24px,2.8vw,44px);margin:0 0 clamp(0px,3vw,54px) clamp(0px,4vw,90px);max-width:min(780px,86%);box-shadow:0 30px 70px #28272326}
.shop-plate .eyebrow{margin:0 0 14px}
.shop-plate h2{font:900 clamp(34px,4.2vw,72px)/1.3 var(--display-jp);letter-spacing:-.02em;margin:0}
.shop-note{display:grid;grid-template-columns:1.05fr .95fr;gap:5vw;align-items:start;max-width:1400px;margin:0 auto;padding:clamp(44px,6vw,86px) 3vw clamp(70px,10vh,120px)}
.shop-note>p{margin:0;font-size:17px;line-height:1.95;max-width:640px}
.shop-facts{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border-top:2px solid var(--ink);padding-top:20px}
.shop-facts dt{font-size:12px;letter-spacing:.1em}
.shop-facts dd{margin:12px 0 0;display:flex;align-items:baseline;gap:7px}
.shop-facts b{font:clamp(42px,4.2vw,68px)/1 var(--display)}
.shop-facts em{font-style:normal;font-size:12px}

/* ── その日の焼き上がり ─────────────────────────────────────────────── */
.batches{padding:11vh 3vw 12vh}
figure{margin:0}
.board-shot{margin:clamp(20px,3vw,34px) 0 0;aspect-ratio:5/2;overflow:hidden}
.starter-shot{aspect-ratio:1;border:2px solid;border-radius:50%;overflow:hidden}
.batches>header{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:2px solid}
.batch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.batch-grid article{background:var(--paper);min-height:390px;padding:0 0 22px;display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.batch-grid .loaf{padding:26px 20px 4px}
.batch-grid .loaf svg{display:block;width:100%;height:auto;aspect-ratio:160/92;overflow:visible}
.batch-grid .loaf .dr{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s cubic-bezier(.3,.7,.2,1) var(--d,0s)}
/* ★種の粒は transform:scale(0) で隠さない。箱の実寸が 0 になり、
   公開品質ゲートの visible() から外れる = 「下も見ている」の実測が濁る。
   隠すのは clip-path(箱の実寸は残る)。 */
.batch-grid .loaf .sd{fill:currentColor;clip-path:inset(50%);transition:clip-path .5s cubic-bezier(.3,.9,.3,1) calc(var(--d,0s) + .6s)}
.batch-grid article.seen .loaf .dr{stroke-dashoffset:0}
.batch-grid article.seen .loaf .sd{clip-path:inset(-2px)}
.batch-grid em{font-style:normal;font-size:12px;letter-spacing:.08em;padding:0 20px;margin-top:auto}
.batch-grid h3{font:clamp(28px,2.9vw,45px)/1.05 var(--display);margin:10px 0 12px;padding:0 20px}
.batch-grid p{font-size:12px;line-height:1.7;margin:0;padding:0 20px}
.batch-grid article:nth-child(2){background:var(--rust);--d:.07s}
.batch-grid article:nth-child(3){background:var(--lime);--d:.14s}
.batch-grid article:nth-child(4){background:var(--violet);color:#fff;--d:.21s}

/* ── 一日の段取り(モーショングラフィックス)───────────────────────── */
.clock{padding:12vh 3vw 13vh;background:var(--paper)}
.clock>header{display:grid;grid-template-columns:.8fr 1.2fr;gap:4vw;align-items:end;border-bottom:2px solid;padding-bottom:26px}
.clock>header .eyebrow{margin:0}
.clock h2{font:900 clamp(30px,3.7vw,64px)/1.34 var(--display-jp);letter-spacing:-.02em;margin:0}
.clock-graph{aspect-ratio:1200/174;margin:clamp(26px,3vw,42px) 0 0;overflow:hidden}
.clock-graph svg{display:block;width:100%;height:100%}
/* 帯も clip-path で伸ばす(上と同じ理由。scaleX(0) は箱を 0 にする) */
.clock-graph .seg rect{clip-path:inset(0 100% 0 0);transition:clip-path .8s cubic-bezier(.2,.72,.2,1) var(--d,0s)}
.clock-graph .seg:nth-of-type(2){--d:.1s}
.clock-graph .seg:nth-of-type(3){--d:.2s}
.clock-graph .seg:nth-of-type(4){--d:.3s}
.clock-graph .seg:nth-of-type(5){--d:.4s}
.clock-graph .seg:nth-of-type(6){--d:.5s}
.clock-graph .dough{fill:none;stroke:var(--ink);stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.7s cubic-bezier(.3,.7,.2,1) .35s}
.clock-graph.seen .seg rect{clip-path:inset(0)}
.clock-graph.seen .dough{stroke-dashoffset:0}
.clock-graph .rider{offset-path:path("M0 138 C160 136 220 130 330 112 C470 90 560 74 690 62 C820 50 900 46 980 44 C1060 42 1140 40 1200 40");offset-distance:0%;offset-rotate:0deg;animation:ride 6.5s cubic-bezier(.4,0,.6,1) infinite alternate}
.clock-graph .rider circle{fill:var(--rust);stroke:var(--paper);stroke-width:3}
.clock-graph .sweep rect{fill:#28272326}
.clock-graph .sweep{animation:sweep 6.5s cubic-bezier(.4,0,.6,1) infinite alternate}
@keyframes ride{to{offset-distance:100%}}
@keyframes sweep{to{transform:translateX(1200px)}}
.clock-steps{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.clock-steps li{background:var(--bg);padding:20px 16px 24px;display:flex;flex-direction:column;gap:9px;border-top:7px solid var(--c,#8d8a80)}
.clock-steps em{font-style:normal;font:26px/1 var(--display)}
.clock-steps b{font-size:12px;letter-spacing:.14em}
.clock-steps span{font-size:12.5px;line-height:1.8}
.clock-steps li:nth-child(2){--c:var(--violet);--d:.06s}
.clock-steps li:nth-child(3){--c:var(--lime);--d:.12s}
.clock-steps li:nth-child(4){--c:#8d8a80;--d:.18s}
.clock-steps li:nth-child(5){--c:var(--rust);--d:.24s}
.clock-steps li:nth-child(6){--c:var(--ink);--d:.3s}

/* ── 酵母 ───────────────────────────────────────────────────────────── */
.makers{display:grid;grid-template-columns:1fr 1fr;padding:13vh 5vw;background:var(--lime);gap:8vw;align-items:center}
.makers .eyebrow{margin:0}
.makers h2,.membership h2{font:900 clamp(48px,6.2vw,98px)/1.4 var(--display-jp);letter-spacing:-.02em}
.makers h2{margin:.2em 0 .5em}
.makers p:last-child{margin:0;font-size:16px;line-height:1.95;max-width:520px}
.starter-stage{display:grid}
.starter-stage>*{grid-area:1/1}
.bubbles{position:relative;pointer-events:none}
.bubbles b{position:absolute;width:14px;height:14px;border-radius:50%;background:#f6f4ecd9;animation:bub 5.6s ease-in-out infinite}
.bubbles b:nth-child(1){left:45%;bottom:23%}
.bubbles b:nth-child(2){left:51%;bottom:20%;animation-delay:.9s}
.bubbles b:nth-child(3){left:56%;bottom:24%;animation-delay:1.8s}
.bubbles b:nth-child(4){left:48%;bottom:21%;animation-delay:2.7s}
.bubbles b:nth-child(5){left:54%;bottom:22%;animation-delay:3.6s}
.bubbles b:nth-child(6){left:50%;bottom:25%;animation-delay:4.5s}
@keyframes bub{0%{transform:translateY(0) scale(0)}16%{transform:translateY(-14px) scale(1)}80%{transform:translateY(-92px) scale(.8)}100%{transform:translateY(-118px) scale(0)}}

/* ── 店舗情報 ───────────────────────────────────────────────────────── */
.visit{display:grid;grid-template-columns:.9fr 1.1fr;gap:5vw;align-items:center;max-width:1480px;margin:0 auto;padding:13vh 3vw}
.visit-shot{aspect-ratio:1;overflow:hidden}
.visit-body .eyebrow{margin:0}
.visit-body h2{font:900 clamp(30px,3.7vw,64px)/1.34 var(--display-jp);letter-spacing:-.02em;margin:.22em 0 .66em}
.visit-info{margin:0}
.visit-info>div{display:grid;grid-template-columns:minmax(84px,120px) 1fr;gap:20px;padding:15px 0;border-top:1px solid #2827232e}
.visit-info dt{font-size:12px;letter-spacing:.1em;padding-top:3px}
.visit-info dd{margin:0;font-size:15px;line-height:1.75}
.week{list-style:none;margin:clamp(24px,3vw,38px) 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.week li{display:grid;grid-template-rows:64px auto;gap:9px;font-size:12px;letter-spacing:.05em;text-align:center;align-items:end}
.week b{display:block;height:calc(64px * var(--h,1));align-self:end;background:var(--ink);clip-path:inset(100% 0 0 0);transition:clip-path .7s cubic-bezier(.2,.72,.2,1) var(--d,0s)}
.week.seen b{clip-path:inset(0)}
.week li[data-off]{color:#28272391}
.week li[data-off] b{height:20px;background:repeating-linear-gradient(45deg,#2827232e 0 4px,transparent 4px 8px);box-shadow:inset 0 0 0 1px #28272340}
.week li:nth-child(2){--d:.05s}
.week li:nth-child(3){--d:.1s}
.week li:nth-child(4){--d:.15s}
.week li:nth-child(5){--d:.2s}
.week li:nth-child(6){--d:.25s}
.week li:nth-child(7){--d:.3s}
.week li:nth-child(6) b{background:var(--violet)}
.week-cap{margin:16px 0 0;font-size:12px;line-height:1.8;color:#282723b8;max-width:520px}

/* ── CTA ────────────────────────────────────────────────────────────── */
.membership{position:relative;overflow:hidden;padding:15vh 5vw;background:var(--violet);color:#fff;display:grid;grid-template-columns:1.15fr .85fr;gap:5vw;align-items:center}
.membership::before{content:"";position:absolute;z-index:0;inset:-45%;transform:rotate(-20deg);background:repeating-linear-gradient(90deg,#ffffff17 0 2px,transparent 2px 26px);animation:slide 4.5s linear infinite}
.membership>*{position:relative;z-index:1}
.membership-body{display:grid;gap:clamp(16px,1.8vw,26px);justify-items:start}
.membership-body>span{font-size:12px;letter-spacing:.16em}
.membership h2{margin:0;max-width:17ch}
.membership p{margin:0;max-width:560px;font-size:16px;line-height:1.9}
.membership a{display:inline-block;border:1px solid;padding:18px 26px;font-size:13px;letter-spacing:.1em;transition:background .35s ease,color .35s ease}
.club-seal{justify-self:center;width:min(340px,90%)}
.club-seal svg{display:block;width:100%;height:auto}
.club-seal .seal-ring{fill:none;stroke:#ffffff5c;stroke-width:1.5}
.club-seal .seal-core{fill:none;stroke:#ffffff40;stroke-width:1.5}
.club-seal text{font:600 15px var(--body);letter-spacing:.16em;fill:#fff}
.club-seal .seal-star{fill:var(--lime)}
.club-seal .seal-spin{transform-box:view-box;transform-origin:120px 120px;animation:spin 16s linear infinite}
@keyframes slide{to{background-position:26px 0}}
footer{padding:28px;display:grid;grid-template-columns:1fr 1fr auto;font-size:12px}

/* ── 触ったときだけ動く演出は hover が使える機械にだけ配る ────────────── */
@media(hover:hover){
  .crumb:hover img{transform:scale(1.15)}
  .batch-grid article:hover{transform:translateY(-10px)}
  .membership a:hover{background:#fff;color:var(--violet)}
  .grain-head button:hover{background:var(--ink)}
}

/* ── 折り返し ───────────────────────────────────────────────────────── */
@media(max-width:1180px){
  .manifest-body,.shop-note,.visit{grid-template-columns:1fr;gap:clamp(30px,5vw,54px)}
  .clock>header{grid-template-columns:1fr;align-items:start;gap:18px}
  .clock-steps{grid-template-columns:repeat(3,1fr)}
  .batch-grid{grid-template-columns:repeat(2,1fr)}
  .visit-shot{max-width:560px}
  .membership{grid-template-columns:1fr;gap:clamp(34px,6vw,64px);justify-items:start}
  .club-seal{justify-self:start;width:min(260px,60%)}
}
@media(max-width:720px){
  .grain-head span{display:none}
  .lab-hero{min-height:820px;padding:138px 18px 0;overflow:hidden}
  .lab-hero .eyebrow{margin-bottom:18px}
  .lab-hero h1{font-size:64px;line-height:.8;max-width:100%;position:relative;z-index:3}
  .demo-wall{inset:390px 12px 20px 12px;grid-template:1fr 1fr/1.2fr .8fr;transform:none!important}
  .demo-wall b{font-size:34px}
  .demo-wall article{min-width:0}
  .cue{display:none}
  .shop-stage>*{grid-area:auto}
  .shop-shot{aspect-ratio:4/3}
  .shop-plate{justify-self:stretch;align-self:auto;max-width:none;margin:-34px 16px 0;padding:22px 18px 24px}
  .board-shot{aspect-ratio:3/2}
  .batch-grid{grid-template-columns:1fr}
  .batch-grid article{min-height:280px}
  .clock-steps{grid-template-columns:1fr}
  .makers{grid-template-columns:1fr}
  .week li{grid-template-rows:52px auto}
  .week b{height:calc(52px * var(--h,1))}
  footer{grid-template-columns:1fr;gap:8px}
}
@media(max-width:420px){
  .lab-hero h1{font-size:54px}
  .week{gap:4px}
  .week li{letter-spacing:0}
}

/*CSSPATCH-20260811*/section.manifest h2,section.makers h2,section.membership h2{line-height:1.4!important}/*/CSSPATCH-20260811*/

/*HEADFIX-20260811*/.grain-head{justify-content:space-between;gap:16px}.grain-head>*{min-width:0}.grain-head button,.grain-head>a:last-child{flex:0 0 auto;white-space:nowrap}/*/HEADFIX-20260811*/

/* ══ MOTION-20260821 ══════════════════════════════════════════════════════
   ★守っている制約(制作例04 / 16 で確立した型。緩めないこと)
   (1) スクロール演出で opacity を 0 にしない。公開品質ゲートの visible() は
       opacity<=0 の要素を検査から丸ごと外す。ゲートはスクロールしないので、
       .reveal に opacity:0 を入れると折り返しから下が未検査のまま critical 0 に
       なる。持ち上げ = transform / 覆い = clip-path。
       ★transform:scale(0) も同じ穴を開ける(箱の実寸が 0 になり visible() が偽)。
        隠す用途の scale は使わず clip-path にした(種の粒・帯・曜日の棒)。
   (2) 触ったときだけ動く演出は @media(hover:hover) で囲む(上のブロック)。
   (3) 画面外で止める規則は**このブロックの末尾**に、勝てる強さの選択子で置く。
       animation: の一括指定が animation-play-state を running へ戻すため、
       先に書くと 1 本も止まらない。
   ══════════════════════════════════════════════════════════════════════════ */
.reveal{opacity:1;transform:translateY(30px);transition:transform .9s cubic-bezier(.22,.68,.24,1) var(--d,0s),clip-path .9s cubic-bezier(.22,.68,.24,1) var(--d,0s)}
.reveal.seen{transform:none}
.reveal-wipe{clip-path:inset(-24px -24px 100% -24px)}
.reveal-wipe.seen{clip-path:inset(-24px)}
.shop-plate{--d:.12s}
.shop-facts{--d:.08s}
.week-cap{--d:.36s}
.grain-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--violet);transform:scaleX(var(--sp,0));transform-origin:left;transition:transform .14s linear}

/* ★画面外では止める(末尾・id / 多クラスで、上の animation: 指定に勝たせる)*/
.lab-hero:not(.live) .grain-field,
.lab-hero:not(.live) .starter i,
.lab-hero:not(.live) .heat div,
.lab-hero:not(.live) .cue b::after,
.grain-ticker:not(.live)>div,
.grain-ticker:not(.live) span i,
.makers .starter-stage:not(.live) .bubbles b,
#clock .clock-graph:not(.live) .rider,
#clock .clock-graph:not(.live) .sweep,
.membership:not(.live) .club-seal .seal-spin,
.membership:not(.live)::before{animation-play-state:paused}