/* Reusable celebration layer: a campaign only decorates its own product hero. */
[data-promotion].promotion-active {
    --promotion-ink: #fff2df;
    --promotion-muted: #ffdab9;
    background:
        radial-gradient(ellipse at 18% 18%, rgba(231, 58, 34, .72), transparent 36%),
        radial-gradient(ellipse at 82% 82%, rgba(194, 24, 31, .55), transparent 43%),
        linear-gradient(130deg, #a80d18 0%, #790711 49%, #4f0310 100%);
    color: var(--promotion-ink);
}

[data-theme="light"] [data-promotion].promotion-active {
    --promotion-ink: #fff8e9;
    --promotion-muted: #ffe8cd;
    background:
        radial-gradient(ellipse at 18% 16%, rgba(255, 105, 48, .25), transparent 37%),
        radial-gradient(ellipse at 83% 78%, rgba(130, 5, 22, .45), transparent 44%),
        linear-gradient(130deg, #ad111b 0%, #980b18 52%, #6f0916 100%);
}

[data-promotion].promotion-active::before,
[data-theme="light"] [data-promotion].promotion-active::before {
    background: radial-gradient(circle, rgba(255, 197, 93, .20), transparent 69%);
}

[data-promotion].promotion-active .hero-title {
    color: #ffe5aa;
    background: linear-gradient(105deg, #ffeab0 0%, #ffb075 17%, #ffad90 29%, #ffd370 46%, #fff1ba 57%, #ffb075 74%, #ffad90 86%, #ffe4a0 100%);
    background-size: 320% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: promotion-title-flow 7s ease-in-out infinite;
    text-shadow: 0 6px 22px rgba(65, 3, 9, .18);
}

@keyframes promotion-title-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

[data-promotion].promotion-active :is(.subheadline, .hero-security-text, .hero-security-kicker, .home-hero-version) {
    color: var(--promotion-ink);
}

[data-promotion].promotion-active :is(.hero-security-note, .hero-stat) {
    color: var(--promotion-muted);
}

[data-promotion].promotion-active .home-platform-badge {
    background: rgba(255, 255, 255, .16);
    color: rgba(255, 248, 233, .9);
}

[data-promotion].promotion-active .hero-security-copy::before {
    background: linear-gradient(90deg, transparent, rgba(255, 214, 129, .72), transparent);
}

[data-promotion].promotion-active .hero-cta .btn {
    background: rgba(255, 241, 207, .13);
    border: 1px solid rgba(255, 228, 170, .78);
    color: #fff8e9;
}
[data-promotion].promotion-active .hero-cta .btn:hover {
    background: rgba(255, 241, 207, .23);
    color: #fff8e9;
    box-shadow: none;
}
[data-promotion].promotion-active .hero-cta .btn:focus-visible {
    outline: 3px solid #ffe2a0;
    outline-offset: 3px;
}

.promotion-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

[data-promotion].promotion-active .promotion-scene {
    opacity: 1;
    visibility: visible;
}

.promotion-ribbons {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke-linecap: round;
    opacity: .88;
}

.promotion-ribbons > path {
    stroke: #ffd579;
    stroke-width: 6;
    animation: promotion-ribbon-drift 7s ease-in-out infinite alternate;
    filter: drop-shadow(0 2px 4px rgba(75, 4, 9, .35));
}

.promotion-ribbons path:nth-child(2),
.promotion-ribbons path:nth-child(5) { stroke: #ff8650; stroke-width: 7; animation-delay: -2s; }
.promotion-ribbons path:nth-child(3) { stroke: #fff0b8; stroke-width: 4; animation-delay: -4s; }
.promotion-ribbons path:nth-child(4) { stroke: #ffc05b; stroke-width: 8; animation-delay: -1s; }
.promotion-ribbons path:nth-child(6) { stroke: #ffac76; stroke-width: 5; animation-delay: -3s; }
.promotion-ribbons path:nth-child(7),
.promotion-ribbons path:nth-child(8) { stroke: #ffeab3; stroke-width: 4; animation-delay: -5s; }
.promotion-ribbons path:nth-child(9),
.promotion-ribbons path:nth-child(10) { stroke: #ff9d60; stroke-width: 5; animation-delay: -3s; }
.promotion-confetti rect {
    fill: #ffe1a0;
    stroke: none;
    opacity: .9;
    transform-box: fill-box;
    transform-origin: center;
    animation: promotion-confetti-float 5.2s ease-in-out infinite alternate;
}
.promotion-confetti rect:nth-child(3n + 2) { fill: #ff925c; }
.promotion-confetti rect:nth-child(3n) { fill: #fff2c7; }
.promotion-confetti rect:nth-child(4n) { animation-delay: -2.8s; }
.promotion-confetti rect:nth-child(4n + 2) { animation-delay: -1.4s; }
.promotion-confetti rect:nth-child(4n + 3) { animation-delay: -4s; }

@keyframes promotion-ribbon-drift {
    from { transform: translateY(-12px) rotate(-1deg); opacity: .72; }
    to { transform: translateY(13px) rotate(1deg); opacity: 1; }
}

@keyframes promotion-confetti-float {
    from { transform: translate3d(-8px, -14px, 0) rotate(-20deg); opacity: .62; }
    to { transform: translate3d(10px, 18px, 0) rotate(30deg); opacity: 1; }
}

.promotion-scene:not(.promotion-scene-playing) .promotion-ribbons path,
.promotion-scene:not(.promotion-scene-playing) .promotion-confetti rect { animation-play-state: paused; }

@media (min-width: 901px) and (any-hover: hover) and (any-pointer: fine) {
    .home-product-deck-ready [data-promotion]:not(.is-active) .promotion-scene { opacity: 0; }
    .home-product-deck-ready [data-promotion]:not(.is-active) .promotion-scene .promotion-ribbons path,
    .home-product-deck-ready [data-promotion]:not(.is-active) .promotion-scene .promotion-confetti rect { animation-play-state: paused; }
}

.promotion-offer {
    position: relative;
    width: 100%;
    margin-bottom: 18px;
    padding-top: 42px;
    text-align: center;
}
.promotion-offer[hidden], [data-promotion-result][hidden] { display: none; }
.promotion-offer-badge {
    position: absolute;
    z-index: 1;
    top: 39px;
    right: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 104px;
    padding: 5px 10px 6px;
    border: 1px solid rgba(101, 16, 13, .14);
    border-radius: 10px;
    background: #ffedbe;
    color: #6a1b13;
    line-height: 1.2;
    white-space: nowrap;
    transform: translate(50%, -50%) rotate(20deg);
    box-shadow: 0 3px 9px rgba(58, 5, 8, .16);
    pointer-events: none;
}
.promotion-offer-badge strong { font-size: 12px; font-weight: 700; }
.promotion-offer-badge span { font-size: 10px; font-weight: 600; opacity: .78; }
.promotion-sold-out .promotion-offer-badge { display: none; }
.promotion-offer.promotion-sold-out { margin-top: 0; padding-top: 0; }

.promotion-claim {
    width: 100%;
    min-height: 46px;
    background: #ffdc8f;
    color: #65100d;
    border: 0;
    font-size: 14px;
    font-weight: 700;
}
.promotion-claim:hover { background: #ffe9b3; color: #65100d; }
.promotion-claim:focus-visible { outline: 3px solid #fff1c9; outline-offset: 3px; }
.promotion-sold-out .promotion-claim { background: var(--card-bg); color: var(--text-primary); }

.promotion-dialog { width: min(460px, calc(100vw - 32px)); }
.promotion-dialog p { font-size: 14px; line-height: 1.6; margin: 12px 0; }
.promotion-dialog .promotion-dialog-terms { color: var(--text-secondary); font-size: 13px; }
.promotion-dialog .promotion-claim { margin-top: 8px; background: #a41522; color: #fff; }
.promotion-dialog .promotion-claim:hover { background: #850e1a; color: #fff; }
.promotion-dialog .promotion-claim:focus-visible { outline-color: #a41522; }
[data-promotion-code] { display: block; margin: 18px 0; padding: 14px 8px; text-align: center; background: var(--bg-secondary); border-radius: 8px; font-size: 18px; overflow-wrap: anywhere; user-select: all; }
.promotion-result-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.promotion-result-actions .btn { flex: 1 1 auto; font-size: 13px; }
.promotion-claim[hidden] { display: none; }

@media (max-width: 900px) {
    .promotion-offer-badge { top: 27px; right: 42px; }
    .home-product-deck-ready [data-promotion]:not(.is-active) .promotion-scene { opacity: 0; }
    .home-product-deck-ready [data-promotion]:not(.is-active) .promotion-ribbons path,
    .home-product-deck-ready [data-promotion]:not(.is-active) .promotion-confetti rect { animation-play-state: paused; }
    [data-promotion] .home-hero-layout { grid-template-columns: minmax(0, 1fr); }
    [data-promotion] .home-hero-download { width: min(100%, 300px); }
    [data-promotion] .home-hero-layout > .subheadline,
    [data-promotion] .hero-security-copy {
        min-width: 0;
        width: min(100%, 520px);
        box-sizing: border-box;
        padding-inline: 12px;
    }
    .promotion-ribbons { opacity: .65; }
}

@media (max-width: 380px) {
    .promotion-offer-badge { right: 60px; }
}

@media (prefers-reduced-motion: reduce) {
    [data-promotion].promotion-active .hero-title { animation: none; background-position: 50% 50%; }
    .promotion-ribbons path, .promotion-confetti rect { animation: none; }
}
