{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "holo-card",
  "type": "registry:ui",
  "title": "Holo Card",
  "description": "An interactive 3D holographic profile card with tilt effects, sparkle animations, and flip functionality.",
  "dependencies": [
    "react-parallax-tilt"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/holo-card.tsx",
      "content": "\"use client\";\n\nimport Image from \"next/image\";\nimport type React from \"react\";\nimport { useRef, useState, useCallback } from \"react\";\nimport Tilt from \"react-parallax-tilt\";\nimport { cn } from \"@/lib/utils\";\nimport \"./holo-card.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface HoloCardDisplayData {\n\t/** Primary name displayed on the card */\n\tname: string;\n\t/** Secondary text (e.g., personality phrase, tagline) */\n\tsubtitle?: string;\n\t/** Extended description shown on the back of the card */\n\tdescription?: string;\n\t/** Primary identifier (e.g., user number, ID) */\n\tprimaryId?: string | number;\n\t/** Secondary info (e.g., member since date) */\n\tsecondaryInfo?: string;\n\t/** Background image URL */\n\tbackgroundImage?: string;\n\t/** Badge/tag text (e.g., house name, role) */\n\tbadge?: string;\n\t/** Overlay color for the card */\n\toverlayColor?: string;\n\t/** Overlay opacity (0-100) */\n\toverlayOpacity?: number;\n}\n\nexport interface HoloCardBranding {\n\t/** Primary logo image URL */\n\tlogo?: string;\n\t/** Logo alt text */\n\tlogoAlt?: string;\n\t/** Icon shown in various places */\n\ticon?: string;\n\t/** Icon alt text */\n\ticonAlt?: string;\n}\n\nexport interface HoloCardProps {\n\t/** Card display data */\n\tdata: HoloCardDisplayData;\n\t/** Card dimensions */\n\theight?: number;\n\twidth?: number;\n\t/** Show sparkle animation effect */\n\tshowSparkles?: boolean;\n\t/** Force card to show front or back (disables flip) */\n\tforceSide?: \"front\" | \"back\";\n\t/** Custom branding (logos, icons) */\n\tbranding?: HoloCardBranding;\n\t/** Additional CSS classes */\n\tclassName?: string;\n\t/** Children rendered inside the card */\n\tchildren?: React.ReactNode;\n\t/** Callback when card is flipped */\n\tonFlip?: (isFlipped: boolean) => void;\n}\n\n// ============================================================================\n// Default Values\n// ============================================================================\n\nconst DEFAULT_BACKGROUND =\n\t\"https://i.pinimg.com/1200x/27/0a/74/270a74bdc412f9eeae4d2403ebc9bd63.jpg\";\n\nconst DEFAULT_BRANDING: HoloCardBranding = {\n\tlogo: \"/images/logos/text_w_logo_white.webp\",\n\tlogoAlt: \"Logo\",\n\ticon: \"/images/logos/experience_logo.svg\",\n\ticonAlt: \"Icon\",\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const HoloCard = ({\n\tdata,\n\theight = 446,\n\twidth = 320,\n\tshowSparkles = true,\n\tforceSide,\n\tbranding = DEFAULT_BRANDING,\n\tclassName,\n\tchildren,\n\tonFlip,\n}: HoloCardProps) => {\n\tconst [hover, setHover] = useState(false);\n\tconst [animated, setAnimated] = useState(true);\n\tconst [isFlipped, setIsFlipped] = useState(false);\n\tconst [activeBackgroundPosition, setActiveBackgroundPosition] = useState({\n\t\ttp: 0,\n\t\tlp: 0,\n\t});\n\tconst ref = useRef<HTMLDivElement>(null);\n\n\tconst {\n\t\tname,\n\t\tsubtitle,\n\t\tdescription,\n\t\tprimaryId,\n\t\tsecondaryInfo,\n\t\tbackgroundImage = DEFAULT_BACKGROUND,\n\t\tbadge,\n\t\toverlayColor,\n\t\toverlayOpacity = 40,\n\t} = data;\n\n\tconst handleCardClick = useCallback(() => {\n\t\tif (!forceSide) {\n\t\t\tconst newFlippedState = !isFlipped;\n\t\t\tsetIsFlipped(newFlippedState);\n\t\t\tonFlip?.(newFlippedState);\n\t\t}\n\t}, [forceSide, isFlipped, onFlip]);\n\n\tconst handleOnMouseMove = useCallback(\n\t\t(event: React.MouseEvent<HTMLDivElement>) => {\n\t\t\tsetAnimated(false);\n\t\t\tsetHover(true);\n\n\t\t\tconst card = ref.current;\n\t\t\tconst l = event.nativeEvent.offsetX;\n\t\t\tconst t = event.nativeEvent.offsetY;\n\n\t\t\tconst h = card ? card.clientHeight : 0;\n\t\t\tconst w = card ? card.clientWidth : 0;\n\n\t\t\tconst px = Math.abs(Math.floor((100 / w) * l) - 100);\n\t\t\tconst py = Math.abs(Math.floor((100 / h) * t) - 100);\n\n\t\t\tconst lp = 50 + (px - 50) / 1.5;\n\t\t\tconst tp = 50 + (py - 50) / 1.5;\n\n\t\t\tsetActiveBackgroundPosition({ lp, tp });\n\t\t},\n\t\t[],\n\t);\n\n\tconst handleOnTouchMove = useCallback(\n\t\t(event: React.TouchEvent<HTMLDivElement>) => {\n\t\t\tsetAnimated(false);\n\t\t\tsetHover(true);\n\n\t\t\tconst card = ref.current;\n\t\t\tif (!card) return;\n\n\t\t\tconst touch = event.touches[0];\n\t\t\tconst rect = card.getBoundingClientRect();\n\t\t\tconst l = touch.clientX - rect.left;\n\t\t\tconst t = touch.clientY - rect.top;\n\n\t\t\tconst h = card.clientHeight;\n\t\t\tconst w = card.clientWidth;\n\n\t\t\tconst px = Math.abs(Math.floor((100 / w) * l) - 100);\n\t\t\tconst py = Math.abs(Math.floor((100 / h) * t) - 100);\n\n\t\t\tconst lp = 50 + (px - 50) / 1.5;\n\t\t\tconst tp = 50 + (py - 50) / 1.5;\n\n\t\t\tsetActiveBackgroundPosition({ lp, tp });\n\t\t},\n\t\t[],\n\t);\n\n\tconst handleOnMouseOut = useCallback(() => {\n\t\tsetHover(false);\n\t\tsetAnimated(true);\n\t}, []);\n\n\tconst effectiveFlipped = forceSide ? forceSide === \"back\" : isFlipped;\n\n\t// Static mode styles for download/static rendering\n\tconst containerStyle = forceSide\n\t\t? {\n\t\t\t\tperspective: \"none\",\n\t\t\t\ttransform: \"none\",\n\t\t\t}\n\t\t: {\n\t\t\t\tperspective: \"1000px\",\n\t\t\t\tcursor: \"pointer\",\n\t\t\t};\n\n\tconst innerStyle = forceSide\n\t\t? {\n\t\t\t\ttransform: \"none\",\n\t\t\t\tposition: \"relative\" as const,\n\t\t\t\theight: `${height}px`,\n\t\t\t\twidth: `${width}px`,\n\t\t\t}\n\t\t: {\n\t\t\t\ttransformStyle: \"preserve-3d\" as const,\n\t\t\t\ttransform: effectiveFlipped ? \"rotateY(180deg)\" : \"rotateY(0deg)\",\n\t\t\t\theight: `${height}px`,\n\t\t\t\twidth: `${width}px`,\n\t\t\t};\n\n\tconst frontStyle = forceSide\n\t\t? {\n\t\t\t\tdisplay: forceSide === \"front\" ? \"block\" : \"none\",\n\t\t\t\tposition: \"absolute\" as const,\n\t\t\t\tinset: 0,\n\t\t\t}\n\t\t: {\n\t\t\t\tposition: \"absolute\" as const,\n\t\t\t\tinset: 0,\n\t\t\t\tbackfaceVisibility: \"hidden\" as const,\n\t\t\t\tWebkitBackfaceVisibility: \"hidden\" as const,\n\t\t\t};\n\n\tconst backStyle = forceSide\n\t\t? {\n\t\t\t\tdisplay: forceSide === \"back\" ? \"block\" : \"none\",\n\t\t\t\tposition: \"absolute\" as const,\n\t\t\t\tinset: 0,\n\t\t\t\ttransform: \"none\",\n\t\t\t}\n\t\t: {\n\t\t\t\tposition: \"absolute\" as const,\n\t\t\t\tinset: 0,\n\t\t\t\tbackfaceVisibility: \"hidden\" as const,\n\t\t\t\tWebkitBackfaceVisibility: \"hidden\" as const,\n\t\t\t\ttransform: \"rotateY(180deg)\",\n\t\t\t};\n\n\tconst holoCardClasses = cn(\n\t\t\"holo-card\",\n\t\thover && \"holo-card--active\",\n\t\tanimated && \"holo-card--animated\",\n\t\tshowSparkles && \"holo-card--sparkles\",\n\t);\n\n\tconst holoCardStyle = {\n\t\t\"--holo-width\": `${width}px`,\n\t\t\"--holo-height\": `${height}px`,\n\t\tbackgroundImage: `url(${backgroundImage})`,\n\t\tbackgroundPosition: hover\n\t\t\t? `${activeBackgroundPosition.lp}% ${activeBackgroundPosition.tp}%`\n\t\t\t: \"center\",\n\t} as React.CSSProperties;\n\n\t// Overlay component\n\tconst OverlayLayer = overlayColor ? (\n\t\t<div\n\t\t\tclassName=\"pointer-events-none absolute inset-0 z-[3]\"\n\t\t\tstyle={{\n\t\t\t\tbackground: overlayColor,\n\t\t\t\tmixBlendMode: \"overlay\",\n\t\t\t\topacity: overlayOpacity / 100,\n\t\t\t}}\n\t\t/>\n\t) : null;\n\n\t// Front card content\n\tconst FrontContent = (\n\t\t<div className=\"pointer-events-none absolute z-[2] flex h-full w-full flex-col items-start justify-end p-3 text-white transition\">\n\t\t\t{/* Top bar with logo and badge */}\n\t\t\t<div className=\"absolute top-4 left-0 flex w-full justify-between px-3\">\n\t\t\t\t{branding.logo && (\n\t\t\t\t\t<div className=\"rounded-full bg-white/30 p-1 px-2 font-serif text-xl font-light text-white/70 backdrop-blur-md\">\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsrc={branding.logo}\n\t\t\t\t\t\t\talt={branding.logoAlt || \"Logo\"}\n\t\t\t\t\t\t\twidth={100}\n\t\t\t\t\t\t\theight={30}\n\t\t\t\t\t\t\tclassName=\"object-contain\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{badge && (\n\t\t\t\t\t<div className=\"rounded-full bg-white/20 p-1 px-4 font-serif text-xl font-light text-white/70 backdrop-blur-md\">\n\t\t\t\t\t\t{badge}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{/* Background icon */}\n\t\t\t{branding.icon && (\n\t\t\t\t<Image\n\t\t\t\t\tsrc={branding.icon}\n\t\t\t\t\talt={branding.iconAlt || \"Icon\"}\n\t\t\t\t\tclassName=\"scale-125 opacity-10\"\n\t\t\t\t\tfill\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{/* Bottom info card */}\n\t\t\t<div className=\"relative flex w-full flex-col gap-1 overflow-hidden rounded-2xl bg-black/20 p-3 backdrop-blur-md\">\n\t\t\t\t<div className=\"font-serif text-4xl font-bold text-white\">{name}</div>\n\t\t\t\t{subtitle && (\n\t\t\t\t\t<div className=\"mb-10 font-light text-white italic\">{subtitle}</div>\n\t\t\t\t)}\n\n\t\t\t\t<div className=\"flex w-full items-center justify-between\">\n\t\t\t\t\t<div className=\"flex flex-col items-start gap-1\">\n\t\t\t\t\t\t{primaryId && (\n\t\t\t\t\t\t\t<span className=\"text-sm text-white/80\">User {primaryId}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{secondaryInfo && (\n\t\t\t\t\t\t\t<span className=\"text-xs text-white/50\">{secondaryInfo}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{branding.icon && (\n\t\t\t\t\t\t<div className=\"flex gap-2\">\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\tsrc={branding.icon}\n\t\t\t\t\t\t\t\talt={branding.iconAlt || \"Icon\"}\n\t\t\t\t\t\t\t\twidth={30}\n\t\t\t\t\t\t\t\theight={30}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n\n\t// Back card content\n\tconst BackContent = (\n\t\t<div className=\"pointer-events-none absolute z-[2] flex h-full w-full flex-col items-start justify-between p-3 text-white\">\n\t\t\t<div className=\"flex w-full flex-col gap-4\">\n\t\t\t\t{/* Top bar */}\n\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t{branding.logo && (\n\t\t\t\t\t\t<div className=\"rounded-full bg-white/30 p-1 px-2 backdrop-blur-md\">\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\tsrc={branding.logo}\n\t\t\t\t\t\t\t\talt={branding.logoAlt || \"Logo\"}\n\t\t\t\t\t\t\t\twidth={80}\n\t\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\t\tclassName=\"object-contain\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{badge && (\n\t\t\t\t\t\t<div className=\"rounded-full bg-white/20 p-1 px-3 font-serif text-xl font-light text-white/70 backdrop-blur-md\">\n\t\t\t\t\t\t\t{badge}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Bio section */}\n\t\t\t\t<div className=\"relative overflow-hidden rounded-2xl bg-black/20 p-4 backdrop-blur-md\">\n\t\t\t\t\t<div className=\"mb-2 font-serif text-2xl font-bold text-white\">\n\t\t\t\t\t\t{name}\n\t\t\t\t\t</div>\n\t\t\t\t\t{subtitle && (\n\t\t\t\t\t\t<div className=\"mb-4 text-sm font-light text-white/80 italic\">\n\t\t\t\t\t\t\t{subtitle}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{description && (\n\t\t\t\t\t\t<p className=\"text-sm text-white/80\">{description}</p>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{/* Bottom info */}\n\t\t\t<div className=\"flex w-full items-center justify-between rounded-xl bg-black/20 p-3 backdrop-blur-md\">\n\t\t\t\t<div className=\"flex flex-col gap-1\">\n\t\t\t\t\t<span className=\"text-xs text-white/50\">Member Since</span>\n\t\t\t\t\t<span className=\"text-sm font-medium text-white/80\">\n\t\t\t\t\t\t{secondaryInfo || \"—\"}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"flex flex-col items-end gap-1\">\n\t\t\t\t\t<span className=\"text-xs text-white/50\">User ID</span>\n\t\t\t\t\t<span className=\"text-sm font-medium text-white/80\">\n\t\t\t\t\t\t{primaryId || \"—\"}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n\n\t// Render card face (either static or with tilt)\n\tconst renderCardFace = (\n\t\tcontent: React.ReactNode,\n\t\tisStatic: boolean = false,\n\t) => {\n\t\tif (isStatic || forceSide) {\n\t\t\treturn (\n\t\t\t\t<div className=\"relative h-full w-full overflow-hidden rounded-2xl shadow-xl\">\n\t\t\t\t\t{OverlayLayer}\n\t\t\t\t\t{content}\n\t\t\t\t\t<div ref={ref} className={holoCardClasses} style={holoCardStyle}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<Tilt className=\"relative h-full w-full overflow-hidden rounded-2xl p-0! shadow-xl\">\n\t\t\t\t{OverlayLayer}\n\t\t\t\t{content}\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={holoCardClasses}\n\t\t\t\t\tstyle={holoCardStyle}\n\t\t\t\t\tonMouseMove={handleOnMouseMove}\n\t\t\t\t\tonTouchMove={handleOnTouchMove}\n\t\t\t\t\tonMouseOut={handleOnMouseOut}\n\t\t\t\t\tonBlur={handleOnMouseOut}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</Tilt>\n\t\t);\n\t};\n\n\tconst handleKeyDown = useCallback(\n\t\t(event: React.KeyboardEvent) => {\n\t\t\tif (event.key === \"Enter\" || event.key === \" \") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\thandleCardClick();\n\t\t\t}\n\t\t},\n\t\t[handleCardClick],\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(forceSide ? \"\" : \"perspective-1000\", className)}\n\t\t\tonClick={handleCardClick}\n\t\t\tonKeyDown={!forceSide ? handleKeyDown : undefined}\n\t\t\trole={!forceSide ? \"button\" : undefined}\n\t\t\ttabIndex={!forceSide ? 0 : undefined}\n\t\t\ttitle={\n\t\t\t\t!forceSide ? `Profile card for ${name}. Click to flip.` : undefined\n\t\t\t}\n\t\t\tstyle={containerStyle}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={\n\t\t\t\t\tforceSide ? \"relative\" : \"relative transition-transform duration-700\"\n\t\t\t\t}\n\t\t\t\tstyle={innerStyle}\n\t\t\t>\n\t\t\t\t{/* Front Side */}\n\t\t\t\t<div style={frontStyle}>\n\t\t\t\t\t{renderCardFace(FrontContent, !!forceSide)}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Back Side */}\n\t\t\t\t<div style={backStyle}>{renderCardFace(BackContent, !!forceSide)}</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default HoloCard;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/ui/holo-card.css",
      "content": "/* HoloCard Animations and Styles */\n\n@keyframes holoSparkle {\n\t0%,\n\t100% {\n\t\topacity: 0.75;\n\t\tfilter: brightness(1.2) contrast(1.25);\n\t}\n\t5%,\n\t8% {\n\t\topacity: 1;\n\t\tfilter: brightness(0.8) contrast(1.2);\n\t}\n\t13%,\n\t16% {\n\t\topacity: 0.5;\n\t\tfilter: brightness(1.2) contrast(0.8);\n\t}\n\t35%,\n\t38% {\n\t\topacity: 1;\n\t\tfilter: brightness(1) contrast(1);\n\t}\n\t55% {\n\t\topacity: 0.33;\n\t\tfilter: brightness(1.2) contrast(1.25);\n\t}\n}\n\n@keyframes holoGradient {\n\t0%,\n\t100% {\n\t\topacity: 0.5;\n\t\tbackground-position: 50% 50%;\n\t\tfilter: brightness(0.5) contrast(1);\n\t}\n\t5%,\n\t9% {\n\t\tbackground-position: 100% 100%;\n\t\topacity: 1;\n\t\tfilter: brightness(0.75) contrast(1.25);\n\t}\n\t13%,\n\t17% {\n\t\tbackground-position: 0% 0%;\n\t\topacity: 0.88;\n\t}\n\t35%,\n\t39% {\n\t\tbackground-position: 100% 100%;\n\t\topacity: 1;\n\t\tfilter: brightness(0.5) contrast(1);\n\t}\n\t55% {\n\t\tbackground-position: 0% 0%;\n\t\topacity: 1;\n\t\tfilter: brightness(0.75) contrast(1.25);\n\t}\n}\n\n.holo-card {\n\t--holo-width: 320px;\n\t--holo-height: 446px;\n\n\twidth: var(--holo-width);\n\theight: var(--holo-height);\n\tbackground-color: #211799;\n\tbackground-size: cover;\n\tbackground-repeat: no-repeat;\n\tbackground-position: center;\n\tborder-radius: 5% / 3.5%;\n\tbox-shadow:\n\t\t-3px -3px 3px 0 rgba(38, 230, 247, 0.3),\n\t\t3px 3px 3px 0 rgba(247, 89, 228, 0.3),\n\t\t0 0 6px 2px rgba(255, 231, 89, 0.3),\n\t\t0 35px 25px -15px rgba(0, 0, 0, 0.3);\n\tposition: relative;\n\toverflow: hidden;\n\tdisplay: inline-block;\n\tvertical-align: middle;\n\ttransition: transform 0.3s ease;\n}\n\n/* Pseudo-elements for holographic effects */\n.holo-card::before,\n.holo-card::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tleft: 0;\n\tright: 0;\n\ttop: 0;\n\tbottom: 0;\n\tbackground-position: 0% 0%;\n\tbackground-repeat: no-repeat;\n\tbackground-size: 300% 300%;\n\tmix-blend-mode: color-dodge;\n\topacity: 0.2;\n\tz-index: 1;\n\tbackground-image: linear-gradient(\n\t\t115deg,\n\t\ttransparent 0%,\n\t\t#54a29e 25%,\n\t\ttransparent 47%,\n\t\ttransparent 53%,\n\t\t#a79d66 75%,\n\t\ttransparent 100%\n\t);\n}\n\n/* Sparkles effect */\n.holo-card--sparkles::after {\n\tbackground-image:\n\t\turl(\"https://assets.codepen.io/13471/sparkles.gif\"),\n\t\tlinear-gradient(\n\t\t\t125deg,\n\t\t\trgba(255, 0, 132, 0.31) 15%,\n\t\t\trgba(252, 164, 0, 0.25) 30%,\n\t\t\trgba(255, 255, 0, 0.19) 40%,\n\t\t\trgba(0, 255, 138, 0.13) 60%,\n\t\t\trgba(0, 207, 255, 0.25) 70%,\n\t\t\trgba(204, 76, 250, 0.31) 85%\n\t\t);\n\tbackground-position: center;\n\tbackground-size: 180%;\n\tmix-blend-mode: color-dodge;\n\topacity: 1;\n\tz-index: 1;\n}\n\n/* Active/hover state */\n.holo-card--active::before {\n\topacity: 1;\n\tanimation: none;\n\ttransition: none;\n\tbackground-image: linear-gradient(\n\t\t110deg,\n\t\ttransparent 25%,\n\t\t#54a29e 48%,\n\t\t#a79d66 52%,\n\t\ttransparent 75%\n\t);\n}\n\n/* Animated state (default) */\n.holo-card--animated {\n\ttransition: transform 1s ease;\n}\n\n.holo-card--animated::before {\n\ttransition: all 1s ease;\n\tanimation: holoGradient 12s ease infinite;\n}\n\n.holo-card--animated::after {\n\ttransition: all 1s ease;\n\tanimation: holoSparkle 12s ease infinite;\n}\n\n/* Card flip container */\n.holo-card-container {\n\tperspective: 1000px;\n\tcursor: pointer;\n}\n\n.holo-card-container--static {\n\tperspective: none;\n\tcursor: default;\n}\n\n.holo-card-inner {\n\tposition: relative;\n\ttransition: transform 0.7s ease;\n\ttransform-style: preserve-3d;\n}\n\n.holo-card-inner--flipped {\n\ttransform: rotateY(180deg);\n}\n\n.holo-card-face {\n\tposition: absolute;\n\tinset: 0;\n\tbackface-visibility: hidden;\n\t-webkit-backface-visibility: hidden;\n}\n\n.holo-card-face--back {\n\ttransform: rotateY(180deg);\n}\n\n/* Light mode adjustments */\n:root[data-theme=\"light\"] .holo-card,\n.light .holo-card {\n\tbox-shadow:\n\t\t-3px -3px 3px 0 rgba(38, 230, 247, 0.2),\n\t\t3px 3px 3px 0 rgba(247, 89, 228, 0.2),\n\t\t0 0 6px 2px rgba(255, 231, 89, 0.2),\n\t\t0 35px 25px -15px rgba(0, 0, 0, 0.15);\n}\n",
      "type": "registry:ui"
    }
  ]
}