/* ==========================================================================
   BADSHAH222 — NOIR (v4)   black · white · red · yellow  — jelly everything
   Loaded AFTER site.css. Overrides the pastel palette, adds the animated
   background (no WebGL models), cut-out 3D slides, single-column gallery,
   stickers and brand social colours.
   ========================================================================== */
:root{
  --h:354;
  --a1:#ff2e45;--a2:#ffc52e;--a3:#ffffff;--a1d:#b3001b;
  --on:#fff;
  --a1s:rgba(255,46,69,.16);--glow:rgba(255,46,69,.42);
  --bg0:#050507;--bg1:#0b0b10;--bg2:#120a0c;--bg3:#0e0d08;
  --ink:#f7f7fa;--ink2:#c9c9d3;--ink3:#8b8b98;
  --line:rgba(255,255,255,.14);
  --sh-out:0 18px 40px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.5);
  --sh-in:inset 0 2px 3px rgba(255,255,255,.28),inset 0 -12px 24px rgba(0,0,0,.38);
  color-scheme:dark;
}
html{background:#050507}
body{background:#050507;color:var(--ink)}
::selection{background:var(--a1);color:var(--on)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#08080b}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--a1),var(--a2));border-radius:99px;border:2px solid #08080b}

/* ---------- animated background (replaces the 3D models) ---------- */
#bg3d{display:none!important}
#bgfx{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:
  radial-gradient(1200px 700px at 50% -10%,rgba(255,255,255,.05),transparent 60%),#050507}
#bgfx .blob{position:absolute;border-radius:50%;filter:blur(95px);opacity:.46;will-change:transform}
#bgfx .b1{width:62vmax;height:62vmax;left:-18vmax;top:-22vmax;background:var(--a1);animation:bd1 22s ease-in-out infinite alternate}
#bgfx .b2{width:54vmax;height:54vmax;right:-16vmax;bottom:-20vmax;background:var(--a2);opacity:.34;animation:bd2 26s ease-in-out infinite alternate}
#bgfx .b3{width:34vmax;height:34vmax;left:38%;top:34%;background:var(--a3);opacity:.07;animation:bd3 30s ease-in-out infinite alternate}
@keyframes bd1{to{transform:translate(16vmax,12vmax) scale(1.18)}}
@keyframes bd2{to{transform:translate(-14vmax,-10vmax) scale(1.12)}}
@keyframes bd3{to{transform:translate(-20vmax,12vmax) scale(1.5)}}
#bgfx .floor{position:absolute;left:-30%;right:-30%;bottom:-8%;height:62%;opacity:.5;
  background:
    linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(0deg,rgba(255,255,255,.14) 1px,transparent 1px) 0 0/64px 64px;
  transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 78%);mask-image:linear-gradient(to top,#000 5%,transparent 78%);
  animation:flr 5s linear infinite}
@keyframes flr{to{background-position:0 64px,64px 0}}
#bgfx canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s}
#bgfx .noise{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#bgfx .vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 45%,rgba(0,0,0,.72) 100%)}
html[data-bg="aurora"] #bgfx .floor{opacity:.18}
html[data-bg="grid"] #bgfx .blob{opacity:.22}html[data-bg="grid"] #bgfx .b2{opacity:.16}
html[data-bg="grid"] #bgfx .floor{opacity:.85}
html[data-bg="embers"] #bgfx canvas,html[data-bg="stars"] #bgfx canvas{opacity:1}
html[data-bg="embers"] #bgfx .floor,html[data-bg="stars"] #bgfx .floor{opacity:.12}
html[data-bg="stars"] #bgfx .blob{opacity:.2}

/* ---------- jelly surface (dark glass, glossy) ---------- */
.jelly{
  background:linear-gradient(155deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 42%,rgba(0,0,0,.28));
  backdrop-filter:blur(14px) saturate(1.35);-webkit-backdrop-filter:blur(14px) saturate(1.35);
  box-shadow:var(--sh-out),var(--sh-in);
  border:1.5px solid var(--line);
}
.shine::before{background:rgba(255,255,255,.7);box-shadow:0 0 8px rgba(255,255,255,.45)}
.shine::after{background:rgba(255,255,255,.55)}
.jt{background:radial-gradient(circle at 22% 22%,var(--a1s),rgba(255,255,255,.05) 60%,rgba(0,0,0,.25))}
.lift:hover{box-shadow:0 22px 46px rgba(0,0,0,.65),0 0 30px var(--glow),var(--sh-in)}

/* ---------- JELLY BUTTONS (all of them) ---------- */
.btn,.fb.on,.opts button.on,.tabs2 button.on,.mdl button.on,.cf-nav .ibtn.on{
  color:var(--on);text-shadow:0 1px 2px rgba(0,0,0,.35);border:1.5px solid rgba(255,255,255,.35);
  background:linear-gradient(180deg,rgba(255,255,255,.5) 0,rgba(255,255,255,.08) 46%,rgba(0,0,0,.12) 52%,rgba(0,0,0,.2) 100%),linear-gradient(95deg,var(--a1),var(--a2));
  box-shadow:0 12px 26px var(--glow),inset 0 3px 4px rgba(255,255,255,.65),inset 0 -7px 12px rgba(0,0,0,.3);
}
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;left:12%;right:12%;top:3px;height:42%;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 18px 32px var(--glow),0 0 0 3px rgba(255,255,255,.12),inset 0 3px 4px rgba(255,255,255,.7),inset 0 -7px 12px rgba(0,0,0,.3)}
.btn:active{transform:scale(.94,.9);transition-duration:.1s}
.btn.soft,.fb,.opts button,.tabs2 button,.mdl button,.flinks a,.tags span,.pill,.mnav a,.ibtn,.nav a,.news button.soft,.cf-nav .ibtn{
  color:var(--ink);text-shadow:none;border:1.5px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg,rgba(255,255,255,.26) 0,rgba(255,255,255,.07) 46%,rgba(0,0,0,.18) 54%,rgba(0,0,0,.3) 100%);
  box-shadow:0 8px 18px rgba(0,0,0,.45),inset 0 2px 3px rgba(255,255,255,.4),inset 0 -5px 9px rgba(0,0,0,.35);
}
.btn.soft::before{opacity:.6}
.btn.soft:hover,.fb:hover,.opts button:hover,.flinks a:hover,.mnav a:hover,.ibtn:hover{box-shadow:0 12px 24px rgba(0,0,0,.5),0 0 0 2px var(--a1),inset 0 2px 3px rgba(255,255,255,.5),inset 0 -5px 9px rgba(0,0,0,.35)}
.btn.wa{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 46%,rgba(0,0,0,.18) 52%),linear-gradient(95deg,#25d366,#0e9f6e);box-shadow:0 12px 26px rgba(37,211,102,.35),inset 0 3px 4px rgba(255,255,255,.6),inset 0 -7px 12px rgba(0,0,0,.3)}
.ripple{background:#fff}
.nav a{border-color:transparent;background:transparent;box-shadow:none;color:var(--ink2)}
.nav a:hover,.nav a.on{color:var(--on);border-color:rgba(255,255,255,.35);background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.06) 48%,rgba(0,0,0,.18) 54%),linear-gradient(95deg,var(--a1),var(--a2));box-shadow:0 8px 18px var(--glow),inset 0 2px 3px rgba(255,255,255,.6),inset 0 -5px 9px rgba(0,0,0,.3);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.mnav a i{color:var(--a2)}
.tags span,.pill{color:var(--ink2)}
.ibtn{color:var(--ink)}
button:active:not(:disabled){transform:scale(.95)}
.brand b{color:var(--ink)}.brand small{color:var(--ink3)}
.avatar{border-color:rgba(255,255,255,.85);background:linear-gradient(135deg,#1a1a22,#0a0a0e)}

/* ---------- text / surfaces ---------- */
.chip{color:var(--on);border:1px solid rgba(255,255,255,.35);background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 55%),linear-gradient(90deg,var(--a1),var(--a2))}
.grad{background:linear-gradient(90deg,var(--a1),var(--a2) 55%,#fff);-webkit-background-clip:text;background-clip:text}
.eyebrow{color:var(--a2)}
.pj .pm,.bc .bm{background:linear-gradient(135deg,#1c1c26,#0a0a0f)}
.cf-dots i{background:rgba(255,255,255,.25)}
.bar .bt{background:rgba(255,255,255,.1);box-shadow:inset 1px 2px 4px rgba(0,0,0,.6)}
.stats{border-top-color:rgba(255,255,255,.12)}
.tq .st{color:var(--a2)}
.ico{color:var(--on);box-shadow:0 8px 18px var(--glow),inset 0 2px 3px rgba(255,255,255,.55),inset 0 -5px 8px rgba(0,0,0,.25)}
.faqs summary::after,.tq .who .avatar{color:var(--on)}
.lockb{color:var(--on)}
.cv h2{border-bottom-color:rgba(255,255,255,.15)}
.pdv .gal2 img{border:3px solid rgba(255,255,255,.2)}
.post .body a{color:var(--a2)}
.crumbs a:hover{color:var(--a2)}
.amsg{color:#ff7d8c}.amsg.ok{color:#4ade80}
.tabs2{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1)}
.toast{background:#17171d;color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:0 14px 34px rgba(0,0,0,.6)}
.toast.ok{background:linear-gradient(90deg,#0d3d28,#17171d);color:#6ee7a8}.toast.err{background:linear-gradient(90deg,#4a111b,#17171d);color:#ff9aa8}
.loader{background:radial-gradient(circle at 50% 40%,#1a0a0d,#050507 70%)}
.loader i{background:rgba(255,255,255,.12)}
.lightbox{background:rgba(0,0,0,.88)}.lightbox img{border:0;border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.8),0 0 60px var(--glow)}
.modal{background:rgba(0,0,0,.7)}

/* inputs */
.in,.f input,.f textarea,.f select,.search input,.news input{
  color:var(--ink);background:rgba(0,0,0,.42);border:1.5px solid rgba(255,255,255,.16);
  box-shadow:inset 3px 5px 10px rgba(0,0,0,.6),inset -2px -2px 6px rgba(255,255,255,.06)}
.in::placeholder,.f input::placeholder,.f textarea::placeholder,.search input::placeholder,.news input::placeholder{color:var(--ink3)}
.f input:focus,.f textarea:focus,.in:focus,.search input:focus,.news input:focus{box-shadow:inset 3px 5px 10px rgba(0,0,0,.6),0 0 0 3px var(--glow);border-color:var(--a1)}
.f select option{background:#14141a;color:#fff}
.conn a,.conn div.cr{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.conn i{color:var(--on)}
.flinks a{border-radius:99px}

/* ---------- dock (colour + background chooser) ---------- */
.dock-btn{border-color:rgba(255,255,255,.85);box-shadow:0 8px 22px var(--glow),inset 0 3px 4px rgba(255,255,255,.7),inset 0 -6px 10px rgba(0,0,0,.3);background:conic-gradient(from 20deg,#ff2e45,#ffc52e,#fff,#22d3ee,#8b5cf6,#ff3d8b,#ff2e45)}
.sw button{border-color:rgba(255,255,255,.9)}.sw button.on{outline-color:#fff}
.mdl{grid-template-columns:repeat(4,1fr)}
.mdl button i{color:var(--a2)}.mdl button.on i{color:var(--on)}
.dock-panel{background:linear-gradient(155deg,rgba(40,40,52,.95),rgba(14,14,20,.97))}

/* ---------- hero (cut-out stage replaces the orb) ---------- */
.hero-stage{perspective:none;padding:0;min-height:430px;align-self:stretch}
.hero-avatar{width:54px;height:54px;display:inline-block;vertical-align:middle;margin-right:10px}
.float-chip{transform:none}

/* ---------- cut-out 3D slider (no background images) ---------- */
.cutslide{position:relative;width:100%;height:var(--csh,430px);perspective:1100px;user-select:none;-webkit-user-select:none;cursor:pointer;isolation:isolate}
.cutslide.cs-side{--csh:300px}
.cutslide .cs-glow{position:absolute;left:50%;bottom:6%;width:78%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;z-index:-1;
  background:radial-gradient(circle at 50% 45%,var(--glow) 0,rgba(255,197,46,.16) 46%,transparent 70%);filter:blur(6px);animation:cspulse 5s ease-in-out infinite}
.cutslide .cs-ring{position:absolute;left:50%;bottom:9%;width:68%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;z-index:-1;border:2px dashed rgba(255,255,255,.16);animation:spin 40s linear infinite}
.cutslide .cs-ring.r2{width:88%;border:1.5px solid rgba(255,197,46,.2);animation-duration:60s;animation-direction:reverse}
@keyframes cspulse{50%{transform:translateX(-50%) scale(1.1);opacity:.8}}
.cutslide .cs-word{position:absolute;left:0;right:0;top:6%;text-align:center;font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(3rem,12vw,7.2rem);letter-spacing:.04em;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.14);z-index:-1;white-space:nowrap;pointer-events:none}
.cutslide.cs-side .cs-word{font-size:clamp(2.2rem,8vw,4rem);top:12%}
.cs-i{position:absolute;left:50%;bottom:0;height:92%;width:auto;max-width:78%;object-fit:contain;transform-origin:50% 100%;
  transform:translateX(-50%);opacity:0;pointer-events:none;
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(255,46,69,.18));
  transition:transform 1s var(--ease),opacity .7s ease,filter .7s}
.cs-i.on{opacity:1;z-index:3}
.cs-i.n1{opacity:.55;z-index:2;filter:drop-shadow(0 16px 16px rgba(0,0,0,.6)) brightness(.62) saturate(.85)}
.cs-i.n2{opacity:.0;z-index:1}
.cs-dots{position:absolute;left:0;right:0;bottom:-6px;display:flex;justify-content:center;gap:7px;z-index:5}
.cs-dots i{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.28);transition:.35s}
.cs-dots i.on{width:26px;background:linear-gradient(90deg,var(--a1),var(--a2))}
.cs-spark{position:absolute;z-index:4;color:var(--a2);font-size:14px;animation:flt 3.6s ease-in-out infinite;text-shadow:0 0 12px var(--a2)}
.cs-spark.s1{left:10%;top:22%}.cs-spark.s2{right:8%;top:38%;animation-delay:-1.4s;color:var(--a1)}.cs-spark.s3{left:18%;bottom:20%;animation-delay:-2.2s;color:#fff}

/* phero with a cut-out on the side */
.phero.has-cut{display:grid;grid-template-columns:1fr;gap:6px;text-align:center;padding-bottom:0;overflow:visible}
.phero.has-cut .ph-t{padding:8px 4px 4px}
.phero.has-cut .cutslide{margin-top:8px}
@media(min-width:860px){
  .phero.has-cut{grid-template-columns:1.2fr .8fr;text-align:left;align-items:center;padding:34px 34px 0 40px}
  .phero.has-cut .ph-t{padding:0 0 34px}
  .phero.has-cut p{margin-left:0}
  .phero.has-cut .avatar{margin-left:0}
  .phero.has-cut .cutslide{margin:-30px 0 0}
  .phero.has-cut.flipside .cutslide{order:-1}
}
.phero.has-cut{overflow:visible}

/* footer cut-out strip */
.cs-strip{position:relative;height:230px;margin:34px -12px -26px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.cs-strip .cs-lane{position:absolute;left:0;bottom:0;height:100%;display:flex;align-items:flex-end;gap:0;width:max-content;animation:tk 46s linear infinite}
.cs-strip img{height:92%;width:auto;margin-right:-26px;filter:drop-shadow(0 12px 14px rgba(0,0,0,.7));transition:transform .5s var(--ease),filter .5s}
.cs-strip img:hover{transform:translateY(-14px) scale(1.06);filter:drop-shadow(0 12px 14px rgba(0,0,0,.7)) drop-shadow(0 0 18px var(--glow))}
.cs-strip::before{content:"BADSHAH222";position:absolute;left:0;right:0;bottom:2%;text-align:center;font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(3rem,15vw,9rem);letter-spacing:.06em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.1);z-index:0;line-height:1}
.cs-strip .cs-lane{z-index:1}
.cs-strip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,transparent,var(--a1),var(--a2),transparent);z-index:2}
footer.foot{overflow:hidden}

/* resume cut-out */
.cv-top{display:grid;gap:10px;align-items:end}
@media(min-width:760px){.cv-top{grid-template-columns:1.3fr .7fr}}
.cv-top .cutslide{--csh:280px}

/* ---------- gallery : ONE column, stacked, slide effects ---------- */
.gal{columns:auto;column-gap:0;display:grid;grid-template-columns:repeat(2,1fr) !important;gap:20px;max-width:1100px;margin:0 auto;justify-items:center;align-items:start}
@media(max-width:640px){.gal{gap:12px}}
.gal .gi{width:100%;margin:0;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;cursor:zoom-in;position:relative;border-radius:0}
.gal .gi::before,.gal .gi::after{display:none}
.gal .gi img{width:100%;height:auto;border-radius:30px;box-shadow:0 26px 60px rgba(0,0,0,.65),0 0 0 1.5px rgba(255,255,255,.14);transition:transform .8s var(--ease),box-shadow .6s}
.gal .gi:hover img{transform:scale(1.03) rotate(-.6deg);box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 40px var(--glow),0 0 0 1.5px var(--a1)}
.gal .gi .cap{position:absolute;left:18px;bottom:16px;z-index:3;padding:7px 14px;border-radius:99px;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2)}
.gal .gi.cutout{display:grid;place-items:center;padding:10px 0 0}
.gal .gi.cutout::before{display:block;content:"";position:absolute;left:50%;bottom:0;width:86%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,var(--glow),rgba(255,197,46,.12) 50%,transparent 70%);top:auto;height:auto;box-shadow:none;rotate:0deg;z-index:0}
.gal .gi.cutout img{position:relative;z-index:1;width:auto;max-height:420px;max-width:92%;border-radius:0;box-shadow:none;filter:drop-shadow(0 26px 26px rgba(0,0,0,.65))}
.gal .gi.cutout:hover img{box-shadow:none;filter:drop-shadow(0 26px 26px rgba(0,0,0,.65)) drop-shadow(0 0 26px var(--glow))}
.gal .gi[data-fx="s-left"]{transform:perspective(1000px) translateX(-120px) rotateY(34deg) scale(.9)}
.gal .gi[data-fx="s-right"]{transform:perspective(1000px) translateX(120px) rotateY(-34deg) scale(.9)}
.gal .gi[data-fx="s-flip"]{transform:perspective(1000px) rotateX(-58deg) translateY(50px);transform-origin:top}
.gal .gi[data-fx="s-zoom"]{transform:perspective(1000px) translateZ(-260px) rotateZ(-3deg) scale(.8)}
.gal .gi.rv.in{transform:none}
.gal-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 26px}
.gal-tabs button{padding:10px 20px;font-weight:800;font-size:13px;border-radius:99px}

/* stickers */
.stk{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:900px;margin:0 auto}
@media(min-width:760px){.stk{grid-template-columns:repeat(4,1fr)}}
.stk .sti{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:30px;padding:12px;cursor:pointer}
.stk .sti img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.6));transition:transform .5s var(--ease)}
.stk .sti:hover img{transform:scale(1.14) rotate(-6deg)}
.stk .sti.ico-st{font-size:54px;color:var(--a2)}
.stk .sti.ico-st i{filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));transition:transform .5s var(--ease)}
.stk .sti.ico-st:hover i{transform:scale(1.2) rotate(-8deg)}
.stk .sti .nm{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--ink3);text-transform:uppercase}
.sticker-float{position:fixed;z-index:1;pointer-events:none;opacity:.9;filter:drop-shadow(0 12px 14px rgba(0,0,0,.6));animation:flt 6s ease-in-out infinite}

/* ---------- social icons: own brand colours ---------- */
.socials a,.soc .si{border:1.5px solid rgba(255,255,255,.4);box-shadow:0 8px 18px rgba(0,0,0,.5),inset 0 3px 4px rgba(255,255,255,.55),inset 0 -6px 9px rgba(0,0,0,.28)}
.socials a:hover{box-shadow:0 12px 24px rgba(0,0,0,.55),0 0 22px currentColor,inset 0 3px 4px rgba(255,255,255,.55)}
.soc b{color:var(--ink)}

@media print{:root{--ink:#111;--ink2:#333;--ink3:#555}#bgfx,.cutslide,.cs-strip{display:none!important}body,html{background:#fff}.jelly{background:#fff;box-shadow:none;border:0}}
@media(max-width:640px){
  .hero-stage{min-height:340px}
  .cutslide{--csh:340px}
  .cutslide.cs-side{--csh:260px}
  .gal{gap:26px}
}

/* active gallery tab + home gallery tiles */
.gal-tabs button.on{color:var(--on);text-shadow:0 1px 2px rgba(0,0,0,.35);border-color:rgba(255,255,255,.35);
  background:linear-gradient(180deg,rgba(255,255,255,.5) 0,rgba(255,255,255,.08) 46%,rgba(0,0,0,.12) 52%,rgba(0,0,0,.2) 100%),linear-gradient(95deg,var(--a1),var(--a2));
  box-shadow:0 12px 26px var(--glow),inset 0 3px 4px rgba(255,255,255,.65),inset 0 -7px 12px rgba(0,0,0,.3)}
.hg{display:block;overflow:hidden;border-radius:28px;border:1.5px solid rgba(255,255,255,.14);box-shadow:0 18px 38px rgba(0,0,0,.55);transition:transform .5s var(--ease),box-shadow .4s}
.hg img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .8s var(--ease)}
.hg:hover{box-shadow:0 22px 44px rgba(0,0,0,.6),0 0 28px var(--glow);transform:translateY(-6px)}.hg:hover img{transform:scale(1.08)}

/* fixes: stage sizing / clipping */
.hero-stage{position:relative;min-width:0}
.cutslide{container-type:inline-size;overflow-x:clip}
.cutslide .cs-word{font-size:17cqw}
.cutslide.cs-side .cs-word{font-size:19cqw;top:14%}
.cutslide.cs-side{overflow:clip}
.galsec{overflow-x:clip;padding:10px 0}