/* ==========================================================
   SCE 2027 – page-load & scroll animations (home page)
   Loaded only by the home page (index.php). Everything here is opt-in through classes
   that sce-anim.js adds, so without JS the page simply shows normally.
   ========================================================== */

/* ---------- 1. Opening intro: styles are inlined in index.php <head> so the intro can paint immediately ---------- */

/* ---------- 2. Page entrance (top of the page) ---------- */
html.sce-anim .topbanner, html.sce-anim .masthead, html.sce-anim .navbar,
html.sce-anim .banner, html.sce-anim .countdown-wrap { opacity: 0; }
html.sce-anim.sce-loaded .topbanner { animation: dropIn .8s cubic-bezier(.2,.8,.2,1) .05s forwards; }
html.sce-anim.sce-loaded .masthead  { animation: dropIn .8s cubic-bezier(.2,.8,.2,1) .05s forwards; }
html.sce-anim.sce-loaded .navbar    { animation: dropIn .8s cubic-bezier(.2,.8,.2,1) .18s forwards; }
html.sce-anim.sce-loaded .banner    { animation: bannerIn 1.4s cubic-bezier(.2,.8,.2,1) .25s forwards; }
html.sce-anim.sce-loaded .countdown-wrap { animation: riseIn .9s cubic-bezier(.2,.8,.2,1) .7s forwards; }
html.sce-anim.sce-loaded .countdown__unit { opacity: 0; animation: riseIn .6s cubic-bezier(.2,.8,.2,1) forwards; }
html.sce-anim.sce-loaded .countdown__unit:nth-child(2) { animation-delay: .95s; }
html.sce-anim.sce-loaded .countdown__unit:nth-child(3) { animation-delay: 1.05s; }
html.sce-anim.sce-loaded .countdown__unit:nth-child(4) { animation-delay: 1.15s; }
html.sce-anim.sce-loaded .countdown__unit:nth-child(5) { animation-delay: 1.25s; }
/* the sticky nav must be able to stick after its entrance */
html.sce-anim.sce-loaded .navbar { animation-fill-mode: both; }

@keyframes dropIn   { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes bannerIn { from { opacity: 0; transform: scale(1.06); filter: saturate(.6) brightness(1.1); } to { opacity: 1; transform: none; filter: none; } }
@keyframes riseIn   { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- 3. Section headings: words rise into place ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; transform: translateY(105%); transition: transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 60ms); }
.words-in .w > span { transform: none; }
/* gradient words keep their gradient when split */
.hl .w > span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 4. Softer scroll reveal (blur → sharp) ---------- */
html.sce-anim .reveal { filter: blur(8px); transform: translateY(30px) scale(.985); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1), filter .9s ease; }
html.sce-anim .reveal.is-visible { filter: none; transform: none; }
.eyebrow::before { transition: width .7s cubic-bezier(.2,.8,.2,1) .2s; }
html.sce-anim .reveal:not(.is-visible) .eyebrow::before { width: 0; }

/* ---------- 5. Scroll progress line ---------- */
.scroll-progress { position: fixed; left: 0; top: 0; z-index: 1000; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left;
	background: linear-gradient(90deg, #4e4f9d, #e5412a, #f7a400, #a8c95b); pointer-events: none; }

/* ---------- 6. Button shine ---------- */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; pointer-events: none;
	background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg);
}
.btn--primary:hover::after { animation: btnShine .9s ease; }
@keyframes btnShine { to { left: 130%; } }

/* ---------- Accessibility: no motion for people who ask for less ---------- */
@media (prefers-reduced-motion: reduce) {
	html.has-splash .splash { display: none; }
	html.sce-anim .topbanner, html.sce-anim .masthead, html.sce-anim .navbar, html.sce-anim .banner, html.sce-anim .countdown-wrap, html.sce-anim .countdown__unit { opacity: 1 !important; animation: none !important; }
	.w > span { transform: none !important; transition: none !important; }
	html.sce-anim .reveal { filter: none !important; }
	.scroll-progress, .btn--primary::after { display: none; }
}