:root {
  --animation-enlightening-duration: 1;
  --animation-enlightening-shrink-delay: 0.7;
}

@property --gradient-1st-color {
  syntax: "<color>";
  initial-value: white;
  inherits: true;
}

@property --gradient-1st-color-bk {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}

@property --gradient-2st-color {
  syntax: "<color>";
  initial-value: white;
  inherits: true;
}

@property --gradient-2st-color-bk {
  syntax: "<percentage>";
  initial-value: 16%;
  inherits: true;
}

@property --gradient-3st-color {
  syntax: "<color>";
  initial-value: rgba(255, 255, 255, 0.3);
  inherits: true;
}

@property --gradient-3st-color-bk {
  syntax: "<percentage>";
  initial-value: 70%;
  inherits: true;
}

@property --gradient-4st-color {
  syntax: "<color>";
  initial-value: transparent;
  inherits: true;
}

@property --gradient-4st-color-bk {
  syntax: "<percentage>";
  initial-value: 95%;
  inherits: true;
}

@property --bg-dynamic-color {
  syntax: "<color>";
  initial-value: white;
  inherits: true;
}

/*
  HISTORICAL CHANGES 
  1) White circle with blur that expands and the a black one that expands on top
    - Issues
      # Safari has strong glitches with mixing transfor and filter
      
  2) Veil wrappers around that use transform when the children use filter transitions
    - Issues
      # Safari strong glitches can be fixed with questionable CSS (hard to maintain)
      # If the glitches are fixed for Safari then Chrome gets some flickerings

  3) Gradient solution with @properties
    - Issues
      # Will Safari support this???????
*/

.veil {
  --size: 100%;
  --scale-up-factor: 3;
  --start-blur: 0.25em;
  --end-blur-floor: 0.0001em;
  --transition-duration: 2.5s;
  --fade-duration: calc(var(--transition-duration) * 0.8);
  --fade-delay: 0.05s;
  --scale-function: cubic-bezier(0.43, 0.42, 0.14, 1);
  --scale-black-function: cubic-bezier(0.74, 0.73, 0.46, 0.86);
  --bg-color: 255, 255, 255;
  --border-transition: border-radius var(--transition-duration) var(--transition-duration);

  --gradient-1st-color: rgba(var(--bg-color), 1);
  --gradient-1st-color-bk: 0%;
  --gradient-2st-color: rgba(var(--bg-color), 0.9);
  --gradient-2st-color-bk: 10%;
  --gradient-3st-color: rgba(var(--bg-color), 0.34);
  --gradient-3st-color-bk: 66%;
  --gradient-4st-color: transparent;
  --gradient-4st-color-bk: 94%;

  font-size: max(100vw, 100vh);

  width: var(--size);
  height: auto;
  aspect-ratio: 1;

  border-radius: 50%;

  position: absolute;
  left: 50%;
  top: 50%;

  transition: transform var(--transition-duration) var(--scale-function);
  will-change: transform;

  backface-visibility: hidden;
  isolation: isolate;
  contain: layout style;

  transform-style: flat;
  -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
  -webkit-transform-origin: center center;
  transform-origin: center center;

  transform: translate3d(-50%, -50%, 0) scale(0);

  z-index: 600;

  & .veil-orb-effects {
    font-size: inherit;
    position: absolute;
    inset: 0;

    width: 100%;
    height: auto;
    aspect-ratio: 1;

    background-image: radial-gradient(
      circle closest-side,
      var(--gradient-1st-color) var(--gradient-1st-color-bk),
      var(--gradient-2st-color) var(--gradient-2st-color-bk),
      var(--gradient-3st-color) var(--gradient-3st-color-bk),
      var(--gradient-4st-color) var(--gradient-4st-color-bk)
    );

    border-radius: 50%;
    opacity: 1;
    transform: translateZ(0);
    will-change: opacity, background-image;
    backface-visibility: hidden;

    .veil-expanded & {
      animation: expand-gradient var(--transition-duration) var(--scale-function) both;
    }

    /* Fallback for browsers without @property support.
       The support scope is applied to specific elements via the
       `support-css-at-properties` class which receives either
       `reg-props` or `no-reg-props` at DOM ready. */
    .support-css-at-properties.no-reg-props.veil.veil-extended & {
      /* Base: softer initial gradient */
      background-image: radial-gradient(
        circle closest-side,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.9) 12%,
        rgba(255, 255, 255, 0.3) 68%,
        transparent 94%
      );
    }

    /* Layer a brighter halo and fade it in only while extended */
    .support-css-at-properties.no-reg-props.veil.veil-extended &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background-image: radial-gradient(
        circle closest-side,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 18%,
        rgba(255, 255, 255, 0.48) 78%,
        transparent 98%
      );
      opacity: 0;
      transition: opacity var(--transition-duration) var(--scale-function);
      pointer-events: none;
    }

    .support-css-at-properties.no-reg-props.veil.veil-extended &::before {
      opacity: 1;
    }
  }

  &.veil-hidden {
    opacity: 0;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
    transform: translate3d(-50%, -50%, 0) scale(0);
  }

  &.veil-expanded {
    opacity: 1;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(var(--scale-up-factor));
    transform: translate3d(-50%, -50%, 0) scale(var(--scale-up-factor));
  }
}

@keyframes expand-gradient {
  from {
    opacity: 0;
    /* Visible core from the start so the light blooms naturally */
    --gradient-1st-color: rgba(var(--bg-color), 1);
    --gradient-1st-color-bk: 0%;
    --gradient-2st-color: rgba(var(--bg-color), 0.9);
    --gradient-2st-color-bk: 10%;
    --gradient-3st-color: rgba(var(--bg-color), 0.34);
    --gradient-3st-color-bk: 66%;
    --gradient-4st-color: transparent;
    --gradient-4st-color-bk: 94%;
  }
  0.1% {
    opacity: 1;
  }
  /* Grow intensity and widen the bright region */
  25% {
    --gradient-1st-color: rgba(var(--bg-color), 1);
    --gradient-1st-color-bk: 0%;
    --gradient-2st-color: rgba(var(--bg-color), 1);
    --gradient-2st-color-bk: 20%;
    --gradient-3st-color: rgba(var(--bg-color), 0.42);
    --gradient-3st-color-bk: 75%;
    --gradient-4st-color: transparent;
    --gradient-4st-color-bk: 96%;
  }
  50% {
    --gradient-1st-color: rgba(var(--bg-color), 1);
    --gradient-1st-color-bk: 0%;
    --gradient-2st-color: rgba(var(--bg-color), 1);
    --gradient-2st-color-bk: 35%;
    --gradient-3st-color: rgba(var(--bg-color), 0.46);
    --gradient-3st-color-bk: 90%;
    --gradient-4st-color: transparent;
    --gradient-4st-color-bk: 97%;
  }
  75% {
    --gradient-1st-color: rgba(var(--bg-color), 1);
    --gradient-1st-color-bk: 0%;
    --gradient-2st-color: rgba(var(--bg-color), 1);
    --gradient-2st-color-bk: 55%;
    --gradient-3st-color: rgba(var(--bg-color), 0.55);
    --gradient-3st-color-bk: 90%;
    --gradient-4st-color: rgba(var(--bg-color), 0.85);
    --gradient-4st-color-bk: 98%;
  }
  to {
    opacity: 1;
    /* Final: very luminous core, broad inner glow, soft edge */
    --gradient-1st-color: rgba(var(--bg-color), 1);
    --gradient-1st-color-bk: 0%;
    --gradient-2st-color: rgba(var(--bg-color), 1);
    --gradient-2st-color-bk: 65%;
    --gradient-3st-color: rgba(var(--bg-color), 1);
    --gradient-3st-color-bk: 95%;
    --gradient-4st-color: rgba(var(--bg-color), 1);
    --gradient-4st-color-bk: 100%;
  }
}

.veil-white {
  --bg-color: 255, 255, 255;
}

.veil-black {
  --bg-color: 0, 0, 0;
}

#veil-orb {
  top: var(--orb-end-y-position, 50%);
}

#veil-orb-black {
  --start-blur: 0.2em;
  --start-blur: 0.4em;

  z-index: 700;
}

.shrinklightanimation {
  animation: calc(var(--animation-enlightening-duration) * 1s) calc(var(--animation-enlightening-shrink-delay) * 1s)
    ease-out both enlightening-shrink;
}

.expandlightanimation {
  animation: calc(var(--animation-enlightening-duration) * 1s) 0.7s ease-in-out both enlightening-expand;
}

/* prettier-ignore */
@media
/* iPad Pro resolution portrait */
screen and (max-width: 1024px) and (max-height: 1400px) and (orientation: portrait),
/* iPad Pro resolution landscape */
screen and (max-width: 1400px) and (max-height: 1024px) and (orientation: landscape),
/* iPhone Pro Max resolution lanscape */
screen and (max-height: 960px) and (max-height: 450px) and (orientation: landscape),
/* iPhone Pro Max resolution portrait */
screen and (max-width: 450px) and (max-height: 960px) and (orientation: portrait) {
 .veil {
  --scale-function: cubic-bezier(0.43, 0.4, 0.31, 1);
  --scale-black-function: cubic-bezier(0.5, 0.5, 0.5 ,1);
  --scale-up-factor: 3;
  --start-blur: 0.08em;
  --end-blur-floor: 0.001em;
 }

 #veil-orb-black {
  --start-blur: 0.2em;
 }
}