/* Black Friday 2025 — Brockmann × Fibonacci Grid
   Minimal, bold banner animation for 10% site-wide offers
   Design: clean grid, strong typographic hierarchy, subtle motion
*/

:root{
    --bf-accent:#0f0f12; /* dark charcoal */
    --bf-highlight:#ffde00; /* gold/yellow accent for BF */
    --bf-cta:#be003c; /* site primary */
    --bf-muted:rgba(255,255,255,0.08);
}

.bf-banner{ 
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:28px;
    z-index:99999;
    width:min(1100px,calc(100% - 28px));
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.45);
    display:flex;
    gap:0;
    pointer-events:auto;
    will-change:transform,opacity;
    animation:bf-pop-in 420ms cubic-bezier(.2,.9,.2,1) both;
    /* Backdrop blur — glassmorphism effect */
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

.bf-left{ 
    width:46%;
    min-width:320px;
    background:linear-gradient(135deg,var(--bf-accent),#1b1b1f);
    color:#fff;
    position:relative;
    padding:26px 28px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.bf-grid{ /* Brockmann-inspired modular grid lines with Fibonacci rhythm */
    position:absolute; inset:0; pointer-events:none; opacity:0.85;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 21.6% 100%, 100% 100%;
    mix-blend-mode:overlay;
    animation:scroll-grid 9s linear infinite;
}

.bf-left .ten{ 
    font-weight:900; 
    font-size:clamp(48px,6.5vw,96px);
    letter-spacing:-0.03em;
    line-height:0.86;
    text-transform:uppercase;
    color:var(--bf-highlight);
    text-shadow: 0 4px 30px rgba(255,222,0,0.08);
    transform-origin:center left;
    animation:ten-tilt 3.2s ease-in-out infinite;
}

.bf-left .sub{
    color:rgba(255,255,255,0.88);
    font-weight:600;
    font-size:14px;
    margin-top:6px;
    opacity:0.95;
}

.bf-right{
    flex:1; 
    /* darker panel so white text has strong contrast */
    background:linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.44));
    padding:22px 28px; 
    display:flex; 
    align-items:center; 
    gap:20px;
}

.bf-copy{
    flex:1; 
    color:var(--color-text, #fff);
    font-weight:600;
    text-shadow: 0 6px 18px rgba(0,0,0,0.55);
}

.bf-title{
    font-size:clamp(18px,2.8vw,26px);
    letter-spacing:0.02em;
    color:var(--color-text,#ffffff);
    margin-bottom:6px;
    text-shadow: 0 8px 28px rgba(0,0,0,0.6);
}

.bf-desc{ 
    font-size:13px; 
    color:rgba(255,255,255,0.92);
    text-shadow: 0 4px 14px rgba(0,0,0,0.45);
}

.bf-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(180deg,var(--bf-cta),#8f002f);
    color:#fff;
    padding:12px 18px;
    border-radius:12px;
    font-weight:800;
    box-shadow:0 8px 30px rgba(190,0,60,0.24);
    transform:translateZ(0);
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease;
}

.bf-cta:active{ transform:translateY(2px) scale(.995);} 
.bf-cta:hover{ transform:translateY(-4px); box-shadow:0 18px 60px rgba(190,0,60,0.32);} 

.bf-badge{
    width:78px; min-width:78px; height:78px; display:grid; place-items:center;
    border-radius:14px; background:linear-gradient(135deg, rgba(0,0,0,0.12), rgba(255,222,0,0.06));
    border:1px solid rgba(255,255,255,0.06);
    color:var(--bf-cta); font-weight:900; font-size:20px;
    box-shadow:0 6px 24px rgba(0,0,0,0.36), inset 0 -6px 18px rgba(255,222,0,0.04);
    transform:translateZ(0);
    animation:badge-pulse 3s ease-in-out infinite both;
}

/* Shimmer sweep across the left 10% */
.bf-left .ten{
    position:relative;
    overflow:visible;
}
.bf-left .ten::after{
    content:''; position:absolute; inset:0; left:-40%; width:40%; background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.12), rgba(255,255,255,0.02)); transform:skewX(-18deg); mix-blend-mode:overlay; opacity:0; pointer-events:none; animation:ten-shimmer 3.4s ease-in-out 1s infinite;}

@keyframes ten-shimmer{ 0%{ left:-60%; opacity:0 } 45%{ left:20%; opacity:0.9 } 65%{ left:46%; opacity:0.45 } 100%{ left:110%; opacity:0 }}

/* Sparkles layer */
.bf-sparkle{ position:absolute; inset:auto 12px 12px auto; width:14px; height:14px; border-radius:4px; background:linear-gradient(135deg,var(--bf-highlight),#ffd46b); box-shadow:0 10px 30px rgba(255,187,0,0.18); transform:translate3d(0,0,0); animation:sparkle-flick 2s infinite; opacity:0.95 }
@keyframes sparkle-flick{ 0%{ transform:translateY(0) rotate(0) scale(.9)} 50%{ transform:translateY(-6px) rotate(22deg) scale(1.1)} 100%{ transform:translateY(0) rotate(0) scale(.9)}}

/* CONFETTI */
.bf-confetti-piece{ position:absolute; width:10px; height:14px; border-radius:2px; transform-origin:center; will-change:transform,opacity; pointer-events:none; opacity:0.96 }
@keyframes confetti-fall{ 0%{ transform:translateY(-20px) rotate(0) scale(1); opacity:1 } 100%{ transform:translateY(280px) rotate(520deg) scale(.9); opacity:0 }}
@keyframes confetti-spin{ 0%{ transform:rotate(0) } 100%{ transform:rotate(360deg) }}

/* Accessible: reduced motion disables confetti and heavy motion */
@media (prefers-reduced-motion: reduce){
    .bf-left .ten::after, .bf-sparkle, .bf-confetti-piece, .bf-grid{ animation: none !important; }
}

/* subtle scanline overlay */
.bf-scanline{position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); mix-blend-mode:overlay; pointer-events:none;}

.bf-close{ position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:999px; background:rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.04); cursor:pointer; }

/* entrance animations */
@keyframes bf-pop-in{ from{ transform:translateX(-50%) translateY(28px) scale(.96); opacity:0 } to{ transform:translateX(-50%) translateY(0) scale(1); opacity:1 }}

@keyframes scroll-grid{ from{ background-position: 0 0, 0 0 } to{ background-position: 70px 0, 0 0 }}

@keyframes ten-tilt{ 0%,100%{ transform:rotate(-2deg) translateX(0) } 50%{ transform:rotate(1.5deg) translateX(8px) }}

@keyframes badge-pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.06) }}

/* micro-glitch to pull attention without being abrasive */
@keyframes glitch-x{ 0%{ transform:translateX(0) } 20%{ transform:translateX(-2px)} 40%{ transform:translateX(2px) } 60%{ transform:translateX(-1px) } 80%{ transform:translateX(1px) } 100%{ transform:translateX(0) }}

.bf-right .bf-title{ animation:glitch-x 7s linear infinite both; }

/* focus on readability for small screens */
@media (max-width:720px){
    .bf-banner{ flex-direction:column; width:calc(100% - 18px); left:50%; transform:translateX(-50%); bottom:18px; border-radius:14px;}
    .bf-left{ width:100%; min-width:unset; padding:18px; }
    .bf-right{ width:100%; padding:14px; align-items:flex-start;}
    .bf-left .ten{ font-size:44px }
    .bf-badge{ width:64px; height:64px; min-width:64px; font-size:18px }
}

/* when user has reduced motion preference, keep it subtle */
@media (prefers-reduced-motion: reduce){
    .bf-grid, .bf-left .ten, .bf-cta, .bf-badge, .bf-right .bf-title{ animation:none !important; }
}