/* ==========================================================
   Golden Staars - design polish + animation layer
   Loads AFTER style.css. Everything here is additive, and
   switches off for visitors who prefer reduced motion.
   ========================================================== */

:root{ --hd:1.7s; --ease:cubic-bezier(.2,.8,.2,1); }
html.seen{ --hd:0s; }
html{ scroll-padding-top:90px; }
::selection{ background:var(--gold); color:var(--night); }
body{ overflow-x:hidden; }

/* ---------- keyframes ---------- */
@keyframes rise{ from{ opacity:0; translate:0 42px; filter:blur(6px); } }
@keyframes slideR{ from{ opacity:0; translate:-34px 0; filter:blur(4px); } }
@keyframes zoomIn{ from{ opacity:0; scale:.88; translate:0 24px; filter:blur(5px); } }
@keyframes wordIn{ from{ translate:0 110%; rotate:4deg; } to{ translate:0 0; rotate:0deg; } }
@keyframes shine{ to{ background-position:-220% 0; } }
@keyframes pop{ 0%{ scale:0; rotate:-90deg; } 70%{ scale:1.25; } 100%{ scale:1; rotate:0deg; } }
@keyframes topicIn{ from{ opacity:0; translate:0 16px; filter:blur(4px); } }
@keyframes loaderOut{ to{ opacity:0; visibility:hidden; scale:1.06; } }
@keyframes ringSpin{ to{ rotate:360deg; } }
@keyframes loaderPulse{ 0%,100%{ scale:1; } 50%{ scale:1.07; } }
@keyframes loaderText{ from{ opacity:0; letter-spacing:.5em; } to{ opacity:1; letter-spacing:.14em; } }
@keyframes sparkle{ 0%{ opacity:1; scale:1; rotate:0deg; } 100%{ opacity:0; scale:.1; rotate:140deg; translate:var(--dx) var(--dy); } }
@keyframes shoot{ 0%{ opacity:0; translate:0 0; } 12%{ opacity:1; } 100%{ opacity:0; translate:var(--sx) var(--sy); } }
@keyframes drift{ 0%{ opacity:0; translate:0 24px; rotate:-8deg; } 45%{ opacity:var(--o,.14); } 100%{ opacity:0; translate:0 -90px; rotate:8deg; } }
@keyframes blobA{ 0%,100%{ translate:0 0; scale:1; } 50%{ translate:90px 50px; scale:1.2; } }
@keyframes blobB{ 0%,100%{ translate:0 0; scale:1.1; } 50%{ translate:-110px -40px; scale:.9; } }
@keyframes cueBob{ 0%,100%{ translate:0 0; opacity:.9; } 50%{ translate:0 9px; opacity:.4; } }
@keyframes cueDot{ 0%{ opacity:0; translate:0 0; } 30%{ opacity:1; } 100%{ opacity:0; translate:0 16px; } }
@keyframes pulseRing{ 0%{ box-shadow:0 0 0 0 rgba(214,166,59,.6); } 100%{ box-shadow:0 0 0 22px rgba(214,166,59,0); } }
@keyframes ripple{ to{ scale:1; opacity:0; } }
@keyframes fill{ from{ scale:0 1; } to{ scale:1 1; } }
@keyframes edgeRun{ to{ background-position:-300% 0; } }
@keyframes wiggle{ 0%,100%{ rotate:0deg; } 25%{ rotate:-12deg; } 75%{ rotate:12deg; } }
@keyframes countGlow{ 0%{ text-shadow:0 0 0 rgba(240,210,138,0); } 40%{ text-shadow:0 0 22px rgba(240,210,138,.9); } 100%{ text-shadow:0 0 0 rgba(240,210,138,0); } }
@keyframes float2{ 0%,100%{ translate:0 0; } 50%{ translate:0 -8px; } }

/* ---------- page loader (shown once per visit) ---------- */
.loader{ position:fixed; inset:0; z-index:9998; display:grid; place-items:center; pointer-events:none;
  background:radial-gradient(circle at 50% 45%,#45196a 0,var(--night) 70%);
  animation:loaderOut .9s 1.55s var(--ease) forwards; }
.seen .loader{ display:none; }
.loader-in{ display:grid; justify-items:center; gap:1.4rem; }
.loader .mark{ position:relative; width:112px; height:112px; display:grid; place-items:center; animation:loaderPulse 2s ease-in-out infinite; }
.loader .mark img{ width:84px; height:84px; border-radius:50%; box-shadow:0 0 34px rgba(214,166,59,.55); }
.loader .mark::before{ content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 55%,var(--gold) 100%);
  -webkit-mask:radial-gradient(circle,transparent 52px,#000 53px); mask:radial-gradient(circle,transparent 52px,#000 53px);
  animation:ringSpin 1.1s linear infinite; }
.loader p{ font:600 1.5rem var(--serif); color:var(--gold-soft); letter-spacing:.14em; text-transform:uppercase; animation:loaderText 1.1s .2s backwards; }

/* ---------- scroll progress + back to top ---------- */
.progress{ position:fixed; left:0; top:0; right:0; height:3px; z-index:9997; transform-origin:0 50%; scale:0 1;
  background:linear-gradient(90deg,var(--violet),var(--gold),var(--gold-soft)); box-shadow:0 0 12px rgba(214,166,59,.8); pointer-events:none; }
.totop{ position:fixed; right:1.2rem; bottom:1.2rem; z-index:60; width:52px; height:52px; border-radius:50%; border:2px solid var(--gold);
  background:var(--night); color:var(--gold-soft); display:grid; place-items:center; cursor:pointer;
  opacity:0; visibility:hidden; translate:0 20px; scale:.8;
  transition:opacity .35s,visibility .35s,translate .35s var(--ease),scale .35s var(--ease),background .25s,color .25s;
  box-shadow:0 10px 26px rgba(0,0,0,.35),0 0 0 0 rgba(214,166,59,.5); }
.totop.show{ opacity:1; visibility:visible; translate:0 0; scale:1; animation:pulseRing 2.8s 1s infinite; }
.totop:hover{ background:var(--gold); color:var(--night); }
.totop svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- header ---------- */
.site-header{ transition:background .4s,box-shadow .4s,backdrop-filter .4s; }
.site-header .bar{ transition:padding .35s; }
.brand img{ transition:width .35s,height .35s; }
.brand span{ background:linear-gradient(100deg,var(--gold-soft) 30%,#fff 50%,var(--gold-soft) 70%); background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:shine 7s linear infinite; }
#site-header.scrolled .site-header{ background:rgba(28,10,40,.82); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); box-shadow:0 10px 34px rgba(0,0,0,.4); }
#site-header.scrolled .bar{ padding:.3rem 0; }
#site-header.scrolled .brand img{ width:42px; height:42px; }
.nav a{ border-bottom:0; background:linear-gradient(var(--gold),var(--gold)) left bottom/0 2px no-repeat; transition:color .25s,background-size .4s var(--ease); }
.nav a:hover,.nav a.active{ border:0; background-size:100% 2px; }
.sub a{ background-image:none; }
.has-sub b{ display:inline-block; line-height:1; vertical-align:baseline; transition:rotate .3s; }
.has-sub:hover b,.has-sub:focus-within b{ rotate:180deg; }
@media(min-width:861px){
  .sub{ display:block; opacity:0; visibility:hidden; translate:0 12px; transform-origin:top left;
    transition:opacity .3s,visibility .3s,translate .35s var(--ease); }
  .has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{ opacity:1; visibility:visible; translate:0 0; }
  .sub a{ transition:background .2s,padding-left .25s,color .2s; }
  .sub a:hover{ padding-left:1.15rem; color:var(--gold-soft); }
}
.menu-btn i{ transition:rotate .3s,translate .3s,opacity .2s; }
.menu-btn[aria-expanded="true"] i:nth-child(1){ translate:0 6px; rotate:45deg; }
.menu-btn[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] i:nth-child(3){ translate:0 -6px; rotate:-45deg; }
@media(max-width:860px){
  .nav a{ background-image:none; }
  .nav.open a{ animation:slideR .5s var(--ease) backwards; }
  .nav.open > *:nth-child(2){ animation-delay:.05s; } .nav.open > *:nth-child(3){ animation-delay:.1s; }
  .nav.open > *:nth-child(4){ animation-delay:.15s; } .nav.open > *:nth-child(5){ animation-delay:.2s; } .nav.open > *:nth-child(6){ animation-delay:.25s; }
}

/* ---------- hero ---------- */
.js .hero h1{ animation:none; }
.hero h1 .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding:.04em .04em .14em; margin:-.04em -.04em -.14em; }
.hero h1 .w > span{ display:inline-block; translate:0 110%; animation:wordIn 1s var(--ease) calc(var(--hd) + var(--i) * .1s) forwards, shine 6s linear calc(var(--i) * -.35s) infinite;
  background:linear-gradient(100deg,#f0d28a 0%,#f0d28a 38%,#fff8de 48%,#e9b948 56%,#f0d28a 66%,#f0d28a 100%); background-size:240% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.js .hero p{ animation:rise 1s calc(var(--hd) + .75s) backwards; }
.js .hero .btns{ animation:rise 1s calc(var(--hd) + .95s) backwards; }
.js .hero-art{ animation:zoomIn 1.4s calc(var(--hd) + .1s) backwards; }
.hero-art::before{ content:""; position:absolute; left:50%; top:50%; width:90%; aspect-ratio:1; translate:-50% -50%; border-radius:50%;
  background:radial-gradient(circle,rgba(240,190,70,.55),rgba(240,190,70,0) 65%); animation:breathe 5s ease-in-out infinite; pointer-events:none; }
.hero .mandala, .hero-art{ will-change:transform; }
.hero .mandala{ transform:translate(calc(var(--px,0) * -26px),calc(var(--py,0) * -18px)); }
.hero-img{ transform:translate(calc(var(--px,0) * 14px),calc(var(--py,0) * 10px)); }
.hero .sky{ transform:translate(calc(var(--px,0) * -10px),calc(var(--py,0) * -8px)); }
.orbit{ position:absolute; left:50%; top:50%; height:158%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; pointer-events:none; z-index:2; animation:ringSpin 32s linear infinite; }
.orbit i{ position:absolute; width:9px; height:9px; margin:-4.5px; border-radius:50%; background:radial-gradient(circle,#fff 0,var(--gold-soft) 45%,transparent 72%); box-shadow:0 0 14px 4px rgba(240,210,138,.65); }
.orbit i:nth-child(1){ left:50%; top:0; } .orbit i:nth-child(2){ left:93.3%; top:75%; } .orbit i:nth-child(3){ left:6.7%; top:75%; }
.orbit.rev{ height:132%; animation-direction:reverse; animation-duration:46s; }
.orbit.rev i{ width:6px; height:6px; margin:-3px; opacity:.8; }
.scroll-cue{ position:absolute; left:50%; bottom:1.6rem; translate:-50% 0; z-index:2; width:26px; height:42px; border:2px solid rgba(240,210,138,.7); border-radius:16px; animation:cueBob 2.4s ease-in-out infinite; }
.scroll-cue::after{ content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:4px; background:var(--gold-soft); animation:cueDot 1.8s ease-in infinite; }
@media(max-width:860px){ .scroll-cue{ display:none; } .orbit{ height:120%; } .orbit.rev{ display:none; } .hero .mandala,.hero-img,.hero .sky{ transform:none; } }

/* shooting stars + drifting glyphs (created by JS) */
.shooter{ position:absolute; width:140px; height:2px; border-radius:2px; background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,236,170,.95)); opacity:0; rotate:var(--r); animation:shoot var(--d) ease-out forwards; filter:drop-shadow(0 0 6px rgba(255,230,160,.9)); }
.glyph{ position:absolute; font:600 var(--s) var(--serif); color:var(--gold-soft); opacity:0; animation:drift var(--t) var(--dl) ease-in-out infinite; user-select:none; }
.star:nth-child(5n){ background:var(--gold-soft); box-shadow:0 0 9px 2px rgba(240,210,138,.8); }

/* ---------- reveal variants + heading underline ---------- */
.reveal.in{ animation-duration:.95s; animation-timing-function:var(--ease); }
.check li.reveal.in{ animation-name:slideR; }
.biz > .reveal.in, .refer > .reveal.in, .stats > .reveal.in, .svcs.four > .reveal.in{ animation-name:zoomIn; }
section h2.reveal::after{ width:0; transition:width 1.1s .35s var(--ease); }
section h2.reveal.in::after{ width:72px; }
.cta h2.reveal.in::after{ width:120px; }
.check li.in a::before{ animation:pop .7s calc(var(--d,0s) + .35s) var(--ease) backwards; }

/* ---------- buttons ---------- */
.btn{ transition:transform .25s,background .25s,color .25s,translate .25s var(--ease),box-shadow .3s; }
.btn.solid:hover{ box-shadow:0 12px 28px rgba(214,166,59,.45); }
.btn.line:hover{ background:rgba(214,166,59,.14); box-shadow:0 0 0 4px rgba(214,166,59,.12); }
.btn .rip{ position:absolute; border-radius:50%; background:rgba(255,255,255,.55); scale:0; pointer-events:none; animation:ripple .7s ease-out forwards; }
.cta .btn.solid,.check-sec .btn.solid{ animation:pulseRing 2.6s infinite; }
.btn.solid:hover,.btn:active{ animation-play-state:paused; }

/* ---------- topic chooser ---------- */
.chip{ transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease),box-shadow .25s; }
.chip:hover{ transform:translateY(-3px) rotate(-1deg); box-shadow:0 8px 18px rgba(123,47,190,.2); }
.chip.on{ box-shadow:0 8px 20px rgba(123,47,190,.38); }
.topic{ position:relative; overflow:hidden; }
.topic::before{ content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 35%,rgba(240,210,138,.28) 50%,transparent 65%); translate:-120% 0; pointer-events:none; }
.topic.swap::before{ translate:120% 0; transition:translate 1s var(--ease); }
.topic.swap h3{ animation:topicIn .55s var(--ease) backwards; }
.topic.swap p{ animation:topicIn .55s .08s var(--ease) backwards; }
.topic.swap .btn{ animation:topicIn .55s .16s var(--ease) backwards; }

/* ---------- service cards: 3D tilt + glare ---------- */
.svc{ transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s var(--ease),box-shadow .3s; will-change:transform; }
.svc:hover,.svc:focus-visible{ transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px); }
.svc::before{ background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.32),transparent 46%),linear-gradient(150deg,#7a35c4,#a35be6); }
.svc::after{ transition:scale .6s var(--ease),rotate 1.2s var(--ease); }
.svc:hover::after{ scale:1.35; rotate:90deg; }
.svc:hover .ico{ animation:wiggle .7s; }
.svc .more i{ display:inline-block; transition:translate .3s; }
.svc:hover .more i{ translate:6px 0; }
.svc .pts li::before{ transition:rotate .5s var(--ease),scale .3s; }
.svc:hover .pts li::before{ rotate:225deg; scale:1.25; }
.svc:hover .pts li:nth-child(2)::before{ transition-delay:.05s; } .svc:hover .pts li:nth-child(3)::before{ transition-delay:.1s; } .svc:hover .pts li:nth-child(4)::before{ transition-delay:.15s; }
.svc .ico{ animation:float2 5s ease-in-out infinite; }
.svcs > *:nth-child(2n) .ico{ animation-delay:-1.4s; } .svcs > *:nth-child(3n) .ico{ animation-delay:-2.8s; }

/* ---------- spotlight cards (follows the cursor) ---------- */
.stat::after,.biz li::after,.msg::after,.tcard::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(214,166,59,.2),transparent 62%); }
.stat:hover::after,.biz li:hover::after,.msg:hover::after,.tcard:hover::after{ opacity:1; }
.biz li{ position:relative; overflow:hidden; }
.biz li:hover .mono{ rotate:360deg; box-shadow:0 0 0 3px var(--gold),0 0 22px rgba(214,166,59,.7); }
.biz .mono{ transition:rotate .8s var(--ease),box-shadow .4s; }

/* ---------- stats ---------- */
.stat strong.done{ animation:countGlow 1.4s ease-out; }
.stat::before{ content:""; position:absolute; left:0; right:0; top:-3px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--gold) 0,#fff 20%,var(--gold) 40%,var(--gold)); background-size:300% 100%; animation:edgeRun 5s linear infinite; }

/* ---------- aurora background on dark sections ---------- */
.dark{ position:relative; overflow:hidden; isolation:isolate; }
.dark::before,.dark::after{ content:""; position:absolute; z-index:-1; border-radius:50%; pointer-events:none; }
.dark::before{ left:-10%; top:-30%; width:620px; height:620px; background:radial-gradient(circle,rgba(123,47,190,.55),transparent 65%); animation:blobA 16s ease-in-out infinite; }
.dark::after{ right:-8%; bottom:-35%; width:560px; height:560px; background:radial-gradient(circle,rgba(214,166,59,.22),transparent 65%); animation:blobB 19s ease-in-out infinite; }

/* ---------- check panel ---------- */
.panel::after{ animation:ringSpin 60s linear infinite; }
.panel::before{ animation:breathe 6s ease-in-out infinite; }

/* ---------- testimonials ---------- */
.tcard{ transition:transform .4s var(--ease),box-shadow .4s; overflow:hidden; }
.tcard:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.35); }
.tcard::before{ animation:float2 6s ease-in-out infinite; }
.av{ transition:rotate .6s var(--ease),scale .3s; }
.tcard:hover .av{ rotate:360deg; scale:1.1; }
.tbtn{ transition:background .25s,color .25s,scale .25s var(--ease); }
.tbtn:hover{ scale:1.12; }
.tdots button{ transition:background .3s,transform .3s var(--ease),width .3s var(--ease); }
.tdots button.on{ width:26px; border-radius:8px; transform:none; }
.tprog{ width:min(180px,50%); height:3px; margin:1.1rem auto 0; border-radius:3px; background:rgba(240,210,138,.22); overflow:hidden; }
.tprog i{ display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); transform-origin:0 50%; animation:fill 4s linear forwards; }
.tslider:hover .tprog i,.tslider:focus-within .tprog i{ animation-play-state:paused; }

/* ---------- refer cards ---------- */
.msg .acts button,.msg .acts a{ transition:transform .25s var(--ease),background .25s,color .25s; }
.msg .acts button:hover,.msg .acts a:hover{ transform:translateY(-3px); }
.msg .acts button:hover{ background:var(--violet); color:#fff; }

/* ---------- cta ---------- */
.cta::after{ content:""; position:absolute; left:50%; top:50%; width:760px; height:760px; margin:-380px 0 0 -380px; border-radius:50%; border:1.5px dashed rgba(240,210,138,.28); z-index:-1; animation:ringSpin 90s linear infinite; pointer-events:none; }
.cta-points li{ transition:background .3s,color .3s,transform .3s var(--ease); }
.cta-points li:hover{ background:var(--gold); color:var(--night); transform:translateY(-3px); }

/* ---------- footer ---------- */
.site-footer{ position:relative; border-top:0; }
.site-footer::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--gold),var(--gold-soft),#fff,var(--gold-soft),var(--gold)); background-size:300% 100%; animation:edgeRun 7s linear infinite; }
.foot a{ transition:color .25s,translate .3s var(--ease); }
.foot a:hover{ translate:6px 0; }
.foot-brand img{ animation:glow 4.5s ease-in-out infinite; }

/* ---------- cursor sparkles ---------- */
.spark{ position:fixed; z-index:9999; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); pointer-events:none;
  background:linear-gradient(135deg,#fff,var(--gold)); clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  filter:drop-shadow(0 0 4px rgba(240,210,138,.9)); animation:sparkle .95s ease-out forwards; }

/* ---------- respect reduced-motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .loader,.shooter,.glyph,.spark,.orbit,.scroll-cue,.tprog{ display:none !important; }
  .hero h1 .w > span{ translate:0 0; }
  .reveal{ opacity:1 !important; }
  .svc{ transform:none !important; }
}

/* mobile: let the long topic button wrap inside its card */
@media(max-width:700px){ .topic .btn{ white-space:normal; text-align:center; justify-self:stretch; } }