/* ==========================================================
   Logicalism Studio — motion & interactive pieces
   ========================================================== */

/* ---------- Scroll progress + header ---------- */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--grad); transform-origin: 0 50%; transform: scaleX(0);
}
.site-header { transition: box-shadow .3s; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(20, 40, 110, .08); }

/* ---------- Hero ---------- */
.hero .wrap { position: relative; z-index: 1; }
.hero h1 .c-blue, .hero h1 .c-orange {
  background-repeat: no-repeat; background-position: 0 88%; background-size: 0 .28em;
  animation: hl-draw .9s cubic-bezier(.2,.8,.2,1) .5s forwards;
}
.hero h1 .c-blue { background-image: linear-gradient(rgba(36,87,230,.18), rgba(36,87,230,.18)); }
.hero h1 .c-orange { background-image: linear-gradient(rgba(240,138,36,.22), rgba(240,138,36,.22)); animation-delay: .8s; }
@keyframes hl-draw { to { background-size: 100% .28em; } }

.hero-float { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hero-float span {
  position: absolute; left: var(--x); top: var(--y);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--s, 28px); color: var(--c, #2457e6); opacity: .13;
  transform: translate(calc(var(--mx, 0) * var(--d) * 1px), calc(var(--my, 0) * var(--d) * 1px));
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.hero-float span i { display: inline-block; font-style: normal; animation: bob var(--t, 7s) ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(-10px) rotate(-6deg); } to { transform: translateY(12px) rotate(6deg); } }

.hero-code { min-width: 236px; min-height: 92px; white-space: pre; transition: box-shadow .3s; }
.hero-code::before {
  content: "● ● ●"; display: block; font-size: 8px; letter-spacing: 2px; color: #4a5a90; margin-bottom: 6px;
}
.hero-code.ran { box-shadow: 0 0 0 3px rgba(142,224,161,.6), var(--shadow); }
.hero-bubble { transition: transform .25s; }
.hero-bubble.pop { animation: pop .45s cubic-bezier(.2,1.6,.4,1); border-color: #2f8f4e; }
.hero-bubble.pop b { color: #2f8f4e; }
@keyframes pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

/* typewriter caret */
.typing::after { content: "▍"; color: #8fb4ff; animation: blink .8s steps(1) infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Staggered cards & tilt ---------- */
.tilt { transform-style: preserve-3d; will-change: transform; }

/* ---------- Compare rows ---------- */
.js .compare li { opacity: 0; transform: translateX(-10px); transition: opacity .45s, transform .45s; }
.js .compare.in li { opacity: 1; transform: none; }
.js .compare.in .us li::after { animation: tick .4s cubic-bezier(.2,1.8,.4,1) both; animation-delay: inherit; }
@keyframes tick { from { transform: scale(0); } to { transform: scale(1); } }
.compare li:nth-child(1) { transition-delay: .05s; } .compare li:nth-child(2) { transition-delay: .12s; }
.compare li:nth-child(3) { transition-delay: .19s; } .compare li:nth-child(4) { transition-delay: .26s; }
.compare li:nth-child(5) { transition-delay: .33s; } .compare li:nth-child(6) { transition-delay: .40s; }
.compare .us li:nth-child(n) { transition-delay: calc(.45s + var(--i, 0) * .08s); animation-delay: calc(.6s + var(--i, 0) * .08s); }

/* ---------- Roadmap progress ---------- */
.road-track { position: relative; height: 6px; border-radius: 6px; background: #e3e8f4; margin: 0 12.5% 34px; }
.road-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; background: var(--grad); }
.road-track .node {
  position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: #fff; border: 4px solid #cfd8ee; transition: border-color .3s, transform .3s;
}
.road-track .node:nth-child(2) { left: 0; } .road-track .node:nth-child(3) { left: 33.333%; }
.road-track .node:nth-child(4) { left: 66.666%; } .road-track .node:nth-child(5) { left: 100%; }
.road-track .node.lit { border-color: var(--blue); transform: scale(1.2); }
.js-road .step { opacity: .45; filter: saturate(.3); transform: translateY(8px); transition: opacity .5s, filter .5s, transform .5s, box-shadow .5s; }
.js-road .step.lit { opacity: 1; filter: none; transform: none; box-shadow: 0 14px 34px rgba(20, 40, 110, .12); }

/* ---------- Playground ---------- */
.try { background: linear-gradient(180deg, #fff 0%, #f3f6ff 100%); }
.play { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; padding: 32px; align-items: start; }
.play-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; min-height: 52px; }
.play-level { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--blue); background: var(--blue-soft); padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.play-msg { font-weight: 700; font-size: 15px; color: var(--navy); text-align: right; line-height: 1.5; }
.play-msg.bad { color: #d4392f; }
.play-msg.good { color: var(--green); }

.play-grid {
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr);
  aspect-ratio: 1; background: #f7f9ff; border: 2px solid var(--line); border-radius: 18px; overflow: hidden;
}
.play-grid .cell { border-right: 1px dashed #dde4f5; border-bottom: 1px dashed #dde4f5; display: grid; place-items: center; }
.play-grid .cell:nth-child(5n) { border-right: 0; }
.play-grid .cell:nth-child(n+21) { border-bottom: 0; }
.cell.rock::before { content: ""; width: 64%; height: 64%; border-radius: 30% 40% 34% 44%; background: linear-gradient(135deg, #b9c1d6, #8c95ad); box-shadow: inset -4px -5px 0 rgba(0,0,0,.08); }
.cell.goal svg { width: 62%; height: 62%; animation: twinkle 1.6s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: scale(1.12) rotate(8deg); } }
.cell.trail { background: rgba(36, 87, 230, .07); }

.play-robot {
  position: absolute; left: 0; top: 0; width: 20%; height: 20%; display: grid; place-items: center;
  transition: transform .32s cubic-bezier(.4,.1,.3,1);
  transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%));
}
.play-robot svg { width: 74%; height: 74%; transform: rotate(var(--r)); transition: transform .32s; }
.play-robot.crash svg { animation: shake .4s; }
@keyframes shake { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
.play-robot.win svg { animation: hop .5s 2; }
@keyframes hop { 50% { translate: 0 -12px; } }

.play-label { font-family: var(--font-head); font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.play-label small { font-family: var(--font-body); font-weight: 400; color: var(--muted); font-size: 12.5px; }
.play-palette { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.blk-btn, .blk-main {
  font: inherit; font-weight: 700; font-size: 15px; color: #fff; border: 0; cursor: pointer;
  padding: 10px 16px 10px 14px; border-radius: 10px 10px 10px 10px; position: relative;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); transition: transform .12s, filter .12s;
}
.blk-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.blk-btn:active { transform: translateY(1px); }
.op-F { background: #3f7be8; } .op-L { background: #9a5ae0; } .op-R { background: #ef8a2f; }

.play-program {
  list-style: none; margin: 0 0 20px; padding: 12px; min-height: 172px; border-radius: 14px;
  background: #fff; border: 2px dashed #cfd8ee; display: flex; flex-direction: column; gap: 6px; counter-reset: ln;
  max-height: 340px; overflow-y: auto;
}
.play-program:empty::before { content: "ここにブロックがならびます"; color: #9aa4c2; font-size: 14px; margin: auto; }
.play-program li { display: flex; align-items: center; gap: 8px; counter-increment: ln; animation: slidein .25s ease; }
.play-program li::before { content: counter(ln); font-family: var(--font-mono); font-size: 12px; color: #9aa4c2; width: 18px; text-align: right; }
@keyframes slidein { from { opacity: 0; transform: translateX(-12px); } }
.blk-main { padding: 8px 14px; font-size: 14.5px; }
.blk-main .cnt { display: inline-block; margin-left: 6px; background: rgba(255,255,255,.25); border-radius: 6px; padding: 0 7px; font-family: var(--font-mono); font-size: 13px; }
.blk-del { border: 0; background: none; color: #a6adbf; font-size: 18px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.blk-del:hover { color: #d4392f; background: #fdeceb; }
.play-program li.active .blk-main { outline: 3px solid var(--navy); outline-offset: 2px; transform: scale(1.04); }
.play.running .play-palette, .play.running .blk-del, .play.running .blk-main { pointer-events: none; }
.play.running .play-palette { opacity: .5; }

.play-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.play-actions .btn { padding: 12px 26px; font-size: 16px; }
.play-actions .btn[disabled] { opacity: .5; pointer-events: none; }
.play-next { display: none; }
.play.cleared .play-next { display: inline-flex; }
.play-cta { display: none; margin-top: 18px; padding: 18px 20px; border-radius: 14px; background: var(--navy); color: #fff; }
.play-cta p { font-family: var(--font-head); font-weight: 700; font-size: 17px; margin-bottom: 12px; }
.play.done .play-cta { display: block; animation: slidein .4s ease; }
.play-count { font-size: 12.5px; color: var(--muted); margin: -12px 0 18px; }

.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -10px; width: 8px; height: 12px; border-radius: 2px; animation: fall 1.4s ease-in forwards; }
@keyframes fall { to { transform: translateY(520px) rotate(540deg); opacity: 0; } }

@media (max-width: 860px) {
  .play { grid-template-columns: 1fr; padding: 22px; gap: 24px; }
  .road-track { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .c-blue, .hero h1 .c-orange { animation: none; background-size: 100% .28em; }
  .hero-float span i, .cell.goal svg { animation: none; }
  .js .compare li { opacity: 1; transform: none; transition: none; }
  .js-road .step { opacity: 1; filter: none; transform: none; }
}

/* polish */
.play-program { max-height: 520px; }
@media (max-width: 1080px) {
  .nav { visibility: hidden; transition: transform .3s, visibility 0s linear .3s; }
  .menu-open .nav { visibility: visible; transition: transform .3s; }
}

/* ---------- Course illustrations ---------- */
.course-art { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); }
.course-art svg { display: block; width: 100%; height: 100%; }
.ca-t { font-family: var(--font-body); font-size: 8.6px; font-weight: 700; }
.ca-m { font-family: var(--font-mono); font-size: 8.4px; white-space: pre; }
.ca-s { font-size: 7.2px; }
.ca-walk { animation: ca-walk 3.2s ease-in-out infinite; }
@keyframes ca-walk { 0%, 15% { transform: translateX(0); } 55%, 70% { transform: translateX(52px); } 100% { transform: translateX(0); } }
.ca-twinkle { animation: ca-tw 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ca-tw { 50% { transform: scale(1.18) rotate(10deg); } }
.ca-snap { animation: ca-snap 3.2s ease-in-out infinite; }
@keyframes ca-snap { 0%, 100% { transform: translate(0, 0); } 8% { transform: translate(6px, -5px); } 16%, 92% { transform: translate(0, 0); } }
.ca-blink { animation: blink .9s steps(1) infinite; }
.ca-check { animation: ca-check 3s ease infinite; }
@keyframes ca-check { 0%, 30% { stroke-dashoffset: 10; } 45%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 10; } }
.ca-grow { transform-box: fill-box; transform-origin: bottom; animation: ca-grow 3s ease infinite; }
@keyframes ca-grow { 0%, 30% { transform: scaleY(.55); } 45%, 90% { transform: scaleY(1); } 100% { transform: scaleY(.55); } }
.course:hover .course-art svg { transform: scale(1.03); }
.course-art svg { transition: transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .ca-walk, .ca-twinkle, .ca-snap, .ca-blink, .ca-check, .ca-grow { animation: none; } .ca-check { stroke-dashoffset: 0; } }
.course h3 { font-size: 20.5px; }

/* ---------- Feature illustrations (about) ---------- */
.feature-art { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); }
.feature-art svg { display: block; width: 100%; height: 100%; transition: transform .5s ease; }
.feature:hover .feature-art svg { transform: scale(1.03); }
.fa-bubble { transform-box: fill-box; }
.fa-b1 { animation: fa-pop1 6s ease infinite; transform-origin: right center; }
.fa-b2 { animation: fa-pop2 6s ease infinite; transform-origin: left center; }
@keyframes fa-pop1 { 0% { opacity: 0; transform: scale(.7); } 8%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes fa-pop2 { 0%, 30% { opacity: 0; transform: scale(.7); } 38%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.9); } }
.fa-flow { animation: fa-dash 1.2s linear infinite; }
@keyframes fa-dash { to { stroke-dashoffset: -12; } }
.fa-node { transform-box: fill-box; }
.fa-node rect { transform-box: fill-box; transform-origin: center; animation: fa-pulse 4s ease infinite; }
.n2 rect { animation-delay: 1s; } .n3 rect { animation-delay: 2s; } .n4 rect { animation-delay: 3s; }
@keyframes fa-pulse { 0%, 22%, 100% { transform: scale(1); filter: none; } 6% { transform: scale(1.12); filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); } }
.fa-climb { animation: fa-climb 6s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes fa-climb {
  0%, 12%   { transform: translate(42px, 119px); }
  20%, 32%  { transform: translate(98px, 97px); }
  40%, 52%  { transform: translate(154px, 75px); }
  60%, 72%  { transform: translate(210px, 53px); }
  80%, 96%  { transform: translate(266px, 31px); }
  100%      { transform: translate(42px, 119px); }
}
@media (prefers-reduced-motion: reduce) {
  .fa-b1, .fa-b2, .fa-flow, .fa-node rect { animation: none; }
  .fa-climb { animation: none; transform: translate(266px, 31px); }
}

/* ---------- 学習内容の例: block-programming art ---------- */
.learn-art { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; margin-bottom: 14px; border: 1px solid var(--line); }
.learn-art svg { display: block; width: 100%; height: 100%; }
.lg-fall { animation: lg-fall 2.8s linear infinite; }
.lg-f2 { animation-duration: 3.4s; animation-delay: -1.2s; }
.lg-f3 { animation-duration: 2.4s; animation-delay: -.6s; }
.lg-f4 { animation-duration: 3.8s; animation-delay: -2.2s; }
@keyframes lg-fall { from { transform: translateY(26px); } to { transform: translateY(176px); } }
.lg-player { animation: lg-move 4s ease-in-out infinite alternate; }
@keyframes lg-move { 0% { transform: translateX(60px); } 30% { transform: translateX(150px); } 55% { transform: translateX(110px); } 100% { transform: translateX(240px); } }
@media (prefers-reduced-motion: reduce) {
  .lg-fall, .lg-player { animation: none; }
  .lg-fall { transform: translateY(100px); } .lg-player { transform: translateX(150px); }
}