/* Foxx Studio preview: home hero particle logo (.ph). Script: js/home-particles.js.
   This file styles only .ph, .ph-c, .ph-fb, .ph-vig and .ph--static / .ph--on.
   The box of .ph-fb (the fallback image) is also where the script places the 3D logo,
   so move the logo by changing --ph-x / --ph-y / --ph-w here. */

.ph {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  --ph-x: 76%;   /* logo centre, from the left */
  --ph-y: 37%;   /* logo centre, from the top */
  --ph-w: 40%;   /* logo width */
  --ph-wmax: 85vh; /* height limit, written as a width (logo is 1.526 : 1) */
  --ph-tx: 44%;  /* text shade: fully dark up to here (from the left) */
  --ph-ty: 44%;  /* text shade: fully dark up to here (from the bottom) */
}
@supports (height: 1svh) {
  .ph { --ph-wmax: 85svh; }
}
/* a faint colour haze behind the logo, only where color-mix works */
@supports (color: color-mix(in srgb, red 10%, transparent)) {
  .ph {
    background: radial-gradient(ellipse 36% 40% at var(--ph-x) var(--ph-y),
      color-mix(in srgb, var(--fx2, #FA3278) 11%, transparent) 0, transparent 100%);
  }
}

/* WebGL canvas: fades in after the first frame is drawn */
.ph-c {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .7s ease;
}
.ph--on .ph-c { opacity: 1; }

/* Fallback image: hidden but laid out (the script reads its box). Shown in static mode. */
.ph-fb {
  position: absolute;
  left: var(--ph-x);
  top: var(--ph-y);
  width: var(--ph-w);
  max-width: var(--ph-wmax);
  height: auto;
  aspect-ratio: 960 / 629;
  transform: translate(-50%, -50%);
  visibility: hidden;
  opacity: 0;
  -webkit-user-select: none;
  user-select: none;
}
.ph--static .ph-c { display: none; }
.ph--static .ph-fb {
  visibility: visible;
  opacity: 1;
  transition: opacity .6s ease;
}
/* no JavaScript at all: show the image too */
@media (scripting: none) {
  .ph-c { display: none; }
  .ph-fb { visibility: visible; opacity: 1; }
}
/* the image is drawn in the Foxx colours; shift its hue roughly for the other Style colours */
html[data-accent="azure"] .ph--static .ph-fb { filter: hue-rotate(190deg) saturate(1.1); }
html[data-accent="teal"] .ph--static .ph-fb { filter: hue-rotate(140deg); }
html[data-accent="amber"] .ph--static .ph-fb { filter: hue-rotate(14deg); }

/* Vignette: dark top (header), dark bottom (fact strip) and soft dark corners */
.ph-vig {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 16, 32, .6) 0, rgba(10, 16, 32, 0) 15%),
    linear-gradient(0deg, rgba(10, 16, 32, .92) 0, rgba(10, 16, 32, 0) 20%),
    radial-gradient(ellipse 80% 90% at var(--ph-x) var(--ph-y), rgba(6, 10, 22, 0) 42%, rgba(6, 10, 22, .62) 100%);
}
/* Text shade: a soft-edged dark block behind the hero text (bottom left) so white text keeps its contrast */
.ph-vig::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 32, .92);
  -webkit-mask-image:
    linear-gradient(90deg, #000 0, #000 var(--ph-tx), rgba(0, 0, 0, .8) calc(var(--ph-tx) + 8%), transparent calc(var(--ph-tx) + 18%)),
    linear-gradient(0deg, #000 0, #000 var(--ph-ty), rgba(0, 0, 0, .8) calc(var(--ph-ty) + 5%), transparent calc(var(--ph-ty) + 16%));
  mask-image:
    linear-gradient(90deg, #000 0, #000 var(--ph-tx), rgba(0, 0, 0, .8) calc(var(--ph-tx) + 8%), transparent calc(var(--ph-tx) + 18%)),
    linear-gradient(0deg, #000 0, #000 var(--ph-ty), rgba(0, 0, 0, .8) calc(var(--ph-ty) + 5%), transparent calc(var(--ph-ty) + 16%));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Phones and small tablets: logo top centre, text shade across the full width */
@media (max-width: 819.98px) {
  .ph {
    --ph-x: 50%;
    --ph-y: 25%;
    --ph-w: 86%;
    --ph-wmax: 46vh;
    --ph-tx: 100%;
    --ph-ty: 48%;
  }
  @supports (height: 1svh) {
    .ph { --ph-wmax: 46svh; }
  }
  .ph-vig::before {
    -webkit-mask-image: linear-gradient(0deg, #000 0, #000 var(--ph-ty), rgba(0, 0, 0, .8) calc(var(--ph-ty) + 6%), transparent calc(var(--ph-ty) + 14%));
    mask-image: linear-gradient(0deg, #000 0, #000 var(--ph-ty), rgba(0, 0, 0, .8) calc(var(--ph-ty) + 6%), transparent calc(var(--ph-ty) + 14%));
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
}