/* Vibranium Live hologram layer (preview). ~3 KB. Pure CSS, driven by holo.js custom props. */
:root{--hf:linear-gradient(115deg,#3ee6c4 0%,#5ab8ff 18%,#7c6cff 34%,#ff6ad5 50%,#7c6cff 66%,#3ee6c4 82%,#5ab8ff 100%);--hi:.55}
.holo-bold{--hi:.9}
/* ---- header logo ---- */
.logo{position:relative}
.hm{position:relative;display:inline-block;width:30px;height:30px;flex:none}
.hm img{display:block;width:100%;height:100%;filter:drop-shadow(0 0 6px rgba(62,230,196,calc(var(--hi)*.7)))}
.hm:after{content:"";position:absolute;inset:0;background:var(--hf);background-size:300% 100%;-webkit-mask:url(/img/vl-mark.webp) center/contain no-repeat;mask:url(/img/vl-mark.webp) center/contain no-repeat;mix-blend-mode:color-dodge;opacity:var(--hi);animation:hsweep 2.4s ease-out 1 both;animation-play-state:var(--hps,paused)}
.hm:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px);-webkit-mask:url(/img/vl-mark.webp) center/contain no-repeat;mask:url(/img/vl-mark.webp) center/contain no-repeat;opacity:calc(var(--hi)*.8)}
.ht{position:relative;background:var(--hf);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hsweep 2.4s ease-out 1 both;animation-play-state:var(--hps,paused);text-shadow:0 0 calc(var(--hi)*14px) rgba(124,108,255,.35)}
.ht:before,.ht:after{content:attr(data-t);position:absolute;inset:0;pointer-events:none;opacity:0;background:none;-webkit-text-fill-color:currentColor}
.ht:before{color:#ff3fb4}.ht:after{color:#21e3ff}
.logo.glitch .ht:before{opacity:.7;transform:translate(-2px,0);clip-path:inset(10% 0 55% 0)}
.logo.glitch .ht:after{opacity:.7;transform:translate(2px,0);clip-path:inset(55% 0 8% 0)}
.logo.glitch .hm{transform:translateX(1px);filter:hue-rotate(40deg) saturate(1.6)}
.logo.flick .hm,.logo.flick .ht{opacity:.72}
@keyframes hsweep{to{background-position:300% 0}}
/* ---- holographic cards (.mod, .case) ---- */
.mod,.case{position:relative;--mx:50%;--my:50%;--rx:0deg;--ry:0deg;--ho:0;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;will-change:transform;isolation:isolate}
.mod:after,.case:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
 background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.18),transparent 45%),var(--hf);background-size:100% 100%,250% 250%;background-position:0 0,var(--mx) var(--my);
 mix-blend-mode:color-dodge;opacity:calc(var(--ho)*var(--hi)*.32);transition:opacity .35s}
.mod:before,.case:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;background:var(--hf);background-size:250% 250%;background-position:var(--mx) var(--my);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:calc(.25 + var(--ho)*var(--hi))}
.case:hover{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px)}
.mod h3{transition:text-shadow .3s}.mod:hover h3{text-shadow:0 0 18px rgba(62,230,196,calc(var(--hi)*.6))}
.mods{overflow:visible}
@media (hover:none){.mod,.case{--ho:.55}.mod:before,.case:before,.mod:after,.case:after{animation:hdrift 7s ease-in-out infinite alternate}}
@keyframes hdrift{from{background-position:0 0,0% 30%}to{background-position:0 0,100% 70%}}
@media (prefers-reduced-motion:reduce){.hm:after,.ht,.mod:before,.case:before,.mod:after,.case:after{animation:none!important}.mod,.case{transform:none!important}}

/* v3: service cards full bold; work cards bold foil border, photos untouched */
.case:after{background:radial-gradient(360px circle at var(--mx) var(--my),rgba(255,255,255,.10),transparent 60%)!important;background-size:100% 100%!important;mix-blend-mode:normal!important;opacity:calc(var(--ho)*.35)!important;animation:none!important}
.case:before{padding:1.5px;opacity:calc(.45 + var(--ho)*.55)!important}
.case{box-shadow:0 0 0 rgba(124,108,255,0);transition:box-shadow .3s,transform .25s}
.case:hover{box-shadow:0 0 22px rgba(124,108,255,.35),0 0 40px rgba(62,230,196,.18)}
.case img{filter:none!important;mix-blend-mode:normal!important}
@media (hover:none){.case:after{opacity:0!important}.case:before{opacity:.85!important;animation:hdrift 6s ease-in-out infinite alternate!important}.case{box-shadow:0 0 18px rgba(124,108,255,.22)}}