/* A cinematic effects layer scoped to the separate homepage concept. */
html body{background:#0a1020}
body header{background:rgba(8,12,26,.8);backdrop-filter:blur(24px);border-color:#a3c9ff18}
body header:after{content:"";position:absolute;bottom:-1px;left:18%;right:18%;height:1px;background:linear-gradient(90deg,transparent,#95c1ff70,transparent);pointer-events:none}
body .hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 82% 38%,#284a7a65,transparent 58%),linear-gradient(125deg,#0c1625 5%,#111c3b 60%,#0a1020);padding-top:55px;padding-bottom:40px}
.hero>.wrap{position:relative;z-index:2}
#magic-sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.82}
.aurora{position:absolute;pointer-events:none;filter:blur(65px);z-index:0;will-change:transform}
.aurora-one{width:65%;height:46%;left:30%;top:-20%;background:linear-gradient(100deg,transparent,#2563eb66,#6599e377,transparent);transform:rotate(-24deg);animation:aurora-drift 18s ease-in-out infinite alternate}
.aurora-two{width:43%;height:50%;right:-18%;bottom:10%;background:radial-gradient(ellipse,#619bed55,transparent 68%);animation:aurora-drift 24s ease-in-out infinite alternate-reverse}
.portal-orbit{position:absolute;z-index:0;width:770px;height:770px;border:1px solid #c0daff18;border-radius:50%;left:calc(70% - 385px);top:-95px;transform:rotate(-26deg) scaleY(.73);box-shadow:0 0 70px #639ef108,inset 0 0 50px #639ef10a;pointer-events:none}
.portal-orbit:before{content:"";position:absolute;inset:13px;border-radius:50%;border:1px solid #82b6ff0d}
.portal-orbit:after{content:"";position:absolute;width:7px;height:7px;background:#deecff;border-radius:50%;left:50%;top:-4px;box-shadow:0 0 14px 4px #a5c9fc66,0 0 35px 8px #639ef144;transform-origin:0 389px;animation:orbit 45s linear infinite}
.orbit-two{width:940px;height:940px;left:calc(70% - 470px);top:-180px;transform:rotate(22deg) scaleY(.75);opacity:.45}
.orbit-two:after{transform-origin:0 473px;animation-duration:65s;animation-direction:reverse}
body .hero h1{font-weight:550;letter-spacing:-.055em;line-height:1.04;text-shadow:0 3px 35px #07112080}
body .hero h1>span{color:#c3dcff;background:linear-gradient(115deg,#e3efff 5%,#aacdff 45%,#90b6ec 80%,#d4e6ff);background-size:200% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:title-light 12s ease-in-out infinite alternate}
.hero h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.065em;font-size:1.16em;line-height:1.08}
body .hero-copy>.eyebrow{font-size:10px;color:#c4d5ed;letter-spacing:.2em}
.hero-copy .spark{filter:drop-shadow(0 0 9px #f4dba577);animation:star-breathe 5s ease-in-out infinite}
body .hero-copy>p{color:#bdc9df;font-size:14px}
body .hero-bottom{border-color:#93abcc26}
body .frame{border-radius:15px;border-color:#afc8ec65;background:#152336;box-shadow:0 0 0 5px #87b0e908,0 0 0 6px #9ac4ff10,0 22px 75px -18px #000b,0 0 60px -20px #639ef159;transition:box-shadow .5s,border-color .5s}
.comparison-shell{position:relative}
.comparison-shell:before{content:"";position:absolute;inset:-12% -9% 3%;background:radial-gradient(ellipse,#639ef12d,transparent 68%);filter:blur(26px);z-index:-1;pointer-events:none}
body .comparison{aspect-ratio:1.55}
body .comparison-caption{background:linear-gradient(100deg,#1d2840,#151d32);padding:16px 18px;border-top:1px solid #c7defe18}
body .image-tag{backdrop-filter:blur(12px);background:#0a10208c;border:1px solid #ffffff25;letter-spacing:.12em;padding:8px 11px;border-radius:5px}
body .image-tag.staged{background:#101728bd;color:#f5e3bc;border-color:#f0d7a75c}
body .divider{width:1px;transform:translateX(-50%);background:#f1e1c0a8;box-shadow:0 0 7px #a7c9ef40;z-index:2}
body .handle{left:var(--split);z-index:2;pointer-events:none;width:46px;height:46px;background:none;border:0;border-radius:0;box-shadow:none;color:#f2d68f66;font-size:0;filter:drop-shadow(0 0 5px #ffe4a3c0) drop-shadow(0 0 13px #f2d68f80) drop-shadow(0 0 21px #f2d68f38);backdrop-filter:none;transition:color .35s,filter .35s}
body .handle svg{display:block;width:100%;height:100%}
body .handle svg path[stroke]{stroke-opacity:.5}
body .handle::after{content:none}
.comparison:hover .handle,.collection-comparison:hover .handle,.comparison:focus-within .handle,.collection-comparison:focus-within .handle{color:#ffe7aa80;filter:drop-shadow(0 0 6px #ffe4a3d9) drop-shadow(0 0 16px #f2d68f99) drop-shadow(0 0 24px #f2d68f45)}
.cast-magic{position:absolute;z-index:5;bottom:18px;left:18px;display:flex;align-items:center;gap:10px;min-height:43px;padding:9px 15px;border:1px solid #f3e0b46e;border-radius:7px;color:#ffedc8;background:linear-gradient(120deg,#172436ee,#283c57df);backdrop-filter:blur(15px);box-shadow:0 3px 22px #0005,inset 0 1px 0 #ffffff18;font-size:11px;font-weight:500;transition:background .2s,box-shadow .2s}
.cast-magic:hover{background:#314560;box-shadow:0 0 25px #e8c87528,inset 0 1px 0 #ffffff28}
.cast-icon{font-size:20px;color:#f4d99b}
.comparison.casting:after{content:"";position:absolute;z-index:2;top:0;bottom:0;left:calc(var(--split) - 27px);width:54px;background:linear-gradient(90deg,transparent,#ffe6ab1a,#fff8df60,#c7deff1f,transparent);pointer-events:none;filter:blur(5px)}
.frame:has(.casting){border-color:#e0d5bd90;box-shadow:0 0 0 5px #a5c9fc0b,0 0 0 6px #cedef52b,0 24px 70px -10px #0009,0 0 80px -15px #7dacef77}
.casting .cast-icon{animation:orbit 3s linear infinite}
body .example-tabs{margin-top:20px;gap:10px}
body .example-tab{padding:6px 12px 6px 6px;border-radius:7px;background:#121b3080;border:1px solid #8093ba17;min-height:43px}
body .example-tab[aria-pressed=true]{border-color:#a5c9fb70;background:linear-gradient(120deg,#344f7488,#31405588);box-shadow:inset 0 1px 0 #ffffff0c,0 3px 18px #0002}
body .btn{position:relative;overflow:hidden;border-radius:8px;transition:transform .25s,box-shadow .25s,background .25s}
body .btn-primary{background:linear-gradient(115deg,#2563eb,#548edf 75%,#669be5);border:1px solid #abceff55;box-shadow:inset 0 1px 0 #ffffff40,0 5px 20px #2563eb22,0 2px 5px #0003}
.btn-primary:before,.btn-red:before{content:"";position:absolute;inset:-60% auto -60% -60%;width:30%;background:linear-gradient(90deg,transparent,#ffffff24,transparent);transform:skewX(-22deg);animation:button-sheen 8s ease-in-out infinite;pointer-events:none}
body .btn-primary:hover{box-shadow:inset 0 1px 0 #ffffff55,0 0 27px #639ef15c,0 6px 25px #2563eb33;transform:translateY(-2px)}
.effects-toggle{display:flex;align-items:center;gap:6px;border:1px solid #7989b633;background:#1c28414d;padding:7px 10px;border-radius:20px;color:#b5c4d9;font-size:9px;min-height:32px}
.effects-toggle>span:first-child{color:#e8c875;font-size:14px}.effects-toggle[aria-pressed=false]>span:first-child{color:#8190ac}.effects-toggle:hover{border-color:#9dbbe680}
body .nav-actions{gap:18px}body .nav-links{gap:23px}
body .possibilities{background:radial-gradient(ellipse at 10% 80%,#27406429,transparent 65%),#080e1d;border-color:#b4d3ff13}
body .gallery-image{border-radius:12px;border:1px solid #abceff32;box-shadow:0 15px 32px -16px #000b;transition:border-color .4s,box-shadow .4s}
.gallery-image:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#fff5d018 48%,transparent 62%);transform:translateX(-120%);transition:transform .9s;pointer-events:none}
.gallery-card:hover .gallery-image:after{transform:translateX(120%)}
.gallery-card:hover .gallery-image{border-color:#b5cdef88;box-shadow:0 20px 45px -15px #000b,0 0 30px -15px #639ef155}
body .gallery-title{font-size:18px;font-weight:500}
body .section h2{font-weight:500;letter-spacing:-.04em}body .section .eyebrow{font-size:10px;letter-spacing:.17em}
body .step-number{position:relative;font-family:Georgia,serif;font-size:27px;font-style:italic;color:#b7ceed;border-color:#a5c9fc2a}
.step-number:after{content:"";position:absolute;bottom:-1px;left:0;height:1px;width:65%;background:linear-gradient(90deg,#b6cdec,transparent)}
.step-number span{font-family:Inter,sans-serif;font-size:19px;color:#e0c386}
body .video-frame{border-color:#a1bbdf4a;box-shadow:0 15px 45px -15px #0008;border-radius:14px}
body .pricing{background:radial-gradient(ellipse at 75% 40%,#3c588030,transparent 60%),#0d162b;border-color:#a5c9fc21}
body .plan{overflow:hidden;background:linear-gradient(145deg,#1d294180,#11192cc9);border-color:#a5c9fc35;box-shadow:inset 0 1px 0 #ffffff0a;border-radius:13px;transition:transform .3s,border-color .3s,box-shadow .3s}
.plan:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(380px circle at var(--light-x,50%) var(--light-y,0%),#8bbafb1f,transparent 70%)}
.plan:hover:before{opacity:1}.plan:hover{transform:translateY(-5px);border-color:#9bc1f675}
body .plan.featured{border-color:#8bb2e88c;background:linear-gradient(140deg,#3048699c,#18243f 65%);box-shadow:inset 0 1px 0 #d0e4ff33,0 0 45px -25px #87b9ff99}
body .plan-badge{background:#6c8fc029;border:1px solid #bbd7ff25;color:#d6e7ff}.plan .price{color:#f2f7ff}.plan .btn{z-index:1}
body .closing{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 110%,#6493d559,transparent 60%),linear-gradient(130deg,#182543,#202f43);border-color:#95b5e348;box-shadow:inset 0 1px 0 #ffffff12,0 30px 60px -40px #000}
.closing:before,.closing:after{content:"";position:absolute;width:600px;height:600px;top:35px;left:calc(50% - 300px);border:1px solid #b7d5ff1a;border-radius:50%;z-index:-1;pointer-events:none}
.closing:after{width:720px;height:720px;top:-20px;left:calc(50% - 360px);border-color:#b7d5ff10}
body .sticky-trial{background:linear-gradient(100deg,#111b29f5,#17213af5,#151e2bf5);border-color:#9ab2d347;box-shadow:0 -8px 35px #0002}
.sticky-trial:before{content:"";position:absolute;top:-1px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,#a4caff88,#c5a4a066,transparent);pointer-events:none}
body .btn-red{background:linear-gradient(115deg,#d93243,#c02b3b);border-color:#ffb0b052;box-shadow:inset 0 1px 0 #ffffff35,0 0 20px #ef44441a}
body .btn-red:hover{box-shadow:inset 0 1px 0 #ffffff45,0 0 25px #ef444440}
.reveal-ready{opacity:0;translate:0 26px;filter:blur(3px);transition:opacity 1s ease,translate 1s cubic-bezier(.16,1,.3,1),filter .9s ease;transition-delay:var(--arrival-delay,0ms)}
.reveal-ready.is-visible{opacity:1;translate:0 0;filter:none}
/* Restrained dimensional response; pointer movement never changes layout. */
body .depth-surface{position:relative;transform:perspective(1100px) rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg));transition:transform .45s ease,box-shadow .35s,border-color .35s}
body .depth-surface.depth-active{transition:transform .16s ease-out,box-shadow .35s,border-color .35s}
.depth-surface:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;background:radial-gradient(ellipse at var(--depth-light-x,50%) var(--depth-light-y,30%),#e6f2ff16,transparent 65%);opacity:0;transition:opacity .4s}
.depth-surface.depth-active:after{opacity:1}
body.effects-off .depth-surface{transform:none}
body.effects-off .depth-surface:after{opacity:0}
@media(hover:none),(pointer:coarse){body .depth-surface{transform:none}.depth-surface:after{display:none}}
@keyframes aurora-drift{from{transform:translate3d(-5%,0,0) rotate(-24deg)}to{transform:translate3d(9%,18%,0) rotate(-12deg)}}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes title-light{from{background-position:0% center}to{background-position:100% center}}
@keyframes star-breathe{0%,100%{opacity:.65;transform:scale(.93)}50%{opacity:1;transform:scale(1.06)}}
@keyframes button-sheen{0%,65%{left:-60%}85%,100%{left:140%}}
body.effects-off *,body.effects-off *:before,body.effects-off *:after{animation-play-state:paused!important}
body.effects-off .reveal-ready{opacity:1;translate:none;filter:none;transition:none}
@media(max-width:1100px){body .nav-links{gap:16px}.effects-label{display:none}.effects-toggle{padding:6px 9px}body .nav-actions{gap:14px}body .hero h1{font-size:46px}}
@media(max-width:800px){body .hero{padding-top:40px}.portal-orbit{top:200px;left:calc(50% - 385px)}.orbit-two{top:130px;left:calc(50% - 470px)}body .hero h1{font-size:53px}.aurora-one{width:100%;left:10%;height:30%;top:-10%}body .comparison{aspect-ratio:1.5}body .example-tabs{gap:7px}.effects-label{display:inline}}
@media(max-width:560px){body .hero{padding-top:35px}body .hero h1{font-size:44px;max-width:360px}body .hero h1 em{font-size:1.12em}body .hero-copy>p{font-size:13px}body .comparison{aspect-ratio:1.25}.cast-magic{bottom:13px;left:13px;font-size:10px;min-height:40px;padding:8px 12px}.cast-icon{font-size:17px}body .example-tab{padding:7px 3px;min-height:40px}body .example-tabs{margin-top:16px;gap:5px}body .comparison-caption{padding:13px 12px}.hero-copy>.eyebrow{font-size:9px!important}.aurora{filter:blur(40px)}.portal-orbit{opacity:.55}body .gallery-title{font-size:18px}.effects-toggle{padding:8px 10px}.effects-label{font-size:9px}body .plan-badge{font-size:8px}}
@media(prefers-reduced-motion:reduce){body:not(.effects-enabled) *,body:not(.effects-enabled) *:before,body:not(.effects-enabled) *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-ready{opacity:1;transform:none}}
