/* Sri Sai Security and Management Service — motion splash, scroll reveals & micro-interactions */



:root {

  --sss-purple-deep: #1e1b4b;

  --sss-purple: #312e81;

  --sss-purple-light: #4c1d95;

  --sss-gold: #d4a017;

  --sss-gold-light: #f0c14b;

  --sss-reveal-duration: 0.75s;

  --sss-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);

}



/* ─── Motion logo splash (first open screen) ─── */

.sss-splash {

  position: fixed;

  inset: 0;

  z-index: 99999;

  display: flex;

  align-items: center;

  justify-content: center;

  background: radial-gradient(ellipse at 50% 40%, var(--sss-purple-light) 0%, var(--sss-purple-deep) 55%, #0f0a1f 100%);

  transition: opacity 0.65s var(--sss-reveal-ease), visibility 0.65s;

  overflow: hidden;

}



.sss-splash--out {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



.sss-splash__particles {

  position: absolute;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

}



.sss-splash__particle {

  position: absolute;

  width: 4px;

  height: 4px;

  border-radius: 50%;

  background: var(--sss-gold-light);

  opacity: 0;

  animation: sss-particle-float 4s ease-in-out infinite;

}



.sss-splash__particle:nth-child(1) { left: 15%; top: 20%; animation-delay: 0s; }

.sss-splash__particle:nth-child(2) { left: 85%; top: 25%; animation-delay: 0.5s; }

.sss-splash__particle:nth-child(3) { left: 10%; top: 70%; animation-delay: 1s; }

.sss-splash__particle:nth-child(4) { left: 90%; top: 65%; animation-delay: 1.5s; }

.sss-splash__particle:nth-child(5) { left: 50%; top: 10%; animation-delay: 0.3s; }

.sss-splash__particle:nth-child(6) { left: 30%; top: 85%; animation-delay: 0.8s; }

.sss-splash__particle:nth-child(7) { left: 70%; top: 80%; animation-delay: 1.2s; }



.sss-splash__inner {

  position: relative;

  text-align: center;

  z-index: 2;

}



.sss-splash__ring {

  position: absolute;

  left: 50%;

  top: 50%;

  border-radius: 50%;

  border: 2px solid rgba(212, 160, 23, 0.35);

  transform: translate(-50%, -50%) scale(0.6);

  opacity: 0;

  animation: sss-ring-expand 2.4s ease-out infinite;

}



.sss-splash__ring--2 {

  animation-delay: 0.8s;

  border-color: rgba(240, 193, 75, 0.25);

}



.sss-splash__logo-wrap {

  position: relative;

  width: 140px;

  height: 140px;

  margin: 0 auto 1.25rem;

  animation: sss-logo-enter 1s var(--sss-reveal-ease) both;

}



.sss-splash__logo-glow {

  position: absolute;

  inset: -20px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(212, 160, 23, 0.45) 0%, transparent 70%);

  animation: sss-glow-pulse 2s ease-in-out infinite;

}



.sss-splash__logo {

  position: relative;

  width: 100%;

  height: 100%;

  object-fit: contain;

  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));

  animation: sss-logo-float 3s ease-in-out infinite;

  z-index: 1;

}



.sss-splash__shine {

  position: absolute;

  inset: 0;

  border-radius: 50%;

  overflow: hidden;

  z-index: 2;

  pointer-events: none;

}



.sss-splash__shine::after {

  content: '';

  position: absolute;

  top: -50%;

  left: -60%;

  width: 40%;

  height: 200%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);

  transform: skewX(-20deg);

  animation: sss-shine-sweep 2.5s ease-in-out infinite;

}



.sss-splash__title {

  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;

  font-size: clamp(1.25rem, 4vw, 1.75rem);

  font-weight: 700;

  color: #fff;

  letter-spacing: 0.04em;

  margin: 0 0 0.35rem;

  opacity: 0;

  animation: sss-fade-up 0.8s var(--sss-reveal-ease) 0.4s both;

}



.sss-splash__tagline {

  font-size: clamp(0.8rem, 2.5vw, 0.95rem);

  color: rgba(240, 193, 75, 0.9);

  margin: 0 0 1.5rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  opacity: 0;

  animation: sss-fade-up 0.8s var(--sss-reveal-ease) 0.6s both;

}



.sss-splash__bar {

  width: 160px;

  height: 3px;

  background: rgba(255, 255, 255, 0.12);

  border-radius: 3px;

  margin: 0 auto;

  overflow: hidden;

  opacity: 0;

  animation: sss-fade-up 0.6s ease 0.8s both;

}



.sss-splash__bar span {

  display: block;

  height: 100%;

  width: 0;

  background: linear-gradient(90deg, var(--sss-gold), var(--sss-gold-light));

  border-radius: 3px;

  animation: sss-bar-fill 2s var(--sss-reveal-ease) 0.9s forwards;

}



body.sss-splash-active {

  overflow: hidden;

}



/* ─── Scroll reveal animations ─── */

.sss-reveal {

  opacity: 0;

  transform: translateY(32px);

  transition:

    opacity var(--sss-reveal-duration) var(--sss-reveal-ease),

    transform var(--sss-reveal-duration) var(--sss-reveal-ease);

  will-change: opacity, transform;

}



.sss-reveal.sss-reveal-left {

  transform: translateX(-32px);

}



.sss-reveal.sss-reveal-right {

  transform: translateX(32px);

}



.sss-reveal.sss-reveal-scale {

  transform: scale(0.94);

}



.sss-reveal.sss-in-view {

  opacity: 1;

  transform: none;

}



/* ─── Global micro-interactions ─── */

#root a[class*="btn"],

#root button[class*="bg-blue"],

#root button[class*="bg-gradient"],

#root a[class*="bg-blue"],

#root a[class*="rounded-full"][class*="bg-"] {

  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;

}



#root a[class*="btn"]:hover,

#root button[class*="bg-blue"]:hover,

#root button[class*="bg-gradient"]:hover,

#root a[class*="bg-blue"]:hover {

  transform: translateY(-2px);

  box-shadow: 0 10px 28px rgba(30, 58, 138, 0.25);

}



#root [class*="rounded-lg"][class*="shadow"],

#root [class*="rounded-xl"][class*="shadow"],

#root [class*="group"][class*="cursor-pointer"] {

  transition: transform 0.35s var(--sss-reveal-ease), box-shadow 0.35s ease;

}



#root [class*="rounded-lg"][class*="shadow"]:hover,

#root [class*="rounded-xl"][class*="shadow"]:hover {

  transform: translateY(-4px);

  box-shadow: 0 16px 40px rgba(30, 27, 75, 0.12);

}



/* Header animation handled by Framer Motion — do not override transform here */

#root img:not([alt="Logo"]) {

  transition: transform 0.5s var(--sss-reveal-ease);

}



#root [class*="group"]:hover img:not([alt="Logo"]) {

  transform: scale(1.03);

}



#root h1,

#root h2 {

  transition: letter-spacing 0.4s ease;

}



/* ─── PHP legacy preloader (enhanced) ─── */

.preloader {

  background: radial-gradient(ellipse at 50% 40%, var(--sss-purple-light) 0%, var(--sss-purple-deep) 55%, #0f0a1f 100%) !important;

}



.preloader-logo {

  width: 130px !important;

  animation: sss-logo-enter 1s var(--sss-reveal-ease) both, sss-logo-float 3s ease-in-out 1s infinite !important;

  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));

}



.preloader-bar span {

  background: linear-gradient(90deg, var(--sss-gold), var(--sss-gold-light)) !important;

  animation: sss-bar-fill 2s var(--sss-reveal-ease) 0.3s forwards !important;

  width: 0 !important;

}



/* ─── Keyframes ─── */

@keyframes sss-logo-enter {

  0% {

    opacity: 0;

    transform: scale(0.4) rotate(-12deg);

  }

  60% {

    transform: scale(1.08) rotate(3deg);

  }

  100% {

    opacity: 1;

    transform: scale(1) rotate(0);

  }

}



@keyframes sss-logo-float {

  0%, 100% { transform: translateY(0) scale(1); }

  50% { transform: translateY(-8px) scale(1.02); }

}



@keyframes sss-glow-pulse {

  0%, 100% { opacity: 0.5; transform: scale(1); }

  50% { opacity: 1; transform: scale(1.15); }

}



@keyframes sss-shine-sweep {

  0% { left: -60%; }

  40%, 100% { left: 140%; }

}



@keyframes sss-ring-expand {

  0% {

    width: 80px;

    height: 80px;

    opacity: 0.8;

    transform: translate(-50%, -50%) scale(0.6);

  }

  100% {

    width: 280px;

    height: 280px;

    opacity: 0;

    transform: translate(-50%, -50%) scale(1);

  }

}



@keyframes sss-fade-up {

  from {

    opacity: 0;

    transform: translateY(16px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes sss-bar-fill {

  to { width: 100%; }

}



@keyframes sss-particle-float {

  0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }

  20% { opacity: 0.8; }

  50% { opacity: 0.4; transform: translateY(-30px) scale(1); }

  80% { opacity: 0; }

}



@keyframes sss-header-slide {

  from {

    opacity: 0;

    transform: translateY(-100%);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* ─── Reduced motion ─── */

@media (prefers-reduced-motion: reduce) {

  .sss-splash,

  .sss-splash *,

  .sss-reveal,

  .preloader-logo {

    animation: none !important;

    transition: none !important;

  }



  .sss-reveal {

    opacity: 1;

    transform: none;

  }



  .sss-splash--out {

    display: none;

  }

}