/* =====================================================
   ===== STRYV4 HOMEPAGE CARD · LUCKY NUMBERS        =====
   ===== v1 · Tag: STR                               =====
   ===== file: card-lucky-numbers_STR.css            =====
   ===================================================== */

/*
 * Self-contained advert card for the Stryv4 Lucky Numbers
 * project. Lives in the homepage-cards system as its own batch.
 * Every selector is scoped under .card-lucky-numbers so nothing
 * here can leak into any other homepage card.
 *
 * Companion script: card-lucky-numbers_STR.js (bulb placement,
 * headline rotator, archive fetcher, countdown ticker).
 *
 * House conventions:
 *   - Section headers in CAPS with ===== wrappers
 *   - CodeNumber X.Y block labels
 *   - British English throughout
 *   - Vanilla CSS, no external dependencies
 *   - Fully self-contained within the card rectangle
 */




/* =====================================================
   ===== SECTION 0: CUSTOM FONT FACE                 =====
   ===================================================== */

/* CodeNumber 0.1 — Carnivalee Freakshow display font for the
   rotating headline. File lives at /fonts/ under the child theme
   root. Path is relative from this CSS file's location at
   /css/homepage-cards/card-lucky-numbers_STR.css — i.e. up two
   directories then down into /fonts/. font-display: swap shows
   a fallback during load rather than blocking render. */

@font-face {
    font-family: 'CarnivaleeFreakshow';
    src: url('../../fonts/CarnivaleeFreakshow-DLrm.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




/* =====================================================
   ===== SECTION 1: CARD-SCOPED PALETTE TOKENS       =====
   ===================================================== */

/* CodeNumber 1.1 — Palette tokens namespaced with --lc-* (lucky
   card) so they can never collide with site-wide variables. Hex
   values mirror the velvet & gold palette from
   /lucky-tickets/css/shop_frame_STR.css so the card visually
   matches the destination it advertises. */

.card-lucky-numbers {
    --lc-velvet-deep: #4a0608;
    --lc-velvet-mid: #6e0a0d;
    --lc-velvet-light: #8b1014;
    --lc-velvet-ink: #1a0608;

    --lc-gold-deep: #6b4d12;
    --lc-gold-mid: #b08a2e;
    --lc-gold-light: #ead78a;
    --lc-gold-bright: #fff3c4;
    --lc-gold-shimmer: #ffe69c;

    --lc-ink: #2a0202;
    --lc-paper-cream: #f0e6d8;
    --lc-paper-warm: #d8c69a;
}





/* =====================================================
   ===== SECTION 2: CARD SURFACE & TYPOGRAPHY        =====
   ===================================================== */

/* CodeNumber 2.1 — The card's surface. The homepage canvas
   handles outer dimensions, border-radius, drop-shadow and hover
   lift; this rule paints the inside: velvet background, paper
   text, serif typography. Treated as one bounded cinema poster. */

.card-lucky-numbers {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(110, 10, 13, 0.55) 0%, transparent 60%),
        radial-gradient(ellipse at 75% 70%, rgba(74, 6, 8, 0.5) 0%, transparent 55%),
        linear-gradient(180deg, var(--lc-velvet-deep) 0%, var(--lc-velvet-ink) 100%) !important;
    color: var(--lc-paper-cream);
    font-family: 'CormorantGaramond', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    overflow: hidden;
    position: relative;

    /* CodeNumber 2.1c — Designate this card as a query container.
       Lets nested @container queries below respond to the CARD's
       own inline width, not the browser viewport. The card sits
       inside the homepage canvas which constrains its width
       independently of the viewport, so viewport @media queries
       fire wrong. Container queries fix that. */
    container-type: inline-size;
    container-name: lucky-card;
}

/* CodeNumber 2.1b — The homepage-cards core canvas applies a
   paper/cream background that ties on specificity with our rule
   above. !important on the velvet plus a transparent override on
   the inner content layer guarantee the velvet always wins,
   regardless of which stylesheet enqueues last. */

.card-lucky-numbers .hp-postcard-content,
.card-lucky-numbers .hp-postcard-content::before,
.card-lucky-numbers .hp-postcard-content::after {
    background: transparent !important;
}

/* CodeNumber 2.2 — Subtle grain overlay so the velvet doesn't
   read as a flat block of colour. Matches the body::before
   treatment in the shop page. */

.card-lucky-numbers::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.05;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(255, 230, 156, 0.4) 1px, transparent 2px),
        radial-gradient(circle at 75% 75%, rgba(255, 230, 156, 0.25) 1px, transparent 2px);
    background-size: 4px 4px, 7px 7px;
}





/* =====================================================
   ===== SECTION 3: LIGHTS FRAME (BULB PERIMETER)    =====
   ===================================================== */

/* CodeNumber 3.1 — The container that holds the bulb perimeter
   and the card's content layer. Sits inside .hp-postcard-content
   and is inset slightly so the bulbs sit comfortably away from
   the rounded canvas corners. */

.card-lucky-numbers .stryv-lights-frame {
    position: absolute;
    inset: 14px;
    z-index: 2;
}

/* CodeNumber 3.2 — Bulb container. The bulb placement JS injects
   div children into this element with absolute positioning at
   percentage coordinates. Pointer-events disabled so the bulbs
   never block clicks on the content layer above. */

.card-lucky-numbers .stryv-lights-frame__sides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

/* CodeNumber 3.3 — Base bulb styling. 14×14 round with the
   colour-cycle animation always running. The .stryv-bulb--r/y/b
   modifier sets the initial paint and the phase offset so the
   whole perimeter reads as a marching-lights effect. */

.card-lucky-numbers .stryv-bulb {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: stryv-bulb-cycle 1.5s linear infinite;
}

/* CodeNumber 3.4 — Three initial colour variants. Setting the
   paint here as well as inside the keyframes prevents a flash of
   unstyled bulb at first paint. */

.card-lucky-numbers .stryv-bulb--r {
    background: radial-gradient(circle at 35% 30%, #ff8a8a 0%, #e6212b 55%, #6e0010 100%);
    box-shadow:
        0 0 0 1px #2a0408,
        0 0 8px 2px rgba(230, 33, 43, 0.5),
        inset -1px -1px 2px rgba(0, 0, 0, 0.4);
    animation-delay: 0s;
}

.card-lucky-numbers .stryv-bulb--y {
    background: radial-gradient(circle at 35% 30%, #fff7b8 0%, #f4c842 55%, #8a6300 100%);
    box-shadow:
        0 0 0 1px #2e1f00,
        0 0 8px 2px rgba(244, 200, 66, 0.5),
        inset -1px -1px 2px rgba(0, 0, 0, 0.4);
    animation-delay: -0.5s;
}

.card-lucky-numbers .stryv-bulb--b {
    background: radial-gradient(circle at 35% 30%, #aac6ff 0%, #2548d8 55%, #0a1450 100%);
    box-shadow:
        0 0 0 1px #00081f,
        0 0 8px 2px rgba(37, 72, 216, 0.5),
        inset -1px -1px 2px rgba(0, 0, 0, 0.4);
    animation-delay: -1s;
}

/* CodeNumber 3.5 — The colour-cycle keyframes. Each bulb walks
   R → Y → B over 1.5s. Combined with the phase offsets above,
   the perimeter looks like running lights at a fairground. Hex
   values lifted verbatim from shop_frame_STR.css §5.5. */

@keyframes stryv-bulb-cycle {
    0%, 33.32% {
        background: radial-gradient(circle at 35% 30%, #ff8a8a 0%, #e6212b 55%, #6e0010 100%);
        box-shadow:
            0 0 0 1px #2a0408,
            0 0 8px 2px rgba(230, 33, 43, 0.5),
            inset -1px -1px 2px rgba(0, 0, 0, 0.4);
        filter:
            drop-shadow(0 0 3px #ff4848)
            drop-shadow(0 0 6px rgba(255, 50, 50, 0.4));
    }
    33.33%, 66.65% {
        background: radial-gradient(circle at 35% 30%, #fff7b8 0%, #f4c842 55%, #8a6300 100%);
        box-shadow:
            0 0 0 1px #2e1f00,
            0 0 8px 2px rgba(244, 200, 66, 0.5),
            inset -1px -1px 2px rgba(0, 0, 0, 0.4);
        filter:
            drop-shadow(0 0 3px #ffe070)
            drop-shadow(0 0 6px rgba(255, 220, 80, 0.4));
    }
    66.66%, 100% {
        background: radial-gradient(circle at 35% 30%, #aac6ff 0%, #2548d8 55%, #0a1450 100%);
        box-shadow:
            0 0 0 1px #00081f,
            0 0 8px 2px rgba(37, 72, 216, 0.5),
            inset -1px -1px 2px rgba(0, 0, 0, 0.4);
        filter:
            drop-shadow(0 0 3px #5a8aff)
            drop-shadow(0 0 6px rgba(60, 120, 255, 0.4));
    }
}





/* =====================================================
   ===== SECTION 4: THREE-COLUMN LAYOUT              =====
   ===================================================== */

/* CodeNumber 4.1 — Content row sitting inside the lights frame.
   Padding clears the bulb perimeter on every edge. Three columns:
   logo block, rotating-headline + last-draw centre, countdown
   + CTA on the right. */

.card-lucky-numbers .stryv-lights-frame__content {
    position: absolute;
    inset: 0;
    padding: 28px 36px;
    display: flex;
    align-items: stretch;
    gap: 28px;
    z-index: 2;
}

.card-lucky-numbers .stryv-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.card-lucky-numbers .stryv-col--left   { flex: 0 0 300px; }
.card-lucky-numbers .stryv-col--centre { flex: 1 1 auto; min-width: 0; gap: 20px; }
.card-lucky-numbers .stryv-col--right  { flex: 0 0 280px; }





/* =====================================================
   ===== SECTION 5: LEFT COLUMN — LOGO BLOCK         =====
   ===================================================== */

/* CodeNumber 5.1 — Tent logo. The original PNG renders as an
   img (keeping its stripes/flag detail) and gets a permanent
   cycling drop-shadow glow that walks through red, yellow, and
   blue on the same 1.5s cycle as the bulb border. Inner shadow
   colours mirror the bulb glow hexes so the tent visually belongs
   to the same family of "marching lights" as the border. */

.card-lucky-numbers .stryv-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.card-lucky-numbers .stryv-logo-img {
    display: block;
    width: 256px;
    height: 256px;
    animation: stryv-tent-glow-cycle 1.5s linear infinite;
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
    cursor: pointer;
}

/* CodeNumber 5.2 — Tent glow cycle. Each phase is a stack of
   three drop-shadows: a depth shadow (constant black) plus an
   18px inner glow and a 36px outer glow in the phase colour.
   Hard switches at 33.33% / 66.66% mirror stryv-bulb-cycle so
   the tent and bulbs read as the same effect family. */

@keyframes stryv-tent-glow-cycle {
    0%, 33.32% {
        filter:
            drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45))
            drop-shadow(0 0 18px rgba(255, 90, 90, 0.6))
            drop-shadow(0 0 36px rgba(255, 60, 60, 0.4));
    }
    33.33%, 66.65% {
        filter:
            drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45))
            drop-shadow(0 0 18px rgba(255, 216, 112, 0.6))
            drop-shadow(0 0 36px rgba(255, 200, 80, 0.4));
    }
    66.66%, 100% {
        filter:
            drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45))
            drop-shadow(0 0 18px rgba(110, 160, 255, 0.6))
            drop-shadow(0 0 36px rgba(80, 130, 255, 0.4));
    }
}

/* CodeNumber 5.2b — Tent hover: gentle scale-up. The glow-cycle
   animation owns the `filter` property so it keeps running
   uninterrupted under the hover. Reduced-motion users keep the
   glow paused on red and lose the scale. */

.card-lucky-numbers .stryv-logo-img:hover {
    transform: scale(1.06);
}

.card-lucky-numbers .stryv-logo-caption {
    font-family: 'CormorantGaramond', 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lc-paper-warm);
    opacity: 0.72;
}





/* =====================================================
   ===== SECTION 6: CENTRE — BRAND + ROTATING HEAD   =====
   ===================================================== */

/* CodeNumber 6.1 — Pre-headline title. The main brand title for
   the card; sits above the rotating message and stays put.
   Carnivalee Freakshow with strong size and letterspacing so it
   reads as a fairground banner rather than a sub-label. */

.card-lucky-numbers .stryv-brand {
    font-family: 'CarnivaleeFreakshow', 'PlayfairDisplay', Georgia, serif;
    font-weight: normal;
    color: var(--lc-gold-bright);
    font-size: clamp(32px, 3vw, 46px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.7),
        0 0 18px rgba(255, 200, 80, 0.25);
}

/* CodeNumber 6.2 — Rotating headline stage. Fixed height so the
   layout doesn't shift when lines swap. Five child .__line
   elements stack absolutely; opacity + transform fade each one
   in and out on a shared 24.5s cycle. Five visible slots of 3.5s
   (17.5s of text) followed by a 7s silent gap before the loop
   restarts — that gap is a deliberate cue that the cycle is
   resetting. The gap happens automatically because the cycle is
   longer than the sum of visible windows. */

.card-lucky-numbers .stryv-headline {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
}

.card-lucky-numbers .stryv-headline__line {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-family: 'CarnivaleeFreakshow', 'PlayfairDisplay', Georgia, serif;
    font-weight: normal;
    font-size: clamp(40px, 3.5vw, 54px);
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: var(--lc-gold-bright);
    text-shadow:
        0 2px 14px rgba(255, 216, 112, 0.28),
        0 0 28px rgba(255, 200, 80, 0.18);
    opacity: 0;
    transform: translateY(8px) scale(0.985);
    animation: stryv-headline-rotate 24.5s ease-in-out infinite;
}

/* CodeNumber 6.3 — Phase offsets so the five lines take turns
   on the 24.5s loop. Delays are -3.5s apart so each line's
   visible window starts 3.5s after the previous one. After
   line 5 finishes at 17.5s the cycle holds blank until 24.5s. */

.card-lucky-numbers .stryv-headline__line:nth-child(1) { animation-delay: 0s; }
.card-lucky-numbers .stryv-headline__line:nth-child(2) { animation-delay: -21s; }
.card-lucky-numbers .stryv-headline__line:nth-child(3) { animation-delay: -17.5s; }
.card-lucky-numbers .stryv-headline__line:nth-child(4) { animation-delay: -14s; }
.card-lucky-numbers .stryv-headline__line:nth-child(5) { animation-delay: -10.5s; }

/* CodeNumber 6.4 — The rotate keyframe scaled for a 24.5s cycle
   where each line is visible for 14% of the loop (~3.4s). Fade
   in 0-2%, hold 2-12%, fade out 12-14%, rest 14-100%. The 86%
   "rest" portion is what creates the silent gap after line 5:
   once line 5's visible window ends, no other line has its window
   start until the cycle restarts. */

@keyframes stryv-headline-rotate {
    0%   { opacity: 0; transform: translateY(8px) scale(0.985); }
    2%   { opacity: 1; transform: translateY(0) scale(1); }
    12%  { opacity: 1; transform: translateY(0) scale(1); }
    14%  { opacity: 0; transform: translateY(-8px) scale(1.015); }
    100% { opacity: 0; transform: translateY(8px) scale(0.985); }
}





/* =====================================================
   ===== SECTION 7: CENTRE — LAST-DRAW STRIP         =====
   ===================================================== */

/* CodeNumber 7.1 — Last-draw region: label + six main balls +
   bonus ball. Sits below the rotating headline in the centre
   column. Populated at runtime from the archive JSON. */

.card-lucky-numbers .stryv-last-draw {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.card-lucky-numbers .stryv-last-draw__label {
    font-family: 'CormorantGaramond', 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    color: var(--lc-paper-warm);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.78;
}

.card-lucky-numbers .stryv-last-draw__balls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

/* CodeNumber 7.2 — Mini lucky ball. Same gold-leaf treatment as
   the shop's .lucky-ball but shrunk to fit a strip. Number is
   zero-padded by the JS so a single-digit ball still reads as a
   proper "07" / "12" style. */

.card-lucky-numbers .stryv-mini-ball {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%,
        var(--lc-gold-shimmer) 0%,
        var(--lc-gold-light) 18%,
        var(--lc-gold-mid) 60%,
        var(--lc-gold-deep) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'PlayfairDisplay', 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--lc-ink);
    box-shadow:
        0 3px 9px rgba(0, 0, 0, 0.55),
        inset -1px -2px 4px rgba(0, 0, 0, 0.25),
        inset 1px 1px 3px rgba(255, 230, 156, 0.6),
        0 0 12px rgba(234, 215, 138, 0.32);
}

/* CodeNumber 7.3 — Bonus ball variant: red velvet, gold number.
   Separated visually with a thin "+" divider. */

.card-lucky-numbers .stryv-mini-ball--bonus {
    background: radial-gradient(circle at 30% 28%,
        #ff7a8a 0%,
        #c4181f 35%,
        #8b1014 70%,
        #4a0608 100%);
    color: var(--lc-gold-bright);
    box-shadow:
        0 3px 9px rgba(0, 0, 0, 0.55),
        inset -1px -2px 4px rgba(0, 0, 0, 0.3),
        inset 1px 1px 3px rgba(255, 200, 200, 0.45),
        0 0 14px rgba(196, 24, 31, 0.4);
}

.card-lucky-numbers .stryv-bonus-plus {
    color: var(--lc-gold-mid);
    font-size: 18px;
    font-weight: 600;
    margin: 0 2px;
    opacity: 0.6;
}





/* =====================================================
   ===== SECTION 8: RIGHT COLUMN — COUNTDOWN + CTA   =====
   ===================================================== */

/* CodeNumber 8.1 — The "Next draw in …" block. */

.card-lucky-numbers .stryv-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.card-lucky-numbers .stryv-countdown__label {
    font-family: 'CormorantGaramond', 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    color: var(--lc-paper-warm);
    font-size: 14px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.78;
}

.card-lucky-numbers .stryv-countdown__value {
    font-family: 'PlayfairDisplay', 'Playfair Display', Georgia, serif;
    font-weight: 600;
    color: var(--lc-gold-bright);
    font-size: 34px;
    letter-spacing: 0.01em;
    line-height: 1.1;
    text-shadow:
        0 2px 12px rgba(255, 216, 112, 0.3),
        0 0 22px rgba(255, 200, 80, 0.18);
    min-height: 38px;
}

.card-lucky-numbers .stryv-countdown__sub {
    font-family: 'CormorantGaramond', 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    color: var(--lc-paper-warm);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: 2px;
}

/* CodeNumber 8.2 — Play-now CTA. Gold-leaf pill with a gentle
   hover lift. Links into the lottery shop. */

.card-lucky-numbers .stryv-cta {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    background: linear-gradient(180deg,
        var(--lc-gold-shimmer) 0%,
        var(--lc-gold-light) 45%,
        var(--lc-gold-mid) 100%);
    border: 1px solid var(--lc-gold-mid);
    border-radius: 999px;
    color: var(--lc-ink);
    font-family: 'PlayfairDisplay', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.card-lucky-numbers .stryv-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    filter: brightness(1.06);
}

.card-lucky-numbers .stryv-cta__arrow {
    font-size: 18px;
    line-height: 1;
}





/* =====================================================
   ===== SECTION 9: RESPONSIVE FALLBACKS             =====
   ===================================================== */

/* CodeNumber 9.1 — These rules use @container, not @media. They
   fire based on the CARD's own width, not the browser viewport.
   The card sits inside the homepage canvas which constrains its
   width independently, so a 1920px viewport may still hold a
   900px card — viewport-based rules wouldn't know that. Tested
   thresholds at 1100 / 800 / 480 card-width. */

@container lucky-card (max-width: 1100px) {
    .card-lucky-numbers .stryv-col--left  { flex: 0 0 220px; }
    .card-lucky-numbers .stryv-col--right { flex: 0 0 200px; }
    .card-lucky-numbers .stryv-logo-img   { width: 200px; height: 200px; }
    .card-lucky-numbers .stryv-countdown__value { font-size: 24px; }
    .card-lucky-numbers .stryv-mini-ball  { width: 30px; height: 30px; font-size: 13px; }
    .card-lucky-numbers .stryv-brand      { font-size: 30px; letter-spacing: 0.05em; }
    .card-lucky-numbers .stryv-headline       { height: 200px; }
    .card-lucky-numbers .stryv-headline__line { font-size: 40px; line-height: 1.15; }
}

/* CodeNumber 9.2 — Card-width breakpoint: stack the three
   columns when the card itself gets narrow enough that the
   three-column layout starves the centre column. Triggered at
   800px card width regardless of viewport. */

@container lucky-card (max-width: 800px) {
    .card-lucky-numbers .stryv-lights-frame__content {
        flex-direction: column;
        padding: 22px;
        gap: 12px;
        overflow-y: auto;
    }
    .card-lucky-numbers .stryv-col--left,
    .card-lucky-numbers .stryv-col--right,
    .card-lucky-numbers .stryv-col--centre {
        flex: 0 0 auto;
        width: 100%;
    }
    .card-lucky-numbers .stryv-brand          { font-size: 28px; }
    .card-lucky-numbers .stryv-headline       { height: 72px; }
    .card-lucky-numbers .stryv-headline__line { font-size: 24px; line-height: 1.1; }
    .card-lucky-numbers .stryv-logo-img       { width: 200px; height: 200px; }
    .card-lucky-numbers .stryv-cta            { margin-top: 8px; }
}





/* =====================================================
   ===== SECTION 10: REDUCED-MOTION COURTESY         =====
   ===================================================== */

/* CodeNumber 10.1 — Respect the OS prefers-reduced-motion. The
   headline holds on its first line and the bulbs stop cycling
   (they keep their initial R/Y/B paint, so the visual identity
   still reads at a glance). */

@media (prefers-reduced-motion: reduce) {
    .card-lucky-numbers .stryv-bulb,
    .card-lucky-numbers .stryv-headline__line,
    .card-lucky-numbers .stryv-logo-img {
        animation: none;
    }
    .card-lucky-numbers .stryv-headline__line:nth-child(1) {
        opacity: 1;
        transform: none;
    }
    .card-lucky-numbers .stryv-cta:hover {
        transform: none;
    }
    .card-lucky-numbers .stryv-logo-img:hover {
        transform: none;
    }
}