/* ============================================================
Aurora Intro — reusable site-entry load animation
------------------------------------------------------------
A multi-layered aurora ribbon sweeps across the screen on
page load, reveals a pinned wordmark in the middle, then
wipes over it to uncover the page beneath.
USAGE
-----
1.
2. Drop as the FIRST element
inside . See aurora-intro.html for the full markup.
3. Change the wordmark text inside .aurora-intro__wordmark.
4. Customize colors via the CSS variables below (optional).
TIMING (total ~1.6s)
--------------------
0–500ms ribbon sweeps in from the left
500-950ms wordmark blur-fades in, centered
950–1600 ribbon wipes over wordmark and exits right, stage fades out
REDUCED MOTION
--------------
The component is hidden entirely for users with
prefers-reduced-motion enabled.
============================================================ */
.aurora-intro {
/* Override these to recolor the ribbon */
--aurora-c1: rgba(34, 229, 195, 0.95); /* teal */
--aurora-c2: rgba(61, 240, 155, 0.85); /* mint */
--aurora-c3: rgba(138, 91, 255, 0.90); /* violet */
--aurora-c4: rgba(212, 76, 255, 0.75); /* magenta */
--aurora-c5: rgba(61, 123, 255, 0.75); /* blue */
--aurora-bg: #050509;
--aurora-ink: #F4F3FF;
}
/* All of the streak styles below use the .aurora-streak class name for
backward compatibility. The .aurora-intro wrapper just scopes the
tunable variables above. */
/* ====== Aurora load streak ======
Organic ribbon of aurora light that sweeps across the screen on load,
holds in the middle while carrying a "Dancing Sky Studios" wordmark,
then wipes off to reveal the site. */
.aurora-streak {
position: fixed;
inset: 0;
z-index: 140;
pointer-events: none;
overflow: hidden;
background: #050509;
animation: streak-stage 1600ms cubic-bezier(0.7, 0, 0.2, 1) forwards;
isolation: isolate;
will-change: opacity, visibility;
}
.aurora-streak__ribbon {
position: absolute;
z-index: 2;
left: -60%;
top: 50%;
width: 220%;
height: 90vh;
transform: translate3d(-100%, -50%, 0) rotate(-8deg);
background:
radial-gradient(ellipse 55% 70% at 30% 50%, rgba(34, 229, 195, 0.95), transparent 65%),
radial-gradient(ellipse 45% 60% at 55% 45%, rgba(61, 240, 155, 0.85), transparent 65%),
radial-gradient(ellipse 55% 65% at 78% 55%, rgba(138, 91, 255, 0.90), transparent 65%),
linear-gradient(90deg, transparent 0%, rgba(34, 229, 195, 0.35) 15%, rgba(61, 240, 155, 0.55) 40%, rgba(138, 91, 255, 0.55) 70%, rgba(61, 123, 255, 0.35) 85%, transparent 100%);
filter: blur(28px) saturate(160%);
mix-blend-mode: screen;
animation: streak-flow 1600ms cubic-bezier(0.7, 0, 0.2, 1) forwards;
will-change: transform, opacity, filter;
}
.aurora-streak__ribbon--2 {
top: 42%;
height: 70vh;
transform: translate3d(-100%, -50%, 0) rotate(-4deg);
background:
radial-gradient(ellipse 60% 60% at 40% 50%, rgba(138, 91, 255, 0.85), transparent 65%),
radial-gradient(ellipse 55% 55% at 70% 50%, rgba(212, 76, 255, 0.75), transparent 65%),
linear-gradient(90deg, transparent 0%, rgba(138, 91, 255, 0.45) 30%, rgba(212, 76, 255, 0.50) 60%, transparent 100%);
filter: blur(36px) saturate(170%);
mix-blend-mode: screen;
animation: streak-flow 1600ms cubic-bezier(0.72, 0, 0.2, 1) 40ms forwards;
opacity: 0.85;
}
.aurora-streak__ribbon--3 {
top: 58%;
height: 60vh;
transform: translate3d(-100%, -50%, 0) rotate(-12deg);
background:
radial-gradient(ellipse 60% 60% at 35% 50%, rgba(61, 123, 255, 0.75), transparent 65%),
radial-gradient(ellipse 55% 55% at 72% 50%, rgba(34, 229, 195, 0.80), transparent 65%),
linear-gradient(90deg, transparent 0%, rgba(61, 123, 255, 0.40) 25%, rgba(34, 229, 195, 0.45) 65%, transparent 100%);
filter: blur(32px) saturate(160%);
mix-blend-mode: screen;
animation: streak-flow 1600ms cubic-bezier(0.68, 0, 0.18, 1) 80ms forwards;
opacity: 0.75;
}
/* ---- Wordmark carried by the ribbon ---- */
.aurora-streak__wordmark {
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
display: flex;
gap: clamp(0.4rem, 1.4vw, 1.1rem);
align-items: baseline;
white-space: nowrap;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2rem, 7vw, 5.5rem);
letter-spacing: -0.035em;
line-height: 1;
color: #F4F3FF;
text-shadow:
0 0 24px rgba(34, 229, 195, 0.55),
0 0 60px rgba(138, 91, 255, 0.45);
animation: streak-wordmark 1600ms cubic-bezier(0.7, 0, 0.2, 1) forwards;
will-change: opacity, filter;
pointer-events: none;
}
.aurora-streak__word {
display: inline-block;
opacity: 0;
transform: translate3d(0, 18%, 0);
filter: blur(8px);
animation: streak-word 520ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
will-change: opacity, transform, filter;
}
.aurora-streak__word:nth-child(1) { animation-delay: 240ms; }
.aurora-streak__word:nth-child(2) { animation-delay: 340ms; }
.aurora-streak__word:nth-child(3) { animation-delay: 440ms; }
@keyframes streak-word {
to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes streak-flow {
/* 0-500ms (0-18%): sweep in from the left */
0% { transform: translate3d(-100%, -50%, 0) rotate(-8deg) skewX(-4deg); opacity: 0; }
18% { transform: translate3d(-30%, -50%, 0) rotate(-6deg) skewX(-2deg); opacity: 1; }
/* 500-1900ms (18-68%): hold across the screen so the wordmark is readable */
32% { transform: translate3d(-5%, -50%, 0) rotate(-3deg) skewX(0deg); opacity: 1; }
55% { transform: translate3d(0%, -50%, 0) rotate(-2deg) skewX(0deg); opacity: 1; }
68% { transform: translate3d(6%, -50%, 0) rotate(-1deg) skewX(1deg); opacity: 1; }
/* 1900-2800ms (68-100%): wipe off to the right, carrying the wordmark out */
85% { transform: translate3d(50%, -50%, 0) rotate(1deg) skewX(4deg); opacity: 1; }
100% { transform: translate3d(130%, -50%, 0) rotate(3deg) skewX(7deg); opacity: 0; }
}
@keyframes streak-wordmark {
/* Wordmark is pinned dead-center. It fades in, holds, then fades out as
the aurora ribbon sweeps across and covers it. */
0%, 18% { transform: translate3d(-50%, -50%, 0) scale(0.96); opacity: 0; filter: blur(10px); }
32% { transform: translate3d(-50%, -50%, 0) scale(1); opacity: 1; filter: blur(0); }
60% { transform: translate3d(-50%, -50%, 0) scale(1); opacity: 1; filter: blur(0); }
78% { transform: translate3d(-50%, -50%, 0) scale(1); opacity: 0.7; filter: blur(2px); }
100% { transform: translate3d(-50%, -50%, 0) scale(1.01); opacity: 0; filter: blur(6px); }
}
@keyframes streak-stage {
/* Backdrop stays solid while ribbon is on-screen; only fades after wipe. */
0%, 68% { opacity: 1; visibility: visible; }
100% { opacity: 0; visibility: hidden; }
}
@media (max-width: 640px) {
.aurora-streak__wordmark {
font-size: clamp(1.6rem, 10vw, 2.8rem);
gap: 0.35rem;
}
}
@media (prefers-reduced-motion: reduce) {
.aurora-streak { display: none !important; }
}