/* Guide: hero over the clear panorama, the animated What's new tiles, and pinned chapter scenes
   where a camera moves across the app window. */

/* ---------- hero ---------- */
.gc-hero { position: relative; min-height: 100dvh; display: grid; align-items: center; padding: var(--nav-h) 0 80px; }
.gc-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(6 8 18 / .6), rgb(6 8 18 / .05) 70%); pointer-events: none; }
.gc-hero-inner { position: relative; will-change: transform, opacity; }
.gc-hero h1 { margin-top: 18px; font-family: var(--f-block); font-weight: 700; font-size: clamp(48px, 8vw, 120px); line-height: .92; color: #ececec; text-shadow: .045em .045em 0 #8a8a8a, .09em .09em 0 #555, .135em .135em 0 #333; }
.gc-cue { position: absolute; left: 50%; bottom: 28px; width: 28px; height: 44px; margin-left: -14px; border: 2px solid #fff; box-shadow: 0 0 0 2px #000; }
.gc-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; background: #fff; animation: gc-cue 1.6s var(--ease) infinite; }
@keyframes gc-cue { 60% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- What's new tiles ---------- */
.gc-new { padding: clamp(56px, 8vw, 100px) 0; }
.gc-bento { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.gc-tile:nth-child(1) { grid-column: span 4; }
.gc-tile:nth-child(2) { grid-column: span 2; }
.gc-tile:nth-child(3) { grid-column: span 3; }
.gc-tile:nth-child(4) { grid-column: span 3; }
.gc-tile button {
  display: grid; align-content: end; gap: 6px; width: 100%; height: 100%; min-height: 230px; padding: 18px;
  text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: rgb(12 12 16 / .74); border: 2px solid #000; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .06);
  transition: border-color .15s;
}
.gc-tile button:hover { border-color: #ffd83d; }
.gc-tile button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gc-tile b { font-family: var(--f-pixel); font-weight: 400; font-size: 22px; color: #fff; line-height: 1.15; }
.gc-tile button > span:not(.gm) { font-size: 15px; color: var(--text-2); max-width: 46ch; }

.gm { position: relative; align-self: start; height: 110px; margin-bottom: 14px; background: #17140c; border: 2px solid #000; overflow: hidden; }
/* tabs: the underline travels to CraftRise */
.gm-tabs { display: flex; align-items: center; gap: 18px; padding: 0 16px; font-family: var(--f-pixel); font-size: 15px; color: #9b9483; }
.gm-tabs .is-new { color: #ffd83d; }
.gm-tabs span:last-of-type { margin-left: auto; }
.gm-tabs i { position: absolute; left: 16px; bottom: 30px; width: 62px; height: 3px; background: #ffd83d; transition: transform 1.1s var(--ease) .3s, width 1.1s var(--ease) .3s; }
.is-play .gm-tabs i { transform: translateX(var(--tx, 210px)); width: var(--w, 82px); }
/* clock: a day turning over at 00:00 */
.gm-clock { display: flex; align-items: center; gap: 18px; padding: 0 18px; }
.gm-dial { position: relative; width: 64px; height: 64px; border: 3px solid #ffd83d; box-shadow: 0 0 0 2px #000; }
.gm-dial i { position: absolute; left: 50%; bottom: 50%; width: 4px; height: 24px; margin-left: -2px; background: #fff; transform-origin: bottom; transform: rotate(300deg); transition: transform 1.4s var(--ease) .2s; }
.is-play .gm-dial i { transform: rotate(360deg); }
.gm-count b { display: block; font-family: var(--f-pixel); font-weight: 400; font-size: 30px; color: #80ff20; }
.gm-count span { font-size: 13px; color: #b4ad99; }
/* daily bars grow one by one */
.gm-bars { display: flex; align-items: flex-end; gap: 8px; padding: 14px 16px; }
.gm-bars i { flex: 1; height: 100%; background: linear-gradient(#ffe46b, #d6a91a); transform-origin: bottom; transform: scaleY(0); transition: transform .7s var(--ease); transition-delay: calc(var(--i) * 80ms); }
.gm-bars i:nth-child(4) { background: #3a352a; }
.is-play .gm-bars i { transform: scaleY(calc(max(var(--h), 4) / 100)); }
/* update: the version swaps, the file stays */
.gm-update { display: flex; align-items: center; justify-content: center; gap: 18px; }
.gm-file { display: grid; place-items: center; width: 56px; height: 56px; background: var(--gui); border: 2px solid #000; box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #555; }
.gm-ver { position: relative; width: 92px; height: 28px; overflow: hidden; font-family: var(--f-mono); font-size: 15px; }
.gm-ver s, .gm-ver b { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .7s var(--ease) .4s; }
.gm-ver s { color: #8a8478; }
.gm-ver b { font-weight: 400; color: #ffd83d; transform: translateY(100%); }
.is-play .gm-ver s { transform: translateY(-100%); }
.is-play .gm-ver b { transform: none; }
.gm-ok { opacity: 0; transition: opacity .4s 1.1s; }
.is-play .gm-ok { opacity: 1; }

/* ---------- shared chapter text ---------- */
.gc-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-family: var(--f-pixel); font-size: 15px; color: var(--text-2); }
.gc-step-n { display: block; font-family: var(--f-mono); font-size: 13px; color: #80ff20; margin-bottom: 8px; }
.gc-step-n small { font-size: inherit; color: var(--text-3); }
.gc-frame .gc-cam, .gc-big .gc-cam { position: absolute; inset: 0; transform-origin: 0 0; }
.gc-cam img { width: 100%; height: 100%; }
.gc-rect { box-shadow: 0 0 0 200vmax rgb(8 8 12 / .45); }

/* ---------- chapter scenes ---------- */
.gc-step-text h3 { font-family: var(--f-pixel); font-weight: 400; font-size: 24px; line-height: 1.15; color: #fff; }
.gc-step-text p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.gc-step-text .g-note p { margin-top: 0; font-size: 14.5px; }
.gc-scene-text h2 { margin-top: 8px; font-family: var(--f-pixel); font-weight: 400; font-size: clamp(34px, 3.8vw, 54px); line-height: 1; color: #fff; text-shadow: 3px 3px 0 var(--mc-shadow); }
.gc-scene { position: relative; height: calc(var(--n) * 70vh + 100vh); }
.gc-scene-pin { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; padding-top: var(--nav-h); }
.gc-scene-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.gc-sum { margin-top: 10px; color: var(--text-2); font-size: 16px; }
.gc-steps { list-style: none; padding: 0; margin-top: 26px; display: grid; }
.gc-step { grid-area: 1 / 1; padding: 18px; background: rgb(12 12 16 / .78); border: 2px solid #000; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .06);
  opacity: 0; transform: translateY(14px); transition: opacity .35s var(--ease), transform .45s var(--ease); pointer-events: none; }
.gc-step.is-on { opacity: 1; transform: none; pointer-events: auto; }
.gc-step-shot { display: none; }
.gc-scene-stage .gui { padding: 10px; }
.gc-scene-stage .appwin-bar { padding-bottom: 8px; font-size: 16px; }
.gc-big .gc-cam { transition: transform .9s var(--ease); }
.gc-big .gc-cam.is-cut { transition: none; transform: none !important; }
.gc-big .gc-rect { transition: left .9s var(--ease), top .9s var(--ease), width .9s var(--ease), height .9s var(--ease); }
.gc-rail-dots { display: flex; gap: 4px; }
.gc-rail-dots i { width: 10px; height: 10px; background: #8b8b8b; box-shadow: inset 2px 2px 0 #373737; }
.gc-rail-dots i.is-past { background: #5f8f3a; }
.gc-rail-dots i.is-on { background: #80ff20; box-shadow: 0 0 0 2px #000; }

.gc-done { padding: clamp(80px, 10vw, 140px) 0 160px; text-align: center; }
.gc-done .wrap { display: grid; justify-items: center; gap: 10px; }
.gc-done h2 { font-family: var(--f-pixel); font-weight: 400; font-size: clamp(34px, 4vw, 52px); color: #80ff20; text-shadow: 3px 3px 0 #1d3a07; }
.gc-done p { color: var(--text-2); }
.gc-done .g-actions { justify-content: center; }

/* ---------- small screens / reduced motion: nothing pinned, every step brings its own close-up ---------- */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .gc-scene { height: auto; }
  .gc-scene-pin { position: static; height: auto; overflow: visible; padding: 56px 0; }
  .gc-scene-grid { grid-template-columns: minmax(0, 1fr); }
  .gc-scene-stage { display: none; }
  .gc-steps { gap: 14px; }
  .gc-step { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; padding: 12px; }
  .gc-step-shot { display: block; margin-bottom: 14px; }
  .gc-step-shot .g-frame { border: 2px solid #000; }
  .gc-bento { grid-template-columns: minmax(0, 1fr); }
  .gc-tile:nth-child(n) { grid-column: auto; }
  .gc-tile button { min-height: 0; }
  .gc-hero { min-height: 86dvh; }
}
@media (max-width: 520px) {
  .gc-step-text h3 { font-size: 21px; }
  .gm-tabs { gap: 12px; font-size: 13px; }
  .gm-tabs span:nth-child(2) { display: none; }
}