/* ===========================================================
   Lunexo index — richer motion for the ABOUT + LOCATION blocks.
   Pure CSS over the existing stills (no Higgsfield credits yet).
   Built so a generated <img>→<video> loop drops straight in later.
   =========================================================== */

/* ---------------- LOCATION: static map → live "radar" ---------------- */
/* map stays STATIC so the marker/radar lock exactly onto Nürtingen */
.location-section .map-image {
  opacity: 1;
  filter: saturate(1.06) contrast(1.05);
}

/* (Removed the rotating conic afterglow wedge — only the crisp line sweeps now.) */
/* Crisp constant-width sweep LINE from Nürtingen to the edge */
.map-radar-line {
  position: absolute;
  top: 53%; left: 65%;
  width: 135%;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg,
              rgba(255, 180, 195, 0.95) 0%,
              rgba(255, 110, 130, 0.55) 38%,
              rgba(255, 90, 110, 0) 100%);
  box-shadow: 0 0 8px rgba(255, 100, 120, 0.6);
  z-index: 3;
  pointer-events: none;
  animation: lx-radar 6s linear infinite;
}
@keyframes lx-radar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .map-radar-line { display: none; } }

/* drifting scan grid */
.map-container::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 44px);
  pointer-events: none;
  animation: lx-grid 7s linear infinite;
}
@keyframes lx-grid { to { background-position: 0 -44px, -44px 0; } }

/* marker: always-on expanding ping rings */
.map-marker { z-index: 3; }
.map-marker::before, .map-marker::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 2px solid var(--first-color);
  animation: lx-ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.map-marker::after { animation-delay: 1.3s; }
@keyframes lx-ping {
  0%        { transform: scale(1);  opacity: 0.85; }
  80%, 100% { transform: scale(6);  opacity: 0; }
}

/* keep the place label visible + gently floating (was hover-only) */
.location-section .location-name {
  bottom: 20px; opacity: 0.95; z-index: 4;
  animation: lx-label 4s ease-in-out infinite;
}
@keyframes lx-label {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-5px); }
}

/* ---------------- ABOUT: cinematic motion on the stills ---------------- */
.about-section .image-box { position: relative; overflow: hidden; }
.about-section .image-box img {
  will-change: transform;
  animation: lx-about-kenburns 22s ease-in-out infinite alternate;
}
@keyframes lx-about-kenburns {
  0%   { transform: scale(1.05); }
  100% { transform: scale(1.16) translate(2%, -2%); }
}

/* periodic light sweep across the about image */
.about-section .image-box::after {
  content: "";
  position: absolute; top: -30%; left: -45%;
  width: 40%; height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: rotate(12deg);
  pointer-events: none;
  animation: lx-sweep 9s ease-in-out infinite;
}
@keyframes lx-sweep {
  0%, 68% { left: -45%; opacity: 0; }
  78%     { opacity: 1; }
  100%    { left: 135%; opacity: 0; }
}

/* profile photo: soft float + breathing glow ring */
.creator-image { position: relative; }
.creator-image img { animation: lx-float 6s ease-in-out infinite; }
@keyframes lx-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.creator-image::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  box-shadow: 0 0 42px rgba(226, 55, 68, 0.28);
  pointer-events: none;
  animation: lx-glow 4s ease-in-out infinite;
}
@keyframes lx-glow {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

/* if a generated clip is dropped in later: <video> in .image-box behaves like the img */
.about-section .image-box video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: lx-about-kenburns 22s ease-in-out infinite alternate;
}

/* ---------------- BOXES: digital "distortion" reveal (portfolio-inspired) ----
   js/scroll-fx.js tags every card with data-fx="distort" and adds .fx-in as it
   scrolls into view (re-triggers on re-entry). Blur→sharp + a chunky horizontal
   BAND-glitch clip = the boxes resolve like a digital signal locking in.
   Composes with home.js's existing slide/fade (filter + clip-path don't touch
   transform). Per-card stagger via --fx-d set in JS. */
[data-fx="distort"] {
  position: relative;
  filter: blur(16px);
  will-change: filter, clip-path, opacity;
}
[data-fx="distort"].fx-in {
  animation: fx-distort-in 0.8s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--fx-d, 0s);
}
@keyframes fx-distort-in {
  0%   { filter: blur(16px) saturate(1.7) brightness(1.25); clip-path: inset(0 0 100% 0); }
  28%  { filter: blur(9px)  saturate(1.4) brightness(1.15); clip-path: inset(0 0 50% 0); }
  44%  { clip-path: inset(36% 0 26% 0); }   /* band jump */
  60%  { clip-path: inset(10% 0 40% 0); filter: blur(5px) saturate(1.2); }
  76%  { clip-path: inset(0 0 6% 0);    filter: blur(2px); }
  100% { filter: blur(0) saturate(1) brightness(1); clip-path: inset(0 0 0 0); }
}
/* faint chromatic-aberration edge during the lock-in, fades out */
[data-fx="distort"].fx-in::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 3px 0 0 rgba(226,55,68,0.35), -3px 0 0 rgba(40,120,255,0.30);
  mix-blend-mode: screen; pointer-events: none;
  animation: fx-aberration 0.55s ease-out var(--fx-d, 0s) both;
}
@keyframes fx-aberration { 0% { opacity: 0.8; } 100% { opacity: 0; } }

/* ---- PRICING: stronger, more "digital dissolve" distortion (portfolio-style) ----
   Heavier blur, multi-band glitch jumps + a brighter chromatic split, so the
   price cards visibly materialise out of a distortion as they scroll in. */
.pricing-card[data-fx="distort"].fx-in {
  animation: fx-price-distort 1s cubic-bezier(.2, .9, .3, 1) both;
  animation-delay: var(--fx-d, 0s);
}
@keyframes fx-price-distort {
  0%   { filter: blur(24px) saturate(2) brightness(1.5) contrast(1.4); clip-path: inset(0 0 100% 0); }
  16%  { filter: blur(17px) saturate(1.7) contrast(1.3);              clip-path: inset(0 0 66% 0); }
  30%  { clip-path: inset(46% 0 22% 0); filter: blur(13px) brightness(1.3); }   /* band jump */
  44%  { clip-path: inset(12% 0 54% 0); filter: blur(9px); }                    /* band jump */
  58%  { clip-path: inset(58% 0 6% 0);  filter: blur(6px) contrast(1.15); }      /* band jump */
  72%  { clip-path: inset(6% 0 20% 0);  filter: blur(3px); }
  88%  { clip-path: inset(0 0 3% 0);    filter: blur(1px); }
  100% { filter: blur(0) saturate(1) brightness(1) contrast(1); clip-path: inset(0 0 0 0); }
}
.pricing-card[data-fx="distort"].fx-in::before {
  box-shadow: 5px 0 0 rgba(226,55,68,0.5), -5px 0 0 rgba(40,120,255,0.45);
  animation: fx-aberration 0.7s ease-out var(--fx-d, 0s) both;
}

@media (prefers-reduced-motion: reduce) {
  .location-section .map-image,
  .about-section .image-box img,
  .about-section .image-box video,
  .creator-image img,
  .map-container::after, .map-container::before,
  .map-marker::before, .map-marker::after,
  .location-section .location-name,
  .about-section .image-box::after,
  .creator-image::after { animation: none !important; }
  .location-section .map-image,
  .about-section .image-box img { transform: none; }
  [data-fx="distort"] { filter: none !important; }
  [data-fx="distort"].fx-in, [data-fx="distort"].fx-in::before { animation: none !important; }
}

/* ---------------- HERO: blur-dissolve load-in -------------------------------
   The three hero panels each autoplay a video; without an intro they pop in
   raw at different times and the first paint looks rough. This resolves each
   panel from a soft blur + fade on load, lightly staggered. Pure CSS, so it
   runs on first paint; index-anim.css is render-blocking => no flash of the
   un-animated state. Uses filter+opacity only (no transform) so it never
   fights the panels' flex hover transition. */
.page-index .hero-panel {
  animation: hero-dissolve 1s cubic-bezier(.22, 1, .36, 1) both;
}
.page-index .hero-split .hero-panel:nth-child(1) { animation-delay: .05s; }
.page-index .hero-split .hero-panel:nth-child(2) { animation-delay: .18s; }
.page-index .hero-split .hero-panel:nth-child(3) { animation-delay: .31s; }
@keyframes hero-dissolve {
  0%   { opacity: 0; filter: blur(24px) saturate(1.35); }
  55%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0) saturate(1); }
}

/* Reduced motion: skip the dissolve, show panels immediately. */
@media (prefers-reduced-motion: reduce) {
  .page-index .hero-panel { animation: none; opacity: 1; filter: none; }
}