/* ============================================================
   Cyberry - Halloween layer (concept, Oct 2026)
   Loaded AFTER style.css, only on pages whose <body> has .halloween (every page since 30 Oct; the
   "has moved" stub pages redirect straight away and are left alone).
   Light sections go warm cream, the dark bands turn into an orange-lit night, and the
   decorations (webs, jack-o'-lanterns, spiders) are aria-hidden extras that halloween.js fills.
   Every rule is prefixed with .halloween so it outranks the `.bh-box > *` style child rules.
   ============================================================ */

body.halloween{
  /* the brand tokens, re-pointed at pumpkin. --berry stays dark enough to read as text on white */
  --berry:#cf4d0a;
  --berry-bright:#ff7a1a;
  --berry-deep:#a63c06;
  --berry-ink:#4a1a05;
  --berry-soft:rgba(255,122,26,.12);
  --berry-line:rgba(255,122,26,.34);
  --shadow-berry:0 12px 30px -12px rgba(255,110,20,.75);
  --pumpkin:#ff7a1a;
  --pumpkin-hi:#ff9a3c;
  --ember:#ffb347;
  --night:#110a19;
  --night-2:#22123a;
  --navy:#130b1f;
  --navy-2:#24133a;
  --dark:#120a19;
  --dark-2:#1f1229;
  --bg:#fff5ea;
  --bg-2:#ffedd9;
  --hw-web:rgba(66,48,78,.5);        /* cobweb threads on light ground */
  --hw-spider:#1c1022;
  background:#fffaf5;
}
.halloween ::selection{background:var(--pumpkin);color:#1c0f14}

/* ---------- buttons: pumpkin fill, dark lettering, a cobweb in the corner ---------- */
.halloween .btn{position:relative;background:var(--pumpkin);border-color:var(--pumpkin);color:#1c0f14}
.halloween .btn:hover{background:var(--pumpkin-hi);border-color:var(--pumpkin-hi);box-shadow:var(--shadow-berry)}
.halloween .btn.ghost{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.halloween .btn.ghost:hover{border-color:var(--ink);box-shadow:none}
/* the web layer covers the whole button (border box) and takes its pill radius, so the web is
   clipped to the rounded corner instead of poking out square; the mask puts it in the corner */
.halloween .btn::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;pointer-events:none;
  background:var(--hw-web);
  -webkit-mask:url(../img/halloween/web-sm.svg) -2px -2px/2em 2em no-repeat;mask:url(../img/halloween/web-sm.svg) -2px -2px/2em 2em no-repeat}
.halloween .btn.ghost::before{transform:scaleX(-1)}
/* a spider dangling from the button on its thread; it scuttles up a little when you hover */
.halloween .hw-dangle::after{content:"";position:absolute;top:calc(100% - 1px);left:1.3em;width:14px;height:42px;pointer-events:none;
  background:var(--hw-spider);transform-origin:50% 0;animation:hwSwing 3.2s ease-in-out infinite alternate;
  transition:translate .45s cubic-bezier(.2,.8,.2,1);
  -webkit-mask:url(../img/halloween/spider-hang.svg) 0 0/100% 100% no-repeat;mask:url(../img/halloween/spider-hang.svg) 0 0/100% 100% no-repeat}
.halloween .hw-dangle:hover::after{translate:0 -12px}
.halloween .nav .hw-dangle::after{height:34px;width:12px}

/* dark boxes: pale threads, ghost buttons stay outlined */
.halloween .bh-box,.halloween .cta-band,.halloween .navy-sec,.halloween .dark-sec,.halloween .shero{--hw-web:rgba(255,236,214,.6);--hw-spider:#f4e6ff}

/* tabs: a web caught in the first and last corner */
.halloween .tabbar [role=tab]{position:relative}
.halloween .tabbar [role=tab]:first-child::after,.halloween .tabbar [role=tab]:last-child::after{content:"";position:absolute;top:-1px;left:-1px;width:44px;height:44px;pointer-events:none;
  background:var(--hw-web);border-top-left-radius:16px;
  -webkit-mask:url(../img/halloween/web-sm.svg) 0 0/100% 100% no-repeat;mask:url(../img/halloween/web-sm.svg) 0 0/100% 100% no-repeat}
.halloween .tabbar [role=tab]:last-child::after{left:auto;right:-1px;transform:scaleX(-1)}

/* ---------- accents that were hard-coded red ---------- */
.halloween .grad-text{background:linear-gradient(180deg,#ff9a2e,#c9470a);-webkit-background-clip:text;background-clip:text}
.halloween .sh-glass i{color:var(--berry)}
.halloween .dark-sec .eyebrow,.halloween .cta-band .eyebrow,.halloween .navy-sec .mk-num,.halloween .navy-sec .f-list li svg{color:var(--ember)}
.halloween .stat .num em{color:var(--pumpkin)}
.halloween .navy-sec .textlink{color:var(--ember)}
.halloween .navy-sec .mk-num i{background:var(--pumpkin);color:#1c0f14}
.halloween .mk-num i{color:#fff}
.halloween .yr i{background:linear-gradient(180deg,var(--ember),#c9470a)}
.halloween .yr.part i{background:repeating-linear-gradient(135deg,rgba(255,154,60,.9) 0 6px,rgba(201,71,10,.6) 6px 12px)}
.halloween .rate.feature-rate{background:var(--night);border-color:var(--night)}
.halloween .rate .pop{background:var(--pumpkin);color:#1c0f14}
.halloween .plan-back{background:linear-gradient(135deg,var(--night-2),var(--pumpkin))}
.halloween .plan-row.hw-row .when{color:var(--berry)}

/* ---------- the night: hero boxes, navy + dark bands, CTA ---------- */
.halloween .bh-box:not(.bh-cai),.halloween .cta-band{
  background:radial-gradient(60% 90% at 88% 112%,rgba(255,112,18,.78),transparent 62%),
             radial-gradient(50% 70% at 6% -12%,rgba(122,52,176,.5),transparent 62%),
             linear-gradient(135deg,#120a1c 0%,#22123a 55%,#3a1520 100%)}
.halloween .navy-sec{background:radial-gradient(55% 80% at 100% 100%,rgba(255,112,18,.28),transparent 65%),linear-gradient(160deg,#120a1c 0%,#22123a 60%,#331329 100%)}
.halloween .dark-sec{background:radial-gradient(60% 70% at 50% 125%,rgba(255,112,18,.42),transparent 70%),linear-gradient(180deg,#0f0916,#1d0f27)}
.halloween .bg-soft{background:var(--bg)}

/* home hero: the red spotlight becomes pumpkin light on a purple night, with a moon and floor fog */
.halloween .sh-stage{background:#0b0612}
.halloween .sh-bg{background:
  radial-gradient(72% 70% at 50% 62%,#ff8d24 0%,#f26a0e 20%,#b9440c 42%,#5d1c2a 66%,rgba(34,14,46,0) 92%),
  radial-gradient(60% 46% at 50% 112%,rgba(255,120,20,.4),transparent 70%),
  linear-gradient(180deg,#0c0716 0%,#1b0d29 48%,#2a1024 100%)}
.halloween .hw-sky{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(1.4px 1.4px at 12% 18%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 22% 9%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.2px 1.2px at 34% 26%,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 63% 7%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.4px 1.4px at 71% 31%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 88% 40%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.2px 1.2px at 6% 42%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 46% 12%,rgba(255,255,255,.45),transparent),
    radial-gradient(1.3px 1.3px at 95% 12%,rgba(255,255,255,.6),transparent)}
.halloween .hw-moon{position:absolute;right:9%;top:9%;width:clamp(64px,8.5vw,136px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(18% 18% at 62% 58%,rgba(214,160,80,.45),transparent 70%),
             radial-gradient(12% 12% at 34% 66%,rgba(214,160,80,.4),transparent 70%),
             radial-gradient(9% 9% at 56% 28%,rgba(214,160,80,.35),transparent 70%),
             radial-gradient(circle at 38% 34%,#fffbe8,#ffe7b0 45%,#f8c873 78%,#eba64c);
  box-shadow:0 0 50px 10px rgba(255,206,120,.32),0 0 150px 46px rgba(255,150,50,.16)}
.halloween .hw-fog{position:absolute;left:-12%;right:-12%;bottom:0;height:46%;pointer-events:none;
  background:radial-gradient(38% 30% at 22% 72%,rgba(236,222,255,.2),transparent 72%),
             radial-gradient(44% 26% at 72% 68%,rgba(236,222,255,.18),transparent 72%),
             linear-gradient(180deg,transparent 18%,rgba(214,196,240,.12) 58%,rgba(214,196,240,.05));
  filter:blur(6px);animation:hwFog 19s ease-in-out infinite alternate}
@keyframes hwFog{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
@media(max-width:760px){.halloween .shero .hw-moon{right:7%;top:6%;width:56px}}

/* hero boxes: moon tucked into the top-right corner (behind the web), clear of long two-line headings */
.halloween .bh-box > .hw-moon{position:absolute;z-index:0;right:4.5%;top:7%;width:clamp(50px,6vw,96px);opacity:.92}
@media(max-width:760px){.halloween .bh-box > .hw-moon{right:6%;top:4%;width:46px}}

/* ---------- big corner cobwebs ---------- */
.halloween .hw-web{position:absolute;z-index:2;width:clamp(96px,13vw,190px);aspect-ratio:1;pointer-events:none;
  background:var(--hw-web);opacity:.8;
  -webkit-mask:url(../img/halloween/web-lg.svg) 0 0/100% 100% no-repeat;mask:url(../img/halloween/web-lg.svg) 0 0/100% 100% no-repeat}
.halloween .hw-web--tl{left:0;top:0}
.halloween .hw-web--tr{right:0;top:0;transform:scaleX(-1)}
.halloween .hw-web--bl{left:0;bottom:0;transform:scaleY(-1)}
.halloween .hw-web--br{right:0;bottom:0;transform:scale(-1,-1)}

/* ---------- jack-o'-lanterns (halloween.js draws the SVG) ---------- */
.halloween .hw-jack{position:absolute;z-index:3;width:var(--s,72px);pointer-events:none;line-height:0}
.halloween .hw-jack svg{width:100%;height:auto;display:block;overflow:visible;animation:hwGlow 3.6s ease-in-out infinite}
.halloween .hw-jack:nth-of-type(2n) svg{animation-delay:-1.4s}
.halloween .hw-flame{animation:hwFlicker 2.3s linear infinite}
.halloween .hw-jack:nth-of-type(2n) .hw-flame{animation-duration:1.9s}
@keyframes hwGlow{0%,100%{filter:drop-shadow(0 0 10px rgba(255,140,30,.45))}40%{filter:drop-shadow(0 0 22px rgba(255,150,40,.8))}55%{filter:drop-shadow(0 0 14px rgba(255,140,30,.55))}75%{filter:drop-shadow(0 0 20px rgba(255,150,40,.72))}}
@keyframes hwFlicker{0%,100%{opacity:1}12%{opacity:.8}17%{opacity:1}41%{opacity:.9}50%{opacity:.72}56%{opacity:1}79%{opacity:.86}}
/* sitting on the top edge of a card (the home intro card's top edge is the hero floor) */
.halloween .hw-sit{bottom:calc(100% - 8px)}
/* standing on the floor of a box */
.halloween .hw-floor{bottom:-6px}
/* peeking over the top of a card */
.halloween .hw-peek{top:-38px;left:16px;--s:58px}
/* inside a floating reaction tile */
.halloween .float-ic .hw-jack{position:static;width:36px}
.halloween .float-ic .hw-jack svg{width:36px;height:auto}
.halloween .rp-card{position:relative}
.halloween .rp-card .hw-jack{--s:clamp(44px,6.4vw,88px)}
.halloween .rp-card .hw-jack.sm{--s:clamp(30px,4.2vw,58px)}
.halloween .cta-band .hw-jack{--s:clamp(46px,6vw,84px)}
.halloween .cta-band .hw-jack.sm{--s:clamp(32px,4vw,56px)}
.halloween .bh-box .hw-jack{--s:clamp(48px,6.4vw,92px)}
.halloween .bh-box .hw-jack.sm{--s:clamp(32px,4.2vw,60px)}
@media(max-width:560px){.halloween .cta-band .hw-jack.sm,.halloween .bh-box .hw-jack.sm{display:none}}

/* seasonal tag over the home H1 */
.halloween .hw-tag{display:inline-flex;align-items:center;gap:.5em;margin:0 0 1.1rem;padding:.45em 1em;border-radius:100px;
  background:var(--berry-soft);color:var(--berry-deep);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* ---------- spiders ---------- */
@keyframes hwSwing{from{rotate:-4deg}to{rotate:4deg}}
@keyframes hwLegA{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
@keyframes hwLegB{from{transform:rotate(10deg)}to{transform:rotate(-10deg)}}
.hw-bug .la,.hw-bug .lb{transform-box:view-box;transform-origin:20px 15px}
.hw-bug.beetle .la,.hw-bug.beetle .lb{transform-origin:20px 20px}
/* a spider hanging into a section on its thread (static spot, gentle swing) */
.halloween .hw-hang{position:absolute;z-index:3;top:0;left:var(--x,50%);width:26px;height:var(--len,130px);margin-left:-13px;pointer-events:none;
  transform-origin:50% 0;animation:hwSwing 4.2s ease-in-out infinite alternate}
.halloween .hw-thread{position:absolute;left:50%;top:0;bottom:16px;width:1px;background:rgba(110,96,124,.7)}
/* narrower screens: a short thread keeps the spider in the section's top padding, clear of the heading */
@media(max-width:900px){.halloween .hw-hang{height:min(var(--len,130px),62px)}}
.halloween .hw-hang .hw-bug,.halloween .hw-drop .hw-bug{position:absolute;left:0;bottom:-6px;width:26px;height:26px;rotate:180deg}
.halloween .hw-hang .la,.halloween .hw-drop .la{animation:hwLegA 1.3s ease-in-out infinite alternate}
.halloween .hw-hang .lb,.halloween .hw-drop .lb{animation:hwLegB 1.3s ease-in-out infinite alternate}

/* crawlers + the spider that drops from the top of the screen live in one fixed layer, under the nav */
.hw-layer{position:fixed;inset:0;z-index:55;pointer-events:none;overflow:hidden}
.hw-crawler{position:absolute;left:0;top:0;width:var(--w,28px);height:var(--w,28px);pointer-events:auto;cursor:pointer;will-change:transform}
.hw-bug{color:#1c1022;display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 1.2px rgba(255,226,190,.7)) drop-shadow(0 3px 2px rgba(0,0,0,.22))}
.hw-crawler.walk .la{animation:hwLegA var(--gait,.17s) ease-in-out infinite alternate}
.hw-crawler.walk .lb{animation:hwLegB var(--gait,.17s) ease-in-out infinite alternate}
.hw-crawler.run{--gait:.07s}
.hw-drop{position:absolute;top:0;left:var(--x);width:26px;margin-left:-13px;height:0;transform-origin:50% 0;
  transition:height 2.8s cubic-bezier(.25,.7,.3,1);animation:hwSwing 3.6s ease-in-out infinite alternate}
.hw-drop.up{transition:height 1.1s cubic-bezier(.6,0,.8,.4)}
.hw-drop .hw-bug{pointer-events:auto;cursor:pointer}

/* spider switch (some people really don't want them) */
.hw-toggle{position:fixed;left:16px;bottom:16px;z-index:70;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;
  border-radius:100px;border:1px solid rgba(255,255,255,.16);background:rgba(17,10,25,.9);color:#fff;cursor:pointer;
  font:700 .78rem/1 "Montserrat",system-ui,sans-serif;letter-spacing:.02em;box-shadow:0 12px 28px -14px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hw-toggle:hover{border-color:rgba(255,154,60,.7)}
.hw-toggle .hw-bug{width:20px;height:20px;filter:none}
.hw-toggle[aria-pressed=false] .hw-bug{opacity:.4}
.hw-calm .hw-hang,.hw-calm .hw-layer{display:none}
.halloween.hw-calm .hw-dangle::after{display:none}

@media(prefers-reduced-motion:reduce){
  .halloween .hw-jack svg,.halloween .hw-flame,.halloween .hw-fog,.halloween .hw-hang,.halloween .hw-hang *,.halloween .hw-dangle::after{animation:none}
}

/* home intro card: fainter webs, clipped to its rounded corners */
.halloween .rp-card .hw-web{--hw-web:rgba(66,48,78,.3);width:clamp(80px,10vw,150px);border-radius:32px 0 0 0}

/* spiders in the night bands are pale, or they vanish */
.halloween .dark-sec .hw-bug,.halloween .navy-sec .hw-bug,.halloween .bh-box .hw-bug,.halloween .cta-band .hw-bug,.hw-toggle .hw-bug{color:#efe3fa}
.halloween .dark-sec .hw-thread,.halloween .navy-sec .hw-thread{background:rgba(239,227,250,.45)}
/* the static network texture's red dots, turned pumpkin */
.halloween .navy-sec::before{filter:hue-rotate(28deg) saturate(1.2)}
@media(max-width:560px){.hw-toggle{padding:9px}.hw-toggle span{display:none}}

/* ============================================================
   The rest of the site (30 Oct): About, Technology, Solutions, cAIdence, case studies,
   Community Stories, Know-How and the 404 page. Same night, same pumpkin; these are the
   bits those pages use that Home and Marketing don't.
   ============================================================ */

/* cAIdence keeps its own teal: the box opts out of the night (above) and its buttons stay teal */
.halloween .btn.cai{background:var(--cai-grad);border-color:transparent;color:var(--cai-acc-ink)}
.halloween .btn.cai:hover{background:var(--cai-grad);border-color:transparent;box-shadow:0 16px 34px -14px rgba(0,229,199,.55)}

/* soft glows that were hard-coded red */
.halloween .hero::before{background:radial-gradient(60% 50% at 50% 0%,rgba(255,122,26,.12),transparent 70%)}
.halloween .page-hero::before{background:radial-gradient(55% 80% at 100% 0%,rgba(255,122,26,.12),transparent 70%)}
.halloween .hero-img{box-shadow:0 -20px 80px -40px rgba(255,122,26,.4)}
.halloween .member .m-photo{background:radial-gradient(110% 80% at 50% 100%,rgba(255,122,26,.16),transparent 65%),var(--bg-2)}

/* about: the values numbers on the navy band; case-study carousel tag + dot */
.halloween .navy-sec .value .v-n,.halloween .sc-body .sc-tag{color:var(--ember)}
.halloween .sc-dot.active{background:var(--pumpkin)}

/* Know-How guides: key-points box, tips, do/don't, shot lengths */
.halloween .g-key{background:var(--night)}
.halloween .g-key::before{background:radial-gradient(80% 120% at 100% 0%,rgba(255,112,18,.42),transparent 60%)}
.halloween .callout.tip{background:rgba(255,122,26,.06);border-color:rgba(255,122,26,.24)}
.halloween .dd.dont{border-color:rgba(255,122,26,.3);background:#fff4ea}
.halloween .shot .s-len{background:rgba(255,122,26,.1)}

/* Community Stories is a dark page: keep it dark (body.halloween's cream would win otherwise), purple night */
body.halloween.stories-page,.halloween .st-cta{background:#0d0814}
.halloween.stories-page .nav{background:rgba(13,8,20,.84)}
.halloween .st-hero{--hw-web:rgba(255,236,214,.6);--hw-spider:#f4e6ff}
.halloween .st-hero .eyebrow{color:var(--ember)}
.halloween .st-glow{background:radial-gradient(40% 50% at 20% 30%,rgba(255,112,18,.42),transparent 70%),radial-gradient(45% 55% at 82% 20%,rgba(122,52,176,.5),transparent 70%)}
/* the right-hand side of the stories hero is full of floating icons, so the moon sits just right of centre, above the copy */
.halloween .st-hero > .hw-moon{top:7%;right:auto;left:66%;width:clamp(56px,6.4vw,100px)}
.halloween .film-player::before{background:linear-gradient(120deg,rgba(255,112,18,.9),rgba(122,52,176,.9))}
.halloween .film-n{background:linear-gradient(180deg,rgba(255,154,60,.8),rgba(255,154,60,.08));-webkit-background-clip:text;background-clip:text}
.halloween .stories-page .hw-bug,.halloween.stories-page .hw-bug{color:#efe3fa}
@media(max-width:560px){.halloween .st-hero > .hw-moon{top:16px;left:auto;right:24%;width:40px}}