@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root{
  --bg:#0a0a0a;--bg2:#0e0e0e;--card:#141414;--elev:#1e1e1e;--input:#141414;
  --b1:rgba(255,255,255,.06);--b2:rgba(255,255,255,.1);
  --t1:#fff;--t2:#a0a0a0;--t3:#5a5a5a;
  --ac:#15B9F8;--ac2:#f09070;
  --acg:#15b8f815;--acs:#15b8f815;--acb:#15b8f898;
  --danger:#ef4444;--ok:#22c55e;
  --grad:#15B9F8;
  --sec-py:clamp(2.5rem,5vw,6rem);
  /* Aliases for existing pages — GLASSMORPHISM upgrade */
  --bg-primary:#070710;--bg-secondary:#0c0c1a;
  /* Glass cards: layered translucent surfaces over the gradient background */
  --bg-card:rgba(20,20,32,0.55);
  --bg-card-hover:rgba(28,28,42,0.65);
  --bg-elevated:rgba(30,30,46,0.6);
  --bg-input:rgba(20,20,32,0.5);
  /* Refined borders for glass effect */
  --border-primary:rgba(255,255,255,.08);
  --border-secondary:rgba(255,255,255,.14);
  --border-hover:rgba(255,255,255,.22);
  --text-primary:#fff;--text-secondary:#b8b8c8;--text-muted:#6a6a7a;
  --accent:#15B9F8;--accent-hover:#15B9F8;--accent-glow:rgba(232,124,91,.25);
  --accent-subtle:rgba(232,124,91,.08);--accent-border:rgba(232,124,91,.2);
  --overlay:rgba(0,0,0,.8);
  /* Glass effect mixins */
  --glass-blur:blur(24px) saturate(1.4);
  --glass-shadow:0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  --glass-shadow-hover:0 12px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Visible animated background — drifting glass blobs */
body::before{
  content:"";
  position:fixed;
  inset:-200px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(600px circle at 15% 20%, rgba(34,197,94,0.18), transparent 60%),
    radial-gradient(700px circle at 85% 75%, rgba(232,124,91,0.20), transparent 60%),
    radial-gradient(500px circle at 50% 50%, rgba(139,92,246,0.15), transparent 70%);
  filter:blur(20px);
  animation:bgDrift 20s ease-in-out infinite alternate;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(7,7,16,0.4), rgba(7,7,16,0.7));
}


@keyframes bgDrift{
  0% { transform:translate(0,0) scale(1); }
  50% { transform:translate(40px,-30px) scale(1.05); }
  100% { transform:translate(-30px,40px) scale(0.98); }
}

/* Auto-apply glass to common card patterns — backdrop-filter on bg-card surfaces */
[style*="var(--bg-card)"], [style*="var(--bg-elevated)"], [style*="var(--bg-input)"]{
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Subtle hover lift on interactive glass surfaces */
button[style*="var(--bg-elevated)"]:hover, button[style*="var(--bg-card)"]:hover{
  background:var(--bg-card-hover) !important;
  box-shadow:var(--glass-shadow-hover);
  transform:translateY(-1px);
  transition:all 0.2s ease;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body,#root{width:100%;min-height:100vh;overflow-x:hidden}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--t1);line-height:1.6;-webkit-font-smoothing:antialiased;font-size:14px}
h1,h2,h3,.hd{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-.03em}
::selection{background:var(--ac);color:#fff}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--b2);border-radius:10px}

/* ══════════════════════════════════════════
   ELEGANT AMBIENT LAYERS — particles + curves
   Used by Bootcamp pages (dashboard + room)
   ══════════════════════════════════════════ */

   .footer-links a:hover {
    color: #15B9F8 !important
   }

   .nav-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(21,185,248,0.12);
    border: 1px solid rgba(21,185,248,0.3);
    color: var(--ac);
    font-size: 11px !important;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.2s;
}

.nav-pill .dot {
    width: 6px;
    height: 6px;
    background: #22C55E;
    border-radius: 50%;
    animation: blink 1.8s infinite;
}

.btn-ghost {
    color: var(--ac);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgba(21,185,248,0.3);
    transition: all 0.2s;
}

.btn-sky {
    background: var(--ac);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
}

.nav-items-list > div .hover-color-blue:hover{
  color: var(--ac) !important
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
}
50% {
    opacity: 0.3;
}
}

/* Particle field — single element with many box-shadows = many dots */
.gx-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    /* Warm tones (orange family) — denser */
    120px 80px #e87c5b, 340px 200px #f4a261, 580px 120px #e87c5b, 820px 240px #d4614a,
    1060px 90px #f4a261, 1280px 220px #e87c5b, 1520px 140px #d4614a, 1760px 280px #f4a261,
    180px 380px #e87c5b, 420px 460px #d4614a, 660px 520px #f4a261, 900px 400px #e87c5b,
    1140px 540px #f4a261, 1380px 460px #d4614a, 1620px 580px #e87c5b, 1820px 420px #f4a261,
    80px 680px #d4614a, 320px 760px #e87c5b, 560px 820px #f4a261, 800px 700px #e87c5b,
    1040px 860px #d4614a, 1280px 780px #f4a261, 1520px 880px #e87c5b, 1760px 740px #d4614a,
    220px 940px #f4a261, 480px 1020px #e87c5b, 720px 980px #d4614a, 980px 1080px #f4a261,
    1220px 1000px #e87c5b, 1460px 1100px #d4614a, 1700px 1040px #f4a261,
    /* Cool accents — sparser for contrast */
    260px 160px rgba(139,92,246,0.6), 720px 360px rgba(34,197,94,0.5),
    1180px 320px rgba(139,92,246,0.6), 1640px 480px rgba(34,197,94,0.5),
    380px 620px rgba(139,92,246,0.6), 940px 740px rgba(34,197,94,0.5),
    1340px 660px rgba(139,92,246,0.6), 1700px 920px rgba(34,197,94,0.5);
  animation: gxParticleDrift 18s ease-in-out infinite alternate;
  opacity: 1.0;
}

/* Second layer offset for parallax feel */
.gx-particles-2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    240px 60px rgba(244,162,97,0.7), 540px 180px rgba(232,124,91,0.6),
    860px 100px rgba(212,97,74,0.7), 1180px 220px rgba(244,162,97,0.6),
    1500px 140px rgba(232,124,91,0.7), 380px 340px rgba(212,97,74,0.6),
    700px 420px rgba(244,162,97,0.7), 1020px 380px rgba(232,124,91,0.6),
    1340px 480px rgba(212,97,74,0.7), 1660px 360px rgba(244,162,97,0.6),
    140px 580px rgba(232,124,91,0.7), 460px 660px rgba(212,97,74,0.6),
    780px 720px rgba(244,162,97,0.7), 1100px 640px rgba(232,124,91,0.6),
    1420px 760px rgba(212,97,74,0.7), 1740px 600px rgba(244,162,97,0.6),
    300px 880px rgba(232,124,91,0.7), 620px 960px rgba(212,97,74,0.6),
    940px 920px rgba(244,162,97,0.7), 1260px 1020px rgba(232,124,91,0.6),
    1580px 940px rgba(212,97,74,0.7);
  animation: gxParticleDrift2 24s ease-in-out infinite alternate;
  opacity: 0.9;
}

@keyframes gxParticleDrift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(30px, -20px); }
}
@keyframes gxParticleDrift2 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-25px, 25px); }
}

/* Curve overlay — faint SVG paths via CSS background trick */
.gx-curves {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080' preserveAspectRatio='none'><path d='M0,400 Q480,200 960,420 T1920,380' fill='none' stroke='%23e87c5b' stroke-width='2' opacity='0.36'/><path d='M0,700 Q480,900 960,680 T1920,720' fill='none' stroke='%23f4a261' stroke-width='2' opacity='0.28'/><path d='M0,200 Q640,100 1280,260 T1920,180' fill='none' stroke='%23d4614a' stroke-width='2' opacity='0.22'/><path d='M0,900 Q640,1000 1280,860 T1920,940' fill='none' stroke='%23e87c5b' stroke-width='2' opacity='0.24'/></svg>");
  background-size: cover;
  background-position: center;
  animation: gxCurveBreathe 5s ease-in-out infinite;
}

@keyframes gxCurveBreathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1.0; }
}

/* Content above all ambient layers */
.gx-content { position: relative; z-index: 1; }


/* ══════════════════════════════════════════
   RESPONSIVE FONT SIZING
   Mobile: 14px base (compact)
   Tablet: 15px base
   Desktop: 18px base (~30% larger)
   ══════════════════════════════════════════ */

/* Tablet (768px+) */
@media (min-width: 768px) {
  body { font-size: 15px; }
}

/* Desktop (1024px+) — ~30% bump */
@media (min-width: 1024px) {
  body { font-size: 18px; }

  /* Navbar */
  .glass-nav { font-size: 16px; }
  .glass-nav a, .glass-nav button { font-size: 15px; }

  /* Page headings */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.3rem; }

  /* Dashboard stats, labels, badges */
  .text-xs { font-size: 0.8rem !important; }
  .text-sm { font-size: 0.95rem !important; }
  .text-base { font-size: 1.125rem !important; }
  .text-lg { font-size: 1.3rem !important; }
  .text-xl { font-size: 1.5rem !important; }
  .text-2xl { font-size: 1.875rem !important; }
  .text-3xl { font-size: 2.25rem !important; }

  /* Specific tiny text bumps */
  .text-\[10px\] { font-size: 12px !important; }
  .text-\[11px\] { font-size: 13px !important; }
  .text-\[12px\] { font-size: 14px !important; }
}

/* Large desktop (1440px+) */
@media (min-width: 1440px) {
  body { font-size: 19px; }
  .text-xs { font-size: 0.85rem !important; }
  .text-sm { font-size: 1rem !important; }
}

/* Mobile (<768px) — keep compact */
@media (max-width: 767px) {
  body { font-size: 13px; }
  h1 { font-size: 1.25rem; }
  h2 { font-size: 1.1rem; }
  h3 { font-size: 1rem; }
  .text-xs { font-size: 0.7rem !important; }
  .text-sm { font-size: 0.8rem !important; }
}

/* Animations */
@keyframes charReveal{0%{opacity:0;transform:translateY(50px) rotateX(-35deg);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
@keyframes liquidReveal{0%{opacity:0;transform:translateY(40px) scaleY(.7);filter:blur(4px)}60%{transform:translateY(-5px) scaleY(1.02)}100%{opacity:1;transform:none;filter:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes pulse-live{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes glow{0%,100%{box-shadow:0 0 20px var(--acg)}50%{box-shadow:0 0 35px var(--acg)}}
@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes scrollDot{0%{transform:translateY(0);opacity:1}50%{transform:translateY(5px);opacity:.3}100%{transform:translateY(0);opacity:1}}
@keyframes blobM{0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;transform:translate(0,0)}50%{border-radius:50% 60% 30% 60%/30% 60% 70% 40%;transform:translate(-15px,15px)}}

.kinetic-char{display:inline-block;animation:charReveal .7s cubic-bezier(.22,1,.36,1) forwards;opacity:0}
.kinetic-word{display:inline-block;animation:liquidReveal .9s cubic-bezier(.22,1,.36,1) forwards;opacity:0}
.anim-up{animation:fadeUp .8s cubic-bezier(.22,1,.36,1) forwards}
.anim-fade{animation:fadeIn .5s ease forwards}
.anim-slide{animation:slideDown .3s ease forwards}
.anim-glow{animation:glow 3s ease-in-out infinite}
.d1{animation-delay:.1s;opacity:0}.d2{animation-delay:.3s;opacity:0}.d3{animation-delay:.6s;opacity:0}
.d4{animation-delay:.9s;opacity:0}.d5{animation-delay:1.1s;opacity:0}.d6{animation-delay:1.3s;opacity:0}

/* Scroll reveals */
.rv{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.rv.vis{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-50px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.rv-l.vis{opacity:1;transform:none}
.rv-s{opacity:0;transform:scale(.88);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.rv-s.vis{opacity:1;transform:none}
.rv-3d{opacity:0;transform:perspective(600px) rotateY(-6deg) translateX(-20px);transition:all .9s cubic-bezier(.22,1,.36,1)}
.rv-3d.vis{opacity:1;transform:none}
.rd1{transition-delay:.06s}.rd2{transition-delay:.12s}.rd3{transition-delay:.18s}
.rd4{transition-delay:.24s}.rd5{transition-delay:.3s}.rd6{transition-delay:.36s}

/* Effects */
.tg{background:var(--grad);background-size:200% 200%;animation:gradShift 4s ease infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.blob{position:absolute;background:radial-gradient(circle,rgba(232,124,91,.15),transparent 70%);animation:blobM 18s ease-in-out infinite;filter:blur(50px);pointer-events:none}
.cg{transition:all .35s cubic-bezier(.22,1,.36,1)}
.cg:hover{border-color:var(--acb)!important;box-shadow:0 8px 30px var(--acg);transform:translateY(-4px)}
.al{display:block;width:40px;height:2px;border-radius:1px;background:var(--ac);margin:0 auto}

/* Glassmorphism nav - mosaic blur effect */
.glass-nav{backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);background:rgba(10,10,10,.6)!important}

/* Legacy animation classes used by dashboard pages */
.animate-fade-in-up{animation:fadeUp .8s cubic-bezier(.22,1,.36,1) forwards}
.animate-fade-in{animation:fadeIn .5s ease forwards}
.animate-slide-down{animation:slideDown .3s ease forwards}
.stagger-1{animation-delay:.1s;opacity:0}.stagger-2{animation-delay:.3s;opacity:0}
.stagger-3{animation-delay:.5s;opacity:0}.stagger-4{animation-delay:.7s;opacity:0}
.stagger-5{animation-delay:.9s;opacity:0}.stagger-6{animation-delay:1.1s;opacity:0}

/* Date/time input calendar icon — make visible on dark bg */
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter:invert(1);
  cursor:pointer;
  opacity:0.7;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{
  opacity:1;
}
input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1);
  cursor:pointer;
  opacity:0.7;
}


/* Glass cards — used by bootcamp dashboard list items */
.bcd-glass {
  background: rgba(20,20,32,0.55) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.bcd-glass:hover {
  background: rgba(28,28,42,0.65) !important;
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  transform: translateY(-4px) !important;
}
.bcd-glass-live {
  border-color: rgba(34,197,94,0.30) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 24px rgba(34,197,94,0.15), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.bcd-glass-live:hover {
  border-color: rgba(34,197,94,0.45) !important;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5), 0 0 32px rgba(34,197,94,0.25), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}