/* Grafit Pro 3.0 — the homepage as a presentation.
   Every section is a slide; ← → (or ↑ ↓, space) walks through them,
   the cable runs from port to port behind the text. */
html { scroll-behavior: smooth; scroll-snap-type: y proximity; }
section { position: relative; scroll-snap-align: start; }
main h2, main p, main li, .details div { text-shadow: 0 0 6px var(--bg), 0 0 3px var(--bg), 0 0 1px var(--bg); }

/* ── Cable ── */
#cable { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 1; overflow: visible; }
#cable .base { fill: none; stroke: var(--line); stroke-width: 2; }
#cable .live { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(166,227,90,.55)); transition: stroke-dashoffset .5s cubic-bezier(.3,.7,.2,1); }

/* ── Slides ── */
.slide { min-height: 100vh; padding: calc(var(--nav-h) + 5vh) var(--gutter) 7vh; display: flex; flex-direction: column; justify-content: center; gap: 7vh; }
.pair { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(28px, 5vw, 96px); align-items: center; }
.slide.flip .pair { grid-template-columns: 2fr 3fr; }
.slide.flip .media { order: 2; }
.slide.flip .text { order: 1; }
.media { position: relative; }
.frame { position: relative; aspect-ratio: 16 / 7; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); }
.frame video, .frame img.poster { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius); object-fit: contain; background: #000; }
.frame video { cursor: zoom-in; }
.text, .textbox { position: relative; }

.callout { position: absolute; z-index: 4; font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; padding: .45rem .8rem; border: 1.5px solid var(--accent); border-radius: 999px; color: var(--accent); background: rgba(10,11,13,.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; transform: rotate(-3deg) scale(.6); opacity: 0; transition: transform .6s cubic-bezier(.2,1.6,.4,1) .5s, opacity .4s .5s; }
.in .callout { transform: rotate(-3deg) scale(1); opacity: 1; }
.callout.tl { top: -18px; left: 18px; }
.callout.br { bottom: -18px; right: 18px; transform-origin: right; }
.callout.tr { top: -18px; right: 18px; }

.details { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 56px); border-top: 1px solid var(--line); padding-top: 2.2rem; }
.details div { font-size: .93rem; color: var(--ink-2); }
.details h4 { margin: 0 0 .5rem; font-family: var(--mono); font-weight: 400; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }

.sound { position: absolute; z-index: 5; right: 14px; top: 14px; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: rgba(10,11,13,.75); border: 1px solid var(--line); border-radius: 999px; padding: .4rem .75rem; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sound[aria-pressed="true"] { color: #0a0b0d; background: var(--accent); border-color: var(--accent); }

#lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(5,6,8,.96); display: none; align-items: center; justify-content: center; cursor: zoom-out; }
#lightbox.show { display: flex; }
#lightbox video { max-width: 97vw; max-height: 94vh; border-radius: 10px; background: #000; }

/* ── Hero ── */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 6vh) var(--gutter) 8vh; overflow: hidden; }
.hero #slices { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(10,11,13,.94) 30%, rgba(10,11,13,.45) 56%, rgba(10,11,13,.05) 78%), linear-gradient(0deg, var(--bg) 0%, rgba(10,11,13,0) 22%); }
.hero > *:not(canvas) { position: relative; z-index: 2; }
.hero .kicker { margin-bottom: 2.6rem; }
.wordmark { position: relative; display: inline-block; align-self: flex-start; }
.wordmark h1 { margin: 0; font-size: clamp(5rem, 17vw, 15rem); line-height: .85; letter-spacing: -.06em; font-weight: 720; }
.wordmark h1 span { display: inline-block; opacity: 0; transform: translateY(.3em); animation: rise .9s cubic-bezier(.2,.8,.2,1) forwards; }
.wordmark .three { position: absolute; left: calc(100% + .4rem); top: .35em; white-space: nowrap; font-family: var(--mono); font-size: clamp(.9rem, 1.6vw, 1.3rem); letter-spacing: .1em; color: #0a0b0d; background: var(--accent); padding: .3rem .7rem; border-radius: 999px; transform: rotate(-4deg) scale(.4); opacity: 0; animation: pop .7s cubic-bezier(.2,1.6,.4,1) .7s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes pop { to { opacity: 1; transform: rotate(-4deg) scale(1); } }
.hero .lead { font-size: clamp(1.5rem, 2.8vw, 2.5rem); font-weight: 620; letter-spacing: -.015em; line-height: 1.15; margin: 3rem 0 1.1rem; max-width: 20em; }
.hero .sub { color: var(--ink-2); max-width: 36em; font-size: 1.12rem; margin: 0 0 2.4rem; }
.hero .hint { margin-top: 6vh; font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; color: var(--mute); display: flex; align-items: center; gap: .7rem; text-transform: uppercase; }
.hero .hint::after { content: "↓"; color: var(--accent); animation: bob 1.6s ease-in-out infinite; }
.hero .slice-caption { position: absolute; right: var(--gutter); bottom: 8vh; z-index: 2; text-align: right; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--mute); line-height: 1.8; }
.hero .slice-caption b { color: var(--ink-2); font-weight: 400; }
@keyframes bob { 50% { transform: translateY(5px); } }

/* ── Film (wide) ── */
.wide .media { width: 100%; max-width: calc(56vh * 2.265); margin: 0 auto; }
.wide .frame { aspect-ratio: 2560 / 1130; }
.wide .row2 { width: 100%; max-width: calc(56vh * 2.265); margin: 0 auto; }
.wide .text { max-width: 52rem; }
.wide .row2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 72px); align-items: end; }

/* ── Interlude: four phones ── */
.interlude { min-height: 100vh; padding: calc(var(--nav-h) + 6vh) var(--gutter) 8vh; display: flex; align-items: center; justify-content: center; }
.interlude .stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6vh; width: 100%; }
.phones { display: flex; gap: clamp(18px, 3.4vw, 64px); justify-content: center; }
.phone { position: relative; height: min(58vh, 620px); aspect-ratio: 9 / 16; border-radius: 26px; border: 1px solid var(--line); background: #000; }
.phone video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 26px; cursor: zoom-in; }
.phone:nth-child(even) { margin-top: 8vh; }
.say { max-width: 32em; text-align: center; }
.say h2 { font-size: clamp(1.9rem, 3.4vw, 3.3rem); }
.say p { color: var(--ink-2); margin: 0; }

/* ── Also new: a field of small nodes ── */
.field { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.field .node > header { font-size: .7rem; padding: .6rem .9rem; }
.field .node p { margin: 0; padding: .9rem .95rem 1.05rem; color: var(--ink-2); font-size: .9rem; line-height: 1.45; }
.field .node p b { color: var(--ink); font-weight: 600; }
.h-int > header { background: var(--t-int); } .h-string > header { background: var(--t-string); color: #fff; }
.h-bool > header { background: var(--t-bool); } .h-color > header { background: var(--t-color); }
.h-structure > header { background: var(--t-structure); } .h-json > header { background: var(--t-json); }
.h-image > header { background: var(--t-image); }

/* ── Foundation: two years ── */
.ground .pair { grid-template-columns: 1fr 1fr; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stats div { padding: 1.1rem 1.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats div:nth-child(2n) { border-right: 0; }
.stats div:nth-last-child(-n+2) { border-bottom: 0; }
.stats strong { display: block; font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.stats span { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.signed { margin-top: 2rem; padding-left: 1.2rem; border-left: 2px solid var(--accent); color: var(--ink); font-size: 1.05rem; max-width: 34em; }
.signed small { display: block; margin-top: .6rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--mute); }

/* ── Quantum ── */
.quantum { position: relative; min-height: 100vh; overflow: hidden; display: flex; align-items: center; padding: calc(var(--nav-h) + 6vh) var(--gutter) 8vh; }
.quantum canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.quantum #qwave { opacity: 0; transition: opacity 1.6s ease; }
.quantum.in #qwave { opacity: 1; }
.quantum::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--bg) 0%, rgba(10,11,13,.92) 34%, rgba(10,11,13,.35) 58%, rgba(10,11,13,0) 75%); }
.qtext { position: relative; z-index: 2; max-width: 37rem; }
.qtext h2 { font-size: clamp(2.2rem, 4.4vw, 4.4rem); }
.qtruth { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .9rem; }
.qtruth li { font-size: .95rem; color: var(--ink-2); padding-left: 1.4rem; position: relative; }
.qtruth li b { color: var(--ink); font-weight: 600; }
.qtruth li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: conic-gradient(from 0deg, #a6e35a, #3fd5c8, #7d6bff, #ff5ab4, #ffb547, #a6e35a); }
.qnote { margin-top: 1.6rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--mute); max-width: 34rem; }
.qbell { position: absolute; z-index: 2; right: 9%; bottom: 8vh; width: min(340px, 40vw); font-family: var(--mono); font-size: .72rem; color: var(--ink-2); letter-spacing: .05em; background: rgba(10,11,13,.72); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.qbell svg { width: 100%; height: auto; display: block; margin: .3rem 0 .8rem; }
.qbars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: end; height: 70px; }
.qbars div { background: var(--line); border-radius: 3px 3px 0 0; height: 2px; transition: height .25s ease; }
.qbars div.hot { background: var(--accent); }
.qlabels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; margin-top: .35rem; color: var(--mute); }
.qcaption { position: absolute; z-index: 2; right: 9%; top: calc(var(--nav-h) + 6vh); font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: var(--mute); text-align: right; max-width: 22rem; line-height: 1.6; }

/* ── Price ── */
.price .pair { grid-template-columns: 1fr 1fr; align-items: start; }
.price .node { max-width: 30rem; }
.price .big { display: flex; align-items: baseline; gap: .8rem; padding: 1.4rem 1.1rem 1.2rem; border-bottom: 1px solid var(--line); }
.price .big strong { font-size: clamp(3rem, 6vw, 5rem); font-weight: 720; letter-spacing: -.05em; line-height: 1; }
.price .big span { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.price .node .actions { padding: 1.2rem 1.1rem 1.3rem; border-top: 1px solid var(--line); }
.thanks { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; background: var(--bg-2); margin-top: 2rem; }
.thanks h3 { font-size: 1.2rem; margin: 0 0 .6rem; }
.thanks p { margin: 0; color: var(--ink-2); font-size: .97rem; }
.vows { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.vows li { color: var(--ink-2); font-size: .95rem; padding-left: 1.3rem; position: relative; }
.vows li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.vows b { color: var(--ink); font-weight: 600; }

/* ── Finale ── */
.finale { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: calc(var(--nav-h) + 6vh) var(--gutter) 8vh; }
.endtext { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.8rem; max-width: 52rem; }
.endtext .node { min-width: min(420px, 86vw); text-align: left; }
.finale h2 { font-size: clamp(2.1rem, 3.8vw, 4rem); max-width: 13em; margin: 0; }
.finale .idea { margin: 0 auto; }
.contact { font-family: var(--mono); font-size: .9rem; color: var(--ink-2); letter-spacing: .04em; }
.contact a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-dim); }

/* ── Minimap + keys ── */
#map { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; gap: 12px; }
#map a { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--mute); display: block; transition: all .3s; position: relative; }
#map a.on { background: var(--accent); border-color: var(--accent); transform: scale(1.35); }
#map a::after { content: attr(data-label); position: absolute; right: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--ink-2); opacity: 0; transition: opacity .2s; pointer-events: none; background: rgba(10,11,13,.85); padding: .15rem .45rem; border-radius: 6px; }
#map a:hover::after { opacity: 1; }
#keys { position: fixed; left: 16px; bottom: 14px; z-index: 30; font-family: var(--mono); font-size: .68rem; color: var(--mute); letter-spacing: .06em; background: rgba(10,11,13,.85); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .7rem; transition: opacity .6s; }
#keys.gone { opacity: 0; pointer-events: none; }
#keys kbd { font-family: inherit; border: 1px solid var(--line); border-radius: 4px; padding: 0 .3em; color: var(--ink-2); }

.slide:not(.flip) .media.reveal { transform: translateX(-34px); }
.slide.flip .media.reveal { transform: translateX(34px); }
.slide.in:not(.flip) .media.reveal, .slide.flip.in .media.reveal { transform: none; }

@media (max-width: 1100px) { .field { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  body { font-size: 16px; }
  html { scroll-snap-type: none; }
  .pair, .slide.flip .pair, .ground .pair, .price .pair, .wide .row2 { grid-template-columns: 1fr; }
  .slide.flip .media { order: 0; }
  .details { grid-template-columns: 1fr; }
  .phones { flex-wrap: wrap; }
  .phone { height: 44vh; }
  .phone:nth-child(even) { margin-top: 0; }
  .field { grid-template-columns: 1fr; }
  .quantum { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .qbell, .qcaption { position: relative; right: auto; top: auto; bottom: auto; width: 100%; }
  .hero .slice-caption { position: static; text-align: left; margin-top: 2rem; }
  .callout { display: none; }
  .hero #slices { opacity: .35; }
  .hero .hint { display: none; }
  #map, #keys { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .callout, .wordmark h1 span, .wordmark .three { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
}