/* THEO app landing — sections 1-2 (scroll-driven hero + phone row).
   Ported from the approved prototype (THEO V3/prototype/).

   TYPOGRAPHY AND COLOUR LIVE IN BRICKS, NOT HERE. Sizes, weights and colours
   come from Global Classes on the elements (theo-display, theo-lead,
   theo-hero-eyebrow, theo-sm-text, theo-label, theo-inv-text, theo-muted-inv)
   so the designer can change them in the builder. This file carries only what
   the scroll rig needs: position, layering, masks and motion.
   Do not reintroduce font-size or color here — it would silently outrank the
   builder for anyone editing later. */

#heroTrack {
  position: relative;
  display: block;   /* Bricks .brxe-section defaults to flex, which shrink-wraps the sticky child to width 0 */
  height: 300vh;
  padding: 0;
  background: #000;
  font-family: var(--theo-font);
  color: var(--theo-white);
}
.tal-sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; background: #000; }
#heroTrack, .tal-sticky { overflow-x: clip; }

/* section-2 backdrop: near-black field, drifting green aura + blue leak + vignette */
#bgWhite { position: absolute; inset: 0; z-index: 0; opacity: 0; background: #010504; overflow: hidden; }
#bgWhite > div { position: absolute; inset: 0; will-change: transform, opacity; }
.tal-g-green { mix-blend-mode: screen; background: radial-gradient(52% 56% at 63% 48%, rgba(50,190,120,.42), rgba(50,190,120,.12) 32%, rgba(50,190,120,0) 60%); animation: talAtmoGreen 11s ease-in-out infinite; }
.tal-g-blue { mix-blend-mode: screen; background: radial-gradient(104% 82% at 50% 119%, rgba(36,132,190,.58), rgba(20,110,175,.36) 27%, rgba(15,74,112,.15) 50%, rgba(15,74,112,0) 72%); animation: talAtmoBlue 12s ease-in-out infinite; }
.tal-g-haze { mix-blend-mode: screen; background: linear-gradient(305deg, rgba(50,190,120,.08), rgba(50,190,120,0) 46%); }
.tal-vig { box-shadow: inset 0 0 16vw 3vw rgba(0,0,0,.78); pointer-events: none; }
@keyframes talAtmoGreen { 0%,100% { transform: translateX(-1%); } 50% { transform: translateX(1%); } }
@keyframes talAtmoBlue { 0%,100% { transform: translate(-0.8%,1.4%); } 50% { transform: translate(0.8%,-0.6%); } }
@media (prefers-reduced-motion: reduce) { .tal-g-green, .tal-g-blue { animation: none; } }

/* position only — type comes from theo-display + theo-inv-text on the element */
#midHead { position: absolute; top: 8vh; left: 0; right: 0; z-index: 4; text-align: center; padding: 0 4vw; margin: 0; opacity: 0;
  text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.6); }

/* section 1 — hero */
#heroLayer { position: absolute; inset: 0; z-index: 1; }
.tal-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.tal-hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.5) 38%, rgba(0,0,0,.12) 72%, rgba(0,0,0,.42)); }
.tal-hero-logo { position: absolute; top: clamp(1.3rem, 3.2vh, 2.2rem); left: clamp(1.5rem, 4vw, 4rem); z-index: 3;
  width: 145px; height: 24px; background: url(../img/theo-logo-white.svg) no-repeat left center / contain; }
/* Focus ring, not typography — the theme resets outline to none, and the logo
   link has no text, so without this it is invisible to keyboard users. */
.tal-hero-logo:focus-visible { outline: var(--border-emph) solid var(--theo-green); outline-offset: 6px; }
.tal-hero-copy { position: absolute; left: 0; top: 0; bottom: 0; width: min(52%, 660px); display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start; padding: 0 clamp(1.5rem, 4vw, 4rem); z-index: 2; }
.tal-h1 { margin: 0; text-wrap: balance; }
.tal-h1 em { font-style: normal; color: var(--theo-green); }
.tal-sub { max-width: 40ch; margin: 1.2rem 0 1.6rem; }
.tal-scrollhint { position: absolute; left: clamp(1.5rem, 4vw, 4rem); bottom: 5vh; z-index: 5;
  display: flex; align-items: center; gap: .5rem; }
.tal-scrollhint::before { content: "\2193"; color: var(--theo-green); animation: talBob 1.6s ease-in-out infinite; }
@keyframes talBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .tal-scrollhint::before { animation: none; } }

/* phone canvas */
#phoneStage { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#phoneStage canvas { pointer-events: none; }

/* section-2 captions */
#capLayer { position: absolute; left: 0; right: 0; bottom: 15vh; z-index: 4; opacity: 0; display: flex; justify-content: center;
  gap: clamp(.4rem, 1.4vw, 1.4rem); padding: 0 3vw; pointer-events: none; }
.tal-cap { flex: 1 1 0; max-width: 230px; text-align: center; }
.tal-cap::before { content: ""; display: block; width: 1px; height: 30px; margin: 0 auto .6rem;
  background: linear-gradient(to top, var(--theo-green), transparent); }
.tal-cap h4 { margin: .3rem 0 .3rem; }
.tal-cap p { margin: 0; }

/* tablet */
@media (max-width: 1100px) {
  .tal-hero-copy { width: min(58%, 520px); }
  #capLayer { bottom: 10vh; gap: .5rem; padding: 0 2vw; }
  .tal-cap { max-width: 185px; }
}

/* mobile — staggered hero pair; captions swap one at a time */
@media (max-width: 700px) {
  .tal-hero-copy { top: 0; bottom: auto; width: auto; right: 0; padding: 11vh 7vw 0; justify-content: flex-start; }
  .tal-sub { margin: .9rem 0 1.2rem; max-width: 34ch; }
  /* MA1 stands left in its own lower band, punched-in crop; phone overlaps in front */
  .tal-hero-bg { inset: auto 0 0 0; height: 70vh; background-size: auto 128% !important; background-position: 58% 18% !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%); mask-image: linear-gradient(180deg, transparent 0, #000 20%); }
  .tal-hero-scrim { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,.45) 100%); }
  .tal-scrollhint { display: none; }
  #midHead { top: 5vh; padding: 0 7vw; }
  #capLayer { display: block; bottom: 6vh; padding: 0; height: 150px; }
  /* stacked in one spot: outgoing caption must vanish instantly or two overlap */
  #capLayer .tal-cap { position: absolute; left: 0; right: 0; bottom: 0; max-width: none; padding: 0 8vw; opacity: 0; visibility: hidden; }
  #capLayer.seq .tal-cap.is-active { opacity: 1; visibility: visible; transition: opacity .2s ease; }
  .tal-cap::before { height: 22px; margin-bottom: .5rem; }
}