/* Demo-only: all three studies share the existing Hero and never modify its layout. */
html.prism-variants-demo .prism-variant-layer{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden;clip-path:inset(16% 0 12% 49%)}
html.prism-variants-demo .prism-variant-layer.prism-c{clip-path:none}
html.prism-variants-demo .experience{z-index:30;background:transparent}
html.prism-variants-demo header .identity img{mix-blend-mode:normal!important;background:transparent!important}
html.prism-variants-demo .prism-demo-switch{position:fixed;right:22px;bottom:20px;z-index:50;display:flex;gap:7px;align-items:center;padding:8px;border:1px solid rgba(53,69,72,.17);border-radius:999px;background:rgba(255,255,252,.82);box-shadow:0 10px 28px rgba(35,47,49,.10);backdrop-filter:blur(16px);font:600 11px/1 system-ui,sans-serif;letter-spacing:.08em}
html.prism-variants-demo .prism-demo-switch span{margin:0 5px 0 2px;color:#556568}
html.prism-variants-demo .prism-demo-switch a{padding:8px 10px;border-radius:999px;color:#344447;text-decoration:none}
html.prism-variants-demo .prism-demo-switch a[aria-current="true"]{background:#344447;color:#fff}
/* A: an actual optical lens-flare construction: core, oblique beam,
   chromatic fringe and a faint glass ring — never a page-wide gradient. */
.prism-a .a-optic{position:absolute;inset:0;animation:prism-optic-drift 17s ease-in-out infinite alternate}
.prism-a .a-ray,.prism-a .a-spectrum{position:absolute;right:-21%;top:9%;width:115%;height:48%;transform:rotate(-34deg);transform-origin:100% 50%;clip-path:polygon(0 40%,0 60%,100% 54%,100% 46%)}
.prism-a .a-ray{background:linear-gradient(90deg,transparent 2%,rgba(255,248,221,.10) 29%,rgba(255,253,239,.66) 63%,rgba(255,255,255,.20) 84%,transparent 100%);filter:blur(13px)}
.prism-a .a-spectrum{top:10%;background:linear-gradient(90deg,transparent 11%,rgba(134,211,229,.16) 37%,rgba(246,213,120,.43) 59%,rgba(237,166,181,.28) 70%,rgba(185,169,223,.16) 82%,transparent 99%);filter:blur(8px);transform:translateY(13px) rotate(-34.4deg)}
.prism-a .a-core{position:absolute;right:10%;top:36%;width:14vw;height:14vw;min-width:104px;min-height:104px;max-width:176px;max-height:176px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.94) 0 3%,rgba(255,247,207,.62) 9%,rgba(246,207,141,.22) 30%,transparent 68%);filter:blur(4px)}
.prism-a .a-ring{position:absolute;right:7.4%;top:31%;width:21vw;height:15vw;min-width:166px;min-height:118px;max-width:272px;max-height:192px;border:2px solid rgba(240,210,139,.17);border-radius:50%;transform:rotate(-34deg)}
.prism-a .a-ring:after{content:'';position:absolute;inset:13px;border:3px solid rgba(181,217,233,.08);border-radius:50%}
@keyframes prism-optic-drift{from{transform:translate3d(-9px,6px,0) scale(.985);opacity:.80}to{transform:translate3d(11px,-8px,0) scale(1.025);opacity:1}}
@keyframes prism-drift-a{from{transform:translate3d(-1.2%,.5%,0) rotate(-22deg) scale(1)}to{transform:translate3d(2.2%,-1.4%,0) rotate(-20.5deg) scale(1.035)}}
@keyframes prism-drift-b{from{transform:translate3d(-1%,.5%,0) rotate(-23deg)}to{transform:translate3d(2.4%,-1%,0) rotate(-21.8deg)}}
@keyframes prism-breathe{from{transform:scale(.92);opacity:.15}to{transform:scale(1.08);opacity:.28}}
/* B: SVG optical caustics, softly distorted by animated turbulence. */
.prism-b svg{width:100%;height:100%;display:block;overflow:hidden;clip-path:inset(18% 0 12% 53%)}
.prism-b .b-wash{opacity:.28}.prism-b .b-spectrum{opacity:.58}.prism-b .b-gleam{opacity:.44}
/* C: shader canvas. It is the only WebGL version and receives a CSS fallback. */
.prism-c canvas{width:100%;height:100%;display:block;opacity:.82}
.prism-c .photographic-prism{position:absolute;left:50%;right:auto;top:clamp(-250px,-25vh,-160px);width:max(1080px,88vw);height:auto;opacity:.54;transform-origin:96% 7%;transform:translateX(-35%) rotate(-5deg);filter:saturate(.82) contrast(.94);-webkit-mask-image:radial-gradient(ellipse 73% 67% at 70% 43%,#000 0 43%,rgba(0,0,0,.94) 54%,rgba(0,0,0,.56) 68%,rgba(0,0,0,.16) 80%,transparent 92%);mask-image:radial-gradient(ellipse 73% 67% at 70% 43%,#000 0 43%,rgba(0,0,0,.94) 54%,rgba(0,0,0,.56) 68%,rgba(0,0,0,.16) 80%,transparent 92%)}
@media (min-width:701px) and (max-width:1100px){.prism-c .photographic-prism{width:clamp(980px,125vw,1320px);transform:translateX(-35%) rotate(-5deg)}}
@media (max-width:700px){html.prism-variants-demo .prism-variant-layer.prism-c{display:none}}

.prism-c .c-fallback{position:absolute;right:-3%;top:7%;width:67%;height:62%;filter:blur(16px);opacity:.72;background:radial-gradient(ellipse at 72% 34%,rgba(255,248,211,.42),transparent 30%),radial-gradient(ellipse at 54% 59%,rgba(238,172,179,.21),transparent 18%),radial-gradient(ellipse at 59% 57%,rgba(244,204,140,.22),transparent 18%),radial-gradient(ellipse at 65% 55%,rgba(181,218,193,.18),transparent 19%),radial-gradient(ellipse at 70% 52%,rgba(166,205,232,.19),transparent 20%),radial-gradient(ellipse at 75% 50%,rgba(196,178,224,.14),transparent 18%);animation:prism-drift-c 17s ease-in-out infinite alternate}
@keyframes prism-drift-c{from{transform:translate3d(-1.2%,1%,0) scale(.98)}to{transform:translate3d(2.4%,-1.4%,0) scale(1.04)}}
@media (prefers-reduced-motion:reduce){html.prism-variants-demo .prism-variant-layer *{animation:none!important}html.prism-variants-demo .prism-demo-switch{display:none}}
@media(max-width:700px){html.prism-variants-demo .prism-demo-switch{right:12px;bottom:12px;transform:scale(.86);transform-origin:bottom right}}