/* ============== Pro-tier component primitives ==============
   Added for: Aceternity UI / Inspira UI / Motion (Framer Motion) ports
   + real licensed 3D car viewers. Loaded after styles.css. */

/* ---- spotlight card (mouse-follow radial) ---- */
.d-spot{position:relative;width:280px;border-radius:16px;border:1px solid var(--border);background:var(--surface-2);padding:22px;overflow:hidden}
.d-spot::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), #8b7cff33, transparent 70%);
}
.d-spot:hover::before{opacity:1}
.d-spot h4{margin:0 0 6px;font-size:15px}
.d-spot p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---- 3D tilt card ---- */
.d-tilt-wrap{perspective:900px}
.d-tilt{
  width:260px;border-radius:18px;background:linear-gradient(160deg,var(--surface-3),var(--surface-2));
  border:1px solid var(--border);padding:20px;transform-style:preserve-3d;
  transition:transform .15s ease-out;will-change:transform;
}
.d-tilt__badge{display:inline-block;background:var(--accent-soft);color:var(--accent);font-size:10.5px;font-family:var(--mono);padding:3px 8px;border-radius:999px;transform:translateZ(40px)}
.d-tilt__title{font-size:17px;font-weight:700;margin:10px 0 4px;transform:translateZ(50px)}
.d-tilt__sub{font-size:12px;color:var(--muted);transform:translateZ(30px)}
.d-tilt__glow{position:absolute;inset:0;border-radius:18px;background:radial-gradient(circle at 30% 20%,#ffffff14,transparent 60%);pointer-events:none}

/* ---- glare card ---- */
.d-glare{position:relative;width:240px;height:150px;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(135deg,#232535,#15151a);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.d-glare::after{
  content:"";position:absolute;top:-50%;left:var(--gx,-60%);width:40%;height:220%;
  background:linear-gradient(100deg, transparent, #ffffff2c, transparent);
  transform:rotate(18deg);transition:left .5s ease;pointer-events:none;
}

/* ---- bento grid ---- */
.d-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,84px);gap:10px;width:100%;max-width:520px}
.d-bento__cell{background:var(--surface-3);border:1px solid var(--border);border-radius:12px;padding:12px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;justify-content:space-between;opacity:0;transform:translateY(14px)}
.d-bento__cell b{color:var(--ink);font-size:13px}
.d-bento__cell.c1{grid-column:span 2;grid-row:span 2}
.d-bento__cell.c2{grid-column:span 2}
.d-bento__cell.c3{grid-column:span 1}
.d-bento__cell.c4{grid-column:span 1}

/* ---- infinite moving cards (marquee) ---- */
.d-imc{width:100%;max-width:520px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.d-imc__track{display:flex;gap:12px;width:max-content;animation:imcScroll 18s linear infinite}
.d-imc__item{flex:0 0 auto;width:150px;background:var(--surface-3);border:1px solid var(--border);border-radius:12px;padding:12px;font-size:12px}
.d-imc__item b{display:block;font-size:13px;margin-bottom:4px}
@keyframes imcScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.d-imc:hover .d-imc__track{animation-play-state:paused}

/* ---- wobble card ---- */
.d-wobble{width:260px;border-radius:16px;background:var(--surface-3);border:1px solid var(--border);padding:20px;transition:transform .25s cubic-bezier(.17,.84,.44,1)}
.d-wobble__title{font-size:15px;font-weight:700;margin-bottom:6px}
.d-wobble__sub{font-size:12px;color:var(--muted)}

/* ---- shimmer button ---- */
.d-shimmerbtn{
  position:relative;border:none;border-radius:11px;padding:12px 22px;font-weight:700;font-size:13.5px;
  color:#fff;cursor:pointer;overflow:hidden;background:#1b1b22;border:1px solid var(--border);
}
.d-shimmerbtn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 35%,#ffffff55 50%,transparent 65%);
  background-size:220% 100%;animation:shimmerBtn 2.4s linear infinite;
}
@keyframes shimmerBtn{0%{background-position:-120% 0}100%{background-position:120% 0}}

/* ---- moving border button (conic gradient mask) ---- */
.d-movborder{position:relative;border-radius:11px;padding:3px;display:inline-block;background:var(--surface-3)}
.d-movborder::before{
  content:"";position:absolute;inset:0;border-radius:11px;padding:2px;
  background:conic-gradient(from calc(var(--a,0) * 1deg), #8b7cff, transparent 25%, transparent 75%, #8b7cff);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.d-movborder span{position:relative;display:block;background:#131318;border-radius:9px;padding:10px 20px;font-size:13.5px;font-weight:700}

/* ---- hover gradient border button ---- */
.d-gradborder{position:relative;border-radius:11px;padding:2px;background:linear-gradient(90deg,#8b7cff,#ff7ca8,#8b7cff);background-size:220% 100%;background-position:0% 0;transition:background-position .5s}
.d-gradborder:hover{background-position:100% 0}
.d-gradborder span{display:block;background:#131318;border-radius:9px;padding:10px 20px;font-size:13.5px;font-weight:700}

/* ---- magnetic button ---- */
.d-magnetic{background:var(--surface-3);border:1px solid var(--border);border-radius:11px;padding:12px 24px;font-weight:700;font-size:13.5px;cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}

/* ---- ripple button ---- */
.d-ripplebtn{position:relative;overflow:hidden;border:none;border-radius:11px;padding:12px 24px;background:var(--accent);color:#0a0a0d;font-weight:700;font-size:13.5px;cursor:pointer}
.d-ripple{position:absolute;border-radius:50%;background:#ffffff55;transform:scale(0);animation:rippleGrow .6s ease-out forwards;pointer-events:none}
@keyframes rippleGrow{to{transform:scale(3);opacity:0}}

/* ---- stateful button ---- */
.d-statebtn{border:none;border-radius:11px;padding:12px 24px;background:var(--accent);color:#0a0a0d;font-weight:700;font-size:13.5px;cursor:pointer;min-width:140px;transition:background .2s}
.d-statebtn.is-loading{background:var(--surface-3);color:var(--muted)}
.d-statebtn.is-done{background:var(--good);color:#06130c}

/* ---- floating navbar ---- */
.d-navwrap{width:100%;max-width:460px;position:relative;height:120px}
.d-floatnav{
  position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;gap:4px;
  background:#15151bcc;backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:999px;padding:6px;
}
.d-floatnav a{font-size:12.5px;color:var(--muted);padding:7px 14px;border-radius:999px;cursor:pointer}
.d-floatnav a.is-active{background:var(--accent);color:#0a0a0d;font-weight:700}

/* ---- mega menu ---- */
.d-megawrap{width:100%;max-width:460px;position:relative}
.d-megabtn{background:var(--surface-3);border:1px solid var(--border);border-radius:9px;padding:9px 16px;font-size:13px;cursor:pointer}
.d-megapanel{
  position:absolute;top:calc(100% + 8px);left:0;width:340px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px;
  opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity .18s,transform .18s;
}
.d-megapanel.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.d-megaitem{font-size:12px;color:var(--muted);padding:8px;border-radius:8px}
.d-megaitem:hover{background:var(--surface-3);color:var(--ink)}
.d-megaitem b{display:block;font-size:12.5px;color:var(--ink);margin-bottom:2px}

/* ---- command palette ---- */
.d-cmdlaunch{background:var(--surface-3);border:1px solid var(--border);border-radius:9px;padding:9px 16px;font-size:12.5px;color:var(--muted);cursor:pointer}
.d-cmdlaunch kbd{background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 6px;font-family:var(--mono);font-size:10.5px;margin-left:8px}
.d-cmdoverlay{position:fixed;inset:0;background:#000a;display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;z-index:300;opacity:0;pointer-events:none;transition:opacity .15s}
.d-cmdoverlay.is-open{opacity:1;pointer-events:auto}
.d-cmdbox{width:420px;max-width:90vw;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;overflow:hidden;transform:translateY(-14px);transition:transform .2s}
.d-cmdoverlay.is-open .d-cmdbox{transform:translateY(0)}
.d-cmdbox input{width:100%;background:none;border:none;border-bottom:1px solid var(--border);padding:14px 16px;color:var(--ink);font-size:14px;outline:none}
.d-cmdrow{padding:10px 16px;font-size:13px;color:var(--muted);cursor:pointer;display:flex;justify-content:space-between}
.d-cmdrow:hover,.d-cmdrow.is-sel{background:var(--surface-3);color:var(--ink)}

/* ---- mobile drawer ---- */
.d-drawerzone{position:relative;width:100%;max-width:340px;height:200px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.d-drawer{position:absolute;top:0;right:0;bottom:0;width:62%;background:var(--surface-3);border-left:1px solid var(--border);padding:16px;transform:translateX(100%)}
.d-draweritem{opacity:0;transform:translateX(16px);font-size:13px;padding:8px 0;color:var(--muted)}

/* ---- macOS dock magnify ---- */
.d-dockwrap{width:100%;max-width:460px;display:flex;justify-content:center}
.d-dock{display:flex;gap:10px;align-items:flex-end;background:#15151bcc;backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:18px;padding:10px 14px}
.d-dockitem{width:40px;height:40px;border-radius:11px;background:var(--surface-3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform .15s,width .15s,height .15s;cursor:pointer}

/* ---- text generate effect ---- */
.d-textgen{font-size:18px;font-weight:700;line-height:1.5;max-width:380px}
.d-textgen span{opacity:0;filter:blur(4px);transition:opacity .4s,filter .4s}

/* ---- typewriter ---- */
.d-typewriter{font-size:20px;font-weight:700;font-family:var(--mono)}
.d-typewriter__cursor{display:inline-block;width:2px;height:20px;background:var(--accent);margin-left:2px;animation:twBlink 0.9s steps(1) infinite;vertical-align:-3px}
@keyframes twBlink{50%{opacity:0}}

/* ---- flip words ---- */
.d-flipwords{font-size:24px;font-weight:700;display:flex;gap:8px;align-items:baseline}
.d-flipwords__slot{position:relative;color:var(--accent);min-width:110px;display:inline-block}
.d-flipwords__w{position:absolute;left:0;top:0;white-space:nowrap}

/* ---- hero highlight ---- */
.d-herohi{font-size:24px;font-weight:700;line-height:1.5;max-width:360px}
.d-herohi mark{background:linear-gradient(90deg,#8b7cff,#ff7ca8);color:#0a0a0d;padding:1px 6px;border-radius:5px;background-size:0% 100%;background-repeat:no-repeat;transition:background-size .6s ease}
.d-herohi.is-in mark{background-size:100% 100%}

/* ---- tracing beam ---- */
.d-tbwrap{display:flex;gap:16px;width:100%;max-width:400px}
.d-tbrail{width:18px;flex:0 0 auto;position:relative}
.d-tbrail svg{position:absolute;top:0;left:3px}
.d-tbcontent{flex:1;display:flex;flex-direction:column;gap:30px;font-size:13px;color:var(--muted)}
.d-tbcontent b{color:var(--ink);display:block;margin-bottom:3px;font-size:13.5px}

/* ---- sticky scroll reveal ---- */
.d-sswrap{display:flex;gap:20px;width:100%;max-width:480px;height:230px}
.d-sslist{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:30px;padding-right:4px}
.d-ssitem{font-size:13px;color:var(--muted-2);cursor:pointer;transition:color .2s}
.d-ssitem.is-active{color:var(--ink)}
.d-ssitem b{display:block;font-size:14px;margin-bottom:4px}
.d-ssvisual{width:160px;flex:0 0 auto;border-radius:12px;background:var(--surface-3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:30px;transition:background .3s}

/* ---- horizontal scroll gallery ---- */
.d-hscroll{display:flex;gap:12px;overflow-x:auto;width:100%;max-width:480px;padding-bottom:10px;scroll-snap-type:x mandatory}
.d-hscroll::-webkit-scrollbar{height:5px}
.d-hcard{flex:0 0 150px;height:100px;background:var(--surface-3);border:1px solid var(--border);border-radius:12px;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;font-size:26px}

/* ---- apple stacked cards ---- */
.d-stackzone{position:relative;width:100%;max-width:300px;height:230px}
.d-stackcard{position:absolute;inset:0;border-radius:16px;border:1px solid var(--border);display:flex;align-items:flex-end;padding:16px;font-size:14px;font-weight:700;color:#fff}
.d-stackcard:nth-child(1){background:linear-gradient(160deg,#2a2a46,#15151a);z-index:1}
.d-stackcard:nth-child(2){background:linear-gradient(160deg,#462a2a,#15151a);z-index:2}
.d-stackcard:nth-child(3){background:linear-gradient(160deg,#2a4634,#15151a);z-index:3}

/* ---- aurora background ---- */
.d-aurora{position:relative;width:100%;max-width:480px;height:200px;border-radius:16px;overflow:hidden;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:#0a0a0f}
.d-aurora__layer{position:absolute;inset:-40%;background:conic-gradient(from 0deg,#8b7cff55,#ff7ca855,#5ee6a855,#8b7cff55);filter:blur(40px);animation:auroraSpin 10s linear infinite;opacity:.6}
@keyframes auroraSpin{to{transform:rotate(360deg)}}
.d-aurora__text{position:relative;z-index:2;font-size:22px;font-weight:800;color:#fff}

/* ---- macbook scroll ---- */
.d-macwrap{width:100%;max-width:440px;height:260px;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2);position:relative}
.d-macscroll{height:100%;overflow-y:scroll}
.d-macframe{height:620px;position:relative}
.d-macstage{position:sticky;top:0;height:260px;display:flex;align-items:center;justify-content:center}
.d-macbody{width:260px;border-radius:10px 10px 0 0;background:#1c1c22;border:1px solid var(--border);padding:8px;box-shadow:0 20px 50px #0008}
.d-macscreen{height:140px;border-radius:5px;background:linear-gradient(160deg,#2a2a46,#121216);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted)}

/* ---- background beams (SVG paths with traveling gradient) ---- */
.d-bgbeams{position:relative;width:100%;max-width:480px;height:170px;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#0a0a0f;display:flex;align-items:center;justify-content:center}
.d-bgbeams svg{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.d-bgbeams__path{stroke:url(#beamGrad);stroke-width:1;fill:none;stroke-dasharray:60 400;animation:beamTravel 4s linear infinite}
@keyframes beamTravel{to{stroke-dashoffset:-460}}
.d-bgbeams__text{position:relative;z-index:2;color:#fff;font-weight:800;font-size:18px}

/* ---- grid / dot background ---- */
.d-gridbg{width:100%;max-width:480px;height:150px;border-radius:16px;border:1px solid var(--border);position:relative;overflow:hidden;background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.d-gridbg__dots{position:absolute;inset:0;background-image:radial-gradient(circle,#ffffff22 1px,transparent 1px);background-size:18px 18px;mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 40%,transparent 100%)}
.d-gridbg__text{position:relative;z-index:2;font-weight:800;font-size:17px;color:#fff}

/* ---- meteors ---- */
.d-meteorzone{position:relative;width:100%;max-width:480px;height:170px;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#0a0a0f}
.d-meteor{position:absolute;top:-10%;width:2px;height:70px;background:linear-gradient(180deg,#fff,transparent);transform:rotate(35deg);opacity:0;animation:meteorFall 2.6s linear infinite}
.d-meteor::before{content:"";position:absolute;top:0;left:-1px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px #ffffffaa}

/* ---- sparkles ---- */
.d-sparklezone{position:relative;width:100%;max-width:480px;height:150px;border-radius:16px;border:1px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.d-sparkle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--accent);opacity:0;animation:sparklePop 1.8s ease-in-out infinite}
@keyframes sparklePop{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0)}}
.d-sparklezone__text{position:relative;z-index:2;font-weight:800;font-size:18px;color:#fff}

/* ---- spotlight bg (large soft radial, static panel) ---- */
.d-spotbg{position:relative;width:100%;max-width:480px;height:160px;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#0a0a0f;display:flex;align-items:center;justify-content:center}
.d-spotbg__glow{position:absolute;top:-40%;left:10%;width:280px;height:280px;background:radial-gradient(circle,#8b7cff55,transparent 70%);filter:blur(10px)}
.d-spotbg__text{position:relative;z-index:2;font-weight:800;font-size:18px;color:#fff}

/* ---- glitch / encrypted text ---- */
.d-glitch{font-size:24px;font-weight:800;font-family:var(--mono);position:relative;color:var(--ink)}
.d-glitch.is-run::before,.d-glitch.is-run::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;
}
.d-glitch.is-run::before{color:#ff5a7a;clip-path:inset(0 0 60% 0);animation:glitchTop .4s steps(2) 3}
.d-glitch.is-run::after{color:#5ee6a8;clip-path:inset(60% 0 0 0);animation:glitchBot .4s steps(2) 3}
@keyframes glitchTop{0%{transform:translate(0,0)}50%{transform:translate(-3px,-2px)}100%{transform:translate(0,0)}}
@keyframes glitchBot{0%{transform:translate(0,0)}50%{transform:translate(3px,2px)}100%{transform:translate(0,0)}}

/* ---- gradient animated text ---- */
.d-gradtext{font-size:30px;font-weight:800;background:linear-gradient(90deg,#8b7cff,#ff7ca8,#5ee6a8,#8b7cff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradTextMove 4s linear infinite}
@keyframes gradTextMove{to{background-position:300% 0}}

/* ---- cursor follow highlight ---- */
.d-cursorzone{position:relative;width:100%;max-width:420px;height:150px;border-radius:14px;border:1px solid var(--border);background:var(--surface-2);overflow:hidden;cursor:none}
.d-cursordot{position:absolute;width:70px;height:70px;border-radius:50%;background:#8b7cff33;border:1px solid #8b7cff66;pointer-events:none;transform:translate(-50%,-50%);transition:left .12s linear,top .12s linear}
.d-cursorzone__hint{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:13px}

/* ---- animated underline tabs ---- */
.d-tabsrow{display:flex;gap:4px;position:relative;border-bottom:1px solid var(--border);width:100%;max-width:380px}
.d-tabitem{padding:10px 16px;font-size:13px;color:var(--muted);cursor:pointer;position:relative}
.d-tabitem.is-active{color:var(--ink)}
.d-tabunderline{position:absolute;bottom:-1px;height:2px;background:var(--accent);border-radius:2px;transition:left .25s cubic-bezier(.65,0,.35,1),width .25s cubic-bezier(.65,0,.35,1)}

/* ---- modal ---- */
.d-modaloverlay{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:300;opacity:0;pointer-events:none;transition:opacity .2s}
.d-modaloverlay.is-open{opacity:1;pointer-events:auto}
.d-modalbox{width:320px;background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:22px;transform:scale(.9) translateY(10px);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.d-modaloverlay.is-open .d-modalbox{transform:scale(1) translateY(0)}

/* ---- tooltip ---- */
.d-tipwrap{position:relative;display:inline-block}
.d-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--surface-3);border:1px solid var(--border);padding:6px 10px;border-radius:7px;font-size:11.5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.d-tipwrap:hover .d-tip{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- testimonial carousel ---- */
.d-testiwrap{width:100%;max-width:420px;position:relative;height:150px;overflow:hidden}
.d-testi{position:absolute;inset:0;padding:18px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;justify-content:center;gap:8px;opacity:0;transform:translateX(30px)}
.d-testi.is-active{opacity:1;transform:translateX(0);transition:opacity .4s,transform .4s}
.d-testi q{font-size:13.5px;color:var(--ink);font-style:normal;line-height:1.5}
.d-testi small{color:var(--muted-2);font-size:11.5px}

/* ---- apple cards carousel ---- */
.d-applecar{display:flex;gap:12px;overflow-x:auto;width:100%;max-width:480px;scroll-snap-type:x mandatory;padding-bottom:6px}
.d-applecard{flex:0 0 170px;height:210px;border-radius:18px;scroll-snap-align:start;background:linear-gradient(165deg,#232535,#121216);border:1px solid var(--border);display:flex;flex-direction:column;justify-content:flex-end;padding:14px;color:#fff;font-weight:700;font-size:13.5px}

@media (max-width:860px){
  .d-bento{grid-template-columns:repeat(2,1fr)}
  .d-bento__cell.c1{grid-column:span 2}
}