/* FORGE modular presentation layer: all effects are composable */
.card{--lift:0px;--scale:1;--rotate:0deg;--gloss-opacity:.25;--outline-width:1px;--shine-speed:3s;--metal-grain:.12;--depth:16px;--card-pad:28px;--title-size:24px;--card-opacity:1;--effect-blur:0px;--fx-x:50%;--fx-y:50%;position:relative;isolation:isolate;opacity:var(--card-opacity);padding:var(--card-pad);transform:translateY(var(--lift)) scale(var(--scale)) rotate(var(--rotate));filter:blur(var(--effect-blur));transition:transform .35s ease,box-shadow .35s ease,filter .35s ease,border-color .35s ease;min-height:var(--card-height,260px);grid-column:span var(--span,1)}
.card h3{font-size:var(--title-size)}
.card .forge-surface,.card .forge-light,.card .forge-frame{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0}
.card .card-top,.card .card-content,.card .card-bottom{position:relative;z-index:2}
.card .forge-surface{opacity:var(--metal-grain);background:repeating-linear-gradient(117deg,#fff2 0 1px,transparent 1px 5px);mix-blend-mode:overlay}
.card .forge-light{opacity:var(--gloss-opacity);background:linear-gradient(125deg,#fff8,transparent 28%,#fff1 47%,transparent 68%)}
.card .forge-frame{border:var(--outline-width) solid color-mix(in srgb,var(--card-color) 45%,transparent);box-shadow:inset 0 1px #ffffff33,inset 0 -1px #0007}
.card[data-material="steel"]{background:linear-gradient(125deg,#5d6b6c,#273335 30%,#10191b 65%,#344346)}
.card[data-material="brass"]{background:linear-gradient(135deg,#6b5032,#282722 35%,#141d1c 70%,#745737)}
.card[data-material="copper"]{background:linear-gradient(130deg,#85543a,#2c2927 40%,#171e1d 75%,#744732)}
.card[data-material="carbon"]{background:repeating-linear-gradient(45deg,#273233 0 3px,#192122 3px 6px)}
.card[data-material="glass"]{background:linear-gradient(130deg,#a7d3d438,#223c3fd9 45%,#111c20e8)}
.card[data-material="ceramic"]{background:linear-gradient(135deg,#e1e7de,#9da9a4);color:#192524}.card[data-material="ceramic"] p,.card[data-material="ceramic"] .card-category{color:#34413e}
.card[data-material="blueprint"]{background:linear-gradient(90deg,#9bd2d21b 1px,transparent 1px),linear-gradient(#9bd2d21b 1px,transparent 1px),#172f39;background-size:24px 24px}
.card[data-material="obsidian"]{background:linear-gradient(125deg,#343d40,#080d0f 55%,#232c30)}
.card[data-material="titanium"]{background:linear-gradient(120deg,#73848b,#2d3a3e 35%,#1a2327 50%,#576a70 80%,#1a2327)}
.card[data-material="paper"]{background:#e6ddc8;color:#24231e}.card[data-material="paper"] p,.card[data-material="paper"] .card-category{color:#514e42}
.card[data-shape="cut"]{clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%)}
.card[data-shape="round"]{border-radius:32px}.card[data-shape="square"]{border-radius:2px}.card[data-shape="pill"]{border-radius:48px}
.card[data-typography="mono"] h3{font-family:ui-monospace,monospace;letter-spacing:-.04em}.card[data-typography="wide"] h3{text-transform:uppercase;letter-spacing:.1em;font-size:calc(var(--title-size) * .8)}.card[data-typography="serif"] h3{font-family:Georgia,serif;font-weight:400}
.card[data-interaction="lift"]:hover{--lift:-9px}.card[data-interaction="zoom"]:hover{--scale:1.035}.card[data-interaction="rotate"]:hover{--rotate:-1.5deg}.card[data-interaction="glow"]:hover{box-shadow:0 18px 50px #0008,0 0 30px color-mix(in srgb,var(--card-color) 24%,transparent)}
.card[data-interaction="spotlight"] .forge-light{opacity:.55;background:radial-gradient(circle at var(--fx-x) var(--fx-y),#fff6,transparent 43%)}
.card[data-interaction="shine"] .forge-light{background:linear-gradient(115deg,transparent 25%,#fff8 45%,transparent 60%);background-size:230% 100%;animation:forge-shine var(--shine-speed) linear infinite}
.card[data-interaction="scan"] .forge-light{background:linear-gradient(180deg,transparent 0%,#9de0df44 50%,transparent 100%);background-size:100% 250%;animation:forge-scan 3s linear infinite}
.card[data-interaction="magnetic"]{transform:translate(var(--mag-x,0px),var(--mag-y,0px)) translateY(var(--lift)) scale(var(--scale))}
.card[data-interaction="tilt3d"]{transform:perspective(900px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) translateY(var(--lift))}
.card[data-interaction="flip"]:hover .card-icon{transform:rotateY(180deg)}.card .card-icon{transition:transform .5s ease}
.card[data-interaction="reveal"] .card-content p{opacity:.3;transform:translateY(7px);transition:.3s}.card[data-interaction="reveal"]:hover .card-content p,.card[data-interaction="reveal"]:focus-visible .card-content p{opacity:1;transform:none}
.card[data-interaction="circuit"] .forge-frame{border-color:var(--card-color);box-shadow:0 0 0 1px var(--card-color),inset 0 0 16px color-mix(in srgb,var(--card-color) 12%,transparent)}
.card[data-interaction="dial"] .card-icon{border:2px dotted var(--card-color);border-radius:50%;padding:10px}.card[data-interaction="dial"]:hover .card-icon{transform:rotate(75deg)}
.card[data-interaction="pulse"]:hover .forge-frame{animation:forge-pulse 1s ease-in-out infinite alternate}
.card[data-interaction="underline"] .card-bottom{border-bottom:2px solid transparent;transition:border-color .25s}.card[data-interaction="underline"]:hover .card-bottom{border-color:var(--card-color)}
.card[data-interaction="expand"]:hover{--scale:1.02;z-index:3}
.card[data-interaction="mechanical"]:hover .card-arrow{transform:rotate(90deg);border-radius:3px}
.card[data-interaction="ripple"]:active .forge-light{background:radial-gradient(circle at var(--fx-x) var(--fx-y),#fff8,transparent 65%)}
.card[data-interaction="none"]{cursor:pointer}
.card[data-ornament="rivets"] .forge-frame{inset:9px;background:radial-gradient(circle at 5px 5px,#e4c89a 0 2px,#111 3px 4px,transparent 5px) top left/16px 16px no-repeat,radial-gradient(circle at 5px 5px,#e4c89a 0 2px,#111 3px 4px,transparent 5px) bottom right/16px 16px no-repeat}
.card[data-ornament="ticks"] .forge-frame{inset:8px;border-style:dashed}.card[data-ornament="corner"] .forge-frame{inset:10px;border-width:0;border-top:2px solid var(--card-color);border-left:2px solid var(--card-color);border-radius:0;clip-path:polygon(0 0,55px 0,55px 3px,3px 3px,3px 55px,0 55px)}
.card[data-ornament="rails"] .forge-frame{border-left:5px solid var(--card-color);border-right:5px solid var(--card-color)}
.card[data-ornament="bolts"] .forge-frame{inset:12px;border:1px dotted #fff6}
.card[data-ornament="grid"] .forge-surface{opacity:.35;background:linear-gradient(#fff2 1px,transparent 1px),linear-gradient(90deg,#fff2 1px,transparent 1px);background-size:18px 18px}
.card[data-ornament="stripes"] .forge-surface{opacity:.4;background:repeating-linear-gradient(135deg,transparent 0 9px,var(--card-color) 9px 11px,transparent 11px 20px)}
.card[data-ornament="gauges"] .forge-frame{inset:10px 10px auto auto;width:65px;height:65px;border:4px double var(--card-color);border-radius:50%}
.card[data-ornament="seam"] .forge-frame{inset:8px;border:1px solid #fff3}
.card[data-ornament="gloss"] .forge-light{opacity:.8}
.card[data-ornament="none"] .forge-frame{border:0;box-shadow:none}
.card[data-span="2"]{--span:2}.card[data-span="3"]{--span:3}
.card[data-interaction="accordion"] .card-content p{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .3s}.card[data-interaction="accordion"]:hover .card-content p,.card[data-interaction="accordion"]:focus-visible .card-content p{max-height:100px;opacity:1}
.card[data-interaction="typewriter"]:hover h3{text-decoration:underline;text-decoration-color:var(--card-color)}
.card[data-interaction="spotlight"],.card[data-interaction="tilt3d"],.card[data-interaction="magnetic"]{will-change:auto}
@keyframes forge-shine{to{background-position:-230% 0}}@keyframes forge-scan{to{background-position:0 -250%}}@keyframes forge-pulse{to{opacity:.45;box-shadow:0 0 20px var(--card-color)}}
@media(max-width:900px){.card[data-span="3"]{--span:2}}@media(max-width:640px){.card[data-span]{--span:1}.card{--card-height:230px!important}}
@media(prefers-reduced-motion:reduce){.card,.card *{animation:none!important;transition:none!important}.card:hover{transform:none!important}}
body[data-motion="off"] .card,body[data-motion="off"] .card *{animation:none!important;transition:none!important}