/** Decorative photography SVG watermarks + motion. */

.deco-icon {
  --deco-opacity: 0.22;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--color-primary);
  opacity: var(--deco-opacity);
}

.deco-icon svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.deco-icon .deco-stroke {
  vector-effect: non-scaling-stroke;
}

.deco-icon .deco-fill {
  vector-effect: non-scaling-stroke;
}

/* ---- Placement modifiers ---- */
.deco-icon--gallery-right {
  right: clamp(0.5rem, 4vw, 3rem);
  bottom: clamp(-2.5rem, -4vw, -0.5rem);
  width: min(200px, 26vw);
  --deco-opacity: 0.28;
}

.deco-icon--gallery-right.is-deco-live {
  animation: deco-wobble 6s ease-in-out infinite;
}

.deco-icon--gallery-left {
  left: clamp(0.25rem, 3vw, 2rem);
  top: clamp(-1rem, 2vw, 1.5rem);
  width: min(140px, 18vw);
  --deco-opacity: 0.18;
}

.deco-icon--gallery-aperture {
  left: 50%;
  top: 50%;
  width: min(160px, 22vw);
  margin-left: min(-80px, -11vw);
  margin-top: min(-90px, -12vw);
  --deco-opacity: 0.2;
}

.deco-icon--about {
  left: clamp(-2rem, -3vw, 0rem);
  top: 12%;
  width: min(220px, 32vw);
  --deco-opacity: 0.24;
}

.deco-icon--about-tripod {
  right: clamp(0.5rem, 3vw, 2rem);
  bottom: 6%;
  width: min(130px, 18vw);
  --deco-opacity: 0.26;
}

.deco-icon--services {
  right: clamp(0.5rem, 3vw, 2rem);
  top: 10%;
  width: min(170px, 22vw);
  --deco-opacity: 0.2;
}

.deco-icon--services-light {
  left: clamp(0.25rem, 2vw, 1.5rem);
  bottom: 4%;
  width: min(160px, 22vw);
  --deco-opacity: 0.26;
}

.deco-icon--services-drone {
  right: clamp(1rem, 8vw, 6rem);
  bottom: 14%;
  width: min(140px, 20vw);
  --deco-opacity: 0.24;
}

.deco-icon--portfolio-light {
  right: clamp(0.5rem, 4vw, 3rem);
  top: clamp(3rem, 8vh, 5rem);
  width: min(150px, 20vw);
  --deco-opacity: 0.22;
}

.deco-icon--portfolio-tripod {
  left: clamp(0.5rem, 4vw, 3rem);
  bottom: clamp(4rem, 12vh, 8rem);
  width: min(120px, 16vw);
  --deco-opacity: 0.2;
}

/* ---- Reveal (own observer — not tied to parent section fade) ---- */
.no-js .deco-icon,
.deco-icon.is-deco-live {
  opacity: var(--deco-opacity);
}

.has-animations .deco-icon:not(.is-deco-live) {
  opacity: 0;
  transform: translateY(12px) scale(0.96);
}

.has-animations .deco-icon.is-deco-live {
  opacity: var(--deco-opacity);
  transform: translateY(0) scale(1);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

/* ---- Stroke draw-in after reveal ---- */
.deco-icon--anim-draw.is-deco-live .deco-stroke:not(.deco-fill) {
  stroke-dasharray: 260;
  animation: deco-draw 2.2s ease forwards;
}

.deco-icon--anim-draw.is-deco-live .deco-stroke:not(.deco-fill):nth-of-type(2n) {
  animation-delay: 0.08s;
}

.deco-icon--anim-draw.is-deco-live .deco-stroke:not(.deco-fill):nth-of-type(3n) {
  animation-delay: 0.16s;
}

@keyframes deco-draw {
  from {
    stroke-dashoffset: 260;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* ---- Icon motion loops (run once live) ---- */
.deco-icon.is-deco-live.deco-icon--anim-float .deco-svg,
.deco-icon.is-deco-live.deco-icon--anim-float .deco-anim-tripod,
.deco-icon.is-deco-live.deco-icon--anim-float .deco-anim-studio,
.deco-icon.is-deco-live.deco-icon--anim-float .deco-anim-drone,
.deco-icon.is-deco-live.deco-icon--anim-float .deco-anim-lens {
  animation: deco-float 4.5s ease-in-out infinite;
  transform-origin: center center;
}

.deco-icon.is-deco-live.deco-icon--anim-sway .deco-anim-tripod {
  animation: deco-sway 5s ease-in-out infinite;
  transform-origin: 50% 88%;
}

.deco-icon.is-deco-live.deco-icon--anim-rotate .deco-anim-aperture {
  animation: deco-rotate 22s linear infinite;
  transform-origin: 50% 50%;
}

.deco-icon.is-deco-live.deco-icon--anim-drift .deco-anim-drone {
  animation: deco-drift 5.5s ease-in-out infinite;
}

.deco-icon.is-deco-live.deco-icon--anim-rays .deco-ray {
  animation: deco-ray-pulse 1.8s ease-in-out infinite;
}

.deco-icon.is-deco-live.deco-icon--anim-rays .deco-ray:nth-child(2) {
  animation-delay: 0.2s;
}

.deco-icon.is-deco-live.deco-icon--anim-rays .deco-ray:nth-child(3) {
  animation-delay: 0.4s;
}

.deco-icon.is-deco-live.deco-icon--anim-pulse .deco-anim-studio {
  animation: deco-pulse 3.5s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes deco-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes deco-wobble {
  0%,
  100% {
    transform: rotate(-14deg) translateY(0);
  }

  50% {
    transform: rotate(-11deg) translateY(-8px);
  }
}

@keyframes deco-sway {
  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(4deg);
  }
}

@keyframes deco-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes deco-drift {
  0%,
  100% {
    transform: translate(0, 0);
  }

  33% {
    transform: translate(8px, -6px);
  }

  66% {
    transform: translate(-4px, -12px);
  }
}

@keyframes deco-ray-pulse {
  0%,
  100% {
    opacity: 0.25;
    stroke-width: 1.75;
  }

  50% {
    opacity: 1;
    stroke-width: 2.25;
  }
}

@keyframes deco-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.04);
    opacity: 0.92;
  }
}

@media (max-width: 767.98px) {
  .deco-icon--gallery-right {
    width: min(130px, 34vw);
    --deco-opacity: 0.26;
  }

  .deco-icon--gallery-left {
    display: block;
    width: min(90px, 24vw);
    --deco-opacity: 0.16;
  }

  .deco-icon--about,
  .deco-icon--about-tripod {
    display: block;
    width: min(100px, 28vw);
    --deco-opacity: 0.2;
  }

  .deco-icon--about {
    top: 4%;
    left: auto;
    right: 0.5rem;
  }

  .deco-icon--about-tripod {
    bottom: 2%;
    right: auto;
    left: 0.5rem;
  }

  .deco-icon--services-light,
  .deco-icon--services-drone {
    display: block;
    width: min(96px, 26vw);
  }

  .deco-icon--services,
  .deco-icon--portfolio-light,
  .deco-icon--portfolio-tripod,
  .deco-icon--gallery-aperture {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deco-icon.is-deco-live.deco-icon--anim-float .deco-svg,
  .deco-icon.is-deco-live.deco-icon--anim-float .deco-anim-tripod,
  .deco-icon.is-deco-live.deco-icon--anim-float .deco-anim-studio,
  .deco-icon.is-deco-live.deco-icon--anim-float .deco-anim-drone,
  .deco-icon.is-deco-live.deco-icon--anim-sway .deco-anim-tripod,
  .deco-icon.is-deco-live.deco-icon--anim-rotate .deco-anim-aperture,
  .deco-icon.is-deco-live.deco-icon--anim-drift .deco-anim-drone,
  .deco-icon.is-deco-live.deco-icon--anim-rays .deco-ray,
  .deco-icon.is-deco-live.deco-icon--anim-pulse .deco-anim-studio,
  .deco-icon--gallery-right.is-deco-live {
    animation: none !important;
  }

  .deco-icon--anim-draw.is-deco-live .deco-stroke:not(.deco-fill) {
    animation: none !important;
    stroke-dashoffset: 0;
  }

  .has-animations .deco-icon:not(.is-deco-live) {
    opacity: var(--deco-opacity);
    transform: none;
  }
}