/* Black Friday look for a Lagom promotion page. Switched on per page with
   Lagom's own Page Settings > "Body class" field: alx-bf-glow. Every rule is
   scoped to that class, so other pages never change (Allan, 7 Nov 2026).
   Glow black background, twinkling sparkles, shimmering captions, glowing
   cards and floating stickers (stickers come from promo-fx.js). Motion is
   switched off for visitors who ask for reduced motion. */

body.lagom.alx-bf-glow{background:#05050a;--alx-bf-blue:#0f62fe;--alx-bf-pink:#f12f75;--alx-bf-gold:#ffc83d}

/* glow black background, fixed behind the page */
body.alx-bf-glow::before{content:"";position:fixed;inset:-10vh -10vw;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42vw 34vw at 12% 8%,rgba(15,98,254,.42),transparent 62%),
    radial-gradient(36vw 30vw at 92% 22%,rgba(241,47,117,.30),transparent 60%),
    radial-gradient(48vw 36vw at 70% 92%,rgba(110,64,255,.30),transparent 62%),
    radial-gradient(34vw 28vw at 4% 78%,rgba(15,98,254,.22),transparent 60%),
    #05050a;
  animation:alx-bf-drift 26s ease-in-out infinite alternate}
@keyframes alx-bf-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2vw,1.5vh,0) scale(1.04)}100%{transform:translate3d(1.5vw,-1vh,0) scale(1.02)}}

/* sparkles: two tiled star layers that twinkle out of step */
body.alx-bf-glow::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px,rgba(255,255,255,.95),transparent 60%),
    radial-gradient(1.2px 1.2px at 140px 80px,rgba(255,255,255,.8),transparent 60%),
    radial-gradient(2px 2px at 90px 160px,rgba(255,214,120,.9),transparent 60%),
    radial-gradient(1.4px 1.4px at 200px 210px,rgba(255,255,255,.75),transparent 60%),
    radial-gradient(1.8px 1.8px at 260px 40px,rgba(255,150,200,.85),transparent 60%),
    radial-gradient(1.1px 1.1px at 60px 250px,rgba(255,255,255,.7),transparent 60%);
  background-size:300px 300px;
  animation:alx-bf-twinkle 3.6s ease-in-out infinite alternate}
.alx-bf-sparkles{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1.3px 1.3px at 50px 90px,rgba(255,255,255,.9),transparent 60%),
    radial-gradient(2.2px 2.2px at 170px 20px,rgba(140,190,255,.9),transparent 60%),
    radial-gradient(1.5px 1.5px at 230px 170px,rgba(255,255,255,.8),transparent 60%),
    radial-gradient(1.7px 1.7px at 110px 230px,rgba(255,200,90,.85),transparent 60%);
  background-size:260px 260px;background-position:130px 70px;
  animation:alx-bf-twinkle 4.8s ease-in-out -2.4s infinite alternate}
@keyframes alx-bf-twinkle{0%{opacity:.25}50%{opacity:.9}100%{opacity:.45}}

/* Lagom sections stay see-through so the glow runs under the whole page */
.alx-bf-glow .site-banner,.alx-bf-glow .site-section,.alx-bf-glow .main-footer,.alx-bf-glow .main-body{background-color:transparent;background-image:none}

/* shimmering captions + glowing hero title */
.alx-bf-glow .banner-caption,.alx-bf-glow .section-caption{
  background:linear-gradient(90deg,#fff 0%,var(--alx-bf-gold) 25%,var(--alx-bf-pink) 50%,#8fb6ff 75%,#fff 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  font-weight:var(--font-weight-semibold,600);letter-spacing:.04em;animation:alx-bf-shimmer 4s linear infinite}
@keyframes alx-bf-shimmer{to{background-position:-200% center}}
.alx-bf-glow .banner-title{text-shadow:0 0 28px rgba(15,98,254,.55),0 0 60px rgba(241,47,117,.25)}

/* glowing cards */
.alx-bf-glow .ahp-card,.alx-bf-glow .adg-card-inner,.alx-bf-glow .alxps-card{
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 24px 60px -24px rgba(15,98,254,.55);
  transition:box-shadow .3s ease,transform .3s ease}
.alx-bf-glow .ahp-card:hover,.alx-bf-glow .adg-card-inner:hover,.alx-bf-glow .alxps-card:hover{
  box-shadow:0 0 0 1px rgba(241,47,117,.45),0 28px 70px -22px rgba(241,47,117,.55);transform:translateY(-3px)}

/* no grey divider lines between sections, the glow runs straight through */
.alx-bf-glow .site-section::after{display:none}

/* closing band: glass with a blue and pink glow instead of the flat grey box */
.alx-bf-glow .section-allanux-cta-glow .alxc-band{
  background:linear-gradient(135deg,rgba(15,98,254,.22),rgba(5,5,10,.55) 45%,rgba(241,47,117,.20));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 80px -20px rgba(15,98,254,.6)}

/* Lagom's Black Week theme turns the footer logo solid white with a filter,
   which blanks out the blue icon. The footer already uses the white logo. */
.alx-bf-glow .footer-company-logo img{filter:none}

/* hero timer boxes glow */
.alx-bf-glow .site-banner .timer .timer-box{box-shadow:0 0 24px -4px rgba(15,98,254,.6)}

/* floating stickers (markup added by promo-fx.js inside the hero) */
.alx-bf-glow .site-banner{position:relative;overflow:hidden}
.alx-bf-stickers{position:absolute;inset:0;pointer-events:none;z-index:0}
.alx-bf-glow .site-banner .banner-body{position:relative;z-index:1}
.alx-bf-sticker{position:absolute;display:inline-block;padding:10px 18px;border-radius:14px;
  font-family:var(--font-family-heading,inherit);font-weight:800;font-size:18px;line-height:1.1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.6),0 0 30px -6px currentColor;
  animation:alx-bf-float 6s ease-in-out infinite}
.alx-bf-sticker small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;opacity:.85}
.alx-bf-sticker.s1{top:22%;left:6%;--r:-10deg;background:#fff;color:#05050a}
.alx-bf-sticker.s2{top:16%;right:6%;--r:9deg;background:var(--alx-bf-pink);color:#fff;animation-delay:-1.5s}
.alx-bf-sticker.s3{bottom:16%;left:9%;--r:7deg;background:var(--alx-bf-gold);color:#05050a;animation-delay:-3s}
.alx-bf-sticker.s4{bottom:20%;right:8%;--r:-8deg;background:var(--alx-bf-blue);color:#fff;animation-delay:-4.5s}
@keyframes alx-bf-float{0%,100%{transform:rotate(var(--r)) translateY(0)}50%{transform:rotate(calc(var(--r) * -0.4)) translateY(-12px)}}
@media (max-width:1199.98px){
  .alx-bf-sticker{font-size:14px;padding:8px 12px}
  .alx-bf-sticker.s1{top:11%;left:3%}.alx-bf-sticker.s2{top:9%;right:3%}
  .alx-bf-sticker.s3,.alx-bf-sticker.s4{display:none}
}
@media (max-width:767.98px){
  .alx-bf-sticker{font-size:11px;padding:6px 9px;border-radius:10px}
  .alx-bf-sticker small{font-size:8px}
  .alx-bf-sticker.s1{top:76px;left:12px}.alx-bf-sticker.s2{top:70px;right:12px}
}

@media (prefers-reduced-motion:reduce){
  body.alx-bf-glow::before,body.alx-bf-glow::after,.alx-bf-sparkles,.alx-bf-sticker,
  .alx-bf-glow .banner-caption,.alx-bf-glow .section-caption{animation:none}
}

/* ---- 7 Nov 2026 additions ---------------------------------------------- */

/* sale ticker under the hero (markup from promo-fx.js) */
.alx-bf-ticker{position:relative;z-index:2;overflow:hidden;white-space:nowrap;padding:14px 0;
  background:linear-gradient(90deg,rgba(15,98,254,.92),rgba(110,64,255,.92) 50%,rgba(241,47,117,.92));
  box-shadow:0 0 50px -10px rgba(241,47,117,.6),inset 0 1px 0 rgba(255,255,255,.15)}
.alx-bf-ticker-track{display:inline-flex;gap:0;animation:alx-bf-marquee 32s linear infinite}
.alx-bf-ticker-item{display:inline-flex;align-items:center;gap:22px;padding-right:22px;
  font-family:var(--font-family-heading,inherit);font-weight:800;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.alx-bf-ticker-item::after{content:"\2726";color:var(--alx-bf-gold,#ffc83d);font-size:14px}
@keyframes alx-bf-marquee{to{transform:translateX(-50%)}}
@media (max-width:767.98px){.alx-bf-ticker{padding:10px 0}.alx-bf-ticker-item{font-size:12px;gap:16px;padding-right:16px}}

/* featured plan: animated gradient border that runs round the card */
@property --alx-bf-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.alx-bf-glow .section-allanux-hosting-plans .ahp-card.is-hot{border:2px solid transparent;
  background:linear-gradient(#17171d,#17171d) padding-box,
    conic-gradient(from var(--alx-bf-a),#0f62fe,#f12f75,#ffc83d,#6e40ff,#0f62fe) border-box;
  animation:alx-bf-spin 5s linear infinite;
  box-shadow:0 0 60px -18px rgba(241,47,117,.65),0 30px 80px -30px rgba(15,98,254,.7)}
@keyframes alx-bf-spin{to{--alx-bf-a:360deg}}

/* main buttons breathe a soft glow */
.alx-bf-glow .site-banner .btn-primary,.alx-bf-glow .ahp-card.is-hot .btn-primary,.alx-bf-glow .section-allanux-cta-glow .btn-primary{
  animation:alx-bf-pulse 2.6s ease-in-out infinite}
@keyframes alx-bf-pulse{0%,100%{box-shadow:0 0 0 0 rgba(15,98,254,.55)}50%{box-shadow:0 0 0 10px rgba(15,98,254,0),0 0 34px rgba(15,98,254,.55)}}

/* section titles get a faint light glow so they lift off the black */
.alx-bf-glow .site-section .section-title{text-shadow:0 0 30px rgba(143,182,255,.25)}

@media (prefers-reduced-motion:reduce){
  .alx-bf-ticker-track,.alx-bf-glow .ahp-card.is-hot,.alx-bf-glow .btn-primary{animation:none}
}