/* ============================================================
   SDRRS — Motion layer: page-load reveal + ambient 3D atmosphere
   ============================================================ */

/* perspective root for 3D children */
.reveal-scene{ perspective:1400px; }

/* generic reveal-on-load sequence, staggered via [data-delay] */
[data-reveal]{
  opacity:0;
  transform:translateY(26px) rotateX(8deg);
  animation:reveal-in .8s cubic-bezier(.2,.8,.25,1) forwards;
  animation-delay:var(--delay, 0s);
}
@keyframes reveal-in{
  to{ opacity:1; transform:translateY(0) rotateX(0); }
}

/* floating ambient shards behind hero / panels */
.float-shard{
  position:absolute;
  border-radius:26px;
  filter:blur(0px);
  transform-style:preserve-3d;
  pointer-events:none;
  opacity:.55;
}
.shard-a{
  width:120px; height:120px; top:8%; right:6%;
  background:linear-gradient(135deg, rgba(47,208,255,0.18), transparent);
  border:1px solid rgba(47,208,255,0.25);
  animation:float-a 9s ease-in-out infinite;
}
.shard-b{
  width:80px; height:80px; bottom:12%; left:2%;
  background:linear-gradient(135deg, rgba(255,59,92,0.16), transparent);
  border:1px solid rgba(255,59,92,0.22);
  animation:float-b 11s ease-in-out infinite;
}
.shard-c{
  width:60px; height:60px; top:46%; right:22%;
  background:linear-gradient(135deg, rgba(35,209,139,0.16), transparent);
  border:1px solid rgba(35,209,139,0.22);
  animation:float-c 7.5s ease-in-out infinite;
}
@keyframes float-a{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg); }
  50%{ transform:translate3d(-14px,18px,30px) rotate(12deg); }
}
@keyframes float-b{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg); }
  50%{ transform:translate3d(16px,-14px,20px) rotate(-10deg); }
}
@keyframes float-c{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); }
  50%{ transform:translate3d(-10px,-10px,10px) rotate(8deg) scale(1.08); }
}

/* spinning globe wireframe used behind the beacon */
.globe{
  position:absolute;
  width:300px; height:300px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.08);
  transform-style:preserve-3d;
  animation:globe-spin 18s linear infinite;
}
.globe::before, .globe::after{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(255,255,255,0.06);
}
.globe::before{ transform:rotateX(70deg); }
.globe::after{ transform:rotateY(70deg); }
@keyframes globe-spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* card 3D tilt is driven by JS setting --rx/--ry custom props */
.tilt-card{
  transform:
    perspective(900px)
    rotateX(var(--ry, 0deg))
    rotateY(var(--rx, 0deg))
    translateZ(0);
}

/* pulse dot used in status strips */
.live-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--rescue);
  box-shadow:0 0 0 0 rgba(35,209,139,0.6);
  animation:live-pulse 1.8s infinite;
}
@keyframes live-pulse{
  0%{ box-shadow:0 0 0 0 rgba(35,209,139,0.55); }
  70%{ box-shadow:0 0 0 9px rgba(35,209,139,0); }
  100%{ box-shadow:0 0 0 0 rgba(35,209,139,0); }
}

/* typing indicator (chatbot) */
.typing-dots{ display:inline-flex; gap:4px; align-items:center; padding:4px 0; }
.typing-dots span{
  width:6px; height:6px; border-radius:50%; background:var(--text-muted);
  animation:type-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2){ animation-delay:.15s; }
.typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes type-bounce{
  0%,60%,100%{ transform:translateY(0); opacity:.5; }
  30%{ transform:translateY(-5px); opacity:1; }
}

/* success check pop (report confirmation) */
.check-pop{
  width:78px; height:78px; border-radius:50%; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center; font-size:34px;
  background:linear-gradient(135deg, var(--rescue), #0d8a5a); color:#04231a;
  transform:scale(0) rotate(-25deg);
  animation:check-in .55s cubic-bezier(.2,1.4,.4,1) forwards .1s;
}
@keyframes check-in{
  to{ transform:scale(1) rotate(0deg); }
}

/* spinner used while acquiring geolocation */
.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(47,208,255,0.25); border-top-color:var(--signal);
  animation:spin-loader .8s linear infinite;
  display:inline-block;
}
@keyframes spin-loader{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ animation:none; opacity:1; transform:none; }
  .float-shard, .globe, .beacon-sweep, .ring{ animation:none !important; }
}