/* ========================================================================== AWSPrep — Advanced animation layer (neon.com-inspired) Activates only when JS adds .js-anim to (progressive enhancement: without JS, or under prefers-reduced-motion, everything stays visible). ========================================================================== */ /* ---------- Page + nav entrance ---------- */ html.js-anim body{animation:page-enter .55s cubic-bezier(.2,.8,.2,1) both;} html.js-anim .navbar{animation:nav-drop .5s cubic-bezier(.2,.8,.2,1) .08s both;} @keyframes page-enter{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} @keyframes nav-drop{from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:none;}} /* ---------- Aurora hero: drifting glow orbs + masked grid ---------- */ .hero{position:relative;overflow:hidden;} .hero .aurora{position:absolute;inset:0;pointer-events:none;} .hero .aurora span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.16;will-change:transform;} .hero .aurora .a1{width:520px;height:520px;left:-120px;top:-160px;background:radial-gradient(circle,#ff9900 0%,transparent 65%);animation:aurora-1 16s ease-in-out infinite alternate;} .hero .aurora .a2{width:640px;height:640px;right:-160px;top:-100px;background:radial-gradient(circle,#006ce0 0%,transparent 65%);animation:aurora-2 21s ease-in-out infinite alternate;} .hero .aurora .a3{width:480px;height:480px;left:35%;bottom:-220px;background:radial-gradient(circle,#0d9488 0%,transparent 65%);animation:aurora-3 25s ease-in-out infinite alternate;} .hero .aurora .a4{width:300px;height:300px;right:25%;top:30%;background:radial-gradient(circle,#fa6f00 0%,transparent 65%);opacity:.1;animation:aurora-2 19s ease-in-out infinite alternate-reverse;} @keyframes aurora-1{from{transform:translate(0,0) scale(1);}to{transform:translate(90px,60px) scale(1.18);}} @keyframes aurora-2{from{transform:translate(0,0) scale(1.1);}to{transform:translate(-80px,50px) scale(.92);}} @keyframes aurora-3{from{transform:translate(0,0) scale(.95);}to{transform:translate(60px,-70px) scale(1.15);}} .hero-content{position:relative;z-index:1;} .hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(15,20,26,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,20,26,.05) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%);} @media(max-width:600px){.hero .aurora span{filter:blur(46px);}} /* ---------- Hero details ---------- */ html.js-anim .hero-badge{backdrop-filter:blur(6px);animation:badge-pulse 3.2s ease-in-out infinite;} @keyframes badge-pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,108,224,.18);}50%{box-shadow:0 0 0 10px rgba(9,114,211,0);}} .gradient-text{background-size:200% auto;animation:gradient-shimmer 5s linear infinite;} @keyframes gradient-shimmer{to{background-position:200% center;}} html.js-anim .hero-actions .btn{animation:rise-in .7s cubic-bezier(.2,.8,.2,1) both;} html.js-anim .hero-actions .btn:nth-child(2){animation-delay:.12s;} @keyframes rise-in{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}} /* ---------- Scroll reveal ---------- Uses the `translate` property so it never fights the transform used by card hover effects (they compose instead of overriding each other). */ html.js-anim .reveal{opacity:0;translate:0 26px; transition:opacity .7s cubic-bezier(.2,.8,.2,1) var(--d,0ms),translate .7s cubic-bezier(.2,.8,.2,1) var(--d,0ms);} html.js-anim .reveal.revealed{opacity:1;translate:0 0;} /* ---------- Spotlight cards: mouse-following radial glow ---------- */ html.js-anim .spot{position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease;} html.js-anim .spot::before{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .45s ease;pointer-events:none;z-index:0; background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(59,130,246,.14),transparent 65%);} html.js-anim .spot:hover::before{opacity:1;} html.js-anim .spot:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);} html.js-anim .spot>*{position:relative;z-index:1;} /* ---------- Primary button: shine sweep + glow ---------- */ .btn-primary{position:relative;overflow:hidden;} .btn-primary::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;transform:skewX(-22deg); background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transition:left .55s ease;} .btn-primary:hover::after{left:130%;} .btn-primary:hover{box-shadow:0 0 0 1px rgba(37,99,235,.35),0 8px 28px rgba(37,99,235,.4);} /* ---------- Slowly panning gradients (section/domain headers, results) ---------- */ .exam-section-header,.domain-card-header,.results-hero{background-size:180% 180%;animation:gradient-pan 9s ease-in-out infinite;} @keyframes gradient-pan{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}} /* ---------- Count-up stat pop ---------- */ html.js-anim .stat-n.counted{animation:stat-pop .5s cubic-bezier(.2,.8,.2,1);} @keyframes stat-pop{from{transform:scale(.85);opacity:.4;}to{transform:scale(1);opacity:1;}}