/* ══════════════════════════════════════
   SRAN.DEV — MAIN STYLESHEET
   Danielle Choster Game Studio
   boldandeasy.ru
══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@200;300;400;500;600;700;900&display=swap');

:root {
  --orange:      #E8621A;
  --orange-dim:  #C44E0F;
  --orange-glow: rgba(232,98,26,0.15);
  --bg:          #0C0B09;
  --surface:     #111009;
  --card:        #181512;
  --card2:       #1E1A16;
  --border:      #2C2824;
  --border-warm: rgba(232,98,26,0.22);
  --text:        #F0EBE3;
  --muted:       #7A7168;
  --faint:       rgba(240,235,227,0.45);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

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

/* ── NOISE ── */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none; z-index:0; opacity:0.5;
}

/* ── AMBIENT ORBS ── */
.orb {
  position:fixed;
  border-radius:50%;
  filter:blur(160px);
  pointer-events:none; z-index:0;
  opacity:0.06;
  animation:drift 16s ease-in-out infinite;
}
.orb-1 { width:700px;height:500px;background:var(--orange);top:-100px;right:-200px; }
.orb-2 { width:450px;height:450px;background:#8B3A0A;bottom:10%;left:-100px;animation-delay:-8s;animation-direction:reverse; }
@keyframes drift { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-50px)} }

/* ── CUSTOM CURSOR (desktop only) ── */
@media (hover:hover) {
  body { cursor:none; }
  a, button, [role="button"] { cursor:none; }
}
.cursor {
  position:fixed; width:9px; height:9px;
  background:var(--orange); border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
}
.cursor-ring {
  position:fixed; width:34px; height:34px;
  border:1px solid rgba(232,98,26,0.5); border-radius:50%;
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:width 0.2s, height 0.2s, border-color 0.2s;
}
.cursor-ring.hov { width:50px; height:50px; border-color:var(--orange); }
@media (hover:none) { .cursor,.cursor-ring { display:none; } }

/* ══ NAV ══ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:20px 48px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(12,11,9,0.85);
  backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(44,40,36,0.7);
  transition:padding 0.3s;
}
nav.scrolled { padding:14px 48px; }

.nav-logo {
  font-family:'Bebas Neue', sans-serif;
  font-size:20px; letter-spacing:3px;
  color:var(--text); text-decoration:none;
  display:flex; align-items:center; gap:8px;
  flex-shrink:0;
}
.nav-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 8px var(--orange);
  animation:blink 2.8s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.25} }

.nav-links {
  display:flex; gap:32px; list-style:none;
  position:absolute; left:50%; transform:translateX(-50%);
}
.nav-links a {
  color:var(--muted); text-decoration:none;
  font-size:11px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  transition:color 0.2s;
  padding:4px 0;
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute;
  bottom:-2px; left:0; right:0; height:1px;
  background:var(--orange);
  transform:scaleX(0); transition:transform 0.2s;
}
.nav-links a:hover, .nav-links a.active { color:var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }

.nav-right {
  display:flex; align-items:center; gap:12px;
}

/* Lang toggle */
.lang-toggle {
  display:flex; background:var(--card);
  border:1px solid var(--border); border-radius:100px; padding:3px;
}
.lang-btn {
  font-size:10px; font-weight:700; letter-spacing:1px;
  padding:5px 11px; border-radius:100px;
  border:none; background:transparent; color:var(--muted);
  transition:all 0.2s;
}
.lang-btn.active { background:var(--orange); color:#fff; }

.btn-nav-tg {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--border-warm); color:var(--orange);
  font-size:11px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; padding:8px 16px; border-radius:4px;
  text-decoration:none; transition:all 0.2s; background:transparent;
}
.btn-nav-tg:hover { background:var(--orange-glow); border-color:var(--orange); }

/* Mobile burger */
.mobile-toggle {
  display:none; flex-direction:column; gap:5px;
  width:38px; height:38px; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--border);
  border-radius:8px;
}
.mobile-toggle span { width:16px; height:1.5px; background:var(--text); border-radius:2px; transition:0.3s; }
.mobile-toggle.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.mobile-toggle.open span:nth-child(2) { opacity:0; }
.mobile-toggle.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position:fixed; top:70px; left:12px; right:12px;
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:20px 24px;
  display:none; flex-direction:column; gap:14px;
  z-index:400; backdrop-filter:blur(20px);
}
.mobile-menu a {
  color:var(--text); text-decoration:none;
  font-size:15px; font-weight:500;
  padding:6px 0; border-bottom:1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom:none; }
.mobile-menu .lang-row { display:flex; gap:8px; padding-top:4px; }
.mobile-menu.open { display:flex; }

/* ══ SECTION UTILITIES ══ */
.section-wrap {
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto;
  padding:100px 48px;
}
.section-wrap.narrow { max-width:860px; }

.s-label {
  display:flex; align-items:center; gap:10px;
  font-size:10px; font-weight:700;
  letter-spacing:4px; text-transform:uppercase;
  color:var(--orange); margin-bottom:16px;
}
.s-label::before { content:''; width:20px; height:1px; background:var(--orange); }

.s-title {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(52px, 8vw, 96px);
  letter-spacing:2px; line-height:0.92;
  color:var(--text); margin-bottom:24px;
}
.s-title em {
  font-style:normal;
  -webkit-text-stroke:1px var(--orange);
  color:transparent;
}
.s-sub {
  font-size:15px; font-weight:300;
  color:var(--faint); line-height:1.8;
  max-width:580px;
}

/* ══ BUTTONS ══ */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--orange); color:#fff;
  font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  padding:14px 28px; border-radius:4px;
  text-decoration:none; border:none;
  transition:all 0.2s;
}
.btn-primary:hover {
  background:var(--orange-dim);
  box-shadow:0 0 40px rgba(232,98,26,0.4);
  transform:translateY(-2px);
}
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--faint);
  font-size:11px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  padding:13px 28px; border-radius:4px;
  border:1px solid var(--border); text-decoration:none;
  transition:all 0.2s;
}
.btn-ghost:hover { border-color:var(--border-warm); color:var(--text); }

/* ══ FOOTER ══ */
footer {
  position:relative; z-index:1;
  border-top:1px solid var(--border);
  padding:36px 48px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.footer-logo {
  font-family:'Bebas Neue', sans-serif;
  font-size:18px; letter-spacing:3px; color:var(--text);
}
.footer-copy { font-size:11px; color:var(--muted); margin-top:4px; }
.footer-links { display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a {
  color:var(--muted); text-decoration:none;
  font-size:11px; letter-spacing:1px; text-transform:uppercase;
  transition:color 0.2s;
}
.footer-links a:hover { color:var(--text); }

/* ══ REVEAL ANIMATION ══ */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity 0.75s ease, transform 0.75s ease;
}
.reveal.vis { opacity:1; transform:none; }
.reveal-d1 { transition-delay:0.1s; }
.reveal-d2 { transition-delay:0.2s; }
.reveal-d3 { transition-delay:0.3s; }

/* ══ RESPONSIVE NAV ══ */
@media (max-width:900px) {
  nav { padding:16px 20px; }
  nav.scrolled { padding:12px 20px; }
  .nav-links { display:none; }
  .btn-nav-tg { display:none; }
  .nav-right .lang-toggle { display:none; }
  .mobile-toggle { display:flex; }
  .section-wrap { padding:72px 20px; }
  footer { padding:28px 20px; flex-direction:column; align-items:flex-start; }
}