/* TAKE 1 · deep space. The approved hero (depth/index.html .hero), rebuilt inside the
 * director's stage: the painted void, the far display line behind the canvas, the
 * poster panda (first paint, and the static poster), the canvas, the vignette, the
 * near copy and the CTAs. Then "who we are", alone in space. */
#take1{--len:520svh}
#take1 .stage{background:var(--void-edge)}
#take1 .canvasHost{z-index:4}

/* ---------------------------------------------------------------- the hero frame */
#take1 .t1Hero{position:absolute;inset:0}

/* layer 0 · the painted void, and a still star plate for the poster */
#take1 .t1Bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(52% 34% at 64% 22%, rgba(44,82,209,.05) 0%, rgba(20,30,90,.02) 44%, rgba(1,1,3,0) 76%),
    radial-gradient(64% 44% at 18% 68%, rgba(125,19,255,.04) 0%, rgba(40,20,110,.015) 46%, rgba(1,1,3,0) 78%),
    radial-gradient(112% 78% at 58% 34%, var(--void-core) 0%, var(--void-mid) 42%, var(--void-edge) 100%)}
#take1 .t1Bg::after{content:"";position:absolute;inset:0;transition:opacity .9s linear;
  background-image:
    radial-gradient(1.7px 1.7px at 12% 22%, #fff 48%, transparent 52%),
    radial-gradient(1px 1px at 78% 12%, #cfe6ff 48%, transparent 52%),
    radial-gradient(2px 2px at 62% 58%, #fff 48%, transparent 52%),
    radial-gradient(.9px .9px at 28% 74%, #9fb6ff 48%, transparent 52%),
    radial-gradient(1.4px 1.4px at 88% 44%, #fff 48%, transparent 52%),
    radial-gradient(.8px .8px at 44% 34%, #bcd6ff 48%, transparent 52%),
    radial-gradient(1.1px 1.1px at 8% 52%, #fff 48%, transparent 52%),
    radial-gradient(.9px .9px at 54% 88%, #a9c4ff 48%, transparent 52%),
    radial-gradient(.8px .8px at 34% 8%, #fff 48%, transparent 52%),
    radial-gradient(1.3px 1.3px at 92% 76%, #e6f3ff 48%, transparent 52%),
    radial-gradient(.8px .8px at 68% 30%, #8fa8f0 48%, transparent 52%),
    radial-gradient(.9px .9px at 18% 40%, #fff 48%, transparent 52%)}
html.jr-live #take1 .stage:not([data-fallback]) .t1Bg::after{opacity:0}

/* layer 1 · the far half of the display line, behind the canvas so the panda occludes it */
#take1 .t1Deep{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  pointer-events:none;will-change:transform,opacity}
#take1 .t1DeepLine{margin:0;font-size:calc(var(--type-display)*.92);font-weight:760;font-stretch:75%;
  line-height:.98;letter-spacing:-.02em;white-space:nowrap;color:rgb(243 244 250 / .26);
  text-shadow:0 0 26px rgb(0 194 255 / .26),0 0 70px rgb(44 82 209 / .36);
  filter:blur(1.7px);transform:translateY(-24svh)}

/* layer 2 · the poster panda: the first paint, the sample the particles are cut from,
   and the whole picture in static mode */
#take1 .t1Poster{position:absolute;z-index:2;inset-inline:0;top:50%;display:flex;justify-content:center;
  pointer-events:none;transform:translateY(-52%);transition:opacity .85s ease-out}
#take1 .t1Poster img{display:block;width:min(84vw,322px);height:auto;
  filter:drop-shadow(0 0 60px rgb(0 194 255 / .22)) drop-shadow(0 22px 60px rgb(0 0 0 / .9))}
/* live: the particles are the panda; the poster only returns if the scene fails */
html.jr-live #take1 .t1Poster{opacity:0;transition:none}
html.jr-live #take1 .stage[data-fallback] .t1Poster{opacity:1}
/* governed down (take.js): the poster is the figure at rest, the particles take over at the charge */
html.jr-live #take1 .stage[data-t1-poster] .t1Poster{opacity:1}
html.jr-live #take1 .stage[data-t1-poster] .t1Poster img{will-change:transform}

/* layer 5 · the vignette: a galaxy has dark corners */
#take1 .t1Veil{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    radial-gradient(128% 90% at 50% 44%, rgba(1,1,4,0) 38%, rgba(1,1,4,.62) 100%),
    linear-gradient(to bottom, rgba(1,1,4,.5) 0%, rgba(1,1,4,0) 15%),
    linear-gradient(to top, rgba(1,1,4,.8) 0%, rgba(1,1,4,.34) 17%, rgba(1,1,4,0) 40%)}

/* layer 6 · the near half of the type, the h1, the sub line and the actions */
#take1 .t1Near{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
  justify-content:space-between;padding-block:calc(20px + env(safe-area-inset-top,0px)) 58px;
  will-change:transform,opacity;pointer-events:none}
#take1 .t1Copy,#take1 .t1Actions{pointer-events:auto}
#take1 .t1NearTop,#take1 .t1NearBottom{width:var(--container);margin-inline:auto}
#take1 .t1Line1{margin:0;font-size:var(--type-display);font-weight:760;font-stretch:75%;line-height:.98;
  letter-spacing:-.02em;word-spacing:.03em;color:var(--color-paper);text-shadow:0 2px 40px rgb(0 0 0 / .8)}
#take1 .t1Line1 .mark{color:#fff}
#take1 h1{margin:0;font-size:1.1875rem;font-weight:760;font-stretch:75%;line-height:1.22;letter-spacing:-.01em;
  max-width:26ch;color:var(--color-paper);text-shadow:0 1px 24px rgb(0 0 0 / .9)}
#take1 .t1Sub{margin:10px 0 0;max-width:40ch;font-size:.9375rem;line-height:1.55;color:var(--color-on-ink-muted);
  text-shadow:0 1px 18px rgb(0 0 0 / .85)}
#take1 .t1Actions{display:flex;gap:12px;margin-top:20px}

#take1 .t1Btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  gap:.625rem;min-height:56px;border-radius:var(--radius-pill);font:inherit;font-size:1.0625rem;
  font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;border:0}
#take1 .t1Btn:active{transform:scale(.97)}
#take1 .t1Btn:focus-visible{outline:3px solid var(--color-cyan);outline-offset:3px}
#take1 .t1BtnPrimary{padding-inline:48px 28px;overflow:clip;background:var(--color-card);color:var(--color-ink);
  transition:color .22s var(--ease-out)}
#take1 .t1BtnPrimary::before{content:"";position:absolute;z-index:-1;inset-inline-start:22px;top:calc(50% - 5px);
  width:10px;height:10px;border-radius:50%;background:var(--color-blue);transition:transform .22s var(--ease-out)}
#take1 .t1BtnPrimary:hover::before,#take1 .t1BtnPrimary:focus-visible::before{transform:scale(48);background:var(--color-blue)}
#take1 .t1BtnPrimary:hover,#take1 .t1BtnPrimary:focus-visible{color:var(--color-card)}
#take1 .t1BtnGhost{padding-inline:24px;border:1.5px solid rgb(243 244 250 / .45);background:transparent;
  color:var(--color-paper);transition:background-color .22s var(--ease-out)}
#take1 .t1BtnGhost:hover,#take1 .t1BtnGhost:focus-visible{background:rgb(243 244 250 / .12)}
@media (max-width:399.98px){#take1 .t1BtnGhost{width:56px;padding:0}#take1 .t1BtnGhost span{display:none}}

/* the scroll cue: the falling cyan line only (the old hint's words are not in the content) */
#take1 .t1Hint{position:absolute;z-index:6;inset-inline:0;bottom:calc(10px + env(safe-area-inset-bottom,0px));
  margin:0;display:flex;justify-content:center;pointer-events:none}
#take1 .t1Hint i{display:block;width:1px;height:26px;
  background:linear-gradient(to bottom,rgb(0 194 255 / .9),transparent);animation:t1fall 2.4s var(--ease-out) infinite}
@keyframes t1fall{0%{transform:translateY(-14px) scaleY(.4);opacity:0}35%{opacity:1}100%{transform:translateY(14px) scaleY(1);opacity:0}}

/* ------------------------------------------------------------- who we are */
#take1 .t1Who{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;justify-content:center;
  padding-inline:var(--gutter);padding-block:calc(var(--hud-h) + 24px) 12svh;pointer-events:none;
  opacity:0;visibility:hidden;will-change:transform,opacity}
#take1 .t1WhoLine{margin:0;max-width:15ch;font-size:clamp(2.125rem,1.1rem + 4.2vw,5.25rem);font-weight:700;
  font-stretch:78%;line-height:1.1;letter-spacing:-.015em;color:#fff;text-wrap:balance;
  text-shadow:0 2px 36px rgb(1 1 4 / .9)}
#take1 .t1WhoTeam{margin:.9em 0 0;font-size:clamp(1.25rem,1.05rem + .9vw,1.875rem);font-weight:600;
  font-stretch:85%;line-height:1.3;color:var(--color-on-ink-muted);text-shadow:0 1px 24px rgb(1 1 4 / .9)}

/* at 390 the HUD owns the top 64px of the visual left: the display line starts under it */
@media (max-width:767.98px){#take1 .t1Near{padding-block-start:calc(var(--hud-h) + 6px + env(safe-area-inset-top,0px))}}
@media (min-width:768px){
  #take1 .t1Line1{font-size:min(var(--type-display),15vw)}
  #take1 h1{font-size:1.5rem;max-width:34ch}
  #take1 .t1Sub{font-size:1.0625rem;max-width:52ch}
  #take1 .t1DeepLine{font-size:min(calc(var(--type-display)*.92),14vw);transform:translateY(-23svh)}
  #take1 .t1Poster img{width:min(46vw,420px)}
  #take1 .t1Who{padding-inline:calc(var(--gutter) + 6vw)}
}
@media (min-width:1200px){
  #take1 .t1Near{padding-block:6svh 6svh}
  #take1 .t1NearTop,#take1 .t1NearBottom{display:flex;align-items:flex-end;justify-content:flex-start;gap:clamp(24px,3vw,56px)}
  #take1 .t1Deep{align-items:flex-start;justify-content:flex-end;
    padding-block-start:21svh;padding-inline-end:calc(var(--gutter) + 3vw)}
  #take1 .t1DeepLine{transform:none;font-size:min(calc(var(--type-display)*.92),8.2vw,7rem)}
  #take1 .t1Line1{font-size:min(var(--type-display),11.5vw,9.5rem)}
  #take1 .t1Copy{max-width:46ch}
  #take1 .t1Actions{margin-top:0;flex:none}
  #take1 .t1Who{padding-inline:calc(var(--gutter) + 10vw)}
  #take1 .t1WhoLine{max-width:21ch;font-size:clamp(3rem,1rem + 3.2vw,4.5rem)}
}

/* ------------------------------------------------ static mode: the poster, then the line */
html:not(.jr-live) #take1 .stage{background:var(--void-edge)}
html:not(.jr-live) #take1 .canvasHost{display:none}
html:not(.jr-live) #take1 .t1Hero{position:relative;min-height:100svh}
html:not(.jr-live) #take1 .t1Hint{display:none}
/* no camera to fly through it: the far half of the line is plain, readable copy over the panda */
html:not(.jr-live) #take1 .t1Deep{z-index:3}
html:not(.jr-live) #take1 .t1DeepLine{color:var(--color-paper);filter:none;text-shadow:0 2px 40px rgb(0 0 0 / .8)}
html:not(.jr-live) #take1 .t1Who{position:relative;inset:auto;opacity:1;visibility:visible;
  padding-block:clamp(96px,22svh,240px) clamp(120px,26svh,280px);
  background:radial-gradient(90% 60% at 60% 40%, rgb(9 12 38 / .9) 0%, rgb(1 1 3 / 0) 70%)}
html:not(.jr-live) #take1 .t1Who::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1.2px 1.2px at 14% 18%, #fff 48%, transparent 52%),
    radial-gradient(.9px .9px at 82% 10%, #cfe6ff 48%, transparent 52%),
    radial-gradient(1.5px 1.5px at 70% 84%, #fff 48%, transparent 52%),
    radial-gradient(.8px .8px at 32% 90%, #9fb6ff 48%, transparent 52%),
    radial-gradient(1px 1px at 92% 58%, #fff 48%, transparent 52%),
    radial-gradient(.8px .8px at 6% 66%, #bcd6ff 48%, transparent 52%)}
@media (prefers-reduced-motion:reduce){#take1 .t1Hint i{animation:none;opacity:.7;transform:none}}