/* LYNX ROLEPLAY — premium visual layer */
:root {
  --gold-3:#fff0ae;
  --gold-glow:rgba(212,175,55,.28);
  --ease-premium:cubic-bezier(.16,1,.3,1);
}

.ui-icon { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;display:block;flex:0 0 auto; }
.ui-icon-arrow { width:18px;height:18px; }
.ui-icon-xl { width:30px;height:30px; }
.ui-icon-feature { width:34px;height:34px;stroke-width:1.35; }
.ui-icon-inline { width:13px;height:13px;display:inline-block;vertical-align:-2px;margin-left:4px; }

/* Multi-layer ambient backdrop */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:-3;
  background:
    radial-gradient(900px 600px at 12% 10%,rgba(212,175,55,.055),transparent 60%),
    radial-gradient(780px 520px at 90% 50%,rgba(109,86,24,.04),transparent 64%),
    linear-gradient(135deg,#030303 0%,#070706 48%,#030303 100%);
}
.ambient-scene { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-2; perspective:900px; opacity:.9; }
.ambient-orb { position:absolute; border-radius:50%; filter:blur(1px); opacity:.35; box-shadow:inset -30px -30px 80px rgba(0,0,0,.92), inset 18px 12px 50px rgba(255,240,174,.12), 0 0 100px rgba(212,175,55,.045); }
.orb-a { width:180px;height:180px;right:6vw;top:18vh;background:radial-gradient(circle at 35% 30%,rgba(255,240,174,.28),rgba(212,175,55,.08) 32%,rgba(4,4,4,.78) 68%);animation:orbFloat 12s ease-in-out infinite; }
.orb-b { width:86px;height:86px;left:7vw;top:63vh;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.12),rgba(212,175,55,.05) 36%,rgba(4,4,4,.86) 70%);animation:orbFloat 15s ease-in-out -4s infinite reverse; }
.ambient-shard { position:absolute; width:180px;height:260px;border:1px solid rgba(212,175,55,.08);background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(212,175,55,.012) 45%,transparent);clip-path:polygon(50% 0,100% 76%,58% 100%,0 64%);filter:drop-shadow(0 35px 60px rgba(0,0,0,.35)); }
.shard-a { left:-70px;top:22%;transform:rotateY(55deg) rotateZ(-18deg);animation:shardFloat 18s ease-in-out infinite; }
.shard-b { right:-80px;bottom:10%;transform:rotateY(-50deg) rotateZ(22deg) scale(.7);animation:shardFloat 22s ease-in-out -6s infinite reverse; }
@keyframes orbFloat { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-18px,-26px,24px)} }
@keyframes shardFloat { 0%,100%{translate:0 0;rotate:0deg} 50%{translate:18px -26px;rotate:3deg} }

/* Header glass depth */
.site-header.is-scrolled { background:linear-gradient(180deg,rgba(8,8,7,.92),rgba(5,5,5,.78));box-shadow:0 18px 60px rgba(0,0,0,.26),inset 0 -1px 0 rgba(212,175,55,.035); }
.header-discord { position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(212,175,55,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.header-discord::before { content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,236,170,.14) 48%,transparent 70%);transform:translateX(-140%);transition:transform .65s var(--ease-premium); }
.header-discord:hover::before { transform:translateX(140%); }

/* Hero: cinematic depth + moving aurora */
.hero {
  background:
    linear-gradient(90deg,rgba(4,4,4,.99) 0%,rgba(5,5,5,.94) 41%,rgba(5,5,5,.65) 72%,rgba(4,4,4,.88) 100%),
    radial-gradient(ellipse at 78% 38%,rgba(246,210,101,.135),transparent 34%),
    conic-gradient(from 205deg at 76% 40%,transparent,rgba(212,175,55,.055),transparent 24%),
    #040404;
}
.hero::after { content:'';position:absolute;inset:-25%;z-index:-2;background:conic-gradient(from 160deg at 70% 35%,transparent 0 20%,rgba(212,175,55,.045) 27%,transparent 35% 67%,rgba(255,255,255,.018) 74%,transparent 82%);animation:heroAurora 18s linear infinite;filter:blur(22px); }
@keyframes heroAurora { to{transform:rotate(360deg) scale(1.05)} }
.hero-grid { background-size:72px 72px;transform:perspective(850px) rotateX(62deg) scale(1.45) translateY(26%);transform-origin:center bottom;opacity:.72;mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 82%); }
.hero-content { transform-style:preserve-3d; }
.hero h1 em { background:linear-gradient(110deg,#b48a1f 0%,#f4d879 40%,#fff0ae 58%,#c89e2b 100%);background-size:180% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:goldText 8s ease-in-out infinite;filter:drop-shadow(0 12px 32px rgba(212,175,55,.08)); }
@keyframes goldText { 0%,100%{background-position:0% 50%}50%{background-position:100% 50%} }
.hero-emblem { transform-style:preserve-3d;will-change:transform; }
.hero-emblem::before { content:'';position:absolute;inset:2%;border-radius:50%;background:conic-gradient(from 90deg,transparent 0 15%,rgba(244,216,121,.18) 20%,transparent 26% 55%,rgba(212,175,55,.1) 61%,transparent 67%);filter:blur(.2px);animation:slowspin 18s linear infinite reverse;mask:radial-gradient(circle,transparent 0 57%,#000 58% 60%,transparent 61%); }
.hero-emblem img { transition:filter .45s ease,transform .45s var(--ease-premium); }
.hero-emblem:hover img { transform:translateZ(28px) scale(1.035);filter:drop-shadow(0 35px 55px rgba(0,0,0,.68)) drop-shadow(0 0 34px rgba(212,175,55,.22)); }
.ring-one { background:conic-gradient(from 90deg,transparent,rgba(212,175,55,.09),transparent 28% 72%,rgba(212,175,55,.07),transparent);box-shadow:inset 0 0 90px rgba(212,175,55,.018),0 0 65px rgba(212,175,55,.025); }

/* Premium magnetic/glare buttons */
.btn { position:relative;overflow:hidden;isolation:isolate;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:transform .35s var(--ease-premium),border-color .35s ease,box-shadow .35s ease,color .35s ease;will-change:transform; }
.btn::before { content:'';position:absolute;inset:-1px;z-index:-1;background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 48%);opacity:0;transition:opacity .35s ease; }
.btn::after { content:'';position:absolute;top:-60%;bottom:-60%;width:35%;left:-55%;background:linear-gradient(90deg,transparent,rgba(255,248,219,.28),transparent);transform:skewX(-18deg);transition:left .72s var(--ease-premium);pointer-events:none; }
.btn:hover { transform:translateY(-4px) scale(1.012); }
.btn:hover::before { opacity:1; }
.btn:hover::after { left:125%; }
.btn .ui-icon-arrow { transition:transform .38s var(--ease-premium),filter .3s ease; }
.btn:hover .ui-icon-arrow { transform:translate(3px,-3px) rotate(3deg);filter:drop-shadow(0 0 9px currentColor); }
.btn-gold { background:linear-gradient(120deg,#9d7717 0%,#d4af37 28%,#f3d879 52%,#c39a25 78%,#8a6914 100%);background-size:170% 100%;box-shadow:0 16px 48px rgba(212,175,55,.13),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.35); }
.btn-gold:hover { background-position:100% 0;box-shadow:0 25px 70px rgba(212,175,55,.21),0 0 0 1px rgba(255,236,167,.16) inset; }
.btn-dark,.btn-outline-light { background:linear-gradient(135deg,rgba(22,22,20,.88),rgba(8,8,8,.76));backdrop-filter:blur(18px); }
.btn-dark:hover,.btn-outline-light:hover { box-shadow:0 20px 55px rgba(0,0,0,.34),inset 0 0 0 1px rgba(212,175,55,.08); }

/* Section backgrounds / depth */
.launch-section,.story-section,.why-section,.staff-section,.stats-section,.faq-section { position:relative;isolation:isolate; }
.launch-section::after,.story-section::after,.why-section::after,.staff-section::after,.stats-section::after,.faq-section::after { content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:96px 96px;mask-image:radial-gradient(ellipse at center,#000,transparent 72%);opacity:.65; }
.launch-section { background:radial-gradient(700px 500px at 75% 20%,rgba(212,175,55,.07),transparent 60%),linear-gradient(180deg,#070706,#040404); }
.story-section { background:radial-gradient(800px 580px at 20% 45%,rgba(155,118,23,.07),transparent 62%),linear-gradient(145deg,#040404,#090908 48%,#050505); }
.why-section { background:radial-gradient(900px 520px at 50% 20%,rgba(212,175,55,.06),transparent 64%),#050505; }
.staff-section { background:radial-gradient(900px 630px at 78% 32%,rgba(212,175,55,.075),transparent 60%),radial-gradient(620px 450px at 8% 80%,rgba(255,255,255,.025),transparent 65%),#050505; }
.faq-section { background:radial-gradient(900px 600px at 20% 30%,rgba(212,175,55,.065),transparent 65%),linear-gradient(160deg,#070706,#040404 70%); }

/* 3D cards */
.why-card,.join-step,.staff-profile,.stat-item { transform-style:preserve-3d;will-change:transform; }
.why-card,.join-step,.stat-item { position:relative;overflow:hidden; }
.why-card::before,.join-step::before,.stat-item::before { content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(380px circle at var(--px,50%) var(--py,50%),rgba(255,225,130,.095),transparent 45%);opacity:0;transition:opacity .4s ease; }
.why-card:hover::before,.join-step:hover::before,.stat-item:hover::before { opacity:1; }
.why-card { background:linear-gradient(145deg,rgba(18,18,16,.92),rgba(7,7,7,.98) 68%);box-shadow:inset 0 1px 0 rgba(255,255,255,.025);transition:border-color .4s ease,box-shadow .4s ease; }
.why-card:hover { border-color:rgba(244,216,121,.28);box-shadow:0 32px 90px rgba(0,0,0,.4),inset 0 0 0 1px rgba(212,175,55,.025); }
.why-card.featured { background:linear-gradient(145deg,rgba(57,44,12,.24),rgba(12,11,8,.96) 52%,rgba(5,5,5,.98)); }
.card-icon,.join-icon,.stat-icon { background:linear-gradient(145deg,rgba(248,222,142,.075),rgba(212,175,55,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px rgba(0,0,0,.18); }
.card-icon { border-radius:20px;transform:translateZ(26px); }
.card-icon::after { border-radius:14px; }
.card-icon .ui-icon { filter:drop-shadow(0 0 14px rgba(212,175,55,.22));transition:transform .45s var(--ease-premium); }
.why-card:hover .card-icon .ui-icon { transform:scale(1.08) rotate(-3deg); }
.join-icon { border-radius:20px;transform:rotate(45deg) translateZ(28px); }
.join-icon .ui-icon { transform:rotate(-45deg);filter:drop-shadow(0 0 13px rgba(212,175,55,.2)); }
.join-step:hover .join-icon { border-color:rgba(244,216,121,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 45px rgba(212,175,55,.09); }
.join-link { gap:10px; }
.join-link .ui-icon { width:15px;height:15px;color:var(--gold);transition:transform .3s var(--ease-premium); }
.join-link:hover .ui-icon { transform:translate(3px,-3px); }
.join-copy .ui-icon { color:var(--gold);opacity:.72;transition:transform .3s ease,opacity .3s ease; }
.join-copy:hover .ui-icon { opacity:1;transform:scale(1.08); }

/* Staff profile image treatment */
.staff-profile { background:linear-gradient(160deg,rgba(18,18,16,.96),rgba(6,6,6,.99)); }
.staff-profile::after { content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 0 60%,rgba(212,175,55,.035) 72%,transparent 84%);transform:translateX(-35%);transition:transform .8s var(--ease-premium); }
.staff-profile:hover::after { transform:translateX(25%); }
.staff-avatar-wrap::before { content:'';position:absolute;width:74%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 90deg,transparent 0 20%,rgba(212,175,55,.22) 23%,transparent 27% 62%,rgba(255,240,174,.12) 65%,transparent 69%);animation:slowspin 22s linear infinite;mask:radial-gradient(circle,transparent 0 67%,#000 68% 69%,transparent 70%); }
.staff-avatar-img { transition:transform .55s var(--ease-premium),filter .55s ease,box-shadow .55s ease; }
.staff-profile:hover .staff-avatar-img { transform:scale(1.035) translateZ(18px);filter:saturate(.92) contrast(1.06);box-shadow:0 34px 85px rgba(0,0,0,.56),0 0 0 1px rgba(212,175,55,.16); }

/* Stats icons */
.stat-item { padding-top:38px;transition:border-color .35s ease,box-shadow .35s ease;background:linear-gradient(150deg,rgba(18,18,16,.64),rgba(6,6,6,.88)); }
.stat-item:hover { border-color:rgba(212,175,55,.2);box-shadow:0 28px 70px rgba(0,0,0,.28); }
.stat-icon { width:48px;height:48px;border:1px solid rgba(212,175,55,.16);border-radius:15px;display:grid;place-items:center;color:var(--gold-2);margin-bottom:28px; }
.stat-icon .ui-icon { width:22px;height:22px; }

/* FAQ polished hover */
.faq-question { position:relative;transition:padding .35s var(--ease-premium),color .3s ease,background .3s ease; }
.faq-question::before { content:'';position:absolute;left:-18px;right:-18px;top:0;bottom:0;background:linear-gradient(90deg,rgba(212,175,55,.05),transparent 62%);opacity:0;transition:opacity .35s ease;z-index:-1; }
.faq-item:hover .faq-question { padding-left:10px; }
.faq-item:hover .faq-question::before,.faq-item.is-open .faq-question::before { opacity:1; }

/* Footer richer backdrop */
.site-footer { background:radial-gradient(850px 430px at 50% 5%,rgba(212,175,55,.07),transparent 68%),linear-gradient(180deg,#030303,#050504 70%,#020202); }
.footer-giant { background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(212,175,55,.015));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 30px 100px rgba(212,175,55,.035); }
.footer-cta { position:relative; }
.footer-cta::before { content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.25; }
.footer-nav a { display:inline-flex;align-items:center;gap:4px; }

/* Reveal gets blur/scale and separate child motion */
.reveal { opacity:0;transform:translate3d(0,34px,0) scale(.985);filter:blur(7px);transition:opacity .9s var(--ease-premium),transform .9s var(--ease-premium),filter .9s var(--ease-premium); }
.reveal.is-visible { opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0); }

@media (max-width:760px) {
  .ambient-scene{opacity:.45}.orb-a{width:110px;height:110px}.ambient-shard{display:none}
  .hero-grid{transform:none;background-size:54px 54px;opacity:.35;mask-image:linear-gradient(to bottom,#000,transparent)}
  .card-icon{border-radius:16px}.join-icon{border-radius:16px}
}
@media (prefers-reduced-motion:reduce) {
  .ambient-orb,.ambient-shard,.hero::after,.hero h1 em,.hero-emblem::before,.staff-avatar-wrap::before{animation:none!important}
  .reveal{filter:none;transition-duration:.01ms!important}
  .btn,.why-card,.join-step,.staff-profile,.stat-item,.hero-emblem{transform:none!important}
}
.header-discord { display:inline-flex;align-items:center;gap:8px; }
.header-discord .ui-icon { width:14px;height:14px;color:var(--gold-2); }
.mobile-menu a .ui-icon { display:inline-block;margin-right:8px;color:var(--gold); }