/* =====================================================================
   HOME PREMIUM — Design System
   Kerala Lottery · "Emerald & Kasavu Gold"
   ---------------------------------------------------------------------
   Single source of truth for the home page palette, spacing rhythm,
   typography scale and shared UI primitives. Loaded by index.php after
   the site header so it can also patch site-wide tokens.
   ===================================================================== */

:root {
    /* ---- Brand: Deep Emerald ---- */
    --lx-ink:        #082016;
    --lx-green-900:  #052e20;
    --lx-green-800:  #064e3b;
    --lx-green-700:  #0a6b4d;
    --lx-green-600:  #0f8a63;
    --lx-green-100:  #dcefe6;
    --lx-green-50:   #f1f8f4;

    /* ---- Brand: Kasavu Gold ---- */
    --lx-gold-700:   #8a6a12;
    --lx-gold-600:   #b8912b;
    --lx-gold-500:   #d4af37;
    --lx-gold-400:   #e6c968;
    --lx-gold-200:   #f4e4b0;
    --lx-gold-50:    #fdf8ea;

    /* ---- Neutrals ---- */
    --lx-surface:    #ffffff;
    --lx-cream:      #faf8f2;
    --lx-mist:       #f4f7f5;
    --lx-line:       #e7e3d7;
    --lx-line-soft:  #f1eee6;
    --lx-text:       #22362d;
    --lx-muted:      #6d7f76;
    --lx-faint:      #98a8a0;

    /* ---- Single functional accent (LIVE / urgency only) ---- */
    --lx-live:       #d92d20;
    --lx-live-soft:  #fdecea;

    /* ---- Gradients ---- */
    --lx-grad-gold:  linear-gradient(135deg, #b8912b 0%, #e6c968 48%, #d4af37 100%);
    --lx-grad-green: linear-gradient(135deg, #052e20 0%, #064e3b 55%, #0a6b4d 100%);
    --lx-grad-line:  linear-gradient(90deg, transparent, var(--lx-gold-500), transparent);

    /* ---- Spacing rhythm ---- */
    --lx-container:  1240px;
    --lx-gutter:     clamp(16px, 4.5vw, 40px);
    --lx-section-y:  clamp(52px, 6.5vw, 92px);
    --lx-block-y:    clamp(32px, 4vw, 56px);
    --lx-gap:        clamp(16px, 2.2vw, 28px);
    --lx-gap-sm:     clamp(10px, 1.4vw, 16px);

    /* ---- Radii ---- */
    --lx-r-xs:   8px;
    --lx-r-sm:   12px;
    --lx-r:      18px;
    --lx-r-lg:   26px;
    --lx-r-pill: 999px;

    /* ---- Elevation ---- */
    --lx-sh-1: 0 1px 2px rgba(8, 32, 22, .04), 0 6px 18px -6px rgba(8, 32, 22, .08);
    --lx-sh-2: 0 2px 6px rgba(8, 32, 22, .05), 0 18px 40px -16px rgba(8, 32, 22, .18);
    --lx-sh-3: 0 32px 64px -26px rgba(8, 32, 22, .36);
    --lx-sh-gold: 0 10px 30px -10px rgba(184, 145, 43, .45);

    /* ---- Type scale (fluid) ---- */
    --lx-fs-display: clamp(30px, 5vw, 52px);
    --lx-fs-h2:      clamp(25px, 3.4vw, 40px);
    --lx-fs-h3:      clamp(19px, 2.1vw, 25px);
    --lx-fs-h4:      clamp(16px, 1.5vw, 19px);
    --lx-fs-body:    clamp(14.5px, 1.05vw, 16.5px);
    --lx-fs-sm:      clamp(13px, .95vw, 14.5px);
    --lx-fs-xs:      11.5px;

    --lx-ease: cubic-bezier(.4, 0, .2, 1);

    /* Patch: legacy token used by footer.php / hero_slider.php but never defined */
    --accent-gold: #d4af37;
}

/* =====================================================================
   1. BASE
   ===================================================================== */

body {
    background: var(--lx-cream);
    color: var(--lx-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main {
    display: block;
    overflow-x: clip;
}

/* Anchor links must clear the fixed header + top bar */
main [id] { scroll-margin-top: 130px; }
@media (max-width: 1024px) { main [id] { scroll-margin-top: 100px; } }

/* Nothing on the home page may push the page sideways */
main img,
main svg,
main video { max-width: 100%; }

/* =====================================================================
   2. LAYOUT PRIMITIVES
   ===================================================================== */

.lx-section {
    position: relative;
    padding: var(--lx-section-y) 0;
    box-sizing: border-box;
    width: 100%;
}

.lx-section--flush   { padding-top: 0; }
.lx-section--tight   { padding: var(--lx-block-y) 0; }
.lx-section--cream   { background: var(--lx-cream); }
.lx-section--mist    { background: var(--lx-mist); }
.lx-section--white   { background: var(--lx-surface); }
.lx-section--dark    { background: var(--lx-grad-green); color: #fff; }

.lx-container {
    width: 100%;
    max-width: var(--lx-container);
    margin-inline: auto;
    padding-inline: var(--lx-gutter);
    box-sizing: border-box;
}

/* Hairline gold divider used between adjoining light sections */
.lx-section + .lx-section > .lx-container::before { content: none; }

/* =====================================================================
   3. SECTION HEADER
   ===================================================================== */

.lx-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(28px, 3.6vw, 52px);
}
.lx-head--left { text-align: left; margin-inline: 0; }

.lx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: var(--lx-r-pill);
    background: var(--lx-gold-50);
    border: 1px solid var(--lx-gold-200);
    color: var(--lx-gold-700);
    font-size: var(--lx-fs-xs);
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 16px;
}
.lx-eyebrow i { font-size: 10px; color: var(--lx-gold-600); }

.lx-section--dark .lx-eyebrow {
    background: rgba(212, 175, 55, .12);
    border-color: rgba(212, 175, 55, .35);
    color: var(--lx-gold-200);
}

.lx-title {
    font-family: 'Outfit', sans-serif;
    font-size: var(--lx-fs-h2);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--lx-green-900);
    margin: 0;
}
.lx-title em {
    font-style: normal;
    background: var(--lx-grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.lx-section--dark .lx-title { color: #fff; }

.lx-rule {
    width: 76px;
    height: 3px;
    border-radius: 3px;
    background: var(--lx-grad-gold);
    margin: 18px auto 0;
}
.lx-head--left .lx-rule { margin-inline: 0; }

.lx-lede {
    font-size: var(--lx-fs-body);
    line-height: 1.65;
    color: var(--lx-muted);
    margin: 14px 0 0;
    font-weight: 400;
}
.lx-section--dark .lx-lede { color: rgba(255, 255, 255, .74); }

/* =====================================================================
   4. BUTTONS  (min 46px tall — comfortable touch target)
   ===================================================================== */

.lx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 13px 26px;
    border: 1.5px solid transparent;
    border-radius: var(--lx-r-xs);
    font-family: 'Outfit', sans-serif;
    font-size: var(--lx-fs-sm);
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform .25s var(--lx-ease), box-shadow .25s var(--lx-ease),
                background-color .25s var(--lx-ease), color .25s var(--lx-ease),
                border-color .25s var(--lx-ease);
}
.lx-btn:hover { transform: translateY(-2px); }
.lx-btn:active { transform: translateY(0); }
.lx-btn:focus-visible {
    outline: 3px solid var(--lx-gold-400);
    outline-offset: 2px;
}
.lx-btn i { font-size: .95em; }

.lx-btn--gold {
    background: var(--lx-grad-gold);
    color: var(--lx-green-900);
    box-shadow: var(--lx-sh-gold);
}
.lx-btn--gold:hover { box-shadow: 0 14px 34px -10px rgba(184, 145, 43, .6); }

.lx-btn--green {
    background: var(--lx-green-800);
    color: #fff;
    box-shadow: 0 10px 26px -12px rgba(6, 78, 59, .8);
}
.lx-btn--green:hover { background: var(--lx-green-700); }

.lx-btn--ghost {
    background: transparent;
    border-color: var(--lx-green-800);
    color: var(--lx-green-800);
}
.lx-btn--ghost:hover { background: var(--lx-green-800); color: #fff; }

.lx-btn--outline-gold {
    background: rgba(212, 175, 55, .08);
    border-color: rgba(212, 175, 55, .5);
    color: var(--lx-gold-200);
}
.lx-btn--outline-gold:hover {
    background: rgba(212, 175, 55, .2);
    border-color: var(--lx-gold-400);
    color: #fff;
}

.lx-btn--block { width: 100%; }
.lx-btn--sm { min-height: 42px; padding: 10px 18px; font-size: 12.5px; }

/* =====================================================================
   5. CARD
   ===================================================================== */

.lx-card {
    background: var(--lx-surface);
    border: 1px solid var(--lx-line);
    border-radius: var(--lx-r);
    box-shadow: var(--lx-sh-1);
    overflow: hidden;
    box-sizing: border-box;
    transition: transform .35s var(--lx-ease), box-shadow .35s var(--lx-ease),
                border-color .35s var(--lx-ease);
}
.lx-card:hover {
    transform: translateY(-6px);
    border-color: var(--lx-gold-200);
    box-shadow: var(--lx-sh-2);
}

/* =====================================================================
   6. UTILITIES
   ===================================================================== */

.lx-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lx-live);
    display: inline-block;
    flex: none;
    animation: lxPulse 1.6s infinite;
}
@keyframes lxPulse {
    0%   { box-shadow: 0 0 0 0 rgba(217, 45, 32, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(217, 45, 32, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0); }
}

.lx-scroll-x {
    display: flex;
    gap: var(--lx-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}
.lx-scroll-x::-webkit-scrollbar { display: none; }
.lx-scroll-x > * { scroll-snap-align: start; }

.lx-nav-btn {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all .25s var(--lx-ease);
}
.lx-nav-btn:hover {
    background: var(--lx-gold-500);
    border-color: var(--lx-gold-500);
    color: var(--lx-green-900);
}
.lx-nav-btn--light {
    border-color: var(--lx-line);
    background: var(--lx-surface);
    color: var(--lx-green-800);
}
.lx-nav-btn--light:hover { background: var(--lx-green-800); color: var(--lx-gold-400); border-color: var(--lx-green-800); }

/* Respect reduced-motion preferences across the whole home page */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   7. TOP TICKER  (announcement strip below the fixed header)
   ===================================================================== */

.lx-ticker {
    background: var(--lx-grad-green);
    color: var(--lx-gold-200);
    border-bottom: 1px solid rgba(212, 175, 55, .35);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 var(--lx-gutter);
    height: 42px;
    box-sizing: border-box;
}
.lx-ticker__tag {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--lx-grad-gold);
    color: var(--lx-green-900);
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--lx-r-pill);
    line-height: 1;
    white-space: nowrap;
}
.lx-ticker__viewport {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    /* Short fade on the entry edge so the first words are not swallowed,
       longer fade on the exit edge where text leaves the strip. */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent);
}
.lx-ticker__track {
    display: inline-flex;
    align-items: center;
    gap: 60px;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    animation: lxMarquee 26s linear infinite;
    will-change: transform;
}
.lx-ticker:hover .lx-ticker__track { animation-play-state: paused; }
@keyframes lxMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (max-width: 640px) {
    .lx-ticker { height: 38px; gap: 10px; }
    .lx-ticker__tag { font-size: 9.5px; padding: 4px 9px; letter-spacing: .8px; }
    .lx-ticker__track { font-size: 11.5px; gap: 40px; animation-duration: 18s; }
}