html, body { margin:0; padding:0; background:#05100f; overflow:hidden; height:100%; }
a { color:#f4ead6; }
a:hover { color:#ffffff; }
input::placeholder { color:rgba(244,234,214,0.38); letter-spacing:0.18em; }
@keyframes drift { 0%{transform:scale(1.03) translate3d(0,0,0)} 50%{transform:scale(1.045) translate3d(-0.5%,-0.4%,0)} 100%{transform:scale(1.03) translate3d(0,0,0)} }
@keyframes swell { 0%{transform:scale(1.035) translate3d(0.3%,0.2%,0); opacity:0.22} 50%{transform:scale(1.03) translate3d(-0.25%,-0.15%,0); opacity:0.36} 100%{transform:scale(1.035) translate3d(0.3%,0.2%,0); opacity:0.22} }
@keyframes twinkle { 0%,100%{opacity:0; transform:scale(0.5)} 45%{opacity:0.95; transform:scale(1)} 60%{opacity:0.2; transform:scale(0.8)} }
@keyframes shimmer { 0%,100%{opacity:0.2} 50%{opacity:0.42} }
@keyframes duskbreathe { 0%,100%{opacity:0.35} 50%{opacity:0.7} }
@keyframes veilout { 0%{opacity:1} 100%{opacity:0; visibility:hidden} }
@keyframes fadein { 0%{opacity:0} 100%{opacity:1} }
@keyframes cipherrift {
0% { opacity: 0; transform: scale3d(0.9, 0.9, 1); }
15% { opacity: 1; transform: scale3d(0.98, 0.98, 1); }
80% { opacity: 1; transform: scale3d(1.02, 1.02, 1); }
100% { opacity: 0; transform: scale3d(4, 4, 1); }
}
@font-face { font-family:'Annalise'; src:url('assets/Annalise.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@keyframes rise { 0%{opacity:0; transform:translateY(14px); filter:blur(6px)} 100%{opacity:1; transform:translateY(0); filter:blur(0)} }
@keyframes titlein { 0%{opacity:0; transform:translateY(16px) scale(0.97); filter:blur(8px)} 100%{opacity:0.82; transform:translateY(0) scale(0.986); filter:blur(0)} }
@keyframes titlepulse { 0%,100%{opacity:0.82; transform:scale(0.986)} 50%{opacity:1; transform:scale(1.018)} }
@keyframes hairline { 0%{transform:scaleX(0); opacity:0} 100%{transform:scaleX(1); opacity:0.5} }
@keyframes uifade { 0%{opacity:1; transform:translateY(0)} 100%{opacity:0; transform:translateY(-18px); filter:blur(10px)} }
/* TWO keyframes only. A timing function is applied between EVERY pair of
keyframes, so intermediate stops made the motion decelerate at each one —
that was the beating. One start, one end, one curve: unbroken acceleration. */
@keyframes videodive {
0% { transform:scale(1) rotate(0deg); filter:brightness(1); }
70% { transform:scale(2.5) rotate(4deg); filter:brightness(0.6); }
95% { transform:scale(4.5) rotate(8deg); filter:brightness(0); opacity: 1; }
100% { transform:scale(4.5) rotate(8deg); filter:brightness(0); opacity: 0; }
}
@keyframes submergeReveal {
0% { transform: scale(1.3); }
100% { transform: scale(1); }
}
@keyframes tunring {
0%{transform:scale(0.035) rotate(0deg); opacity:0; filter:blur(2.4px)}
12%{opacity:0.95; filter:blur(0.6px)}
70%{opacity:0.8}
100%{transform:scale(13) rotate(26deg); opacity:0; filter:blur(3px)}
}
@keyframes tunblade {
0%{transform:rotate(var(--a)) translateY(-3vmin) scaleY(0.35); opacity:0}
22%{opacity:0.95}
64%{opacity:0.7}
100%{transform:rotate(var(--a)) translateY(-110vmin) scaleY(3); opacity:0}
}
@keyframes tunpull { from{transform:scale(1)} to{transform:scale(3.6)} }
@keyframes cardturn { 0%{transform:rotateY(0deg) rotateX(4deg)} 100%{transform:rotateY(360deg) rotateX(4deg)} }
@keyframes tunspin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
/* Sparks of light on the water get pulled into the hole, spiralling as they go. */
@keyframes motein {
0%{transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) scale(var(--s)); opacity:0}
18%{opacity:0.9}
64%{opacity:0.75}
100%{transform:rotate(calc(var(--a) + 120deg)) translateY(-1vmin) scale(0.1); opacity:0}
}
@keyframes shardin {
0%{transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) scaleY(0.5); opacity:0}
22%{opacity:0.5}
64%{opacity:0.4}
100%{transform:rotate(calc(var(--a) + 150deg)) translateY(-1.5vmin) scaleY(2.4); opacity:0}
}
/* One pass, no restarts: the swirl simply winds inward for the whole dive. */
@keyframes vortexclose {
0%{transform:rotate(0deg) scale(1.55)}
25%{transform:rotate(14deg) scale(1.42)}
45%{transform:rotate(58deg) scale(1.2)}
65%{transform:rotate(160deg) scale(0.92)}
82%{transform:rotate(330deg) scale(0.62)}
100%{transform:rotate(640deg) scale(0.34)}
}
@keyframes vortexclose2 {
0%{transform:scaleX(-1) rotate(0deg) scale(1.34)}
25%{transform:scaleX(-1) rotate(-10deg) scale(1.26)}
45%{transform:scaleX(-1) rotate(-42deg) scale(1.1)}
65%{transform:scaleX(-1) rotate(-120deg) scale(0.88)}
82%{transform:scaleX(-1) rotate(-250deg) scale(0.64)}
100%{transform:scaleX(-1) rotate(-490deg) scale(0.42)}
}
@keyframes vortexfine {
0%{transform:rotate(0deg) scale(1.2)}
25%{transform:rotate(20deg) scale(1.1)}
45%{transform:rotate(88deg) scale(0.94)}
65%{transform:rotate(250deg) scale(0.74)}
82%{transform:rotate(520deg) scale(0.5)}
100%{transform:rotate(1020deg) scale(0.26)}
}
@keyframes goldpool { 0%{transform:scale(0.62)} 100%{transform:scale(2.4)} }
/* Layer-level veil so nothing ever pops in or lingers on top of the bloom. */
/* The tunnel is clipped to the mouth, so the swirl is born in the hole. */
@keyframes mouthopen {
from{clip-path:circle(1.5% at 50% 54%)}
to{clip-path:circle(180% at 50% 50%)}
}
@keyframes darkin { 0%{opacity:0} 30%{opacity:0.28} 60%{opacity:0.66} 100%{opacity:0.95} }
/* Monotonic rise then fall — no dip-and-recover, so the light never pulses. */
@keyframes veilin { 0%,14%{opacity:0} 50%{opacity:0.95} 100%{opacity:0} }
@keyframes veilinsoft { 0%,18%{opacity:0} 54%{opacity:0.78} 100%{opacity:0} }
@keyframes tunthroat { from{transform:scale(0.06); opacity:0} 18%{opacity:0.7} to{transform:scale(7.5); opacity:1} }
@keyframes tunwall { from{opacity:0} to{opacity:0.95} }
/* A portal opens on the water first: a bright seam widens into a mouth. */
@keyframes portalbirth {
from{transform:scale(0.1,0.008); opacity:0; filter:blur(26px)}
54%{opacity:0.8}
to{transform:scale(2.7,2.7); opacity:0; filter:blur(3px)}
}
/* The hairline ring echoes the orb rings in the world — kept, but whisper-quiet. */
@keyframes portalrim {
from{transform:scale(0.2,0.03); opacity:0}
20%{opacity:0}
58%{opacity:0.18}
to{transform:scale(3,3); opacity:0}
}
@keyframes portalripple {
0%{transform:scale(0.3,0.05); opacity:0}
30%{opacity:0.14}
62%{opacity:0.1}
100%{transform:scale(2.6,1.5); opacity:0}
}
/* A single one-way roll instead of an oscillation — drift, never jitter. */
@keyframes camshake {
0%{transform:rotate(0deg)}
100%{transform:rotate(1.1deg)}
}
@keyframes flashout { 0%{opacity:0} 44%{opacity:0.06} 62%{opacity:0.22} 78%{opacity:0.55} 90%{opacity:0.86} 100%{opacity:1} }
@keyframes arrivein { 0%{opacity:0} 100%{opacity:1} }
@keyframes arrivetext { 0%{opacity:0; filter:blur(14px); transform:scale(1.06)} 100%{opacity:0.82; filter:blur(0); transform:scale(0.986)} }
@keyframes veilfade { 0%,22%{opacity:1} 100%{opacity:0} }
@keyframes hotspotring { 0%{transform:scale(0.5); opacity:0} 25%{opacity:0.8} 100%{transform:scale(1.9); opacity:0} }
@keyframes hotspotcore { 0%,100%{transform:scale(0.85); opacity:0.8} 50%{transform:scale(1.15); opacity:1} }
@keyframes panelin { 0%{opacity:0; transform:scale(1.03); filter:blur(14px)} 45%{opacity:0.7; filter:blur(5px)} 100%{opacity:1; transform:scale(1); filter:blur(0)} }
@keyframes daypulse { 0%,100%{box-shadow:0 0 10px 2px rgba(206,148,52,0.32); transform:scale(0.98)} 50%{box-shadow:0 0 18px 5px rgba(222,166,72,0.52); transform:scale(1.03)} }
@keyframes breathe { 0%,100%{transform:scale(0.86); opacity:0.55} 50%{transform:scale(1.12); opacity:1} }
@keyframes panelcard { 0%{opacity:0; transform:translateY(18px) scale(0.985)} 100%{opacity:1; transform:translateY(0) scale(1)} }
@keyframes innerdrift { 0%{transform:scale(1.1)} 100%{transform:scale(1.42)} }
@keyframes discspin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }