/* ═════════════════════════════════════════════════════════════════════
   enecra.jp の空（見た目）。★2026-09-24 に site.css から切り出した。
   使っているページ＝ enecra.jp の / ・/works ・/license と、ukabu.world/school/（指導案の一覧）。
   ★これと /sky.js が【空の正本】。ukabu.world 側は 01_ukabu-world/build.py が dist/school/ へ写して使う
     （学校ページ用の写しを手で持たない＝正本が2つにならない）。
   ═════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════════
   空（2026-09-23 TAKURO「サイト全体を雲がぷかぷか浮いているように」）
   ★スクロールすると1日が過ぎる＝上から 夜明け前→朝焼け→夏の青空→夕焼け→夕暮れ→夜。
     各段の空は「上の段の下端の色」から始まる＝段の境目で色が切れず、1本の空に見える。
   ★文字はすべて紙の板の上（または夜の段の明るい文字）＝どの空でも読める。空の上に文字を直に置かない。
   ★スクロールには一切手を出さない（2026-08-04 TAKURO「普通にスクロールしやすく」）。
     雲は時間で流れるだけで、スクロール量には連動しない。
   ★中身は動きに頼らない。雲・星・流れ星は sky.js が後から足す飾り＝JSが動かなくても空の色は出る。

   使い方（ページ側）:
     <section class="sec paper sky-noon" data-sky data-clouds="day"> …
       data-sky        この要素に空を敷く（雲・星の置き場 .sky-fx を sky.js が作る）
       data-clouds     雲の色。上から順に「,」区切り（段の中の高さで切り替わる）
                       predawn / dawn / gold / day / sunset / dusk / night
       data-stars      星を出す範囲 top / bottom / all ／ 数字（例 0.86＝段の上から86%より下に星）
       data-shoot      流れ星を出す ／ 数字（例 0.88＝段の上から88%より下で流す）
       data-sun        太陽（rise＝右に昇る・set＝左に沈む）  data-moon  月
       （キューブは 2026-09-23 に廃止＝TAKURO「立方体はいらない」）
     ★2026-09-24 追加（ページごとの時間の流れ）
       data-clouds     spring / summer / autumn / winter（四季）・cloudy / storm（天気）も使える
       data-sun-y      太陽の高さ（段の中の割合。例 0.16）
       data-tower      入道雲を置く高さ（「,」区切り。例 0.21）
       data-fall       降る物「種類@上端-下端」を「,」区切り。種類＝petal（桜の花びら）・leaf（紅葉）・snow（雪）・rain（雨）
                       例 petal@0-0.2,leaf@0.4-0.74 ＝段の上から0〜20%に花びら、40〜74%に紅葉
       data-moons      月の満ち欠けを並べる数（9＝新月→三日月→上弦→十三夜→満月→居待月→下弦→有明→新月・名前つき）
       data-bolt       雷の高さ「上端-下端」（例 0.44-0.58）  data-rainbow  虹の上端の高さ（例 0.69）
       data-cloud-n    雲の数の上限（既定 10。長い1枚の空で雲が足りないとき）
   ═════════════════════════════════════════════════════════════════════ */

/* ── 空の色（上→下）。隣り合う段で、下端と上端の色を必ず同じにしてある ──
   ★詳細度を [data-sky].sky-… にしてある＝ページ側の .paper（紙の色）より強くするため。
     site.css はページの <style> より先に読むので、同じ詳細度だと .paper が勝って空が消える。 */
[data-sky].sky-sunrise{--sky-end:#a9dcf5;background:linear-gradient(180deg,#e8849a 0%,#f6a68d 16%,#fbc592 32%,#fde0a6 46%,#e2eee8 62%,#bfe4f4 80%,#a9dcf5 100%)}
[data-sky].sky-morning{--sky-end:#63b9ee;background:linear-gradient(180deg,#a9dcf5 0%,#88cdf2 50%,#63b9ee 100%)}
[data-sky].sky-noon{--sky-end:#3c9ee8;background:linear-gradient(180deg,#63b9ee 0%,#4aa9ea 55%,#3c9ee8 100%)}
[data-sky].sky-noon2{--sky-end:#4aa6ec;background:linear-gradient(180deg,#3c9ee8 0%,#3f9fe9 50%,#4aa6ec 100%)}
/* 青→金は RGB で混ぜると間が灰色に濁る（青と橙は補色）＝淡い水色とクリーム色を間に挟む */
[data-sky].sky-golden{--sky-end:#f3c98b;background:linear-gradient(180deg,#4aa6ec 0%,#86c3e8 34%,#cfe3dc 62%,#f1dca8 84%,#f3c98b 100%)}
[data-sky].sky-sunset{--sky-end:#e0667a;background:linear-gradient(180deg,#f3c98b 0%,#f7ae77 30%,#f28d6c 62%,#e0667a 100%)}
[data-sky].sky-dusk{--sky-end:#4b3a7c;background:linear-gradient(180deg,#e0667a 0%,#b9588a 32%,#7f4b8c 66%,#4b3a7c 100%)}
[data-sky].sky-night{--sky-end:#0d1230;background:linear-gradient(180deg,#4b3a7c 0%,#2d2e6a 28%,#1b2251 62%,#0d1230 100%)}
[data-sky].sky-deep{--sky-end:#070a1c;background:linear-gradient(180deg,#0d1230 0%,#0a0e27 50%,#070a1c 100%)}
/* 1つの段に1日を畳んだもの（作品・利用条件）。★ページごとに始まる時刻が違う（上の帯と組）
   作品＝朝焼けの帯（band-sunrise）→ 朝 → 青空 → 夕焼け → 夜
   利用条件＝夏の青空の帯（band-summer）→ 昼下がり → 夕焼け → 夜
   雲の色（data-clouds）は、段を8等分したそれぞれの空の色に合わせて並べる（ページ側） */
[data-sky].sky-fullday-morning{--sky-end:#0d1230;background:linear-gradient(180deg,#fde0a6 0%,#e2eee8 7%,#bfe4f4 14%,#88cdf2 24%,
  #4aa9ea 38%,#3c9ee8 48%,#86c3e8 58%,#f1dca8 67%,#f7ae77 74%,#e0667a 80%,#9a5189 86%,#4b3a7c 91%,#1b2251 96%,#0d1230 100%)}
[data-sky].sky-fullday-noon{--sky-end:#0d1230;background:linear-gradient(180deg,#7cc6f0 0%,#a9dcf5 18%,#cfe3dc 34%,#f1dca8 46%,
  #f7ae77 56%,#f28d6c 66%,#e0667a 74%,#9a5189 82%,#4b3a7c 89%,#1b2251 95%,#0d1230 100%)}

/* ── 2026-09-24 ページごとの「時間の流れ」（TAKURO「作品は春夏秋冬の四季折々／利用条件は時間経過で変わる何か」）──
   作品＝1年（春→夏→秋→冬→冬の夜）。季節の区切りは中身に合わせた（作品がまだ無い今、札 4〜13%・投稿の板 30〜85%＝実測）
     春＝札のまわり／夏＝札と板のあいだ／秋＝板の横／冬＝板の下。降る物・雲の色・入道雲はページ側の data-*
     ★補色どうし（青→橙・橙→青灰）は RGB で混ぜると濁る＝間に淡い色（クリーム・藤色）を挟む。
       ただし春のピンクの中には水色を挟まない（2026-09-24 TAKURO「春のピンクのところに水色があるけど、無くして。
       ピンク→青→秋の色→冬の色のグラデーションに」）
   利用条件＝ひと月（新月→満月→新月）。満月のあたり（段のまん中）だけ夜空が少し明るい＝月明かり
   学校（ukabu.world/school/）＝天気（晴れ→くもり→雨→雷→雨上がりの虹→晴れ） */
[data-sky].sky-seasons{--sky-end:#0d1230;background:linear-gradient(180deg,
  #f9dce6 0%,#f7d4e1 7%,#f2cadd 13%,                                    /* 春：桜のピンク（上の札のまわり） */
  #9fbde9 18%,#4aa3ea 23%,#2f8fe0 29%,#4aa6e8 35%,                      /* 夏：ピンクからそのまま青へ（札と投稿の板のあいだ） */
  #86bfe6 39%,#f1dca8 43%,#f3b877 50%,#e98e5c 58%,#cf7b5a 66%,          /* 秋：青→クリーム→琥珀→橙→赤茶（投稿の板の横） */
  #b79aa6 71%,#c3cdd9 76%,#aebdcd 83%,#8595b0 89%,                      /* 冬：藤色を挟んで曇り空の青灰（板の下） */
  #4d5a82 94%,#1f2754 97%,#0d1230 100%)}                                /* 冬の夜 */
[data-sky].sky-lunar{--sky-end:#0d1230;background:linear-gradient(180deg,
  #3f3a7c 0%,#262c63 5%,#141a45 13%,#18214f 28%,#243168 42%,#2c3b75 51%,#243168 60%,#18214f 74%,#121840 88%,#0d1230 100%)}
[data-sky].sky-weather{--sky-end:#5bb3ec;background:linear-gradient(180deg,
  #7cc4f0 0%,#62b4ec 9%,#9ec3de 17%,#b9c3cf 25%,                        /* 晴れ→うす曇り */
  #97a2b1 32%,#6c7788 39%,#4f5868 46%,#434b59 53%,#4c5565 60%,           /* くもり→雨→雷 */
  #7e8b9c 66%,#b8cad8 71%,#a6d7f1 77%,#7cc4ef 86%,#5bb3ec 100%)}        /* 雨上がり→晴れ */

/* ★段の境目の「細い明るい線」を塞ぐ。段の高さは中身で決まるので境目が小数の位置（例 6721.53px）に来る。
     その1行だけ上下の段が半分ずつしか塗られず、下地（body のベージュ）が透けて明るい線になっていた（実測）。
     各段の下端の色を2pxだけ下へはみ出させる＝次の段の背景がその上に重なるので、見えるのは透けていた1行だけ */
[data-sky]{position:relative;box-shadow:0 2px 0 var(--sky-end,transparent)}
/* ★段と段のあいだの金の区切り線（.rule）は、紙の段が並んでいた頃の飾り。空の上では線の左右に
   ページの地の色（ベージュ）が細く見え、1本につながるはずの空が切れた（実測）。
   空では、板と板のあいだの空そのものが区切り＝線は出さない */
[data-sky] + .rule{display:none}
/* 雲・星の置き場（sky.js が作る）。奥＝板の後ろ／手前＝板の前（段の上下の余白だけに置く） */
.sky-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sky-fx.front{z-index:2}
/* 空の上の中身は、奥の雲より前に出す（詳細度0＝ページ側の配置を邪魔しない） */
:where([data-sky]) > :where(:not(.sky-fx)){position:relative;z-index:1}

/* ── 空に浮かぶ紙の板（トップページの各段）──
   これまで段そのものが紙の色だった。段は空にして、中身の .wrap を紙の板にする＝板が空に浮かぶ。 */
.sec[data-sky]{padding:clamp(56px,7vw,104px) 0}
.sec[data-sky] > .wrap{width:min(1120px,calc(100% - 2 * var(--gut)));
  padding:clamp(30px,4vw,56px) clamp(20px,4vw,56px);
  background-color:#faf8f2;
  background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.026) 0 6px,transparent 6px 12px);
  box-shadow:0 30px 60px -22px rgba(16,24,64,.42),0 8px 18px -10px rgba(16,24,64,.28)}

/* ── 雲（ドット絵。形と色は sky.js が SVG で作る＝提案資料と同じ作り方）──
   外側の箱が横に流れ、内側の箱が上下にぷかぷかする（別の周期で重ねると、同じ動きに見えない）。
   ★動かすのは transform だけ＝描き直しが起きず、学校の iPad でも軽い。
   ★--sx は止まっているときの位置（動きを止める設定の人・画面外で一時停止したとき） */
.cl{position:absolute;left:0;top:var(--y);width:var(--w);height:var(--h);opacity:var(--o);
  transform:translate3d(var(--sx),0,0);
  animation:skyDrift var(--d) linear infinite;animation-delay:var(--dl)}
.cl > i{display:block;width:100%;height:100%;background:var(--img) 0 0/100% 100% no-repeat;
  animation:skyBob var(--b) ease-in-out infinite alternate;animation-delay:var(--bdl)}
.cl.front > i{filter:drop-shadow(0 10px 14px rgba(20,30,70,.22))}
@keyframes skyDrift{from{transform:translate3d(var(--x0),0,0)}to{transform:translate3d(var(--x1),0,0)}}
@keyframes skyBob{from{transform:translate3d(0,-5px,0)}to{transform:translate3d(0,5px,0)}}

/* ── 星。1つずつが別の周期・別のまたたき方で光る（明るさの格も星ごとに違う）──
   ★2026-09-23 TAKURO「夜空の固定の星もゆっくりランダムに呼吸をするように」。
     以前は box-shadow に並べた3枚の層を層ごと点滅させていて、同じ層の星が一斉に明滅していた。
     層を何枚も増やすと、段の大きさの絵を何枚も重ねることになり重い＝小さな星を1つずつ動かす
   ★2026-09-24 TAKURO「夜の星の点滅がゆっくりすぎるので、点滅や、光の光源の強弱が分かるようにランダムに調整して」。
     3.5〜8秒でなめらかに往復する呼吸（skyBreath）をやめ、1.1〜5秒の不規則なまたたき3種にした（sky.js addStars）。
     tw-a＝揺れながら何度か沈む／tw-b＝速くちらつく／tw-c＝ふだんは落ち着いて、時々きらっと光ってすっと沈む。
     動かすのは opacity と transform だけ（重い box-shadow は動かさない） */
.star{position:absolute;left:var(--x);top:var(--y);width:var(--sz);height:var(--sz);background:var(--c);
  opacity:var(--o1);animation:skyTwA var(--d) linear infinite;animation-delay:var(--dl)}
.star.tw-b{animation-name:skyTwB}
.star.tw-c{animation-name:skyTwC}
.star.big{box-shadow:0 0 5px 1px rgba(255,255,255,.35)}
@keyframes skyTwA{
  0%,100%{opacity:var(--o1)} 9%{opacity:calc(var(--o1) * .55)} 17%{opacity:var(--o0)} 26%{opacity:var(--o1)}
  40%{opacity:calc(var(--o1) * .7)} 52%{opacity:var(--o0)} 61%{opacity:calc(var(--o1) * .9)} 74%{opacity:calc(var(--o1) * .4)} 86%{opacity:var(--o1)}}
@keyframes skyTwB{
  0%,100%{opacity:var(--o0)} 12%{opacity:var(--o1)} 20%{opacity:calc(var(--o1) * .3)} 30%{opacity:calc(var(--o1) * .95)}
  45%{opacity:var(--o0)} 58%{opacity:calc(var(--o1) * .8)} 66%{opacity:calc(var(--o1) * .25)} 80%{opacity:var(--o1)}}
@keyframes skyTwC{
  0%,100%{opacity:calc(var(--o1) * .72);transform:scale(1)} 42%{opacity:calc(var(--o1) * .82);transform:scale(1)}
  48%{opacity:var(--o1);transform:scale(1.7)} 54%{opacity:var(--o0);transform:scale(1)} 62%{opacity:calc(var(--o1) * .9)}
  76%{opacity:calc(var(--o1) * .6)}}
@keyframes skyTwinkle{from{opacity:var(--o0,.35)}to{opacity:1}}
/* きらりと光る大きな星（十字）。夜の段に数個だけ */
.spark{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;background:#fff;
  box-shadow:0 0 6px 1px rgba(255,255,255,.7);animation:skyTwinkle var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
.spark::before,.spark::after{content:"";position:absolute;background:rgba(255,255,255,.8)}
.spark::before{left:1px;top:-5px;width:1px;height:13px}
.spark::after{left:-5px;top:1px;width:13px;height:1px}

/* ── 流れ星。長い周期のうち、一瞬だけ横切る（ずっと流れていると騒がしい）── */
.shoot{position:absolute;left:var(--x);top:var(--y);width:var(--len);height:2px;opacity:0;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.55) 18%,rgba(190,215,255,0) 100%);
  transform-origin:0 50%;transform:rotate(-24deg);
  animation:skyShoot var(--d) linear infinite;animation-delay:var(--dl)}
.shoot::before{content:"";position:absolute;left:-2px;top:-2px;width:6px;height:6px;background:#fff;
  box-shadow:0 0 10px 3px rgba(210,230,255,.9)}
@keyframes skyShoot{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(-24deg)}
  1.2%{opacity:1}
  7%{opacity:0;transform:translate3d(-520px,232px,0) rotate(-24deg)}
  100%{opacity:0;transform:translate3d(-520px,232px,0) rotate(-24deg)}}

/* ── 太陽と月（ドット絵）──
   ★2026-09-23 TAKURO「太陽や月も、ゆっくり点滅したりして動きがほしい」。奥から順に重ねる（sky.js の addOrb）：
     光の輪（大きなぼかしの円）＝ゆっくり呼吸（6.5秒）
     光の筋（太陽だけ・上下左右と斜めの2枚）＝交互にまたたく（片方が明るいとき、もう片方は暗い）
     円盤＝ゆっくり明滅（月は太陽より深く）
   ★光の筋は回さない。ドット絵を斜めに回すと角がぼやけて、雲のドット絵と質感がそろわない */
.orb{position:absolute;width:var(--r);height:var(--r);left:var(--x);top:var(--y);animation:skyBob 11s ease-in-out infinite alternate}
.orb > i{position:absolute;display:block}
.orb-glow{inset:-160%;border-radius:50%;background:var(--glow);animation:skyGlow 6.5s ease-in-out infinite alternate}
.orb-rays{inset:-34%;background:var(--rays) 0 0/100% 100% no-repeat;animation:skyRays 4.2s ease-in-out infinite alternate}
.orb-rays.b{animation-delay:-4.2s}
.orb-disc{inset:0;background:var(--img) 0 0/100% 100% no-repeat;animation:skyDisc 5.2s ease-in-out infinite alternate}
@keyframes skyGlow{from{opacity:.5;transform:scale(.86)}to{opacity:1;transform:scale(1.08)}}
@keyframes skyRays{from{opacity:.2;transform:scale(.9)}to{opacity:1;transform:scale(1.05)}}
@keyframes skyDisc{from{opacity:var(--dmin,.85)}to{opacity:1}}

/* ── 降る物（花びら・葉・雪・雨）2026-09-24 ──
   外側の箱＝上から下へ落ちる（段の中の決まった高さのあいだ・端は薄くしてつなぐ）
   中の箱＝左右にゆれる／いちばん中＝横に縮めて裏返る（花びら・葉）。★回さない＝ドット絵の角がぼやけない
   ★止まっているとき（動きを減らす設定・画面の外）は --ys の高さに散らして置く */
.fall{position:absolute;left:var(--x);top:0;width:var(--w);height:var(--h);opacity:var(--o);
  transform:translate3d(0,var(--ys),0);animation:skyFall var(--d) linear infinite;animation-delay:var(--dl)}
.fall > i{display:block;width:100%;height:100%;animation:skySway var(--sw) ease-in-out infinite alternate;animation-delay:var(--swdl)}
.fall > i > b{display:block;width:100%;height:100%;background:var(--img) 0 0/100% 100% no-repeat;
  animation:skyFlip var(--fl,2s) linear infinite;animation-delay:var(--fldl,0s)}
.fall.nofl > i > b{animation:none}
@keyframes skyFall{0%{transform:translate3d(0,var(--y0),0);opacity:0}7%{opacity:var(--o)}90%{opacity:var(--o)}
  100%{transform:translate3d(var(--dx),var(--y1),0);opacity:0}}
@keyframes skySway{from{transform:translate3d(calc(-1 * var(--a)),0,0)}to{transform:translate3d(var(--a),0,0)}}
@keyframes skyFlip{0%{transform:scaleX(1)}25%{transform:scaleX(.18)}50%{transform:scaleX(-1)}75%{transform:scaleX(.18)}100%{transform:scaleX(1)}}

/* ── 月の名前（利用条件の満ち欠け）。夜空の上なので明るい字＝どの月の下でも読める ── */
.moon-name{position:absolute;left:var(--x);top:var(--y);transform:translateX(-50%);white-space:nowrap;
  font-family:"DotGothic16","Courier New",monospace;font-size:14px;letter-spacing:.14em;line-height:1;
  color:rgba(220,228,250,.82);text-shadow:0 1px 3px rgba(0,0,0,.45)}

/* ── 雷（学校ページ）。空がときどき光り、稲妻が走る。★9.4秒に1度・二度光るだけ（光の点滅は1秒に3回を超えない） ── */
.flash{position:absolute;left:0;right:0;top:var(--y);height:var(--h);opacity:0;
  background:radial-gradient(ellipse at 50% 42%,rgba(236,241,255,.5),rgba(236,241,255,0) 70%);
  animation:skyFlash 9.4s linear infinite}
.bolt{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);opacity:0;
  background:var(--img) 0 0/100% 100% no-repeat;filter:drop-shadow(0 0 8px rgba(255,246,184,.8));
  animation:skyFlash 9.4s linear infinite;animation-delay:var(--dl)}
@keyframes skyFlash{0%,86%{opacity:0}87%{opacity:.95}88.2%{opacity:.12}89.6%{opacity:.75}92%{opacity:0}100%{opacity:0}}

/* ── 虹（学校ページの雨上がり）。紙の板の後ろをくぐる大きな半円 ── */
.rainbow{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  background:var(--img) 0 0/100% 100% no-repeat;opacity:.62;animation:skyBow 7s ease-in-out infinite alternate;
  /* 脚は下へ向かって空に溶かす（半円の絵の下端でぷつんと切れて見えた＝実測） */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%)}
@keyframes skyBow{from{opacity:.42}to{opacity:.72}}

/* ── 画面の外にある段は、動きを止める（学校の iPad の電池と熱のため）── */
[data-sky]:not(.sky-on) .sky-fx *,[data-sky]:not(.sky-on) .sky-fx *::before{animation-play-state:paused}

/* ── 動きを減らす設定の人には、雲も星も止めて見せる（位置は --sx で散らしてある）── */
@media (prefers-reduced-motion:reduce){
  .sky-fx *,.sky-fx *::before{animation:none !important}
  .shoot,.flash,.bolt{display:none}
}

@media (max-width:767px){
  .sec[data-sky]{padding:clamp(40px,11vw,60px) 0}
  .sec[data-sky] > .wrap{padding:26px 18px 30px}
}
