@import url('/web/fonts/fonts.css');

:root {
  --bg: #06060c;
  --bg2: #0a0a14;
  --card: #0d0d1a;
  --card2: #111122;
  --border: rgba(255,255,255,0.05);
  --accent: #60b0ff;
  --accent-dim: rgba(96,176,255,0.08);
  --accent-glow: rgba(96,176,255,0.15);
  --text: #5a5a78;
  --white: #d0d0e0;
  --green: #6aaa30;
  --green-dim: rgba(106,170,48,0.08);
  --red: #e04040;
  --red-dim: rgba(224,64,64,0.08);
  --blue: #5865F2;
  --muted: #4e4e6a;
  --rad: #92a525;
  --rad2: #6b8a1e;
  --dire: #c23c2a;
  --dire2: #8a2a1e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(96,176,255,0.2); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(96,176,255,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(96,176,255,0.25); }
* { scrollbar-width: thin; scrollbar-color: rgba(96,176,255,0.15) transparent; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--white); }


/* Shared animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.4s ease both; }

/* Select / dropdown fix (prevent white browser default) */
select {
  background: #0a0a18 !important;
  color: #eaeaf4 !important;
  border: 1px solid var(--border);
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 8px 28px 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2360b0ff' d='M0 0l5 6 5-6z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}
select option {
  background: #0a0a18 !important;
  color: #eaeaf4 !important;
}




/* ═══ Global Footer (consistent across all pages) ═══ */
.ph-footer{position:fixed !important;bottom:0 !important;left:0;right:0;z-index:100;background:rgba(10,10,20,0.75);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,0.04);padding:0;pointer-events:none;}
.ph-footer-inner{max-width:1400px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:.38rem;color:rgba(255,255,255,0.2);pointer-events:auto;}
.ph-footer-copy{letter-spacing:.5px;text-transform:uppercase;}
.ph-footer-nav{display:flex;gap:16px;}
.ph-footer-nav a{color:rgba(255,255,255,0.25);text-decoration:none;transition:color .15s;letter-spacing:.3px;}
.ph-footer-nav a:hover{color:var(--accent);}
@media (max-width:600px){.ph-footer-inner{flex-direction:column;gap:4px;padding:6px 12px;}.ph-footer-nav{gap:12px;}}
/* Ensure page content has space for fixed footer */
body:not(:has(#fp)) main,
body:not(:has(#fp)) .wrap,
body:not(:has(#fp)) .container,
body:not(:has(#fp)) .aw{padding-bottom:60px;}


/* ═══ Page fade transitions (opacity only) ═══ */
html,body{min-height:100vh;}
body{transition:opacity .2s ease;}
body.pt-fade-out{opacity:0;}
body.pt-fade-in{opacity:0;transition:none;}


/* ══════════════════════════════════════════════════
   Modern Revamp 2026 — global effects
   ══════════════════════════════════════════════════ */

/* Scroll-triggered fade-in */
.fade-in-up{opacity:0;transform:translateY(22px);transition:opacity .85s cubic-bezier(.2,.9,.2,1),transform .85s cubic-bezier(.2,.9,.2,1);will-change:opacity,transform;}
.fade-in-up.visible{opacity:1;transform:translateY(0);}
.fade-in-up.delay-1{transition-delay:.08s;}
.fade-in-up.delay-2{transition-delay:.16s;}
.fade-in-up.delay-3{transition-delay:.24s;}
.fade-in-up.delay-4{transition-delay:.32s;}

/* (background gradient mesh removed — plain bg) */
@media (prefers-reduced-motion: reduce){body::before{animation:none;}}

/* Custom cursor glow */





/* legacy dot — hide if still in DOM */

@media (hover:none),(pointer:coarse){}


/* Parallax card hover */
.mr-parallax{transition:transform .45s cubic-bezier(.2,.9,.2,1);will-change:transform;}

/* Text reveal per-character */
.mr-reveal-char{display:inline-block;opacity:0;transform:translateY(18px) rotateX(-40deg);
  animation:mrCharIn .75s cubic-bezier(.2,1.2,.3,1) both;
  transform-origin:0 100%;}
@keyframes mrCharIn{to{opacity:1;transform:translateY(0) rotateX(0);}}

/* Queue breathing glow (applied when queue has players) */
.mr-breathing{animation:mrBreathe 3.2s ease-in-out infinite;}
@keyframes mrBreathe{
  0%,100%{box-shadow:0 0 0 1px rgba(96,176,255,0.08),0 0 22px rgba(96,176,255,0.10);}
  50%    {box-shadow:0 0 0 1px rgba(96,176,255,0.22),0 0 46px rgba(96,176,255,0.22);}
}

/* Hero title letter-spread on load */
.mr-hero-title{animation:mrHeroSpread 1.4s cubic-bezier(.2,.95,.25,1) both;}
@keyframes mrHeroSpread{
  0%  {letter-spacing:2px;opacity:0;filter:blur(8px);}
  40% {opacity:1;filter:blur(0);}
  60% {letter-spacing:14px;}
  100%{letter-spacing:10px;}
}

/* Subtle gradient sweep across hero (optional, used via class) */
.mr-sweep{position:relative;overflow:hidden;}
.mr-sweep::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.14) 50%,transparent 70%);
  transform:translateX(-120%);
  animation:mrSweep 3.2s cubic-bezier(.2,.9,.2,1) 1.2s 1 both;
}
@keyframes mrSweep{to{transform:translateX(120%);}}

/* Fullpage stagger — children of active page fade in */
.fp-page.active .fi,
.fp-page.active .mr-stagger > *{animation:mrStagger .7s cubic-bezier(.2,.9,.2,1) both;}
@keyframes mrStagger{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

/* Subtle motion blur during page transitions */
.fp-page.exit-up,.fp-page.exit-down{filter:blur(3px) brightness(.85) !important;}

/* Number counter helper (used by JS) */
.mr-count{font-variant-numeric:tabular-nums;}