/* =========================================================
   BAMBS.SHOP — Bamboo Theme CSS
   Ultra-precise bamboo visual theme
   ========================================================= */

/* ── CSS Variables ─────────────────────────────────────── */
:root {
  /* Bamboo Palette */
  --bamboo-100: #f1f8e9;
  --bamboo-200: #dcedc8;
  --bamboo-300: #c5e1a5;
  --bamboo-400: #aed581;
  --bamboo-500: #8bc34a;
  --bamboo-600: #6abf69;
  --bamboo-700: #4caf50;
  --bamboo-800: #388e3c;
  --bamboo-900: #1b5e20;
  --bamboo-stalk: #6d9c3f;
  --bamboo-stalk-dark: #4a7c28;
  --bamboo-node: #557a32;
  --bamboo-leaf: #7db657;
  --bamboo-leaf-light: #a5d66a;

  /* Dark Ground */
  --bg-dark: #0c1a0a;
  --bg-card: rgba(15, 28, 12, 0.85);
  --bg-glass: rgba(20, 40, 15, 0.6);
  --bg-glass-2: rgba(30, 55, 20, 0.5);

  /* Text */
  --text-primary: #e8f5e9;
  --text-secondary: #a5d6a7;
  --text-muted: #66bb6a;
  --text-dark: #1b5e20;

  /* Accent Golds */
  --gold: #ffd54f;
  --gold-dark: #f9a825;
  --gold-light: #fff9c4;

  /* Crypto Colors */
  --usdt: #26a17b;
  --btc: #f7931a;
  --eth: #627eea;
  --ltc: #bfbbbb;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 48px rgba(0,0,0,0.5);
  --glow-green: 0 0 20px rgba(106,191,105,0.3);
  --glow-gold: 0 0 20px rgba(255,213,79,0.3);

  /* Border */
  --border: rgba(106,191,105,0.2);
  --border-bright: rgba(106,191,105,0.5);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Transition */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Global Reset ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', 'Noto Sans Georgian', sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.65;
  overflow-x: hidden;
}

/* ── Bamboo Background ──────────────────────────────────── */
.bamboo-bg {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(76,175,80,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(139,195,74,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(27,94,32,0.1) 0%, transparent 60%),
    linear-gradient(180deg, #0c1a0a 0%, #071409 50%, #0a1a07 100%);
  min-height: 100vh;
}

/* ── Bamboo Forest (Hero) ───────────────────────────────── */
.bamboo-forest {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.stalk {
  position: absolute;
  bottom: 0;
  width: 18px;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, var(--bamboo-stalk) 0%, var(--bamboo-stalk-dark) 100%);
  box-shadow: inset -3px 0 6px rgba(0,0,0,0.2), inset 2px 0 4px rgba(255,255,255,0.05);
  animation: bamboosway var(--sway-dur, 4s) ease-in-out infinite var(--sway-delay, 0s);
  transform-origin: bottom center;
}

/* Bamboo node lines */
.stalk::before, .stalk::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: var(--bamboo-node);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.stalk::before { top: 33%; }
.stalk::after  { top: 66%; }

.s1 { left:  3%; height: 55vh; --sway-dur: 3.8s; --sway-delay: 0.0s; width: 14px; opacity: 0.7; }
.s2 { left:  8%; height: 70vh; --sway-dur: 4.2s; --sway-delay: 0.5s; width: 18px; }
.s3 { left: 13%; height: 45vh; --sway-dur: 3.5s; --sway-delay: 1.0s; width: 12px; opacity: 0.6; }
.s4 { left: 20%; height: 80vh; --sway-dur: 4.6s; --sway-delay: 0.3s; width: 20px; opacity: 0.4; }
.s5 { right: 3%; height: 60vh; --sway-dur: 4.0s; --sway-delay: 0.8s; width: 16px; opacity: 0.7; }
.s6 { right: 9%; height: 75vh; --sway-dur: 4.4s; --sway-delay: 0.2s; width: 19px; }
.s7 { right:15%; height: 50vh; --sway-dur: 3.9s; --sway-delay: 1.2s; width: 13px; opacity: 0.5; }
.s8 { right:22%; height: 85vh; --sway-dur: 4.8s; --sway-delay: 0.6s; width: 22px; opacity: 0.3; }

/* Leaves */
.leaf {
  position: absolute;
  width: 60px;
  height: 20px;
  background: linear-gradient(135deg, var(--bamboo-leaf-light), var(--bamboo-leaf));
  border-radius: 50% 0 50% 0;
  opacity: 0.6;
  animation: leafsway var(--leaf-dur, 5s) ease-in-out infinite var(--leaf-delay, 0s);
}

.l1 { top: 20%; left:  9%; transform: rotate(-30deg); --leaf-dur: 4.5s; --leaf-delay: 0.0s; }
.l2 { top: 15%; right: 9%; transform: rotate(150deg); --leaf-dur: 5.2s; --leaf-delay: 0.7s; }
.l3 { top: 30%; left:  4%; transform: rotate(-45deg); --leaf-dur: 4.8s; --leaf-delay: 1.2s; }
.l4 { top: 25%; right: 4%; transform: rotate(120deg); --leaf-dur: 5.0s; --leaf-delay: 0.3s; }
.l5 { top: 40%; left: 15%; transform: rotate(-20deg); --leaf-dur: 4.3s; --leaf-delay: 0.9s; opacity: 0.4; }

/* ── Animations ─────────────────────────────────────────── */
@keyframes bamboosway {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(1.5deg); }
  75%       { transform: rotate(-1.5deg); }
}

@keyframes leafsway {
  0%, 100% { transform: rotate(var(--base-rot, -30deg)) scale(1); }
  50%       { transform: rotate(calc(var(--base-rot, -30deg) + 10deg)) scale(1.05); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(106,191,105,0.3); }
  50%       { box-shadow: 0 0 30px rgba(106,191,105,0.6), 0 0 60px rgba(106,191,105,0.2); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes scrollPulse {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(8px); opacity: 0.5; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes growStalk {
  from { height: 0; }
  to   { height: var(--stalk-h); }
}

/* ── Glass Effect ───────────────────────────────────────── */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
}

/* ── Gradient Text ──────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--bamboo-400) 0%, var(--bamboo-700) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
}

/* ── Bamboo Deco Sections ───────────────────────────────── */
.bamboo-deco {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 38px,
      rgba(106,191,105,0.03) 38px, rgba(106,191,105,0.03) 40px
    );
  pointer-events: none;
  z-index: 0;
}

/* ── Loader ─────────────────────────────────────────────── */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-dark);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px;
  transition: opacity 0.5s, visibility 0.5s;
}
.loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-bamboo {
  width: 60px; height: 120px;
  animation: bamboosway 2s ease-in-out infinite;
}

.loader-text {
  color: var(--text-secondary);
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: pulse-glow 2s infinite;
}

/* ── Scroll indicator ───────────────────────────────────── */
.scroll-arrow {
  width: 24px; height: 24px;
  border-right: 2px solid var(--bamboo-500);
  border-bottom: 2px solid var(--bamboo-500);
  transform: rotate(45deg);
  animation: scrollPulse 1.5s ease-in-out infinite;
}