/* =========================================================
   STORYTELLERS — v5 "Lusion blend" layer (all pages, loads after glass.css)
   Black & white first; red #e60617 only as a small highlight
   (logo dot, hover/active, key CTA, tiny accents). No big red fills.
   ========================================================= */
/* monochrome glows & art */
.stage__fallback i:nth-child(1) { background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 65%) !important; }
.stage__fallback i:nth-child(2) { background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 65%) !important; }
.stage__fallback i:nth-child(3) { background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%) !important; }
.css-orb, .page-hero::after { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.45) 0 3%, rgba(255,255,255,.12) 9%, transparent 20%), radial-gradient(circle at 50% 50%, #5a5a5f 0%, #333336 40%, #161618 78%, #080808 100%) !important; opacity: .7;
  box-shadow: inset -18px -24px 60px rgba(0,0,0,.5), inset 10px 14px 40px rgba(255,255,255,.2), 0 40px 120px -30px rgba(255,255,255,.18) !important; }
.blob--1 { background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 65%) !important; }
.blob--3 { background: radial-gradient(circle, rgba(255,255,255,.03) 0%, transparent 70%) !important; }
.panel--accent { background: radial-gradient(700px circle at 85% 110%, rgba(255,255,255,.08), transparent 60%), linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)) !important; }
.art--why { background: radial-gradient(circle at 50% 110%, #cfcfcf 0%, #4a4a4a 34%, #111 78%) !important; }
.art--m4 { background: radial-gradient(circle at 50% 110%, #4a4a4a, #141414 70%) !important; }
.art--3 { background: radial-gradient(circle at 70% 70%, rgba(255,255,255,.22) 0%, transparent 42%), radial-gradient(circle at 70% 70%, #e60617 0 1.2%, transparent 1.4%), linear-gradient(135deg, #202020, #050505) !important; }
.art--reel, .art--case, .art--p3 { background: radial-gradient(circle at 75% 25%, rgba(255,255,255,.2) 0%, transparent 38%), radial-gradient(circle at 20% 90%, rgba(255,255,255,.1) 0%, transparent 35%), linear-gradient(160deg, #1e1e1e, #000) !important; }
.art--p2 { background: radial-gradient(circle at 60% 60%, #111 0 16%, transparent 17%), linear-gradient(135deg, #f2f2f2, #bdbdbd) !important; }
.hero--home, .acc-item.is-open { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.14), 0 40px 90px -50px rgba(255,255,255,.18) !important; }
.hero__services li::before { box-shadow: 0 0 8px rgba(230,6,23,.6) !important; }
.counter.is-glow { text-shadow: 0 0 24px rgba(255,255,255,.7), 0 0 60px rgba(255,255,255,.3) !important; }
.footer__word img { filter: drop-shadow(0 30px 60px rgba(255,255,255,.12)) !important; }
.btn--accent { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 40px -14px rgba(230,6,23,.55) !important; }
.acc-item.is-open .acc-icon { background: #fff !important; color: #000 !important; }
/* the big "View" bubble: frosted white glass instead of a red disc */
.cursor { background: rgba(255,255,255,.82) !important; color: #000 !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.cursor span::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 5px; vertical-align: 2px; }

/* ---------- subtle cursor follower (desktop, fine pointer) ---------- */
.cf { position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none; display: none; }
.has-cf .cf { display: block; }
.cf__dot, .cf__ring { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.cf__dot { width: 6px; height: 6px; background: #fff; mix-blend-mode: difference; transition: background .25s, width .25s, height .25s; }
.cf__ring { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.45); transition: width .35s var(--ease), height .35s var(--ease), border-color .3s, background .3s, opacity .3s; }
.cf.is-link .cf__ring { width: 58px; height: 58px; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cf.is-link .cf__dot { background: var(--accent); mix-blend-mode: normal; width: 8px; height: 8px; }
.cf.is-down .cf__ring { width: 26px; height: 26px; }
.cf.is-hidden { opacity: 0; }
.cursor.is-active ~ .cf, .cf.is-view { opacity: 0; }

/* ---------- line-mask reveal ---------- */
.lm-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.lm-line > span { display: block; will-change: transform; }

/* ---------- page transition veil (canvas) ---------- */
.pt { position: fixed; inset: 0; z-index: 900; pointer-events: none; display: none; }
.pt canvas { width: 100%; height: 100%; display: block; }
.pt.is-on { display: block; pointer-events: auto; }
.pt__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 clamp(28px, 4vw, 56px)/1 var(--font-display); letter-spacing: -0.05em; color: #fff; opacity: 0; white-space: nowrap; }
.pt__label i { display: inline-block; width: .22em; height: .22em; border-radius: 50%; background: var(--accent); margin-left: .06em; }
.pt-enter .pt { display: block; }
.pt-enter .pt canvas { background: #050505; }

/* ---------- pull to next project ---------- */
.pull-next { position: relative; height: 180vh; }
.pull-next__stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: flex-end; padding: 0 var(--gutter) var(--gutter); }
.pull-next__card { position: relative; width: 100%; min-height: 62vh; border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(22px, 3vw, 44px); color: #fff; text-decoration: none; isolation: isolate;
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.pull-next__art { position: absolute; inset: 0; z-index: -1; opacity: .55; transform: scale(calc(1.15 - var(--pp, 0) * .15)); transition: opacity .3s; }
.pull-next__art svg { position: absolute; inset: 10% 20%; width: 60%; height: 80%; }
.pull-next__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .02em; opacity: .7; }
.pull-next__name { font: 700 clamp(44px, 8vw, 132px)/.92 var(--font-display); letter-spacing: -0.06em; margin: 12px 0 26px; }
.pull-next__bar { position: relative; height: 2px; background: rgba(255,255,255,.18); border-radius: 2px; overflow: hidden; }
.pull-next__bar i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--pp, 0)); }
.pull-next__hint { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; font-weight: 600; opacity: .75; }
.pull-next.is-go .pull-next__bar i { background: var(--accent); }
.no-js .pull-next, html:not(.js) .pull-next { height: auto; }
html:not(.js) .pull-next__stick { position: relative; height: auto; padding-top: var(--gutter); }
@media (prefers-reduced-motion: reduce) { .pull-next { height: auto; } .pull-next__stick { position: relative; height: auto; } }
.js .lm-wait { opacity: 0; }
.pt-enter .pt { animation: ptFail .4s 3.2s forwards; }
@keyframes ptFail { to { opacity: 0; visibility: hidden; } }

/* ---------- colourful stand-in imagery (assets/img/art — replace with real work, see PLACEHOLDERS.md) ---------- */
.art--1 { background: url(../img/art/p1.webp) center/cover, #111 !important; }
.art--2 { background: url(../img/art/p2.webp) center/cover, #111 !important; }
.art--3 { background: url(../img/art/p3.webp) center/cover, #111 !important; }
.art--4 { background: url(../img/art/p4.webp) center/cover, #111 !important; }
.art--5 { background: url(../img/art/p5.webp) center/cover, #111 !important; }
.art--6 { background: url(../img/art/p6.webp) center/cover, #111 !important; }
.art--p1 { background: url(../img/art/b1.webp) center/cover, #111 !important; }
.art--p2 { background: url(../img/art/b2.webp) center/cover, #111 !important; }
.art--p3 { background: url(../img/art/b3.webp) center/cover, #111 !important; }
.art--m1 { background: url(../img/art/s1.webp) center/cover, #111 !important; }
.art--m2 { background: url(../img/art/s2.webp) center/cover, #111 !important; }
.art--m3 { background: url(../img/art/s3.webp) center/cover, #111 !important; }
.art--m4 { background: url(../img/art/s4.webp) center/cover, #111 !important; }
.art--reel { background: url(../img/art/reel.webp) center/cover, #111 !important; }
.art--why { background: url(../img/art/why.webp) center/cover, #111 !important; }
.art--case { background: url(../img/art/case.webp) center/cover, #111 !important; }
.svc__thumb.art--1 { background-image: url(../img/art/s1.webp) !important; } .svc__thumb.art--2 { background-image: url(../img/art/s2.webp) !important; }
.svc__thumb.art--3 { background-image: url(../img/art/s4.webp) !important; } .svc__thumb.art--4 { background-image: url(../img/art/s3.webp) !important; }
.art svg { opacity: .45; }
.art--2 .project__name, .art--6 .project__name { color: #fff !important; text-shadow: 0 2px 30px rgba(0,0,0,.45) !important; }
.art--2 svg, .art--6 svg { stroke: rgba(255,255,255,.4) !important; }

/* ---------- PLAY REEL strip + rounded video card ---------- */
.reel-strip { padding: clamp(28px, 4vw, 56px) 0 clamp(20px, 3vw, 40px); }
.reel-strip__marquee { overflow: hidden; white-space: nowrap; font: 600 clamp(15px, 1.3vw, 19px)/1 var(--font-body); letter-spacing: .02em; text-transform: uppercase; padding: 0 0 18px; }
.reel-strip__track { display: inline-flex; gap: 48px; animation: reelMarq 22s linear infinite; }
.reel-strip__track span { display: inline-flex; align-items: center; gap: 14px; }
.reel-strip__track span::before { content: "▶▶▶"; letter-spacing: -.1em; font-size: .8em; }
.reel-strip__track span:nth-child(4n+2)::before { color: var(--accent); }
@keyframes reelMarq { to { transform: translateX(-50%); } }
.reel-card { position: relative; margin: 0 var(--pad); border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 16 / 8; min-height: 240px; display: block; width: calc(100% - 2 * var(--pad)); border: 0; padding: 0; cursor: pointer; background: #111; box-shadow: 0 50px 120px -50px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.14); }
.reel-card canvas, .reel-card__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.reel-card__img { background: url(../img/art/reel.webp) center/cover; }
.reel-card__btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px 14px 16px; border-radius: 999px; color: #fff; font: 600 14px/1 var(--font-body); letter-spacing: .02em; text-transform: uppercase;
  background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(255,255,255,.28); transition: transform .5s var(--ease); }
.reel-card__btn i { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.reel-card__btn i::before { content: ""; border-left: 11px solid #000; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.reel-card:hover .reel-card__btn { transform: translate(-50%, -50%) scale(1.06); }
.reel-card:hover .reel-card__btn i { background: var(--accent); } .reel-card:hover .reel-card__btn i::before { border-left-color: #fff; }
@media (max-width: 760px) { .reel-card { aspect-ratio: 4 / 5; margin: 0 14px; width: calc(100% - 28px); } }

/* ---------- ribbon strokes (thick, round-capped, scroll-scrubbed) ---------- */
.rb { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.rb--under { z-index: -1; } .rb--over { display: none; }
.hero--home .hero__bg { z-index: -2; }

.rb path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- liquid glass lens (cursor / finger) ---------- */
.lg, .lg-ripple { position: fixed; left: 0; top: 0; z-index: 260; pointer-events: none; border-radius: 50%; will-change: transform, opacity; opacity: 0; contain: strict; }
.lg--lens { width: 92px; height: 92px; margin: -46px 0 0 -46px;
  -webkit-backdrop-filter: blur(1.2px) saturate(1.5) brightness(1.08); backdrop-filter: blur(1.2px) saturate(1.5) brightness(1.08);
  background: radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 22%, rgba(255,255,255,0) 42%), radial-gradient(90% 90% at 70% 85%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 2px 3px 6px rgba(255,255,255,.35), inset -3px -4px 8px rgba(0,0,0,.25), inset 0 0 14px 2px rgba(255,40,60,.18), inset 0 0 18px 4px rgba(60,120,255,.12), 0 10px 30px rgba(0,0,0,.25); }
.lg-refract .lg--lens { -webkit-backdrop-filter: url(#lg-refract) blur(.6px) saturate(1.45) brightness(1.06); backdrop-filter: url(#lg-refract) blur(.6px) saturate(1.45) brightness(1.06); }
@media (hover: none) { .lg--lens { width: 112px; height: 112px; margin: -56px 0 0 -56px; } }
.lg--drop { width: 40px; height: 40px; margin: -20px 0 0 -20px; -webkit-backdrop-filter: blur(1px) saturate(1.4) brightness(1.08); backdrop-filter: blur(1px) saturate(1.4) brightness(1.08);
  background: radial-gradient(100% 100% at 30% 25%, rgba(255,255,255,.35), rgba(255,255,255,0) 50%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), inset -2px -2px 5px rgba(0,0,0,.2); }
.lg-ripple { width: 80px; height: 80px; margin: -40px 0 0 -40px; border: 1px solid rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(255,60,80,.18), inset 0 0 12px rgba(120,160,255,.18); }
.has-lg .cf__ring { display: none; }
.footer__credit { display: block; margin-top: .35em; opacity: .5; font-size: .82em; }