/* An opt-in decorative atmosphere for Services and Personal Gallery only. */
body.immersive-gold > .gold-atmosphere {
  --atmosphere-gold: 207 181 140;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  perspective: 1100px;
  pointer-events: none;
  user-select: none;
}

body.immersive-gold > .gold-atmosphere::before,
body.immersive-gold > .gold-atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body.immersive-gold > .gold-atmosphere::before {
  opacity: .32;
  background-image:
    radial-gradient(circle, rgb(var(--atmosphere-gold) / .64) 0 .5px, transparent .9px),
    radial-gradient(circle, rgb(240 237 229 / .42) 0 .4px, transparent .75px),
    radial-gradient(circle, rgb(var(--atmosphere-gold) / .36) 0 .65px, transparent 1px);
  background-size: 127px 163px, 223px 197px, 311px 281px;
  background-position: 31px 21px, 83px 117px, 179px 53px;
  mask-image: linear-gradient(transparent, #000 11%, #000 91%, transparent);
}

body.immersive-gold > .gold-atmosphere::after {
  background:
    radial-gradient(ellipse at 2% 22%, rgb(var(--atmosphere-gold) / .055), transparent 36%),
    radial-gradient(ellipse at 94% 77%, rgb(var(--atmosphere-gold) / .045), transparent 38%);
}

body.immersive-gold .gold-atmosphere-shard {
  --gold-x: 8;
  --gold-y: 16;
  --gold-size: clamp(90px, 10vw, 155px);
  --gold-ratio: .9;
  --gold-turn: -22deg;
  --gold-tilt-x: 0deg;
  --gold-tilt-y: 0deg;
  --gold-drift-x: 0px;
  --gold-drift-y: 0px;
  --gold-opacity: .36;
  --gold-light: .2;
  --gold-sheen: -20%;
  --gold-shape: polygon(48% 0, 100% 36%, 73% 94%, 22% 100%, 0 42%);
  position: absolute;
  left: calc(var(--gold-x) * 1%);
  top: calc(var(--gold-y) * 1%);
  display: block;
  width: var(--gold-size);
  aspect-ratio: var(--gold-ratio);
  opacity: var(--gold-opacity);
  transform: translate3d(calc(-50% + var(--gold-drift-x)), calc(-50% + var(--gold-drift-y)), 0) rotateX(var(--gold-tilt-x)) rotateY(var(--gold-tilt-y)) rotateZ(var(--gold-turn));
  transform-origin: center;
  filter: drop-shadow(0 12px 19px rgb(0 0 0 / .35)) drop-shadow(0 0 11px rgb(var(--atmosphere-gold) / .055));
  pointer-events: none;
}

body.immersive-gold .gold-atmosphere-shard:nth-child(2) { --gold-x: 88; --gold-y: 10; --gold-turn: 24deg; --gold-ratio: .55; --gold-shape: polygon(34% 0, 100% 24%, 66% 100%, 0 77%); }
body.immersive-gold .gold-atmosphere-shard:nth-child(3) { --gold-x: 76; --gold-y: 42; --gold-turn: -11deg; --gold-ratio: 1.4; }
body.immersive-gold .gold-atmosphere-shard:nth-child(4) { --gold-x: 13; --gold-y: 53; --gold-turn: 14deg; --gold-ratio: .7; --gold-shape: polygon(50% 0, 100% 34%, 56% 100%, 0 71%); }
body.immersive-gold .gold-atmosphere-shard:nth-child(5) { --gold-x: 90; --gold-y: 79; --gold-turn: -29deg; --gold-ratio: .62; }
body.immersive-gold .gold-atmosphere-shard:nth-child(6) { --gold-x: 36; --gold-y: 88; --gold-turn: 9deg; --gold-ratio: 1.25; --gold-shape: polygon(15% 0, 77% 15%, 100% 79%, 32% 100%, 0 45%); }
body.immersive-gold .gold-atmosphere-shard:nth-child(7) { --gold-x: 46; --gold-y: 23; --gold-turn: 33deg; --gold-ratio: .8; }

body.immersive-gold .gold-atmosphere-crystal {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  clip-path: var(--gold-shape);
  isolation: isolate;
  background:
    linear-gradient(133deg, rgb(240 237 229 / .54), transparent 16% 71%, rgb(var(--atmosphere-gold) / .38)),
    linear-gradient(38deg, rgb(var(--atmosphere-gold) / .07) 0 47.6%, rgb(240 237 229 / .5) 48% 48.4%, rgb(21 21 18 / .25) 48.8% 100%),
    conic-gradient(from 24deg at 48% 41%, rgb(var(--atmosphere-gold) / .2), transparent 23%, rgb(var(--atmosphere-gold) / .1) 46%, rgb(240 237 229 / .18) 63%, transparent 81%);
  box-shadow: inset 0 0 26px rgb(var(--atmosphere-gold) / .11);
}

body.immersive-gold .gold-atmosphere-crystal::before,
body.immersive-gold .gold-atmosphere-crystal::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body.immersive-gold .gold-atmosphere-crystal::before {
  background:
    linear-gradient(155deg, transparent 31%, rgb(var(--atmosphere-gold) / .52) 31.3% 31.6%, transparent 32%),
    linear-gradient(65deg, transparent 56%, rgb(240 237 229 / .3) 56.3% 56.6%, transparent 57%),
    linear-gradient(116deg, transparent 40%, rgb(var(--atmosphere-gold) / .22) 40.4% 40.8%, transparent 41.2%);
}

body.immersive-gold .gold-atmosphere-crystal::after {
  inset: -40%;
  opacity: calc(.06 + var(--gold-light) * .36);
  background: linear-gradient(112deg, transparent 30%, rgb(var(--atmosphere-gold) / .08) 42%, rgb(240 237 229 / .85) 48%, rgb(var(--atmosphere-gold) / .3) 51%, transparent 62%);
  transform: translate3d(var(--gold-sheen), 0, 0) rotate(-15deg);
  mix-blend-mode: screen;
}

body.immersive-gold .gold-atmosphere.is-motion-enabled .gold-atmosphere-shard {
  will-change: transform;
  transition: opacity .9s ease;
}

@starting-style {
  body.immersive-gold .gold-atmosphere.is-motion-enabled .gold-atmosphere-shard { opacity: 0; }
}

@media (max-width: 760px) {
  body.immersive-gold > .gold-atmosphere::before { opacity: .23; background-size: 147px 173px, 233px 217px, 331px 301px; }
  body.immersive-gold .gold-atmosphere-shard { --gold-size: clamp(56px, 18vw, 85px); --gold-opacity: .29; }
  body.immersive-gold .gold-atmosphere-shard:nth-child(1) { --gold-x: 8; --gold-y: 14; }
  body.immersive-gold .gold-atmosphere-shard:nth-child(2) { --gold-x: 91; --gold-y: 36; }
  body.immersive-gold .gold-atmosphere-shard:nth-child(3) { --gold-x: 13; --gold-y: 70; }
  body.immersive-gold .gold-atmosphere-shard:nth-child(4) { --gold-x: 85; --gold-y: 91; }
  body.immersive-gold .gold-atmosphere-shard:nth-child(n + 5) { display: none; }
}

body.immersive-gold .gold-atmosphere:not(.is-motion-enabled) .gold-atmosphere-shard,
.motion-paused body.immersive-gold .gold-atmosphere-shard,
body.immersive-gold.motion-paused .gold-atmosphere-shard { will-change: auto !important; transition: none !important; }
.motion-paused body.immersive-gold .gold-atmosphere-crystal::after,
body.immersive-gold.motion-paused .gold-atmosphere-crystal::after { opacity: .1; transform: rotate(-15deg); }

@media (prefers-reduced-motion: reduce) {
  body.immersive-gold .gold-atmosphere-shard { will-change: auto !important; transition: none !important; }
  body.immersive-gold .gold-atmosphere-crystal::after { opacity: .1; transform: rotate(-15deg); }
}