/* =====================================================================
   Moonsez HRMS - Diwali festive overlay
   ---------------------------------------------------------------------
   Everything lives inside #diwali-fx, a fixed, click-through overlay
   (pointer-events:none). It never changes page layout, existing styles
   or any click/scroll behaviour of the application.
   Loaded only by application/views/common/diwali_theme.php during the
   festive date window configured there. Artwork is drawn by
   js/common/diwali.js as inline SVG; this file only positions/animates.
   ===================================================================== */

#diwali-fx {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1039; /* above sidebar/nav (999), below bootstrap modals (1040+) and the ajax loader */
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
    line-height: 1.3;
}
#diwali-fx,
#diwali-fx * {
    box-sizing: border-box;
}
#diwali-fx svg {
    display: block;
    overflow: visible;
}
#diwali-fx.diwali-off > *:not(.diwali-toggle) {
    display: none !important;
}

/* ---------- Fireworks / sparkle canvas ---------- */
.diwali-canvas {
    position: absolute;
    top: 0;
    left: 0;
}
.diwali-mode-lite .diwali-canvas {
    opacity: .9;
}

/* ---------- Serial light garland (mala) along the top ---------- */
.diwali-lights {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
}
/* bulb colours/brightness are driven by the LED controller in diwali.js */

/* ---------- Akash kandil (paper lantern hung at the gate) ---------- */
.diwali-kandil {
    position: absolute;
    top: 0;
    width: 150px;
    transform-origin: 50% 0;
    animation: diwali-swing 5.5s ease-in-out infinite;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35));
}
.diwali-kandil.cyl {
    width: 128px;
}
.diwali-kandil.at-center {
    left: 50%;
    margin-left: -36px;
    width: 72px;
    animation-duration: 6.5s;
}
/* inner pages: smaller kandils so they do not crowd the header */
.diwali-mode-lite .diwali-kandil {
    width: 76px;
}
/* decorations politely fade when the mouse pointer comes near them */
.diwali-kandil,
.diwali-diya,
.diwali-motif {
    transition: opacity .35s ease;
}
.diwali-kandil.near,
.diwali-diya.near,
.diwali-motif.near {
    opacity: .12;
}
.diwali-kandil svg {
    width: 100%;
    height: auto;
}
.diwali-kandil .kglow {
    animation: diwali-kglow 2.6s ease-in-out infinite;
}
.diwali-kandil .kcore {
    animation: diwali-kcore 1.3s ease-in-out infinite;
}
.diwali-kandil .ktails {
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: diwali-tails 3.4s ease-in-out infinite;
}
@keyframes diwali-swing {
    0%, 100% { transform: rotate(-3.5deg); }
    50%      { transform: rotate(3.5deg); }
}
@keyframes diwali-tails {
    0%, 100% { transform: skewX(-5deg); }
    50%      { transform: skewX(5deg); }
}
@keyframes diwali-kglow {
    0%, 100% { opacity: .8; }
    50%      { opacity: 1; }
}
@keyframes diwali-kcore {
    0%, 100% { opacity: .85; }
    30%      { opacity: 1; }
    60%      { opacity: .8; }
}

/* ---------- Curtain lights (login page sides) ---------- */
.diwali-curtain {
    position: absolute;
    top: 0;
    width: 120px;
    height: 380px;
}
.diwali-curtain.left  { left: 0; }
.diwali-curtain.right { right: 0; }
.diwali-curtain .cl {
    animation: diwali-cl 2.4s ease-in-out infinite;
}
@keyframes diwali-cl {
    0%, 100% { opacity: 1; }
    50%      { opacity: .3; }
}

/* ---------- Deepmala: a row of burning diyas along the bottom ---------- */
.diwali-deepmala {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
}
.diwali-deepmala::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    background: linear-gradient(to top, rgba(255, 170, 60, .22), rgba(255, 170, 60, 0));
}
.diwali-diya {
    position: absolute;
    bottom: -2px;
    transform-origin: 50% 100%;
}
.diwali-diya svg {
    width: 100%;
    height: auto;
}
.diwali-motif {
    position: absolute;
    bottom: 5px;
    width: 20px;
    height: 20px;
    opacity: .75;
    animation: diwali-rotate 40s linear infinite;
}
.diwali-motif svg {
    width: 100%;
    height: 100%;
}

/* ---------- Countdown chip (bottom-right, above the toggle) ---------- */
.diwali-count {
    position: absolute;
    right: 56px;
    bottom: 11px;
    display: inline-block;
    padding: 5px 12px 5px 8px;
    border-radius: 20px;
    border: 1px solid rgba(255, 200, 90, .55);
    background: linear-gradient(135deg, #3b0f0f 0%, #6e1a10 60%, #a2470c 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35), 0 0 0 3px rgba(255, 170, 50, .12);
    color: #ffe9b8;
    white-space: nowrap;
    line-height: 1.15;
}
#diwali-fx .diwali-count > svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}
.diwali-count .tx {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}
.diwali-count .tx > b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #ffd36b;
}
.diwali-count small {
    display: block;
    margin-bottom: 3px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffc58a;
    opacity: .9;
}
.diwali-diya .flame {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: diwali-flame .9s ease-in-out infinite alternate;
}
.diwali-diya .halo {
    animation: diwali-halo 1.15s ease-in-out infinite alternate;
}
@keyframes diwali-flame {
    0%   { transform: scale(1, 1) skewX(0deg); }
    30%  { transform: scale(1.05, 1.12) skewX(-3deg); }
    60%  { transform: scale(.96, .93) skewX(2.5deg); }
    100% { transform: scale(1.03, 1.07) skewX(-1.5deg); }
}
@keyframes diwali-halo {
    0%   { opacity: .75; }
    50%  { opacity: 1; }
    100% { opacity: .85; }
}

/* ---------- Rangoli (login page, bottom-left) ---------- */
.diwali-rangoli {
    position: absolute;
    left: 14px;
    bottom: 34px;
    width: 230px;
    height: 230px;
    opacity: .55;
    animation: diwali-rotate 90s linear infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}
.diwali-rangoli svg {
    width: 100%;
    height: 100%;
}
@keyframes diwali-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---------- Greeting banner (login page) ---------- */
.diwali-banner {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    animation: diwali-float 5s ease-in-out infinite;
}
.diwali-banner .txt,
.diwali-banner .star {
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #b8860b 0%, #ffd700 25%, #fff6c2 50%, #ffd700 75%, #b8860b 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: diwali-shimmer 3s linear infinite;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}
.diwali-banner .star {
    font-size: 18px;
    margin: 0 10px;
}
.diwali-banner .head .txt,
.diwali-banner .head .star {
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.diwali-banner .sub {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 500;
    color: #7a3d00;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

/* ---------- Live timer (days : hrs : min : sec) ---------- */
.diwali-timer {
    display: inline-block;
    white-space: nowrap;
    font-size: 0;
    line-height: 1;
}
.diwali-timer .u {
    display: inline-block;
    vertical-align: top;
    text-align: center;
}
.diwali-timer .u b {
    display: block;
    min-width: 2.1em;
    padding: 4px 5px 3px;
    border-radius: 6px;
    background: linear-gradient(#4a1510, #2a0905);
    border: 1px solid rgba(255, 200, 90, .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .35);
    color: #ffd86b;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}
.diwali-timer .u i {
    display: block;
    margin-top: 2px;
    font-size: 8px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffc58a;
}
.diwali-timer .colon {
    display: inline-block;
    vertical-align: top;
    padding: 4px 3px 0;
    color: #ffd86b;
    font-size: 15px;
    font-weight: 700;
    animation: diwali-blink 1s steps(1) infinite;
}
.diwali-timer .greet {
    font-size: 16px;
    font-weight: 700;
    color: #ffd86b;
}
@keyframes diwali-blink {
    50% { opacity: .35; }
}
/* bigger variant inside the login banner */
.diwali-banner .diwali-timer {
    margin-top: 4px;
}
.diwali-banner .diwali-timer .u b {
    min-width: 2.2em;
    padding: 6px 8px 5px;
    font-size: 24px;
    border-radius: 8px;
}
.diwali-banner .diwali-timer .u i {
    font-size: 10px;
    color: #8a4a00;
}
.diwali-banner .diwali-timer .colon {
    font-size: 24px;
    padding: 6px 5px 0;
    color: #b8860b;
}
.diwali-banner .diwali-timer .greet {
    font-size: 28px;
}
@keyframes diwali-shimmer {
    to { background-position: 200% center; }
}
@keyframes diwali-float {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, -4px); }
}

/* ---------- One-time greeting toast (inner pages, bottom centre) ---------- */
.diwali-toast {
    position: absolute;
    bottom: 96px;
    left: 50%;
    max-width: 92%;
    padding: 11px 42px 11px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 200, 90, .6);
    background: linear-gradient(135deg, #3b0f0f 0%, #7a1f12 55%, #b8560f 100%);
    color: #fff3d6;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 3px rgba(255, 180, 60, .15);
    pointer-events: auto;
    opacity: 0;
    transform: translate(-50%, 140%);
    transition: transform .6s cubic-bezier(.2, .9, .3, 1.2), opacity .5s ease;
}
.diwali-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.diwali-toast b {
    display: block;
    margin-bottom: 2px;
    font-size: 16px;
    font-weight: 700;
    color: #ffd86b;
}
.diwali-toast .x {
    position: absolute;
    right: 8px;
    top: 7px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #ffd86b;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
}
.diwali-toast .x:hover {
    background: rgba(255, 255, 255, .2);
}

/* ---------- On/off toggle (bottom-right) ---------- */
.diwali-toggle {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 200, 90, .6);
    background: radial-gradient(circle at 50% 35%, #5a1d0e, #2a0b05);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .4), 0 0 0 3px rgba(255, 170, 50, .12);
    cursor: pointer;
    pointer-events: auto;
    outline: none;
    opacity: .92;
    transition: transform .2s ease, opacity .2s ease;
}
.diwali-toggle:hover {
    transform: scale(1.08);
    opacity: 1;
}
.diwali-toggle .f {
    position: absolute;
    left: 50%;
    top: 6px;
    width: 9px;
    height: 15px;
    margin-left: -4.5px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: radial-gradient(ellipse at 50% 72%, #fffbe0, #ffd84d 35%, #ff8c1a 70%, rgba(255, 80, 0, 0));
    box-shadow: 0 0 8px 2px rgba(255, 170, 40, .6);
    transform-origin: 50% 100%;
    animation: diwali-flame .9s ease-in-out infinite alternate;
}
.diwali-toggle .b {
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 20px;
    height: 7px;
    margin-left: -10px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(#d2691e, #8b3a0f);
}
#diwali-fx.diwali-off .diwali-toggle {
    opacity: .55;
    filter: grayscale(.85);
}
#diwali-fx.diwali-off .diwali-toggle .f {
    animation: none;
    opacity: .35;
}

/* ---------- Responsive / accessibility / print ---------- */
@media (max-width: 768px) {
    .diwali-kandil.at-left,
    .diwali-kandil.at-right,
    .diwali-curtain,
    .diwali-rangoli,
    .diwali-motif { display: none; }
    .diwali-kandil.at-center { width: 64px; margin-left: -32px; }
    .diwali-banner .txt { font-size: 20px; }
    .diwali-banner .sub { display: none; }
    .diwali-count small { display: none; }
    .diwali-count .diwali-timer .u b { font-size: 12px; padding: 3px 4px 2px; }
    .diwali-count .diwali-timer .u i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    #diwali-fx * { animation: none !important; transition: none !important; }
    .diwali-canvas { display: none !important; }
}
@media print {
    #diwali-fx { display: none !important; }
}