/* Fun layer (fun-look branch): hero art, scroll reveal, hover delights, examples gallery. Loaded after lux.css by tools/fun_build.py. All motion off under prefers-reduced-motion. */
.hero2 .h2-pic{position:relative;isolation:isolate}
.hero2 .h2-pic{padding:clamp(18px,3vw,36px)!important;margin:0!important;background:transparent!important;overflow:visible!important;min-height:0!important}.hero2 .h2-pic>img{position:relative!important;z-index:1;height:auto!important;aspect-ratio:auto!important;object-fit:fill!important;border-radius:22px!important;box-shadow:0 30px 60px -36px rgba(20,20,43,.5)!important}.fun-art{position:absolute;inset:0;z-index:0;pointer-events:none;width:100%;height:100%;overflow:visible}
.fun-art .o1{transform-origin:50% 50%;animation:fun-spin 38s linear infinite}
.fun-art .o2{animation:fun-float 7s ease-in-out infinite}
.fun-art .o3{animation:fun-float 9s ease-in-out -3s infinite}
.hero2 h1 .fun-mark{background:linear-gradient(transparent 62%,rgba(255,122,26,.35) 62%);background-size:0 100%;background-repeat:no-repeat;animation:fun-mark 1.1s .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes fun-mark{to{background-size:100% 100%}}
@keyframes fun-spin{to{transform:rotate(360deg)}}
@keyframes fun-float{50%{transform:translateY(-12px)}}
/* scroll reveal: only hidden when JS has added .fun-js */
.fun-js .fun-rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.fun-js .fun-rv.is-in{opacity:1;transform:none}
/* hover micro-animations */
.btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(20,20,43,.55)}
.btn:active{transform:translateY(0) scale(.98)}
.v2-tiles li,.tz,.how-steps li{transition:transform .25s ease,box-shadow .25s ease}
.v2-tiles li:hover,.tz:hover,.how-steps li:hover{transform:translateY(-4px);box-shadow:0 18px 36px -22px rgba(20,20,43,.45)}
.v2-tiles li img{transition:transform .6s ease}
.v2-tiles li:hover img{transform:scale(1.05)}
.v2-link{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s}
.v2-link:hover{background-size:100% 1px}
:focus-visible{outline:3px solid #C2410C!important;outline-offset:3px!important;border-radius:6px}
/* examples gallery */
.fun-gal{padding-block:72px}
.fun-gal .eyebrow{margin-bottom:8px}
.fun-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;list-style:none;margin:28px 0 0;padding:0}
.fun-row li{margin:0}
.fun-row a{display:block;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.fun-row a:hover,.fun-row a:focus-visible{transform:translateY(-6px) rotate(-1deg);box-shadow:0 24px 40px -24px rgba(20,20,43,.5)}
.fun-row li:nth-child(even) a:hover{transform:translateY(-6px) rotate(1deg)}
.fun-row img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.fun-row span{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-weight:600;font-size:15px}
.fun-row span i{font-style:normal;color:#C2410C;transition:transform .25s}
.fun-row a:hover span i{transform:translateX(4px)}
@media (max-width:900px){.fun-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}.fun-row li{scroll-snap-align:start}}
/* small delight: progress line */
.fun-bar{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#D8B77A,#FF7A1A);z-index:200;pointer-events:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.fun-js .fun-rv{opacity:1;transform:none}.hero2 h1 .fun-mark{background-size:100% 100%}.fun-bar{display:none}}
/* align proof section + gallery with the shared .wrap side padding */
.wrap.v2-proof,.wrap.fun-gal{padding-left:24px;padding-right:24px}