/* ==========================================================================
   FX — animații, gradiente, 3D. Se încarcă peste style.css.
   ========================================================================== */
@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* layers */
.fx-dust{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.fx-aurora{position:absolute;left:0;right:0;top:0;height:150vh;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.fx-aurora span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.fx-aurora span:nth-child(1){width:60vw;height:50vh;left:-12vw;top:-10vh;background:radial-gradient(closest-side,rgba(63,127,153,.55),transparent);animation:fxDriftA 22s ease-in-out infinite alternate}
.fx-aurora span:nth-child(2){width:50vw;height:60vh;right:-10vw;top:6vh;background:radial-gradient(closest-side,rgba(143,217,242,.32),transparent);animation:fxDriftB 26s ease-in-out infinite alternate}
.fx-aurora span:nth-child(3){width:46vw;height:40vh;left:28vw;top:50vh;background:radial-gradient(closest-side,rgba(90,120,200,.28),transparent);animation:fxDriftC 30s ease-in-out infinite alternate}
@keyframes fxDriftA{to{transform:translate(18vw,14vh) scale(1.2)}}
@keyframes fxDriftB{to{transform:translate(-20vw,18vh) scale(.85)}}
@keyframes fxDriftC{to{transform:translate(-14vw,-22vh) scale(1.25)}}
.hero,.divider,.catalog,.bundles,.custom,.support,footer{position:relative;z-index:1}
html,body{overflow-x:clip}
.support{background:linear-gradient(180deg,rgba(9,12,14,.6),#090c0e)}

/* header */
header.top{transition:padding 300ms ease,background 300ms ease}
header.top.scrolled{padding-top:10px;padding-bottom:10px;background:rgba(7,10,12,.92)}
.fx-progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--ice-deep),var(--ice),var(--ice-hi));box-shadow:0 0 12px rgba(143,217,242,.7)}
.head-browse,.btn-ice,.m-main,.pay,.center .b-get,.add-btn.in,.add-btn:hover{
  background:linear-gradient(115deg,#d6f3fc 0%,#8fd9f2 45%,#5fb3d3 100%);background-size:180% 100%;background-position:0 0;transition:background-position 500ms ease,box-shadow 300ms ease,transform 250ms ease}
.head-browse:hover,.btn-ice:hover,.m-main:hover,.pay:hover,.center .b-get:hover{background-position:100% 0;box-shadow:0 0 0 1px rgba(195,236,250,.4),0 10px 34px -8px rgba(143,217,242,.6)}
.btn,.head-browse,.m-main,.pay,.b-get{position:relative;overflow:hidden}
.btn-ice::after,.head-browse::after,.m-main::after,.pay::after,.center .b-get::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);pointer-events:none;animation:fxGlint 5.5s ease-in-out infinite}
@keyframes fxGlint{0%,70%{left:-60%}100%{left:130%}}
.btn-line{transition:border-color 250ms ease,background 250ms ease,transform 250ms ease}
.btn-line:hover{border-color:var(--ice-line);background:rgba(143,217,242,.06)}
.chip{transition:background 220ms ease,color 220ms ease,border-color 220ms ease}
.chip:not(.on):hover{border-color:var(--ice-line);color:var(--text)}
.chip.on{background:linear-gradient(115deg,#d6f3fc,#8fd9f2 50%,#5fb3d3);box-shadow:0 6px 22px -8px rgba(143,217,242,.7)}
.cart-count{transition:transform 300ms cubic-bezier(.3,1.8,.5,1)}
.cart-count.bump{animation:fxBump 520ms cubic-bezier(.3,1.8,.5,1)}
@keyframes fxBump{0%{transform:scale(1)}35%{transform:scale(1.6);box-shadow:0 0 18px rgba(143,217,242,.9)}100%{transform:scale(1)}}

/* hero */
.shard3d{position:relative;width:230px;height:230px;margin:-30px 0 -26px;display:grid;place-items:center;cursor:grab;touch-action:pan-y}
.shard3d:active{cursor:grabbing}
.shard3d::before{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(143,217,242,.32),transparent);filter:blur(10px);animation:fxPulse 4.5s ease-in-out infinite}
.shard3d canvas{position:absolute;inset:-30%;width:160%!important;height:160%!important;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle closest-side,#000 38%,rgba(0,0,0,.6) 62%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 38%,rgba(0,0,0,.6) 62%,transparent 100%)}
.shard3d svg{position:relative;transition:opacity 600ms ease}
.shard3d.live svg{opacity:0}
@keyframes fxPulse{50%{transform:scale(1.18);opacity:.6}}
.hero-brand{background:linear-gradient(110deg,#e2f6fd 0%,#8fd9f2 25%,#3f7f99 45%,#e2f6fd 60%,#8fd9f2 80%,#3f7f99 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:fxShift 9s linear infinite}
@keyframes fxShift{to{background-position:-220% 0}}
.hero-img{animation:fxClip 1300ms cubic-bezier(.7,0,.2,1) 150ms backwards;transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 500ms cubic-bezier(.2,.8,.2,1),border-color 400ms ease;box-shadow:0 40px 100px -30px rgba(0,0,0,.8)}
.hero-img:hover{border-color:var(--ice-line)}
.hero-img img{transform:translateY(var(--py,0px)) scale(1.1);transition:transform 120ms linear;animation:fxZoom 1800ms cubic-bezier(.2,.8,.2,1) 150ms backwards}
@keyframes fxZoom{from{transform:scale(1.35)}}
@keyframes fxClip{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.fx-sweep{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(195,236,250,.16) 50%,transparent 60%);background-size:300% 100%;animation:fxSweep 7s ease-in-out 1.6s infinite;mix-blend-mode:screen}
@keyframes fxSweep{0%{background-position:120% 0}45%,100%{background-position:-120% 0}}
.fx-glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 400ms ease;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(195,236,250,.18),transparent 60%);mix-blend-mode:screen}
.hero-img:hover .fx-glare{opacity:1}
.hero-badge .diamond{animation:fxSpin 6s linear infinite}
@keyframes fxSpin{to{transform:rotate(405deg)}}

/* divider */
.divider .diamond{animation:fxGlow 3s ease-in-out infinite}
.divider .diamond:last-of-type{animation-delay:1.5s}
@keyframes fxGlow{50%{box-shadow:0 0 14px 2px rgba(143,217,242,.85);transform:rotate(45deg) scale(1.3)}}

/* filters row (search, chips, sort menu) must sit above the product cards,
   which become their own layers because of the tilt/reveal transforms */
.sec-head{position:relative;z-index:5}

/* headings */
.sec-head h2,.custom h2,.support h2{background:linear-gradient(100deg,var(--text) 0%,var(--text) 38%,var(--ice-hi) 50%,var(--text) 62%,var(--text) 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxShift 11s linear infinite}

/* reveal — replays on every scroll in/out (set by fx.js) */
[data-fx]{opacity:0;transition:opacity 800ms ease,transform 1000ms cubic-bezier(.2,.8,.2,1),filter 900ms ease;transition-delay:var(--fd,0ms);will-change:transform,opacity}
[data-fx]:not(.in){transition-delay:0ms;transition-duration:350ms}
[data-fx="up"]{transform:translateY(46px)}
[data-fx="left"]{transform:translateX(-70px);filter:blur(6px)}
[data-fx="right"]{transform:translateX(70px);filter:blur(6px)}
[data-fx="zoom"]{transform:perspective(1200px) translateY(50px) scale(.9) rotateX(10deg);filter:blur(10px)}
[data-fx="line"]{transform:scaleX(0)}
[data-fx].in{opacity:1;transform:none;filter:none}
/* reveal */
.fx-reveal{opacity:0;transform:translateY(28px);transition:opacity 800ms ease,transform 900ms cubic-bezier(.2,.8,.2,1)}
.fx-reveal.in{opacity:1;transform:none}
@keyframes fxUp{from{opacity:0;transform:translateY(30px)}}

/* product cards */
.card{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transition:transform 350ms cubic-bezier(.2,.8,.2,1),border-color 300ms ease,box-shadow 400ms ease;transform-style:preserve-3d}
.card.fx-wait{opacity:0}
.card.fx-in{animation:fxUp 750ms cubic-bezier(.2,.8,.2,1) var(--d,0ms) backwards}
.card:hover{--lift:-6px;border-color:var(--ice-line);box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 40px -12px rgba(143,217,242,.35)}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity 300ms ease;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(143,217,242,.13),transparent 60%)}
.card:hover::after{opacity:1}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity 300ms ease;z-index:2;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),var(--ice),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card:hover::before{opacity:1}
.shot img{transition:transform 700ms cubic-bezier(.2,.8,.2,1),filter 500ms ease}
.card:hover .shot img{transform:scale(1.07);filter:brightness(1.08) saturate(1.05)}
.card .shot::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(7,10,12,.55))}
.add-btn,.pv-btn{transition:background 250ms ease,color 250ms ease,border-color 250ms ease,background-position 500ms ease}

/* bundles */
.bcard.center::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--fx-a),transparent 0deg,var(--ice) 60deg,transparent 140deg,transparent 200deg,var(--ice-deep) 260deg,transparent 330deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fxRot 6s linear infinite}
.bcard.center::after{content:"";position:absolute;inset:-30px;z-index:-1;border-radius:20px;background:radial-gradient(60% 50% at 50% 40%,rgba(143,217,242,.14),transparent 70%);filter:blur(20px);pointer-events:none}
@keyframes fxRot{to{--fx-a:360deg}}
.bcard.center{background:linear-gradient(165deg,#0d1b22,#0c1013 62%)}
.center .b-art svg{animation:fxFloat 5s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(143,217,242,.45))}
@keyframes fxFloat{50%{transform:translateY(-8px) rotate(-2deg)}}
.center .b-art::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(195,236,250,.14) 50%,transparent 65%);background-size:300% 100%;animation:fxSweep 5s ease-in-out infinite}
.nav-arrow:hover{box-shadow:0 0 0 4px rgba(143,217,242,.08),0 0 30px rgba(143,217,242,.3)}

/* custom */
.custom-box{isolation:isolate}
.custom-box::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--fx-a),transparent,var(--ice) 15%,transparent 30%,transparent 55%,var(--ice-deep) 70%,transparent 85%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fxRot 9s linear infinite}
.custom-box::before{animation:fxBreath 9s ease-in-out infinite alternate}
@keyframes fxBreath{to{transform:translateX(-25%) scale(1.25)}}

/* modals + cart + toast */
.overlay.open,.cart-ov.open{animation:fxFade 300ms ease}
.overlay.open .modal,.overlay.open .terms{animation:fxPop 520ms cubic-bezier(.2,.9,.25,1)}
.cart-ov.open .cart{animation:fxSlide 500ms cubic-bezier(.2,.9,.25,1)}
.modal{box-shadow:0 50px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(143,217,242,.05)}
.cart-lines .line{animation:fxUp 450ms cubic-bezier(.2,.8,.2,1) backwards}
.cart-lines .line:nth-child(2){animation-delay:50ms}.cart-lines .line:nth-child(3){animation-delay:100ms}.cart-lines .line:nth-child(n+4){animation-delay:150ms}
.toast.show{animation:fxToast 500ms cubic-bezier(.2,.9,.25,1)}
@keyframes fxFade{from{opacity:0}}
@keyframes fxPop{from{opacity:0;transform:translateY(30px) scale(.96)}}
@keyframes fxSlide{from{transform:translateX(100%)}}
@keyframes fxToast{from{opacity:0;transform:translate(-50%,20px)}}
.m-thumbs .shot img,.m-hero img{animation:fxFade 400ms ease}

header.top .brand{cursor:pointer}
/* intro */
html.fx-intro-on body>*:not(.fx-intro){opacity:0}
html.fx-intro-on body>*,.fx-intro-fade body>*{transition:opacity 700ms ease}
.fx-intro{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;cursor:pointer;
  background:radial-gradient(60% 50% at 50% 45%,#0d1c23,var(--bg) 70%);transition:opacity 550ms ease,filter 550ms ease,transform 650ms cubic-bezier(.7,0,.2,1)}
.fx-intro.out{opacity:0;filter:blur(14px);transform:scale(1.12);pointer-events:none}
.fx-intro-core{position:relative;display:grid;place-items:center;width:160px;height:160px}
.fx-intro svg{position:relative;overflow:visible}
.fx-intro path{transform-box:fill-box;transform-origin:center;animation:fxShardIn 650ms cubic-bezier(.2,.9,.2,1) backwards}
@keyframes fxShardIn{from{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.4)}60%{opacity:1}}
.fx-intro-flash{position:absolute;inset:-40%;border-radius:50%;background:radial-gradient(closest-side,rgba(195,236,250,.55),rgba(143,217,242,.15) 45%,transparent);opacity:0;animation:fxFlash 800ms ease-out 480ms forwards}
@keyframes fxFlash{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:.25;transform:scale(1.15)}}
.fx-intro-frags{position:absolute;left:50%;top:50%}
.fx-intro-frags i{position:absolute;left:0;top:0;background:linear-gradient(160deg,#e2f6fd,#5a9cba);clip-path:polygon(50% 0,100% 100%,0 100%);opacity:0;animation:fxFrag 750ms cubic-bezier(.1,.8,.3,1) 520ms forwards}
@keyframes fxFrag{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(.3)}}
.fx-intro-name{display:flex;font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:.06em;color:var(--text)}
.fx-intro-name span{display:inline-block;animation:fxLetter 500ms cubic-bezier(.2,.8,.2,1) backwards;background:linear-gradient(140deg,#e2f6fd,#8fd9f2 50%,#3f7f99);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes fxLetter{from{opacity:0;transform:translateY(18px);filter:blur(8px)}}

/* socials */
.socials{display:flex;gap:10px;margin-left:auto}
.soc{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:3px;color:var(--dim)!important;background:#0a0e11;text-decoration:none;
  transition:border-color 250ms ease,color 250ms ease,background 250ms ease,transform 300ms cubic-bezier(.2,.8,.2,1),box-shadow 300ms ease}
.soc:hover{border-color:var(--ice);color:var(--ice)!important;background:rgba(143,217,242,.06);transform:translateY(-3px);box-shadow:0 10px 26px -12px rgba(143,217,242,.55)}
.soc-ico{display:grid;place-items:center}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  .fx-reveal,[data-fx]{opacity:1;transform:none;filter:none}
  .card{transform:none}
  .fx-aurora span{animation:none}
  html.fx-intro-on body>*{opacity:1}
}