/* ============================================================
   DRIP — cinematic atmosphere + FX layer  (loaded after hero.css)
   Stacks a "lit film set" over the all-white holographic base.
   Technique set ported from CLAZZICZ / GREASE MOB, with blend
   modes flipped to multiply/overlay so it reads on WHITE.
   ============================================================ */

/* ---------- fixed atmosphere stack (all pointer-events:none) ---------- */
.fx-field,.fx-grain,.fx-vignette,#fx-motes{position:fixed;inset:0;pointer-events:none;}

/* painted holographic field — colour pools at the edges, clean centre */
.fx-field{z-index:60;mix-blend-mode:multiply;opacity:.55;
  background:
    radial-gradient(55% 45% at 10% 6%, rgba(120,200,255,.20), transparent 60%),
    radial-gradient(52% 44% at 92% 10%, rgba(255,140,220,.18), transparent 60%),
    radial-gradient(58% 50% at 86% 94%, rgba(150,255,210,.18), transparent 62%),
    radial-gradient(50% 46% at 8% 96%, rgba(255,214,130,.16), transparent 60%);
  animation:fxDrift 34s ease-in-out infinite alternate;}
@keyframes fxDrift{to{transform:translate3d(0,-16px,0) scale(1.05)}}

/* holographic motes canvas — drifting iridescent dust */
#fx-motes{z-index:60;mix-blend-mode:multiply;opacity:.5;}

/* animated film grain — zero-asset SVG turbulence */
.fx-grain{z-index:61;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:fxGrain .5s steps(3) infinite;}
@keyframes fxGrain{0%{transform:translate(0,0)}33%{transform:translate(-4%,3%)}66%{transform:translate(3%,-3%)}100%{transform:translate(-2%,2%)}}
@media (max-width:900px){.fx-grain{display:none}}   /* feTurbulence is a phone-GPU killer */

/* soft vignette — cool edge focus + white inner bloom */
.fx-vignette{z-index:61;box-shadow:inset 0 0 210px 44px rgba(120,140,190,.10), inset 0 0 70px 14px rgba(255,255,255,.22);}

/* keep chrome crisp above the atmosphere */
.nav,#nav{z-index:70!important;}
.cursor-glow{z-index:75!important;}
.lightbox{z-index:9999!important;}
@media (prefers-reduced-motion:reduce){.fx-field,#fx-motes,.fx-grain{animation:none!important;display:none!important;}}

/* ---------- magnetic CTAs ---------- */
.magnetic{will-change:transform;transition:transform .3s cubic-bezier(.3,.7,.2,1);}

/* ---------- iridescent hover border + lift on content cards ---------- */
.craft-card,.gal-item{transition:transform .5s cubic-bezier(.4,0,.1,1),box-shadow .5s;}
.craft-card:hover,.gal-item:hover{transform:translateY(-6px);}
.craft-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(120deg,#ff5db2,#a066ff,#3fa0ff,#2ff0d8,#ffc93f);background-size:240% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s;
  pointer-events:none;animation:holoPan 6s linear infinite;z-index:2;}
.craft-card:hover::after{opacity:.95;}

/* ---------- animated sheen on every holographic headline ---------- */
.holo-text{background-size:220% 100%;animation:holoPan 8s linear infinite;}

/* ---------- interactive gallery filmstrip ---------- */
.gal-grid{display:flex!important;flex-wrap:nowrap!important;gap:18px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;padding:10px 6px 24px;cursor:grab;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.gal-grid::-webkit-scrollbar{display:none;}
.gal-grid.dragging{cursor:grabbing;scroll-snap-type:none;}
.gal-grid .gal-item{flex:0 0 auto!important;width:min(300px,74vw)!important;aspect-ratio:3/4;height:auto!important;
  scroll-snap-align:center;margin:0!important;border-radius:20px;overflow:hidden;position:relative;
  transform-style:preserve-3d;transition:transform .25s cubic-bezier(.4,0,.1,1),box-shadow .5s;will-change:transform;
  box-shadow:0 26px 54px -34px rgba(20,30,60,.55);border:1px solid rgba(255,255,255,.7);}
.gal-grid .gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.4,0,.1,1);pointer-events:none;}
.gal-grid .gal-item:hover img{transform:scale(1.09);}
.gal-grid .gal-item .gal-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 13px;
  background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.1) 70%,transparent);color:#fff;
  font:800 .82rem/1.2 Montserrat,sans-serif;letter-spacing:.03em;pointer-events:none;}
.gal-grid .gal-item::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:var(--holo,linear-gradient(120deg,#ff5db2,#a066ff,#3fa0ff,#2ff0d8,#ffc93f));background-size:240% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none;
  animation:holoPan 6s linear infinite;}
.gal-grid .gal-item:hover::after{opacity:.95;}
.gallery .sec-head::after{content:"↔  drag to explore";display:block;margin-top:14px;
  font:800 .66rem/1 Montserrat,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft,#4a4f57);opacity:.55;}

/* craft cards also tilt smoothly */
.craft-card{transition:transform .25s cubic-bezier(.4,0,.1,1),box-shadow .5s!important;transform-style:preserve-3d;}

/* ---------- kinetic word-by-word reveal ---------- */
.reveal-words .w{display:inline-block;opacity:0;transform:translateY(20px) rotate(3deg);filter:blur(4px);
  transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1),filter .6s;}
.reveal-words.in .w{opacity:1;transform:none;filter:none;}
@media (prefers-reduced-motion:reduce){.reveal-words .w{opacity:1;transform:none;filter:none;}}