/* Colour, light and card motion. Everything animated stops under prefers-reduced-motion. */
:root{--saf:#ff8a1f;--mag:#e0245e;--vio:#6a3df0;--teal:#0fb5a6;--gld:#ffc94d;--rose2:#ff4d8d}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* Richer headings and section colour */
h2{background-image:linear-gradient(90deg,#b3123f,var(--mag),var(--saf),var(--vio))!important}
#rebuild{background:radial-gradient(560px 280px at 8% 0,rgba(255,201,77,.40),transparent 70%),radial-gradient(520px 300px at 100% 40%,rgba(224,36,94,.16),transparent 70%),#fff7ea}
#history{background:radial-gradient(600px 300px at 92% 0,rgba(255,201,77,.45),transparent 70%),radial-gradient(500px 260px at 0 100%,rgba(255,138,31,.22),transparent 70%),#fff3d9}
#deities{background:radial-gradient(560px 300px at 50% 0,rgba(106,61,240,.16),transparent 70%),#f6f0ff}
#legal{background:radial-gradient(520px 260px at 0 0,rgba(15,181,166,.20),transparent 70%),radial-gradient(520px 260px at 100% 100%,rgba(224,36,94,.16),transparent 70%),#fff1f5}
#use{background:radial-gradient(520px 280px at 100% 0,rgba(255,138,31,.26),transparent 70%),#fff0ee}
#transparency{background:radial-gradient(560px 300px at 0 0,rgba(106,61,240,.20),transparent 70%),#eef0ff}
#updates{background:radial-gradient(520px 260px at 100% 100%,rgba(15,181,166,.22),transparent 70%),#e9fbf7}
#notices{background:radial-gradient(520px 260px at 0 0,rgba(255,201,77,.35),transparent 70%),#fff6dc}
#gallery{background:radial-gradient(600px 300px at 50% 0,rgba(224,36,94,.16),transparent 70%),#fff1f5}
#faq{background:#fff9f1}
#visit{background:radial-gradient(520px 260px at 100% 0,rgba(15,181,166,.2),transparent 70%),#eefbf9}
.donate{background-image:linear-gradient(135deg,#5a0c25,var(--mag) 55%,var(--saf))}

/* Cards: spotlight that follows the pointer, animated gradient rim, lift */
.card,.cert,.dcard,.dstats div,.quick a,.phases li{position:relative;transform-style:flat}
.fx{opacity:0;transform:translateY(34px) scale(.96);transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0s),box-shadow .35s,border-color .35s}
.fx.in{opacity:1;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}
.fx.in.done{transition:transform .25s ease-out,box-shadow .35s,border-color .35s,opacity .3s}
.fx.in:hover{--ty:-7px;box-shadow:0 22px 46px rgba(224,36,94,.22),0 0 0 1px rgba(255,138,31,.35)}
.card:hover,.cert:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-7px)}
.card::after,.cert::after{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;transition:opacity .3s;
	background:conic-gradient(from var(--ang),var(--saf),var(--mag),var(--vio),var(--teal),var(--gld),var(--saf));
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude;animation:rim 5s linear infinite paused}
.card:hover::after,.cert:hover::after{opacity:1;animation-play-state:running}
.card::before,.cert::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
	background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,201,77,.35),transparent 65%);z-index:0}
.card:hover::before,.cert:hover::before{opacity:1}
.card>*,.cert>*{position:relative;z-index:1}
.cert{overflow:hidden}
@keyframes rim{to{--ang:360deg}}
/* shimmer sweep across certificate thumbnails and stat tiles */
.cthumb::after,.dstats div::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);animation:sweep 4.5s ease-in-out infinite;pointer-events:none}
.dstats div{overflow:hidden}
@keyframes sweep{55%,100%{transform:translateX(120%)}}
/* icons float gently */
.quick svg{animation:bob 3.2s ease-in-out infinite}.quick a:nth-child(2n) svg{animation-delay:-1.1s}.quick a:nth-child(3n) svg{animation-delay:-2s}
@keyframes bob{50%{transform:translateY(-4px)}}
.quick a:hover{background:linear-gradient(160deg,#fff,#fff0d9);box-shadow:0 14px 34px rgba(255,138,31,.35)}
.phases li::before{box-shadow:0 0 0 5px rgba(255,138,31,.2)}
.hgrid .card,.tgrid .card,.sev .card{border-top-width:6px}
.sev .card:nth-child(4n+1),.hgrid .card:nth-child(4n+1){border-top-color:var(--saf)}.sev .card:nth-child(4n+2){border-top-color:var(--mag)}.sev .card:nth-child(4n+3){border-top-color:var(--vio)}.sev .card:nth-child(4n){border-top-color:var(--teal)}
.tgrid .card:nth-child(4){border-top-color:var(--teal)}

/* Lights: a twinkling string under the garland */
.lights{position:relative;height:30px;margin-top:-1px;background:linear-gradient(#3a0d22,transparent);overflow:hidden}
.lights::before,.lights::after{content:"";position:absolute;inset:0}
.lights::before{background:radial-gradient(circle at 14px 15px,var(--gld) 0 4.5px,transparent 6.5px) 0 0/72px 30px repeat-x,radial-gradient(circle at 50px 17px,var(--teal) 0 4.5px,transparent 6.5px) 0 0/72px 30px repeat-x;filter:drop-shadow(0 0 7px rgba(255,201,77,.9));animation:tw 1.4s ease-in-out infinite alternate}
.lights::after{background:radial-gradient(circle at 32px 16px,var(--rose2) 0 4.5px,transparent 6.5px) 0 0/72px 30px repeat-x,radial-gradient(circle at 68px 14px,#8f7bff 0 4.5px,transparent 6.5px) 0 0/72px 30px repeat-x;filter:drop-shadow(0 0 7px rgba(255,77,141,.9));animation:tw 1.4s ease-in-out -.7s infinite alternate}
@keyframes tw{from{opacity:.35}to{opacity:1}}

/* Hero: slow rays of light, glowing buttons */
.hero::before{content:"";position:absolute;left:50%;top:-80%;width:150%;aspect-ratio:1;margin-left:-75%;z-index:1;pointer-events:none;mix-blend-mode:screen;
	background:conic-gradient(from 0deg,transparent 0 6%,rgba(255,214,120,.20) 8%,transparent 10% 22%,rgba(255,138,200,.16) 24%,transparent 26% 40%,rgba(255,214,120,.18) 42%,transparent 44% 58%,rgba(140,120,255,.16) 60%,transparent 62% 78%,rgba(255,214,120,.18) 80%,transparent 82%);animation:spin 70s linear infinite}
.btn.w,.float a,nav a.cta{animation:glow 2.6s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(255,201,77,.6)}50%{box-shadow:0 0 0 12px rgba(255,201,77,0)}}
.slide.on .btn{animation:glow 2.6s ease-in-out infinite}
.te-h{background:linear-gradient(90deg,#ffe9b0,#fff,#ffc94d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}

@media (prefers-reduced-motion:reduce){
	.fx{opacity:1;transform:none;transition:none}.fx.in{transform:none}
	.card::after,.cert::after,.cthumb::after,.dstats div::after,.quick svg,.lights::before,.lights::after,.hero::before,.btn.w,.float a,nav a.cta,.slide.on .btn{animation:none}
	.lights::before,.lights::after{opacity:1}
}
@media (hover:none){.fx.in:hover,.card:hover,.cert:hover{--ty:0px;transform:none}}