/* fx.css — effects layer for the restyle prototypes. Our own implementation of the effect vocabulary
   observed on getlayers.ai (analysed 2026-09-24): orbiting border light, glass buttons, shader stages,
   gradient titles, lift-on-hover cards. Values are tuned by eye, not copied. */

/* ---------- gradient title ---------- (width:fit-content → add margin-inline:auto yourself when the heading is centred) */
.gt{ background-image:linear-gradient(100deg, #fbfaff 0%, #f2f1f6 22%, #9c9aa8 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; display:block; width:fit-content; padding-bottom:.14em; margin-bottom:-.14em }
.gt em{ -webkit-text-fill-color:transparent }
@media (forced-colors:active){ .gt{ color:CanvasText; -webkit-text-fill-color:CanvasText; background:none } }

/* ---------- orbit ring: 1.5px ring (content-box punched out) holding two light blobs ---------- */
.orbit{ position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; overflow:hidden; opacity:var(--lit,1);
  -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) }
.orbit i{ position:absolute; left:0; top:0; width:var(--blob,150px); height:var(--blob,150px); border-radius:50%; will-change:transform;
  background:radial-gradient(circle, #fff 0 4%, rgb(232 234 239 / .72) 15%, rgb(232 234 239 / .2) 33%, transparent 58%) }
.orbit.warm i{ background:radial-gradient(circle, #ffd2bd 0 4%, rgb(255 170 135 / .75) 15%, rgb(255 170 135 / .22) 33%, transparent 58%) }

/* ---------- glass buttons ---------- */
.gbtn{ --h:0; position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:.8rem; border-radius:999px; padding:.8rem 1.5rem; font:400 15px/1 var(--display); letter-spacing:-.01em; color:var(--fg); white-space:nowrap; cursor:pointer;
  background:rgb(255 255 255 / calc(.06 + var(--h) * .07));
  box-shadow:inset 0 1px 1px rgb(255 255 255 / .17), inset 0 calc(-14px - var(--h) * 8px) calc(26px + var(--h) * 26px) -16px var(--gbtn-under, rgb(255 255 255 / .16)), inset 16px 0 30px -20px var(--gbtn-side, transparent) }
.gbtn::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:calc(.55 + var(--h) * .45);
  background:linear-gradient(140deg, rgb(255 255 255 / .66) 0%, rgb(255 255 255 / .07) 38%, transparent 60%, rgb(255 255 255 / .36) 100%);
  -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) }
.gbtn.warm{ --gbtn-under:rgb(255 165 130 / .45); --gbtn-side:rgb(94 128 240 / .4) }
.gbtn.icon{ padding:.42rem .45rem .42rem 1.4rem }
.gbtn .ic{ width:2rem; height:2rem; flex:none; border-radius:50%; display:grid; place-items:center; color:#0a0a12;
  background:linear-gradient(#fff, #e6e7ee 55%, #c9ccd6); box-shadow:inset 0 1px #fff, inset 0 -1px rgb(0 0 0 / .08), 0 4px 14px -8px rgb(255 255 255 / .35) }
.gbtn .ic svg{ width:.95rem; height:.95rem; transform:rotate(calc(var(--h) * 90deg)) scale(calc(1 + var(--h) * .08)) }
.gbtn.ghost{ background:rgb(255 255 255 / calc(.03 + var(--h) * .05)); box-shadow:inset 0 1px 1px rgb(255 255 255 / .08) }
.gbtn.ghost::before{ opacity:calc(.35 + var(--h) * .5) }
.gbtn.sm{ padding:.55rem 1.05rem; font-size:14px }

/* ---------- shader stage ---------- */
.stage{ position:relative; isolation:isolate; overflow:hidden; border-radius:24px; border:1px solid rgb(255 255 255 / .08); background:#0a0b0e }
.stage > canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; border-radius:inherit; opacity:0; transition:opacity 1.2s ease }
.stage > canvas.on{ opacity:1 }
.stage::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; background:radial-gradient(60% 68% at 50% 50%, rgb(6 6 8 / .8) 0%, rgb(6 6 8 / .45) 48%, transparent 80%) }
.stage::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; opacity:.7; mix-blend-mode:overlay; background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") }
.stage > .stage-in{ position:relative; z-index:3 }

/* ---------- lift cards: --lift springs 0→1 on hover ---------- */
.lift{ --lift:0; position:relative }
.lift .arrow{ display:inline-flex; overflow:hidden; flex:none; width:calc(var(--lift) * 1.2rem); opacity:var(--lift); color:var(--fg) }
.lift .arrow svg{ flex:none; width:.85rem; height:.85rem }
.lift .fadein{ opacity:var(--lift) }

@media (prefers-reduced-motion:reduce){ .orbit{ display:none } }
.gbtn .ic.arrow svg{ transform:translate(calc(var(--h) * 2px), calc(var(--h) * -2px)) }