/* ==========================================================================
   "Your whole game, connected" — the Foresight+ band
   ==========================================================================
   Carried by every page that has the band (Premier + mobile today).

   DUPLICATED, not shared (user 2026-09-07). This used to be linked
   cross-module (mobile -> ../Premier/css/thisis-band.css), which 404s once
   each landing is served from its own subdomain root: "../" clamps at the
   docroot, so /Premier/css/... simply is not there. Each module now keeps
   its own copy. There is no build step to hoist a shared one, so if you
   change this file, apply the same change to Premier/css/thisis-band.css.

   The section shell (.thisis padding, head, lede) stays in each module's
   styles.css — this file owns the card: background video in a rounded
   container, the cube centered between the two product wordmarks, hairline
   wires that fade toward the logos, and the hover state that blurs the
   video into a full-card "Explore Foresight+" link (the old blue CTA is
   gone — the card IS the link). ========================================= */

/* the eyebrow is the actual Foresight+ wordmark now */
.thisis__fplogo {
  display: block;
  margin: 0 auto 1.9rem;
  height: clamp(16px, 1.5vw, 22px);
  width: auto;
}

.fband {
  position: relative;
  display: block;
  width: min(1560px, 88vw);
  margin: clamp(40px, 6vh, 72px) auto 0;
  aspect-ratio: 3.1 / 1;
  min-height: 300px;
  border-radius: clamp(24px, 2.6vw, 44px);
  overflow: clip;
  isolation: isolate;
  background: #0a0a0b;
}

.fband__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .5s var(--ease), transform .5s var(--ease), opacity .5s var(--ease);
}
/* keeps the type and the cube reading over any footage */
.fband__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(80% 120% at 50% 50%, rgba(0, 0, 0, .1), rgba(0, 0, 0, .48)),
    rgba(0, 0, 0, .18);
  pointer-events: none;
}

.fband__cube {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: clamp(190px, 22%, 400px);
  height: auto;
  translate: -50% -50%;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .45));
  transition: opacity .4s var(--ease), scale .5s var(--ease);
  /* gentle idle float (user 2026-08-20) — rides the translate property, so
     it never fights the transition-driven opacity/scale on hover */
  animation: fband-float 5.5s ease-in-out infinite;
}
@keyframes fband-float {
  0%, 100% { translate: -50% -50%; }
  50% { translate: -50% calc(-50% - 10px); }
}

.fband__mark {
  position: absolute;
  top: 50%;
  z-index: 3;
  height: clamp(15px, 1.5vw, 24px);
  width: auto;
  translate: 0 -50%;
  transition: opacity .4s var(--ease);
}
.fband__mark--premier { left: clamp(24px, 18%, 300px); }
/* Same height as PREMIER, no size override (user 2026-09-01). Measured off the
   rendered ink: app.svg, premier-logo.svg and the old mobile.svg all draw the
   Foresight mark at ~98% of the box height and the caps at ~93%, so equal
   rendered height already matches the two lockups exactly. The differing file
   aspects (5.33 vs 9.23) are just how much WORDMARK follows the mark. */
.fband__mark--mobile { right: clamp(24px, 18%, 300px); }

/* the wires (user 2026-08-20, reverted to the beam treatment): hairlines
   running from BEHIND the cube out to each wordmark, with the old glowing
   comet relaunching outward along them. Each wire's endpoint sits at its
   mark's inner edge — the R of PREMIER, the head of MOBILE — computed from
   the mark's inset + rendered width (height x the SVG's aspect), and the
   mask dissolves the last stretch so both the line and the comet die right
   there. They grow out of the cube on reveal (.in from the shared observer). */
.fband__wire {
  position: absolute;
  top: 50%;
  z-index: 2; /* under the cube (z 3) — the beams launch from behind it */
  height: 1px;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease) .25s, opacity .4s var(--ease);
  pointer-events: none;
}
.fband__wire--l {
  right: 50%;
  /* mark inset + mark width (526/57 aspect at its clamped height) + a hair */
  left: calc(clamp(24px, 18%, 300px) + clamp(138px, 13.8vw, 221px) + 8px);
  transform-origin: right center;
  background: linear-gradient(270deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .16) 60%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
          mask-image: linear-gradient(90deg, transparent, #000 22%);
}
.fband__wire--r {
  left: 50%;
  /* The reserve is the mark's WIDTH, so it has to be re-derived whenever the
     art changes: app.svg runs 304/57 = 5.333:1 where the old mobile.svg ran
     317/38 = 8.342:1, so at the shared height the APP lockup is a third
     narrower. Height is clamp(15px, 1.5vw, 24px) x 5.333. */
  right: calc(clamp(24px, 18%, 300px) + clamp(80px, 8vw, 128px) + 8px);
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .16) 60%);
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 22%);
          mask-image: linear-gradient(270deg, transparent, #000 22%);
}
.fband.in .fband__wire { transform: scaleX(1); }

/* the comet: a glowing streak that launches from the cube and runs the wire
   out to the mark, extinguished by the wire's own end mask */
.fband__wire::after {
  content: "";
  position: absolute;
  top: -2px;
  height: 5px;
  width: 150px;
  border-radius: 5px;
  opacity: 0;
  filter: blur(.4px) drop-shadow(0 0 7px rgba(255, 255, 255, .85));
}
.fband__wire--l::after {
  /* head on the left — it travels leftward */
  background: linear-gradient(270deg, transparent, rgba(255, 255, 255, .3) 45%, rgba(255, 255, 255, .95) 88%, #fff);
  animation: fband-comet-l 2.8s ease-in-out 1.4s infinite;
}
.fband__wire--r::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3) 45%, rgba(255, 255, 255, .95) 88%, #fff);
  animation: fband-comet-r 2.8s ease-in-out 1.4s infinite;
}
@keyframes fband-comet-l {
  0% { left: 100%; opacity: 0; }
  10% { opacity: 1; }
  80% { left: -150px; opacity: 1; }
  81%, 100% { left: -150px; opacity: 0; }
}
@keyframes fband-comet-r {
  0% { right: 100%; opacity: 0; }
  10% { opacity: 1; }
  80% { right: -150px; opacity: 1; }
  81%, 100% { right: -150px; opacity: 0; }
}

/* below the card (per mock): the lede moves under the footage and the
   ghost CTA (compatibility styling) closes the section */
.thisis__tail { text-align: center; }
.thisis__tail .thisis__lede { margin: clamp(32px, 5vh, 56px) auto 0; }
.thisis__cta {
  position: relative;
  margin-top: clamp(22px, 3.5vh, 40px);
  border: 0;
  border-radius: 999px;
  background: #000;
  --cta-ring: .28;
  color: #fff;
  transition: --cta-ring .28s var(--ease);
}
.thisis__cta:hover { transform: none; background: #000; --cta-ring: 1; }
@property --cta-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --cta-ring { syntax: "<number>"; initial-value: 0.28; inherits: true; }
.thisis__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    conic-gradient(from var(--cta-angle) at 50% 50%,
      rgba(255, 255, 255, var(--cta-ring)) 0deg,
      rgba(255, 255, 255, 1) 48deg,
      rgba(255, 255, 255, var(--cta-ring)) 96deg,
      rgba(255, 255, 255, var(--cta-ring)) 360deg),
    linear-gradient(rgba(255, 255, 255, var(--cta-ring)) 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: cta-stroke 3.6s linear infinite;
}


/* phones (user 2026-08-20, per mock): the composition turns portrait and
   stacks — PREMIER above, cube center, MOBILE below — with the wires and
   comets running vertically. The --l wire becomes the UP wire, --r the
   DOWN wire; same fade-before-the-mark treatment, rotated 90°. */
@media (max-width: 700px) {
  .fband { aspect-ratio: 12 / 13; min-height: 0; width: calc(100vw - 32px); }
  .fband__cube { width: 34%; }
  .fband__mark {
    height: 16px;
    top: auto;
    left: 50%;
    right: auto;
    translate: -50% 0;
  }
  .fband__mark--premier { top: clamp(44px, 13%, 96px); }
  .fband__mark--mobile { bottom: clamp(44px, 13%, 96px); }
  .fband__wire {
    left: 50%;
    right: auto;
    width: 1px;
    height: auto;
    transform: scaleY(0);
  }
  .fband.in .fband__wire { transform: scaleY(1); }
  .fband__wire--l { /* up */
    top: calc(clamp(44px, 13%, 96px) + 16px + 8px);
    bottom: 50%;
    transform-origin: bottom center;
    background: linear-gradient(0deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .16) 60%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%);
            mask-image: linear-gradient(180deg, transparent, #000 22%);
  }
  .fband__wire--r { /* down */
    top: 50%;
    bottom: calc(clamp(44px, 13%, 96px) + 16px + 8px);
    transform-origin: top center;
    background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .16) 60%);
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 22%);
            mask-image: linear-gradient(0deg, transparent, #000 22%);
  }
  .fband__wire::after {
    top: auto;
    left: -2px;
    width: 5px;
    height: 130px;
    border-radius: 5px;
  }
  .fband__wire--l::after {
    background: linear-gradient(0deg, transparent, rgba(255, 255, 255, .3) 45%, rgba(255, 255, 255, .95) 88%, #fff);
    animation: fband-comet-up 2.8s ease-in-out 1.4s infinite;
  }
  .fband__wire--r::after {
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .3) 45%, rgba(255, 255, 255, .95) 88%, #fff);
    animation: fband-comet-down 2.8s ease-in-out 1.4s infinite;
  }
}
@keyframes fband-comet-up {
  0% { top: 100%; opacity: 0; }
  10% { opacity: 1; }
  80% { top: -130px; opacity: 1; }
  81%, 100% { top: -130px; opacity: 0; }
}
@keyframes fband-comet-down {
  0% { bottom: 100%; opacity: 0; }
  10% { opacity: 1; }
  80% { bottom: -130px; opacity: 1; }
  81%, 100% { bottom: -130px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fband__wire { transform: none; transition: none; }
  .fband__wire::after { animation: none; }
  .fband__cube { animation: none; }
  .thisis__cta::before { animation: none; }
  .fband__video { transition: none; }
}