/* HTCUT site: animated sections (driven by assets/motion.js, GSAP). Mobile-first like site.css.
   Without JS or with reduced motion, every block shows its finished state. */

/* ---- "Watch it happen": a mini HTCUT window driven by a Claude Code chat ---- */
.demo { display: grid; gap: 14px; margin-top: 28px; }
.demo-chat { border-radius: 12px; overflow: hidden; border: 1px solid #34343f; background: #101014; }
.chat { padding: 14px 16px; min-height: 8.6em; font: 13px/1.6 var(--mono); color: #d9d9e0; }
.chat p { margin: 0 0 6px; }
.chat-you { color: var(--ink); font-weight: 600; }
.chat-run b { color: var(--green); }
.chat-out { color: var(--green); }
.demo.is-live .caret { display: inline-block; }
.demo .caret { display: none; }
.demo-app { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #17171d; }
.demo-app .window-bar b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.demo-viewer { position: relative; background: #000; }
.demo-viewer img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.demo-cap { position: absolute; left: 0; right: 0; bottom: 24%; margin: 0; text-align: center; font: 900 clamp(15px, 4.4vw, 30px)/1 -apple-system, "SF Pro Display", sans-serif; letter-spacing: .01em; color: #fff; text-shadow: 0 2px 10px #000c, 0 0 2px #000; }
.demo-cap span { display: inline-block; }
.demo-cap .on { color: var(--accent); }
.demo-toast { position: absolute; top: 10px; right: 10px; margin: 0; padding: 6px 10px; border-radius: 999px; background: #0c0c0fd9; border: 1px solid #ffffff26; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.demo-toast .who-c { margin-right: 4px; }
.demo-tl { position: relative; padding: 8px 10px 12px; display: grid; gap: 5px; }
.tl-ruler { position: relative; height: 10px; margin-left: 62px; background: repeating-linear-gradient(90deg, #ffffff22 0 1px, transparent 1px 10%); }
.tl-head { position: absolute; top: 0; left: 0; width: 2px; height: 132px; background: #ff4d4d; z-index: 2; border-radius: 1px; }
.tl-row { display: flex; align-items: center; gap: 8px; height: 26px; }
.tl-row em { flex: 0 0 54px; font-style: normal; font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; }
.tl-lane { position: relative; flex: 1; height: 100%; display: flex; background: #ffffff08; border-radius: 4px; overflow: hidden; }
.tl-lane > i { flex: 0 0 calc(var(--w) * 1%); height: 100%; box-shadow: inset -1px 0 #17171d; position: relative; overflow: hidden; }
.c-v { background: linear-gradient(#4b6fd8, #3654b5); }
.c-v.c-b { background: linear-gradient(#7b5bd6, #5a3fb3); }
.c-a { background: #1f8a7a; }
.c-a::after { content: ""; position: absolute; inset: 22% 0; background: repeating-linear-gradient(90deg, #ffffff66 0 1px, transparent 1px 3px); opacity: .6; }
.tl-lane > i.cut { background: #ff4d4d; }
.tl-lane > i.cut::after { display: none; }
.tl-lane > i.cut b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 .58rem var(--mono); color: #fff; white-space: nowrap; }
.tl-caps > i { position: absolute; top: 4px; bottom: 4px; left: calc(var(--x) * 1%); width: calc(var(--w) * 1%); background: #d6a91f; border-radius: 3px; box-shadow: none; }
.tl-lane > i.c-m { flex-basis: 84%; background: #2f7d32; }
.c-m svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-m polyline { fill: none; stroke: #c8f5a0; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* finished state (no JS / reduced motion): cuts gone, captions in, music ducked */
.demo:not(.is-live) .tl-lane > i.cut { flex-basis: 0; }

/* ---- Screen tour: swipe on phones, arrows on wider screens ---- */
.tour { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 18px; margin: 24px -20px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tour::-webkit-scrollbar { display: none; }
.tour figure { margin: 0; scroll-snap-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.tour .pic { background: #0a0a0d; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.tour .pic img { width: 100%; height: 100%; object-fit: contain; }
.tour .pic.cover img { object-fit: cover; object-position: top left; }
.tour figcaption { padding: 14px 16px 16px; color: #cfcfd6; font-size: .93rem; }
.tour figcaption b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 2px; }
.tour-nav { display: flex; align-items: center; gap: 10px; }
.tour-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #ffffff38; background: transparent; color: var(--ink); font-size: 1.2rem; cursor: pointer; }
.tour-nav button:active { background: #ffffff14; }
.tour-nav button:disabled { opacity: .35; cursor: default; }
.tour-dots { display: flex; gap: 6px; margin-left: 6px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: #ffffff30; }
.tour-dots i.on { background: var(--accent); }
.tour-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.tour-head .sub { margin-bottom: 0; }

/* ---- Shorts made in HTCUT: phone-framed loops (lazy: motion.js sets src near the viewport) ---- */
.shorts { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 18px; margin: 24px -20px 0; scrollbar-width: none; }
.shorts::-webkit-scrollbar { display: none; }
.short { margin: 0; scroll-snap-align: center; }
.phone { position: relative; border-radius: 30px; padding: 7px; background: linear-gradient(145deg, #3a3a44, #15151a); box-shadow: 0 24px 60px #000b, inset 0 0 0 1px #ffffff1f; }
.phone video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 24px; background: #000; object-fit: cover; cursor: pointer; }
.snd { position: absolute; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ffffff40; background: #0c0c0fb3; color: #fff; font-size: 1.05rem; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.views { position: absolute; left: 16px; top: 16px; padding: 5px 11px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: .82rem; box-shadow: 0 6px 18px #ff3d9a55; }
.short figcaption { padding: 14px 4px 0; color: #cfcfd6; font-size: .93rem; }
.short figcaption b { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: 2px; }
#shorts .tour-head .btn { flex: none; }

/* ---- How it works: animated op-flow diagram ---- */
.flow { margin: 0; background: #101014; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.flow svg { display: block; width: 100%; height: auto; }
.flow figcaption { color: var(--muted); font-size: .88rem; padding: 4px 8px 6px; }
.flow .node rect { fill: #1a1a21; stroke: #34343f; stroke-width: 1.5; }
.flow .node.you rect { stroke: #8ab4ff; }
.flow .node.claude rect { stroke: var(--accent); }
.flow .node.log rect { stroke: var(--green); fill: #8fd14f14; }
.flow .node text { fill: var(--ink); font: 700 15px -apple-system, "SF Pro Text", sans-serif; text-anchor: middle; }
.flow .node text.s { fill: var(--muted); font: 500 11.5px ui-monospace, "SF Mono", Menlo, monospace; }
.flow .wire { fill: none; stroke: #3a3a46; stroke-width: 2; }
.flow .wire.live { stroke: #8fd14f80; stroke-dasharray: 5 6; }
.flow .tag { font: 600 11px ui-monospace, "SF Mono", Menlo, monospace; }
.flow .pk-you { fill: #8ab4ff; }
.flow .pk-claude { fill: var(--accent); }
.flow .pk-live { fill: var(--green); }
.how-cmds { margin-top: 20px; }

/* ---- Scroll reveals: hidden only once motion.js has marked the page as animated ---- */
.js-motion [data-reveal] { opacity: 0; transform: translateY(24px); }

@media (min-width: 600px) {
  .tour { grid-auto-columns: 46%; }
  .shorts { grid-auto-columns: 40%; }
}
@media (min-width: 900px) {
  .shorts { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 28px auto 0; padding: 0; max-width: 980px; gap: 28px; }
}
@media (min-width: 1000px) {
  /* hero: the terminal hangs under the app window, overlapping only its timeline strip, so the viewer stays visible */
  .hero .term { top: calc(100% - 36px); left: 18%; width: 72%; }
  .hero .term pre { font-size: 12px; line-height: 1.5; }
  .hero-visual { margin-bottom: 290px; }
  .demo { grid-template-columns: 0.78fr 1.22fr; align-items: start; gap: 20px; }
  .chat { min-height: 13em; font-size: 14px; }
  .demo-tl { padding: 10px 14px 14px; gap: 6px; }
  .tl-row { height: 30px; }
  .tl-head { height: 154px; }
  .tour { grid-auto-columns: 31%; margin: 28px 0 0; padding: 4px 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal] { opacity: 1; transform: none; }
}