/* qubba.ai v2: the gear world, four sticky worlds, one systems panel. */

/* Hero: black world, the giant word behind a scroll-scrubbed gear canvas */
.hero { position: relative; }
.hero-world { background: var(--bg); }
.hero-motion { height: 250vh; height: 250svh; }
.hero-motion .hero-world { position: sticky; top: 0; }
.hero-giant {
  position: absolute; left: var(--gutter); top: 50%; z-index: 0;
  /* equal ink padding above and below keeps translate(-50%) centred on the word; an absolute box is placed by its
     margin edge, so no top margin, and the left margin returns the side padding */
  padding: max(var(--ink-t), var(--ink-b)) var(--ink-x); margin: 0 0 0 calc(-1 * var(--ink-x)); transform: translateY(-50%);
  color: var(--ink); white-space: nowrap; font-weight: 700; font-size: clamp(6rem, 20vw, 24rem);
}
.gear-canvas {
  position: absolute; z-index: 1;
  width: min(80vmin, 760px); height: min(80vmin, 760px);
  left: 62%; top: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
/* The poster paints at once; the real-time canvas fades in above it, then the poster steps aside */
canvas.gear-canvas { opacity: 0; transition: opacity .25s ease; }
canvas.gear-canvas.is-live { opacity: 1; }
.gear-poster { object-fit: contain; }
.gear-poster.is-done { visibility: hidden; }
.hero-copy { z-index: 2; }
.hero-line { color: var(--ink); }
/* Phones and tablets: three stacked bands that never overlap. The gear in the upper band, the word under it (left
   aligned script over the centred word), the line and the two buttons at the foot. All sized from the small
   viewport height, so a short phone shrinks the gear rather than pushing the word under it. */
@media (max-width: 900px) {
  .hero { --g: min(78vw, 36svh, 520px); --top: calc(var(--nav-h) + 1.5svh); }
  .hero-motion { height: 175vh; height: 175svh; }
  .gear-canvas { left: 50%; top: var(--top); transform: translateX(-50%); width: var(--g); height: var(--g); }
  .hero-giant { top: calc(var(--top) + var(--g) + 1svh); left: 50%; margin: 0; padding: .14em var(--ink-x) var(--ink-b); transform: translateX(-50%); font-size: min(26vw, 12.5svh, 9rem); }
  .hero-copy { padding-bottom: max(1.75rem, 3svh); gap: 1.1rem; }
  .hero-line { font-size: 1.08rem; }
}

/* Four worlds: sticky siblings inside one parent, so each stays pinned while the next slides over it */
.scenes { position: relative; }
.scene-start { height: 0; }
.scene-space { height: 60vh; height: 60svh; }
.scene-world { background: var(--bg-2); }
.scene-world .video-plate { will-change: transform; }
.scene-zoom { transform-origin: 50% 50%; }
.scene-world picture { position: absolute; inset: 0; }
.scene-hit { position: absolute; inset: 0; z-index: 1; }
.scene-world .scene-copy-v2 { pointer-events: none; }
.scene-world .scene-copy-v2 > * { pointer-events: auto; }
.scene-giant { padding-bottom: calc(.12em + var(--ink-b)); margin-bottom: calc(-1 * var(--ink-b)); will-change: transform; font-size: clamp(4rem, 14vw, 16rem); }
.scene-line { will-change: opacity; }
@media (prefers-reduced-motion: reduce) {
  .scene-world { background-position: center; background-size: cover; background-repeat: no-repeat; }
  .scene-world[data-scene="marketing"] { background-image: url(shared/video/clouds-drift.jpg); }
  .scene-world[data-scene="press"] { background-image: url(shared/video/newspapers.jpg); }
  .scene-world[data-scene="apps"] { background-image: url(shared/video/stage.jpg); }
  .scene-world[data-scene="ads"] { background-image: url(shared/video/billboards.jpg); }
}
/* Paid ads: a street of glowing gold billboards, traffic light running to the vanishing point. Phones crop to the
   right-hand screens so a billboard, not the dark road, sits behind the word */
.scene-ads-plate { object-position: 50% 50%; }
@media (max-width: 700px) {
  .scene-giant { font-size: clamp(3.3rem, 17.5vw, 7rem); }
  .scene-ads-plate { object-position: 80% 50%; }
  /* A deeper foot of shade: the line and the button sit on the plate's brightest part on a phone */
  .scene-world .world-shade { background: linear-gradient(to top, rgba(10, 11, 13, .94) 0%, rgba(10, 11, 13, .66) 32%, rgba(10, 11, 13, .12) 62%, rgba(10, 11, 13, .28) 100%); }
  .scene-world .scene-copy-v2 { gap: .9rem; padding-bottom: max(2.25rem, 4svh); }
  .scene-line { color: var(--ink); }
}

/* Systems panel: the statement on the left, six lines in two columns on the right */
.systems-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.systems h2 { max-width: 12ch; }
.systems-cta { margin-top: 2rem; }
.systems-list { list-style: none; margin: 0; padding: 0; column-gap: clamp(2rem, 4vw, 4rem); }
.systems-list li { font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; padding: .9rem 0; border-bottom: 1px solid var(--line-soft); }
.systems-list li:first-child { border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .systems-grid { grid-template-columns: 1fr; }
  .systems-list li:nth-child(4) { border-top: 0; }
  /* Opaque on phones: through the glass, the Apps word behind read as a second layer of text */
  .systems { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .systems h2 { max-width: 14ch; }
  .systems-cta { margin-top: 1.5rem; }
  .systems-list li { font-size: 1.5rem; padding: .8rem 0; }
}
@media (min-width: 701px) { .systems-list li:nth-child(4) { border-top: 1px solid var(--line); } }

/* Rule strip (the systems page) */
.strip { padding: clamp(3rem, 8vh, 6rem) 0 0; }

/* About: one line and the facts as a rule strip under it */
.about-body { display: grid; gap: clamp(2rem, 5vh, 3rem); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line-soft); padding: 1.1rem 0; }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.75rem); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-family: var(--sans); font-size: 1.4rem; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--ink-2); margin-top: .75rem; max-width: 60ch; }

/* Contact */
.contact .line { margin-top: 1rem; }
.contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.contact-links a:not(.btn) { color: var(--gold); }
.lead-form { display: grid; gap: 1rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }