/* ==========================================================
   Berex holding page: shared base
   The logo image is always shown exactly as supplied.
   Effects sit behind it. The one exception is Trajectory,
   where a brief light passes through the swoosh.
   ========================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:#03060b}
body{overflow:hidden}

/* The stage fills the window; the scene inside sizes everything
   from the stage using container units, so one set of rules works
   on phone, tablet and desktop. */
.stage{position:fixed;inset:0;overflow:hidden;background:#03060b;container-type:size;isolation:isolate}
.scene{
  position:absolute;inset:0;
  --blue:0 171 230;                          /* brand blue, sampled from the swoosh */
  --lw:min(84cqw, max(52cqw, 560px), 980px, 125cqh);  /* logo width */
  --lh:calc(var(--lw) * .3732);              /* logo height (552/1479) */
  --lift:2.5cqh;                             /* optical centring */
  --cy:calc(50% - var(--lift));
  /* The swoosh is an arc of a circle. Its centre and radius, in
     page terms, let the effects line up with it at any size. */
  --ox:calc(50% + .6327 * var(--lw));
  --oy:calc(var(--cy) + .3105 * var(--lw));
  --R:calc(.4974 * var(--lw));
}
.layer{position:absolute;inset:0;pointer-events:none}

.logo{position:absolute;left:50%;top:var(--cy);width:var(--lw);margin:0;translate:-50% -50%;z-index:20;line-height:0;
  animation:logo-in 1.3s cubic-bezier(.2,.7,.2,1) .3s backwards}
.logo img{display:block;width:100%;height:auto}
@keyframes logo-in{from{opacity:0;filter:blur(14px);scale:.965}to{opacity:1;filter:blur(0);scale:1}}

/* Soft light behind the logo, and a breathing glow behind the swoosh */
.halo{position:absolute;z-index:2;left:50%;top:var(--cy);width:calc(var(--lw) * 1.7);height:calc(var(--lw) * .95);translate:-50% -50%;
  background:radial-gradient(closest-side, rgb(var(--blue) / .12), rgb(var(--blue) / .045) 55%, transparent)}
.glow{position:absolute;z-index:3;left:calc(50% + .278 * var(--lw));top:calc(var(--cy) - .037 * var(--lw));width:calc(var(--lw) * .8);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side, rgb(var(--blue) / .2), rgb(var(--blue) / .07) 50%, transparent);
  animation:breathe 7s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.6;scale:.94}to{opacity:1;scale:1.04}}

/* A faint, static scatter of distant stars */
.dust{z-index:1;background:url(assets/stars-far.svg) 0 0 / 520px 520px;opacity:.45}

.fx-in{animation:fx-in 1.8s ease-out backwards}
@keyframes fx-in{from{opacity:0}}

.vignette{z-index:15;background:radial-gradient(130% 95% at 50% 46%, transparent 42%, rgb(0 0 0 / .62) 100%)}
.grain{z-index:16;background:url(assets/noise.png) 0 0 / 128px 128px;opacity:.28}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important}
}

/* ==========================================================
   Concept 2: Deep space
   Layered stars drift slowly down and to the left, at three
   depths, so the page feels like it is travelling up and to
   the right with the swoosh. Soft nebula light, gentle
   twinkling and an occasional shooting star.
   ========================================================== */
/* Logo: at most 500px wide, and smaller on narrow or short screens */
.scene{--lw:min(84cqw, 500px, 125cqh);--lift:0px}

.sky{z-index:0;background:radial-gradient(120% 90% at 50% 40%, #07101d, #03060b 70%)}
.nebula{z-index:1;inset:-15%;background:
  radial-gradient(38% 32% at 28% 72%, rgb(22 64 150 / .30), transparent 70%),
  radial-gradient(34% 28% at 76% 26%, rgb(62 44 160 / .20), transparent 70%),
  radial-gradient(30% 26% at 62% 52%, rgb(var(--blue) / .10), transparent 70%);
  animation:nebula 48s ease-in-out infinite alternate}
@keyframes nebula{to{translate:3% -2%;scale:1.07;rotate:2deg}}

/* Star layers: each one tiles and slides exactly one tile, so the
   loop is seamless. Speeds increase with depth for parallax. */
.stars{position:absolute;left:0;top:calc(-1 * var(--T));width:calc(100% + var(--T));height:calc(100% + var(--T));
  background:var(--img) 0 0 / var(--T) var(--T);animation:drift var(--dur) linear infinite}
@keyframes drift{to{translate:calc(-1 * var(--T)) var(--T)}}
.s1{z-index:3;--T:520px;--dur:300s;--img:url(assets/stars-far.svg)}
.s2{z-index:4;--T:680px;--dur:190s;--img:url(assets/stars-mid.svg)}
.s3{z-index:5;--T:860px;--dur:110s;--img:url(assets/stars-near.svg)}
.t1{z-index:6;--T:740px;--dur:95s;--img:url(assets/twinkle-a.svg);
  animation:drift var(--dur) linear infinite, twinkle 4.3s ease-in-out infinite alternate}
.t2{z-index:6;--T:900px;--dur:115s;--img:url(assets/twinkle-b.svg);
  animation:drift var(--dur) linear infinite, twinkle 5.9s ease-in-out -2s infinite alternate}
@keyframes twinkle{from{opacity:.15}to{opacity:1}}

/* Shooting stars */
.shoot{position:absolute;z-index:7;width:170px;height:1.5px;border-radius:2px;rotate:-24deg;
  background:linear-gradient(90deg, #fff, rgb(var(--blue) / .5) 30%, transparent);
  opacity:0;animation:shoot var(--t) cubic-bezier(.3,.2,.6,1) var(--d) infinite}
@keyframes shoot{
  0%{transform:translateX(0);opacity:0}
  1.5%{opacity:1}
  8%,100%{transform:translateX(-42cqmax);opacity:0}
}
.sh1{top:14%;left:82%;--t:15s;--d:4s}
.sh2{top:6%;left:46%;--t:23s;--d:12s}