/* ═══════════════════════════════════════════════════════════════════════════ AUTH SKY (§AUTHSKY) — the home hero's background behind the auth family --------------------------------------------------------------------------- Markup: resources/views/livewire/public/auth/partials/auth-sky.blade.php, included as the first child of the page section on /login, /register, /forgot-password, /reset-password/{token} (section.ait-auth) and /verify-email (section.aitve). Route-gated in layouts/auth.blade.php. Split out of auth-suite.css on 2026-09-23 so /verify-email, which has its own kit (verify-email.css) and never loads auth-suite, could carry the same sky. Everything here is scoped to `.ait-sky` — its tokens live on the element itself — so it works under any section that includes the partial. It is the home hero (homepage.css .hpx-b-hero), piece for piece: the page colour, the two breathing glows of .hpx-stack-glow at the same geometry, the two currentColor star fields and the brand's four-point sparkle. Plus falling stars, which the home hero does not have. NO orbit ring (removed on request). A saturated-blue sky was tried first and rejected as off-theme — the brand is a light site with blue accents, never a blue page. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Anchor ───────────────────────────────────────────────────────────── */ /* The auth layout drops each section inside `.page-content > .container.py-4 > .row > .col-12`, and every one of those is position:static — so making .page-content the positioned ancestor lets the sky (position:absolute; inset:0) cover it edge to edge at every viewport, container padding included, with no 100vw trick (which overflows by a scrollbar width on Windows). `isolation:isolate` gives the sky's z-index:-1 a floor: above .page-content's own background, below every in-flow child, so the content needs no z-index of its own. */ .page-content:has(.ait-sky){ position:relative; isolation:isolate; } /* Engines without :has() anchor the sky to the section instead — container width rather than full bleed, but still a complete backdrop. */ @supports not selector(:has(*)){ .ait-auth, .aitve{ position:relative; isolation:isolate; } } /* Dark mode paints the CONTAINER itself (custom.ltr.css ~2344, `body:not(.admin-shell).theme-dark .page-wrapper > .page-content > .container` at (0,5,1)). As an in-flow block it would sit on top of the sky and hide it, so it is cleared here, one class more specific. */ body:not(.admin-shell).theme-dark .page-wrapper > .page-content:has(.ait-sky) > .container{ background:transparent; } /* ── 2. Tokens ───────────────────────────────────────────────────────────── */ /* The home hero's palette, read off .hpx on the live home page. Light here, dark in §5. On the sky element itself, so any host section gets them. */ .ait-sky{ --ait-sky-bg:#FFFFFF; /* --hpx-bg */ --ait-sky-glow:#EAF2FD; /* --hpx-brand-soft */ --ait-sky-glow-2:#E0F2FE; /* --hpx-t-violet-bg */ --ait-sky-star:rgba(54,128,237,.62); --ait-sky-star-2:rgba(1,150,253,.5); --ait-sky-spark:var(--aits-blue,#3680ED); /* --hpx-brand */ --ait-sky-spark-2:#0369A1; /* --hpx-t-violet-ink */ --ait-comet-tail:rgba(54,128,237,.45); /* falling stars: a brand-blue streak… */ --ait-comet-head:var(--aits-blue,#3680ED); /* …with a lit head */ --ait-comet-glow:rgba(54,128,237,.45); /* The house sparkle — four points with CONCAVE sides, the same path the home hero masks (homepage.css §HERO-ORB-SPARK). Not a plus sign. */ --ait-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4c1.6 6.2 3.4 8 9.6 9.6C15.4 13.6 13.6 15.4 12 21.6 10.4 15.4 8.6 13.6 2.4 12 8.6 10.4 10.4 8.6 12 2.4z'/%3E%3C/svg%3E"); } /* ── 3. The sky ──────────────────────────────────────────────────────────── */ .ait-sky{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--ait-sky-bg); } /* The two breathing glows — .hpx-stack-glow and -glow-2 at the home hero's own geometry (centre 50/50 at 42% of the width, the second at 70/24 at 26%), same gradients, same 9s / 12s drift. */ .ait-sky__glow{ position:absolute; left:50%; top:50%; width:42%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,var(--ait-sky-glow) 0%,transparent 68%); transform:translate(-50%,-50%); animation:ait-glow-drift 9s ease-in-out infinite; } .ait-sky__glow--2{ left:70%; top:24%; width:26%; background:radial-gradient(circle,var(--ait-sky-glow-2) 0%,transparent 70%); opacity:.85; animation-duration:12s; animation-delay:-4s; } @keyframes ait-glow-drift{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50% { transform:translate(-50%,-50%) scale(1.08); } } /* Falling stars — not on the home hero; asked for on the auth pages. Each is a tapered streak whose bright end leads: rotate() aims its own x-axis down the sky and translateX() carries it along that axis, so one keyframe set serves every angle. Visible for the first ~9% of its cycle and dark for the rest; six periods and phases put one in the air every couple of seconds without two ever falling in step. Paths are plotted through open sky at desktop width (right margin, top band, left margin, the band under the card) and pass BEHIND the card and copy wherever they cross them. */ .ait-sky__comet{ position:absolute; left:var(--x); top:var(--y); width:var(--len,140px); height:2px; border-radius:999px; background:linear-gradient(90deg,transparent 0%,var(--ait-comet-tail) 72%,var(--ait-comet-head) 100%); transform-origin:100% 50%; opacity:0; animation:ait-comet var(--dur,12s) cubic-bezier(.4,0,.7,1) var(--dl,0s) infinite; } /* The lit head. Physical `right`, not inset-inline-end: the streak's gradient is physical too, so in RTL the head must stay on the same end. */ .ait-sky__comet::after{ content:""; position:absolute; top:50%; right:-2px; width:5px; height:5px; border-radius:50%; background:var(--ait-comet-head); transform:translateY(-50%); box-shadow:0 0 10px 3px var(--ait-comet-glow); } @keyframes ait-comet{ 0% { opacity:0; transform:rotate(var(--ang,140deg)) translateX(0) scaleX(.3); } 1.5% { opacity:1; } 9% { opacity:0; transform:rotate(var(--ang,140deg)) translateX(var(--dist,420px)) scaleX(1); } 100% { opacity:0; transform:rotate(var(--ang,140deg)) translateX(var(--dist,420px)) scaleX(1); } } .ait-sky__comet--1{ --x:88.6%; --y:2.2%; --len:170px; --ang:142deg; --dist:500px; --dur:12s; --dl:.6s; } .ait-sky__comet--2{ --x:23.9%; --y:3.3%; --len:110px; --ang:134deg; --dist:380px; --dur:12.5s; --dl:2.8s; } .ait-sky__comet--3{ --x:60%; --y:1.1%; --len:120px; --ang:138deg; --dist:420px; --dur:13s; --dl:5s; } .ait-sky__comet--4{ --x:92.4%; --y:42%; --len:140px; --ang:144deg; --dist:420px; --dur:13.5s; --dl:7.2s; } .ait-sky__comet--5{ --x:12.2%; --y:46.4%; --len:100px; --ang:136deg; --dist:360px; --dur:14s; --dl:9.4s; } .ait-sky__comet--6{ --x:62.1%; --y:87.3%; --len:130px; --ang:140deg; --dist:380px; --dur:14.5s; --dl:11.6s; } /* The star fields — the home hero's two fields, coordinate for coordinate (homepage.css §HERO-ORB-STARS): ~140 stars from two DOM nodes. Every star is a currentColor dot, so the theme sets the colour: brand-tinted specks on the white page, true white only at night. */ .ait-sky__stars{ position:absolute; inset:0; color:var(--ait-sky-star); background-repeat:no-repeat; background-image:radial-gradient(2.1px 2.1px at 5.9% 4.1%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 10.7% 10.9%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 19.7% 3.3%, currentColor, transparent 100%), radial-gradient(6.8px 6.8px at 19.7% 3.3%, currentColor, transparent 70%), radial-gradient(1.8px 1.8px at 27.4% 5.1%, currentColor, transparent 100%), radial-gradient(8.1px 8.1px at 27.4% 5.1%, currentColor, transparent 70%), radial-gradient(1.4px 1.4px at 32.1% 6.6%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 36.5% 9.0%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 46.9% 4.0%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 65.5% 2.6%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 73.6% 9.7%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 9.5% 19.3%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 33.0% 25.0%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 36.7% 23.4%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 54.4% 23.6%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 58.1% 23.3%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 65.1% 16.1%, currentColor, transparent 100%), radial-gradient(2.1px 2.1px at 73.6% 26.6%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 79.2% 21.1%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 89.4% 20.4%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 94.7% 23.9%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 6.3% 30.1%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 11.0% 37.6%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 15.1% 32.9%, currentColor, transparent 100%), radial-gradient(1.9px 1.9px at 38.6% 34.3%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 63.4% 40.0%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 65.9% 35.0%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 77.5% 39.1%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 81.6% 38.0%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 89.4% 35.0%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 98.5% 39.7%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 13.1% 48.4%, currentColor, transparent 100%), radial-gradient(5.4px 5.4px at 13.1% 48.4%, currentColor, transparent 70%), radial-gradient(1.9px 1.9px at 17.7% 54.4%, currentColor, transparent 100%), radial-gradient(8.5px 8.5px at 17.7% 54.4%, currentColor, transparent 70%), radial-gradient(1.9px 1.9px at 33.7% 46.7%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 39.6% 54.9%, currentColor, transparent 100%), radial-gradient(6.8px 6.8px at 39.6% 54.9%, currentColor, transparent 70%), radial-gradient(1.5px 1.5px at 48.2% 48.6%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 55.8% 46.0%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 59.4% 52.7%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 66.9% 47.6%, currentColor, transparent 100%), radial-gradient(2.1px 2.1px at 72.6% 54.0%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 79.3% 55.3%, currentColor, transparent 100%), radial-gradient(2.1px 2.1px at 89.2% 55.0%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 4.3% 68.3%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 11.7% 63.3%, currentColor, transparent 100%), radial-gradient(2.0px 2.0px at 17.1% 61.6%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 34.0% 67.4%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 41.8% 69.7%, currentColor, transparent 100%), radial-gradient(8.1px 8.1px at 41.8% 69.7%, currentColor, transparent 70%), radial-gradient(1.8px 1.8px at 44.8% 63.4%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 52.0% 68.6%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 73.6% 62.9%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 82.4% 69.4%, currentColor, transparent 100%), radial-gradient(8.1px 8.1px at 82.4% 69.4%, currentColor, transparent 70%), radial-gradient(1.2px 1.2px at 89.0% 58.7%, currentColor, transparent 100%), radial-gradient(5.4px 5.4px at 89.0% 58.7%, currentColor, transparent 70%), radial-gradient(1.7px 1.7px at 97.4% 66.9%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 12.4% 75.4%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 19.4% 78.0%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 27.6% 76.0%, currentColor, transparent 100%), radial-gradient(5.0px 5.0px at 27.6% 76.0%, currentColor, transparent 70%), radial-gradient(1.7px 1.7px at 29.3% 75.3%, currentColor, transparent 100%), radial-gradient(2.0px 2.0px at 42.1% 77.0%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 51.8% 76.0%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 59.3% 76.4%, currentColor, transparent 100%), radial-gradient(2.0px 2.0px at 66.6% 82.1%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 77.0% 75.7%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 84.9% 82.1%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 95.6% 78.0%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 11.2% 95.6%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 20.6% 94.7%, currentColor, transparent 100%), radial-gradient(2.1px 2.1px at 27.7% 95.1%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 34.4% 93.1%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 40.4% 91.3%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 44.5% 89.6%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 55.8% 97.0%, currentColor, transparent 100%), radial-gradient(5.4px 5.4px at 55.8% 97.0%, currentColor, transparent 70%), radial-gradient(1.7px 1.7px at 61.1% 87.9%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 66.1% 95.9%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 72.6% 91.7%, currentColor, transparent 100%), radial-gradient(6.8px 6.8px at 72.6% 91.7%, currentColor, transparent 70%), radial-gradient(1.8px 1.8px at 91.4% 91.7%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 96.1% 93.1%, currentColor, transparent 100%); opacity:.85; animation:ait-star-twinkle 6.5s ease-in-out infinite; } .ait-sky__stars--far{ inset:-3% -2%; color:var(--ait-sky-star-2); background-image:radial-gradient(1.7px 1.7px at 6.9% 14.7%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 14.3% 11.5%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 22.2% 12.2%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 27.3% 2.8%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 62.4% 10.7%, currentColor, transparent 100%), radial-gradient(0.9px 0.9px at 87.3% 3.3%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 94.8% 10.5%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 5.4% 29.2%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 12.0% 18.5%, currentColor, transparent 100%), radial-gradient(1.0px 1.0px at 17.3% 18.2%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 32.2% 18.5%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 39.8% 25.8%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 56.0% 31.2%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 64.4% 28.7%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 68.6% 24.8%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 78.2% 19.7%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 84.2% 31.5%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 94.1% 25.3%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 2.2% 37.0%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 15.0% 47.3%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 23.3% 46.0%, currentColor, transparent 100%), radial-gradient(0.9px 0.9px at 25.7% 48.7%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 44.2% 44.5%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 53.8% 48.3%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 62.8% 47.7%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 79.3% 35.5%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 85.4% 38.7%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 93.1% 42.3%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 2.9% 58.8%, currentColor, transparent 100%), radial-gradient(1.0px 1.0px at 9.5% 60.8%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 19.5% 52.8%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 28.5% 63.3%, currentColor, transparent 100%), radial-gradient(1.0px 1.0px at 43.2% 57.7%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 78.3% 57.0%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 96.3% 63.5%, currentColor, transparent 100%), radial-gradient(1.0px 1.0px at 13.6% 81.0%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 23.7% 77.7%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 27.0% 71.7%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 46.1% 68.3%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 57.3% 72.5%, currentColor, transparent 100%), radial-gradient(1.0px 1.0px at 69.6% 76.3%, currentColor, transparent 100%), radial-gradient(0.9px 0.9px at 78.0% 78.7%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 87.7% 77.5%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 12.2% 90.5%, currentColor, transparent 100%), radial-gradient(1.0px 1.0px at 23.6% 87.7%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 31.4% 91.2%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 38.7% 97.5%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 47.2% 87.8%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 51.3% 92.0%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 59.8% 91.0%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 68.3% 93.7%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 80.2% 96.2%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 90.3% 87.2%, currentColor, transparent 100%); opacity:.7; animation-duration:9s; animation-delay:-4.5s; } @keyframes ait-star-twinkle{ 0%,100%{ opacity:.38; } 50% { opacity:.92; } } /* The glints — .hpx-orbit-spark: the brand sparkle as a mask, resting at .55 and breathing on its own period and phase, so the field never pulses in unison. Five carry the second hue, as on the home page. */ .ait-sky__spark{ position:absolute; left:var(--x); top:var(--y); width:var(--sp,16px); aspect-ratio:1; background:currentColor; color:var(--ait-sky-spark); opacity:.55; transform:translate(-50%,-50%) rotate(var(--rot,0deg)); -webkit-mask:var(--ait-star) center/contain no-repeat; mask:var(--ait-star) center/contain no-repeat; animation:ait-spark var(--dur,7s) ease-in-out infinite var(--dl,0s); } @keyframes ait-spark{ 0%,100%{ opacity:.42; transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(.9); } 38% { opacity:.72; transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1.02); } 62% { opacity:1; transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1.12); } 80% { opacity:.66; transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1); } } /* Placed in the open sky — the side margins, the bands above and below the content, and the gutter between the columns — never behind the copy. */ .ait-sky__spark--1 { --x:6%; --y:14%; --sp:18px; --rot:8deg; --dl:-1.2s; --dur:7.4s; } .ait-sky__spark--2 { --x:12.5%; --y:30%; --sp:13px; --rot:-12deg; --dl:-3.1s; --dur:6.2s; } .ait-sky__spark--3 { --x:3.5%; --y:47%; --sp:22px; --rot:14deg; --dl:-5s; --dur:8.6s; color:var(--ait-sky-spark-2); } .ait-sky__spark--4 { --x:10.5%; --y:66%; --sp:14px; --rot:-6deg; --dl:-2.2s; --dur:5.8s; } .ait-sky__spark--5 { --x:5%; --y:86%; --sp:20px; --rot:20deg; --dl:-6.4s; --dur:9.2s; } .ait-sky__spark--6 { --x:94%; --y:12%; --sp:17px; --rot:-10deg; --dl:-4.1s; --dur:7.9s; } .ait-sky__spark--7 { --x:88%; --y:25%; --sp:24px; --rot:12deg; --dl:-.8s; --dur:9.6s; color:var(--ait-sky-spark-2); } .ait-sky__spark--8 { --x:96.5%; --y:44%; --sp:13px; --rot:4deg; --dl:-2.9s; --dur:6.1s; } .ait-sky__spark--9 { --x:90%; --y:63%; --sp:20px; --rot:-18deg; --dl:-5.6s; --dur:8.2s; } .ait-sky__spark--10{ --x:95%; --y:83%; --sp:15px; --rot:9deg; --dl:-1.9s; --dur:6.7s; color:var(--ait-sky-spark-2); } .ait-sky__spark--11{ --x:31%; --y:6.5%; --sp:14px; --rot:16deg; --dl:-3.6s; --dur:7.1s; } .ait-sky__spark--12{ --x:61%; --y:5%; --sp:18px; --rot:-8deg; --dl:-6.8s; --dur:8.8s; } .ait-sky__spark--13{ --x:78%; --y:8.5%; --sp:13px; --rot:22deg; --dl:-2.4s; --dur:5.9s; color:var(--ait-sky-spark-2); } .ait-sky__spark--14{ --x:25%; --y:94%; --sp:16px; --rot:-14deg; --dl:-4.4s; --dur:7.6s; } .ait-sky__spark--15{ --x:47%; --y:95.5%; --sp:13px; --rot:6deg; --dl:-.4s; --dur:6.4s; } .ait-sky__spark--16{ --x:71%; --y:93%; --sp:21px; --rot:18deg; --dl:-7.2s; --dur:9.1s; color:var(--ait-sky-spark-2); } .ait-sky__spark--17{ --x:53%; --y:17%; --sp:13px; --rot:10deg; --dl:-1.4s; --dur:6.8s; } .ait-sky__spark--18{ --x:52.5%; --y:82%; --sp:17px; --rot:-12deg; --dl:-5.2s; --dur:8.4s; } /* ── 4. Responsive ───────────────────────────────────────────────────────── */ /* Below 1400px the copy column reaches the left margin, where these four glints sit (at 1280 they touch the perk cards and the trust strip). */ @media (max-width:1399.98px){ .ait-sky__spark--2, .ait-sky__spark--3, .ait-sky__spark--4, .ait-sky__spark--5{ display:none; } } /* The gutter between the two auth columns is gone below 1200px. */ @media (max-width:1199.98px){ .ait-sky__spark--17, .ait-sky__spark--18{ display:none; } } /* One centred column: the big glow moves behind the headline, the small one behind the card; the top band now holds the headline, and the trust strip sits where the bottom band was, so those glints drop into the padding. */ @media (max-width:991.98px){ .ait-sky__glow{ left:50%; top:16%; width:92%; } .ait-sky__glow--2{ left:62%; top:48%; width:70%; } .ait-sky__spark--11, .ait-sky__spark--12, .ait-sky__spark--13{ display:none; } .ait-sky__spark--14{ --y:98.4%; } .ait-sky__spark--15{ --y:98.8%; } .ait-sky__spark--16{ --y:98.2%; } } @media (max-width:767.98px){ .ait-sky__spark--8, .ait-sky__spark--15{ display:none; } } @media (max-width:575.98px){ /* Phones: one tall column with ~22px margins, so positions tuned for a wide sky land on the copy. Six glints, re-seated in the side margins beside the card and in the band under the perks. */ .ait-sky__spark{ display:none; } .ait-sky__spark--1, .ait-sky__spark--3, .ait-sky__spark--6, .ait-sky__spark--7, .ait-sky__spark--14, .ait-sky__spark--16{ display:block; --sp:13px; } .ait-sky__spark--1 { --x:3%; --y:27%; } .ait-sky__spark--3 { --x:2.5%; --y:50%; } .ait-sky__spark--6 { --x:97%; --y:33%; } .ait-sky__spark--7 { --x:97.5%; --y:58%; --sp:15px; } .ait-sky__spark--14{ --x:18%; --y:98.6%; } .ait-sky__spark--16{ --x:82%; --y:98.4%; --sp:15px; } /* Three falling stars, shorter, down the side margins. */ .ait-sky__comet--2, .ait-sky__comet--3, .ait-sky__comet--6{ display:none; } .ait-sky__comet--1{ --x:70%; --y:1%; --len:90px; --dist:260px; } .ait-sky__comet--4{ --x:80%; --y:30%; --len:80px; --dist:220px; } .ait-sky__comet--5{ --x:8%; --y:52%; --len:70px; --dist:200px; } } /* ── 5. Dark ─────────────────────────────────────────────────────────────── */ /* The home hero at night (.hpx under body.theme-dark). */ body.theme-dark .ait-sky{ --ait-sky-bg:var(--dk-bg,#0E0E11); --ait-sky-glow:rgba(54,128,237,.16); --ait-sky-glow-2:rgba(14,165,233,.20); --ait-sky-star:rgba(255,255,255,.92); --ait-sky-star-2:rgba(160,200,255,.8); --ait-sky-spark:#DCEAFF; --ait-sky-spark-2:#C9B6FF; --ait-comet-tail:rgba(170,205,255,.65); --ait-comet-head:#FFFFFF; --ait-comet-glow:rgba(160,200,255,.85); } /* ── 6. Motion, forced colours, print ────────────────────────────────────── */ /* Every loop is switched off BY NAME: the auth kit also clamps animation-duration to .01ms under this query, which would otherwise spin these 100,000 times a second — a strobe. The sky stays, still. */ @media (prefers-reduced-motion:reduce){ .ait-sky__glow, .ait-sky__stars, .ait-sky__spark{ animation:none; } .ait-sky__stars{ opacity:.6; } .ait-sky__spark{ opacity:.7; } .ait-sky__comet{ display:none; } } /* System colours replace every fill; the sky would only be noise under them. */ @media (forced-colors:active){ .ait-sky{ display:none; } } @media print{ .ait-sky{ display:none; } }