/* Finish layer (11 Nov 2026): crisp interaction on top of the locked brand (charcoal + copper, lowercase jenelt). CSS only, no SVG, no zoom buttons. */
.fx{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1),background .2s,color .2s,box-shadow .3s}
.fx.live{transition:transform .08s linear,background .2s,color .2s,box-shadow .3s}
.fx::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(340px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.14),transparent 70%);opacity:0;transition:opacity .45s ease}
.fx.glow::after{opacity:1}
.gt.fx::after,.pt.fx::after,.wt.fx::after,.way.fx::after{background:radial-gradient(340px circle at var(--gx,50%) var(--gy,50%),rgba(229,143,102,.22),transparent 70%)}
.fx:hover{box-shadow:0 22px 40px -24px rgba(0,0,0,.65)}
/* shine sweep on the main buttons */
.btn.go,.chip.go,.links a.go,.qb.go,.t6{position:relative;overflow:hidden}
.btn.go::before,.chip.go::before,.links a.go::before,.qb.go::before,.t6::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);transform:translateX(-130%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.btn.go:hover::before,.chip.go:hover::before,.links a.go:hover::before,.qb.go:hover::before,.t6:hover::before,.btn.go:focus-visible::before{transform:translateX(130%)}
/* signature: a copper light follows the pointer across the hero */
.hl{position:relative;overflow:hidden;isolation:isolate}
.hl::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--hx,30%) var(--hy,40%),rgba(181,83,44,.30),transparent 65%);transition:background-position .2s}
@media (hover:none){.hl::before{animation:hlDrift 14s ease-in-out infinite alternate}}
@keyframes hlDrift{from{background-position:-8% -4%}to{background-position:8% 6%}}
/* picked example gets a copper edge that sweeps round once */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes jspin{to{--ang:360deg}}
.pk{position:relative}
.pk.on::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--ang),transparent 0 50%,#fff 78%,var(--accent-lt) 90%,transparent 98%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:jspin 3.6s linear infinite}
/* reading comfort: focus and tap feedback */
.way:active,.btn:active,.chip:active,.pk:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){.fx{transform:none!important}.fx::after{transition:none}.hl::before,.pk.on::before{animation:none}.btn.go::before,.chip.go::before,.links a.go::before,.qb.go::before,.t6::before{transition:none}}
@media (hover:none){.fx{transform:none}}

/* a tier that is not on sale yet: visible, greyed, cannot be picked */
.opt.soon,.opt.soon:hover,.opt.soon:focus-visible{background:#242120;opacity:.5;cursor:not-allowed;filter:grayscale(.6);transform:none;box-shadow:none}
.opt.soon i{font-style:normal;background:#34302d;color:#c9c2b8;border-radius:99px;padding:2px 9px}