.bond-card-wrapper{--pointer-x: 50%;--pointer-y: 50%;--pointer-from-center: 0;--pointer-from-top: .5;--pointer-from-left: .5;--card-opacity: 0;--rotate-x: 0deg;--rotate-y: 0deg;--background-x: 50%;--background-y: 50%;--card-radius: 32px;--sunpillar-1: hsl(25, 100%, 50%);--sunpillar-2: hsl(35, 100%, 55%);--sunpillar-3: hsl(45, 100%, 60%);--sunpillar-4: hsl(30, 100%, 50%);--sunpillar-5: hsl(20, 100%, 45%);--sunpillar-6: hsl(15, 100%, 40%);perspective:800px;transform:translateZ(.1px);position:relative;touch-action:none;width:100%;max-width:760px}.bond-behind{position:absolute;top:-40px;right:-40px;bottom:-40px;left:-40px;z-index:0;pointer-events:none;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(249,115,22,.6) 0%,transparent 60%);filter:blur(80px) saturate(1.2);opacity:calc(.7 * var(--card-opacity));transition:opacity .3s ease}.bond-card-wrapper:hover,.bond-card-wrapper.active{--card-opacity: 1}.bond-card{height:640px;display:grid;aspect-ratio:.75;border-radius:var(--card-radius);position:relative;box-shadow:#00000080 calc((var(--pointer-from-left) * 12px) - 4px) calc((var(--pointer-from-top) * 24px) - 8px) 30px -8px,0 0 0 1px #ffffff1a;transition:transform 1s ease;transform:translateZ(0) rotateX(0) rotateY(0);background:linear-gradient(145deg,#141414f2,#0a0a0afa);backface-visibility:hidden;overflow:hidden}.bond-card:hover,.bond-card.active{transition:none;transform:translateZ(0) rotateX(var(--rotate-y)) rotateY(var(--rotate-x))}.bond-card-shell.entering .bond-card{transition:transform .18s ease-out}.bond-card-shell{position:relative;z-index:1}.bond-card *{border-radius:var(--card-radius);pointer-events:none}.bond-inside{top:0;right:0;bottom:0;left:0;position:absolute;display:grid;grid-template-areas:"stack";background:linear-gradient(145deg,#f9731626,#000000e6)}.bond-inside>*{grid-area:stack}.bond-shine{position:absolute;top:0;right:0;bottom:0;left:0;transition:filter .8s ease;filter:brightness(.5) contrast(1.2) saturate(.4) opacity(.4);animation:bond-holo-bg 18s linear infinite;mix-blend-mode:color-dodge;z-index:3;background-image:repeating-linear-gradient(0deg,var(--sunpillar-1) 5%,var(--sunpillar-2) 10%,var(--sunpillar-3) 15%,var(--sunpillar-4) 20%,var(--sunpillar-5) 25%,var(--sunpillar-6) 30%,var(--sunpillar-1) 35%),repeating-linear-gradient(-45deg,#1a1a1a,#e66f19 3.8%,#f49d25,#e66f19 5.2%,#1a1a1a 10%,#1a1a1a 12%),radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,0%,.1) 12%,hsla(0,0%,0%,.15) 20%,hsla(0,0%,0%,.25) 120%);background-position:0 var(--background-y),var(--background-x) var(--background-y),center;background-blend-mode:color,hard-light;background-size:500% 500%,300% 300%,200% 200%}.bond-card:hover .bond-shine,.bond-card.active .bond-shine{filter:brightness(.7) contrast(1.4) saturate(.6);animation-play-state:paused}.bond-glare{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateZ(1.1px);overflow:hidden;background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(25,100%,70%,.3) 12%,hsla(25,60%,20%,.5) 90%);mix-blend-mode:overlay;filter:brightness(.9) contrast(1.1);z-index:4}.bond-content{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;z-index:2;overflow:hidden}.bond-bg-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:.3;mix-blend-mode:overlay;filter:grayscale(.5);transform:scale(1.1) translate(calc((var(--pointer-from-left) - .5) * -10px),calc((var(--pointer-from-top) - .5) * -10px));transition:transform .2s ease-out}.bond-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0000004d,#0000001a 40%,#000000b3)}.bond-info{position:absolute;top:0;right:0;bottom:0;left:0;padding:40px;display:flex;flex-direction:column;justify-content:space-between;z-index:5;transform:translate3d(calc((var(--pointer-from-left) - .5) * -8px),calc((var(--pointer-from-top) - .5) * -8px),0)}.bond-badge{align-self:flex-start;background:#f97316e6;color:#000;font-size:14px;font-weight:800;letter-spacing:.15em;padding:12px 24px;border-radius:50px;text-transform:uppercase}.bond-yield{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}.yield-value{font-size:100px;font-weight:900;color:#f97316;line-height:1;text-shadow:0 0 60px rgba(249,115,22,.5)}.yield-label{font-size:18px;font-weight:700;letter-spacing:.3em;color:#fff9;text-transform:uppercase;margin-top:12px}.bond-details{display:flex;justify-content:space-between;gap:32px;background:#0006;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:24px 32px}.detail-item{display:flex;flex-direction:column;gap:8px}.detail-label{font-size:14px;font-weight:600;letter-spacing:.1em;color:#ffffff80;text-transform:uppercase}.detail-value{font-size:24px;font-weight:800;color:#fff}@keyframes bond-holo-bg{0%{background-position:0 var(--background-y),0 0,center}to{background-position:0 var(--background-y),90% 90%,center}}@media(max-width:768px){.bond-card-wrapper{max-width:320px}.bond-card{height:400px}.yield-value{font-size:56px}.bond-info{padding:20px}}@media(max-width:480px){.bond-card-wrapper{max-width:280px}.bond-card{height:350px}.yield-value{font-size:48px}.bond-badge{font-size:9px;padding:6px 12px}.bond-details{padding:12px 16px}.detail-value{font-size:14px}}