/* Ambient light animations layered over the desk photo — positioned as percentages
   of the photo so they track it at any size. Everything here is decorative and
   inert (pointer-events: none), sitting between the <img> and the interactive
   screens/terminal so it never blocks clicks. */

.desk-glow-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.desk-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(7px);
  mix-blend-mode: screen;
  opacity: 0.55;
}

/* Desk lamp — warm amber breathing glow (slow, but strong swing between dim and bright). */
.desk-glow--lamp {
  top: 12.5%;
  left: 9.3%;
  width: 6.5%;
  height: 11.5%;
  background: radial-gradient(circle, rgba(255, 205, 125, 0.9), rgba(255, 150, 40, 0.4) 55%, transparent 78%);
  opacity: 0.5;
  animation: desk-glow-lamp-breathe 3.6s ease-in-out infinite;
}

/* iacine tech neon sign — measured directly off the photo's pixels (same
   edge-detection method as the screens) so the halo sits exactly on the tube,
   not spilling over the wall around it. Two independent, unsynced animations:
   a slow breathing pulse, and an even slower hue drift sweeping the glow
   through the site's own blue -> violet -> pink brand gradient, like a real
   neon tube cycling color. */
.desk-glow--neon {
  top: 1.3%;
  left: 45.7%;
  width: 11.4%;
  height: 18.5%;
  background: radial-gradient(ellipse, rgba(140, 180, 255, 0.9), rgba(184, 107, 240, 0.5) 55%, transparent 78%);
  filter: blur(10px) hue-rotate(0deg);
  transform-origin: center;
  animation: desk-glow-neon-breathe 5.2s ease-in-out infinite, desk-glow-neon-hue 9s ease-in-out infinite;
}

/* PC tower fans — vivid rainbow RGB cycle via hue-rotate, each fan slowly rotating
   in place (like the physical blades turning) while its color sweeps. */
.desk-glow--fan {
  filter: blur(7px) hue-rotate(0deg);
  mix-blend-mode: screen;
  opacity: 0.85;
  animation: desk-glow-rgb-cycle 6s linear infinite, desk-glow-fan-spin 5.5s ease-in-out infinite;
}

.desk-glow--fan-top {
  top: 42.3%;
  left: 89.6%;
  width: 5.6%;
  height: 11%;
  background: radial-gradient(circle, rgba(140, 210, 255, 1), rgba(160, 130, 255, 0.5) 55%, transparent 78%);
  animation-delay: 0s, 0s;
}

.desk-glow--fan-mid {
  top: 54%;
  left: 89.6%;
  width: 5.6%;
  height: 11%;
  background: radial-gradient(circle, rgba(255, 140, 210, 1), rgba(130, 190, 255, 0.5) 55%, transparent 78%);
  animation-delay: -2s, -1.8s;
}

.desk-glow--fan-bottom {
  top: 65.7%;
  left: 89.6%;
  width: 5.6%;
  height: 11%;
  background: radial-gradient(circle, rgba(150, 255, 210, 1), rgba(160, 130, 255, 0.5) 55%, transparent 78%);
  animation-delay: -4s, -3.6s;
}

.desk-glow--fan-side {
  top: 43.4%;
  left: 76.3%;
  width: 5.2%;
  height: 10%;
  background: radial-gradient(circle, rgba(190, 150, 255, 0.95), rgba(130, 210, 255, 0.45) 55%, transparent 78%);
  animation-delay: -3s, -2.7s;
}

/* Microphone — its own gradient capsule light, slow color drift. */
.desk-glow--mic {
  top: 43%;
  left: 3%;
  width: 8.5%;
  height: 17%;
  border-radius: 40% 40% 45% 45%;
  background: linear-gradient(180deg, rgba(255, 130, 200, 0.6), rgba(140, 160, 255, 0.55) 60%, transparent 90%);
  filter: blur(8px);
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: desk-glow-mic-drift 5s ease-in-out infinite;
}

/* Gaming mouse — small pulsing ring at its base. */
.desk-glow--mouse {
  top: 87%;
  left: 74.5%;
  width: 4.5%;
  height: 6%;
  background: radial-gradient(circle, rgba(150, 130, 255, 0.85), rgba(120, 170, 255, 0.3) 55%, transparent 75%);
  filter: blur(6px);
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: desk-glow-rgb-cycle 6s linear infinite, desk-glow-breathe 2.2s ease-in-out infinite;
}

/* Keyboard — tiny micro-highlights sitting exactly on the existing per-key RGB
   sidelight strips baked into the photo (magenta -> amber -> green -> cyan -> blue
   diagonal band), not big neon blobs. */
.desk-glow--key {
  width: 0.9%;
  height: 2.6%;
  filter: blur(2.5px);
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: desk-glow-key-flicker 2.4s ease-in-out infinite;
}

.desk-glow--key-1 {
  top: 83.4%;
  left: 21%;
  background: radial-gradient(circle, rgba(255, 90, 170, 0.95), transparent 72%);
  animation-delay: 0s;
}

.desk-glow--key-2 {
  top: 82.6%;
  left: 28%;
  background: radial-gradient(circle, rgba(255, 175, 80, 0.95), transparent 72%);
  animation-delay: -0.5s;
}

.desk-glow--key-3 {
  top: 82.1%;
  left: 35%;
  background: radial-gradient(circle, rgba(140, 255, 130, 0.95), transparent 72%);
  animation-delay: -1s;
}

.desk-glow--key-4 {
  top: 81.5%;
  left: 42%;
  background: radial-gradient(circle, rgba(110, 220, 255, 0.95), transparent 72%);
  animation-delay: -1.5s;
}

.desk-glow--key-5 {
  top: 80.8%;
  left: 55%;
  background: radial-gradient(circle, rgba(140, 150, 255, 0.95), transparent 72%);
  animation-delay: -2s;
}

@keyframes desk-glow-breathe {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.08);
  }
}

/* Same slow rhythm as desk-glow-breathe but with a much stronger swing between
   dim and bright, per user request ("l'intensité... soit un peu plus fort"). */
@keyframes desk-glow-lamp-breathe {
  0%, 100% {
    opacity: 0.22;
    transform: scale(0.88);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.16);
  }
}

/* Fan glow breathes in size while slowly rotating a few degrees each way, echoing
   the blades turning. */
@keyframes desk-glow-fan-spin {
  0%, 100% {
    opacity: 0.5;
    transform: scale(0.94) rotate(-8deg);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.1) rotate(8deg);
  }
}

@keyframes desk-glow-key-flicker {
  0%, 100% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.15);
  }
}

@keyframes desk-glow-neon-breathe {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.06);
  }
}

/* Sweeps the glow's own color through blue -> violet -> pink and back,
   independently of the breathing pulse above (different duration, so the two
   never fall into lockstep). */
@keyframes desk-glow-neon-hue {
  0%, 100% {
    filter: blur(10px) hue-rotate(0deg);
  }
  50% {
    filter: blur(10px) hue-rotate(40deg);
  }
}

@keyframes desk-glow-rgb-cycle {
  0% {
    filter: blur(9px) hue-rotate(0deg);
  }
  100% {
    filter: blur(9px) hue-rotate(360deg);
  }
}

@keyframes desk-glow-mic-drift {
  0%, 100% {
    opacity: 0.3;
    filter: blur(10px) hue-rotate(0deg);
  }
  50% {
    opacity: 0.5;
    filter: blur(12px) hue-rotate(35deg);
  }
}

/* Coffee steam — thin zigzagging threads rising and dissipating above the cup,
   centered on the actual coffee opening. */
.desk-steam {
  position: absolute;
  top: 66%;
  left: 86%;
  width: 6%;
  height: 15%;
  pointer-events: none;
}

.desk-steam__wisp {
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 60%;
  overflow: visible;
  fill: none;
  stroke: #fffaf2;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 15%, #000 80%, transparent);
  filter: drop-shadow(0 0 1.5px rgba(255, 225, 180, 0.95)) drop-shadow(0 0 4px rgba(255, 200, 150, 0.55));
  mix-blend-mode: plus-lighter;
  animation: desk-steam-rise 3.6s ease-in infinite;
}

.desk-steam__wisp:nth-child(1) {
  left: 25%;
  animation-delay: 0s;
}

.desk-steam__wisp:nth-child(2) {
  left: 50%;
  animation-delay: -1.2s;
  height: 65%;
}

.desk-steam__wisp:nth-child(3) {
  left: 72%;
  animation-delay: -2.4s;
  height: 50%;
}

@keyframes desk-steam-rise {
  0% {
    transform: translateY(0) scale(0.92);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  50% {
    transform: translateY(-55%) scale(1);
    opacity: 0.7;
  }
  85% {
    opacity: 0.25;
  }
  100% {
    transform: translateY(-115%) scale(1.06);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desk-glow,
  .desk-steam__wisp {
    animation: none !important;
  }
}