/* Kasturba Lightings - shared public-site animations & lighting-themed decor */

/* Scroll reveal: elements start hidden, JS adds .in-view once they enter the viewport */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1), transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
[data-reveal].in-view {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Hero wrapper: establishes the stacking context bokeh lights sit inside.
   Each hero's real content wrapper must have its own `position: relative`
   (see .jumbotron-content, .projects-hero-content, .project-hero-content,
   .admin-login-card) and come after the bokeh markup in the DOM so it
   paints on top. */
.kl-glow-hero {
    position: relative;
    overflow: hidden;
}

/* Bokeh lights - soft out-of-focus glowing orbs + a few crisp sparkle
   points, like a photograph of string lights at night. Used behind hero
   headings site-wide for a premium "lighting brand" atmosphere. */
.kl-bokeh-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.kl-bokeh-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(16px);
    opacity: 0.4;
    animation: kl-bokeh-drift ease-in-out infinite alternate;
    will-change: transform;
}
.kl-bokeh-sparkle {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0 10px 3px currentColor;
    opacity: 0.85;
    animation: kl-bokeh-twinkle 3s ease-in-out infinite;
}
@keyframes kl-bokeh-drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(16px, -12px) scale(1.15); }
}
@keyframes kl-bokeh-twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.75); }
    50% { opacity: 1; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
    .kl-bokeh-orb, .kl-bokeh-sparkle { animation: none; }
}

/* Spotlight cursor effect - a soft light that follows the pointer across
   hero sections. JS (site-animations.js) updates --kl-spot-x/y on
   mousemove; on touch devices there's no hover so it simply never shows. */
.kl-spotlight {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 300px at var(--kl-spot-x, 50%) var(--kl-spot-y, 50%), rgba(255,230,170,0.55) 0%, rgba(255,200,100,0.22) 35%, transparent 68%);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.kl-glow-hero:hover .kl-spotlight {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .kl-spotlight { display: none; }
}

/* Stat counters (homepage) */
.kl-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}
.kl-stat-tile {
    background: #fff;
    border-radius: 14px;
    padding: 26px 20px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(91,72,140,0.08);
    border-top: 3px solid #ffb300;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kl-stat-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(91,72,140,0.15);
}
.kl-stat-number {
    font-size: 2.4rem;
    font-weight: 800;
    color: #23447e;
    line-height: 1;
    margin-bottom: 8px;
}
.kl-stat-label {
    color: #5b488c;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Sticky WhatsApp + Call floating buttons */
.kl-contact-fab {
    position: fixed;
    left: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1000;
}
.kl-fab {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 1.4rem;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.kl-fab:hover {
    transform: scale(1.08);
}
.kl-fab-whatsapp {
    background: #25D366;
    animation: kl-fab-pulse 2.4s ease-in-out infinite;
}
.kl-fab-call {
    background: linear-gradient(135deg, #5b488c, #23447e);
}
@keyframes kl-fab-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 0 0 0 rgba(37,211,102,0.5); }
    50% { box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 0 0 10px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) {
    .kl-fab-whatsapp { animation: none; }
}
@media (max-width: 600px) {
    .kl-contact-fab { left: 16px; bottom: 16px; }
    .kl-fab { width: 48px; height: 48px; font-size: 1.25rem; }
}