/* Effets de thème. Derrière tout le site, sauf la barre de navigation. */

.site-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.site-fx--back {
  clip-path: inset(var(--site-header-h, 0px) 0 0 0);
}
.site-fx--nav {
  z-index: 20;
  clip-path: inset(0 0 calc(100% - var(--site-header-h, 0px)) 0);
}

/* Titres de page : drap pâle, qui flotte. */
[data-theme="halloween"] .page-title,
[data-theme="halloween"] .hero-title {
  color: #f7f4ee;
  text-shadow:
    0 0 10px rgba(247, 244, 238, 0.45),
    0 0 22px rgba(196, 181, 253, 0.22);
  animation: site-fx-title-ghost 4.4s ease-in-out infinite;
}
@keyframes site-fx-title-ghost {
  0%, 100% {
    opacity: 0.84;
    transform: translateY(0) rotate(-0.4deg);
    text-shadow:
      0 0 10px rgba(247, 244, 238, 0.35),
      0 14px 16px rgba(247, 244, 238, 0.16);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px) rotate(0.5deg);
    text-shadow:
      0 0 18px rgba(247, 244, 238, 0.75),
      0 0 32px rgba(196, 181, 253, 0.4),
      0 18px 20px rgba(247, 244, 238, 0.22);
  }
}

.site-fx-web {
  position: absolute;
  top: 0;
  width: min(16rem, 34vw);
  height: min(16rem, 34vw);
  opacity: 0.42;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.site-fx-web--left {
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23f4efe6' stroke-width='1.1' opacity='0.9'%3E%3Cpath d='M0 0 L200 18 M0 0 L188 78 M0 0 L150 150 M0 0 L78 188 M0 0 L18 200'/%3E%3Cpath d='M28 6 Q62 28 34 62 Q18 36 6 22'/%3E%3Cpath d='M52 12 Q98 48 58 104 Q28 62 12 36'/%3E%3Cpath d='M78 20 Q132 72 84 140 Q42 88 18 52'/%3E%3Cpath d='M108 28 Q158 98 104 168 Q58 112 24 68'/%3E%3C/g%3E%3C/svg%3E");
}
.site-fx-web--right {
  right: 0;
  transform: scaleX(-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23f4efe6' stroke-width='1.1' opacity='0.9'%3E%3Cpath d='M0 0 L200 18 M0 0 L188 78 M0 0 L150 150 M0 0 L78 188 M0 0 L18 200'/%3E%3Cpath d='M28 6 Q62 28 34 62 Q18 36 6 22'/%3E%3Cpath d='M52 12 Q98 48 58 104 Q28 62 12 36'/%3E%3Cpath d='M78 20 Q132 72 84 140 Q42 88 18 52'/%3E%3Cpath d='M108 28 Q158 98 104 168 Q58 112 24 68'/%3E%3C/g%3E%3C/svg%3E");
}

.site-fx-perch {
  position: absolute;
  top: 5.2rem;
  width: 2.15rem;
  color: #f4efe6;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
  transform-origin: top center;
  animation: site-fx-swing 3.4s ease-in-out infinite;
}
.site-fx-perch svg {
  display: block;
  width: 100%;
  height: auto;
}
.site-fx-perch--left { left: 2.4rem; }
.site-fx-perch--right {
  right: 2.4rem;
  animation-delay: -1.4s;
}

.site-fx-fog {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -6%;
  height: 32vh;
  background:
    radial-gradient(90% 100% at 50% 130%, rgba(109, 40, 168, 0.22), transparent 58%),
    radial-gradient(70% 80% at 78% 140%, rgba(249, 115, 22, 0.1), transparent 52%),
    linear-gradient(to top, rgba(18, 8, 16, 0.38), transparent 78%);
  filter: blur(10px);
  animation: site-fx-fog 16s ease-in-out infinite alternate;
}

.site-fx-spider {
  position: absolute;
  left: var(--x);
  top: calc(var(--len) * -1 - 3rem);
  color: #f4efe6;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
  animation: site-fx-fall var(--dur) linear var(--d) infinite;
}
.site-fx-thread {
  display: block;
  width: 1px;
  height: var(--len);
  margin: 0 auto;
  background: linear-gradient(to bottom, transparent, rgba(244, 239, 230, 0.75));
}
.site-fx-spider svg {
  display: block;
  width: calc(2.7rem * var(--s));
  height: auto;
  margin: 0 auto;
  transform-origin: top center;
  animation: site-fx-swing 2.6s ease-in-out infinite;
}

.site-fx-ghost {
  position: absolute;
  left: var(--x);
  bottom: -18%;
  width: calc(7.5rem * var(--s));
  opacity: 0;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.28));
  animation: site-fx-rise var(--dur) linear var(--d) infinite;
}
.site-fx-ghost svg {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 18%;
  animation: site-fx-sway var(--sway) ease-in-out infinite;
}

@keyframes site-fx-fall {
  0% { transform: translate3d(0, -8vh, 0); }
  100% { transform: translate3d(10px, 118vh, 0); }
}
@keyframes site-fx-swing {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(11deg); }
}
@keyframes site-fx-fog {
  from { transform: translate3d(-2%, 0, 0); opacity: 0.85; }
  to { transform: translate3d(3%, -1.5%, 0); opacity: 1; }
}
@keyframes site-fx-rise {
  0% { transform: translate3d(0, 8vh, 0) scale(0.45); opacity: 0; }
  10% { opacity: var(--o); }
  55% { transform: translate3d(var(--drift), -62vh, 0) scale(0.9); }
  88% { opacity: var(--o); }
  100% { transform: translate3d(calc(var(--drift) * -0.35), -128vh, 0) scale(1.08); opacity: 0; }
}
@keyframes site-fx-sway {
  0%, 100% { transform: translateX(-16px) rotate(-6deg); }
  50% { transform: translateX(18px) rotate(7deg); }
}

@media (prefers-reduced-motion: reduce) {
  .site-fx-spider,
  .site-fx-ghost,
  .site-fx-ghost svg,
  .site-fx-fog,
  .site-fx-perch,
  .page-title,
  .hero-title {
    animation: none;
  }
  .site-fx-spider,
  .site-fx-ghost {
    display: none;
  }
}