/* ══════════════════════════════════════════════════════
   TiME 2026 — FINAL VISUAL FIXES v2026.100
   ══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   1. CURSOR — Small dot ONLY, No big ring lag
   ═══════════════════════════════════════════ */
/* Kill the outer lagging ring completely */
#c-ring { display: none !important; }

/* Small dot — stays glued to cursor, no delay */
#c-dot {
  width: 8px !important;
  height: 8px !important;
  background: radial-gradient(circle, rgba(240,160,255,1) 0%, rgba(183,33,255,0.8) 100%) !important;
  box-shadow: 0 0 12px rgba(183,33,255,0.9), 0 0 24px rgba(183,33,255,0.4) !important;
  border-radius: 50% !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  will-change: left, top !important;
}
/* Make dot slightly bigger on interactive elements */
body.custom-cursor-on a:hover ~ #c-dot,
body.custom-cursor-on button:hover ~ #c-dot {
  transform: translate(-50%, -50%) scale(1.5) !important;
}

/* ═══════════════════════════════════════════
   2. MOUSE TRAIL — Gentle purple sparkles
   ═══════════════════════════════════════════ */
.cursor-trail {
  position: fixed !important;
  pointer-events: none !important;
  z-index: 99998 !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: rgba(200, 80, 255, 0.9) !important;
  box-shadow: 0 0 8px rgba(183, 33, 255, 0.8) !important;
  transform: translate(-50%, -50%) !important;
  animation: trailVanish 0.55s ease-out forwards !important;
  mix-blend-mode: screen !important;
}
@keyframes trailVanish {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
}

/* ═══════════════════════════════════════════
   3. SEA RIPPLE — Clean oval wake
   ═══════════════════════════════════════════ */
.sea-ripple {
  position: fixed !important;
  pointer-events: none !important;
  z-index: 9997 !important;
  width: 30px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid rgba(183, 33, 255, 0.5) !important;
  animation: ovalWake 1.2s cubic-bezier(0.2,0.8,0.3,1) forwards !important;
}
@keyframes ovalWake {
  0%   { opacity: 0.8; transform: translate(-50%,-50%) scale(0.2) rotate(var(--wake-angle,0deg)); }
  40%  { opacity: 0.4; transform: translate(-50%,-50%) scale(1.3) rotate(var(--wake-angle,0deg)); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(2.8) rotate(var(--wake-angle,0deg)); border-color: transparent; }
}

.sea-splash {
  position: fixed !important;
  pointer-events: none !important;
  z-index: 9997 !important;
  width: 3px !important; height: 3px !important;
  border-radius: 50% !important;
  background: rgba(220, 140, 255, 0.85) !important;
  box-shadow: 0 0 5px rgba(183,33,255,0.6) !important;
  animation: dropVanish 0.75s ease-out forwards !important;
}
@keyframes dropVanish {
  0%   { opacity: 1; transform: translate(-50%,-50%); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px))) scale(0); }
}

/* ═══════════════════════════════════════════
   4. TiME LOGO — Alive, bright neon glow
   ═══════════════════════════════════════════ */
#brand-word {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  filter: none !important;
}
#brand-word.on {
  animation: logoBreathe 3.5s ease-in-out infinite !important;
}
@keyframes logoBreathe {
  0%, 100% {
    color: #ffffff !important;
    text-shadow:
      0 0 20px rgba(220,130,255,1),
      0 0 50px rgba(183,33,255,0.85),
      0 0 100px rgba(150,0,255,0.5),
      0 2px 6px rgba(0,0,0,1);
  }
  50% {
    color: #f0d8ff !important;
    text-shadow:
      0 0 30px rgba(240,180,255,1),
      0 0 70px rgba(200,60,255,1),
      0 0 140px rgba(183,33,255,0.7),
      0 0 220px rgba(120,0,200,0.35),
      0 2px 6px rgba(0,0,0,1);
  }
}

/* ═══════════════════════════════════════════
   5. DYNAMIC FRAME — Subtle purple border
   ═══════════════════════════════════════════ */
.dynamic-frame {
  border: 1.5px solid rgba(183,33,255,0.45) !important;
  border-radius: 28px !important;
  box-shadow:
    0 0 30px rgba(183,33,255,0.18),
    0 0 60px rgba(183,33,255,0.06),
    inset 0 0 20px rgba(183,33,255,0.04) !important;
  animation: framePulse 5s ease-in-out infinite !important;
}
@keyframes framePulse {
  0%,100% { box-shadow: 0 0 30px rgba(183,33,255,0.18), 0 0 60px rgba(183,33,255,0.06); }
  50%      { box-shadow: 0 0 50px rgba(183,33,255,0.35), 0 0 100px rgba(183,33,255,0.12); }
}

/* ═══════════════════════════════════════════
   6. SOCIAL CARDS — Clean glass + brand icon glow on hover
   ═══════════════════════════════════════════ */
.social-card {
  background: rgba(10,5,20,0.72) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
  overflow: hidden !important;
  position: relative !important;
}
.social-card:hover {
  transform: translateY(-5px) scale(1.03) !important;
}

/* Facebook */
.social-card[data-platform="fb"]:hover {
  border-color: rgba(24,119,242,0.5) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4), 0 0 20px rgba(24,119,242,0.25) !important;
}
.social-card[data-platform="fb"]:hover .social-icon { fill: #1877f2 !important; filter: drop-shadow(0 0 8px #1877f2) !important; }

/* Instagram */
.social-card[data-platform="ig"]:hover {
  border-color: rgba(225,48,108,0.5) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4), 0 0 20px rgba(225,48,108,0.25) !important;
}
.social-card[data-platform="ig"]:hover .social-icon { fill: #e1306c !important; filter: drop-shadow(0 0 8px #e1306c) !important; }

/* TikTok */
.social-card[data-platform="tt"]:hover {
  border-color: rgba(255,255,255,0.35) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4), 0 0 20px rgba(255,255,255,0.2) !important;
}
.social-card[data-platform="tt"]:hover .social-icon { fill: #ffffff !important; filter: drop-shadow(0 0 8px #ffffff) !important; }

/* Snapchat */
.social-card[data-platform="sc"]:hover {
  border-color: rgba(255,252,0,0.45) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4), 0 0 20px rgba(255,252,0,0.2) !important;
}
.social-card[data-platform="sc"]:hover .social-icon { fill: #fffc00 !important; filter: drop-shadow(0 0 8px #fffc00) !important; }

/* YouTube */
.social-card[data-platform="yt"]:hover {
  border-color: rgba(255,0,0,0.5) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4), 0 0 20px rgba(255,0,0,0.25) !important;
}
.social-card[data-platform="yt"]:hover .social-icon { fill: #ff0000 !important; filter: drop-shadow(0 0 8px #ff0000) !important; }

/* Telegram */
.social-card[data-platform="tg"]:hover {
  border-color: rgba(42,171,238,0.5) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4), 0 0 20px rgba(42,171,238,0.25) !important;
}
.social-card[data-platform="tg"]:hover .social-icon { fill: #2aabee !important; filter: drop-shadow(0 0 8px #2aabee) !important; }

/* ═══════════════════════════════════════════
   7. CREATE ACCOUNT BUTTON — Elegant shimmer
   ═══════════════════════════════════════════ */
.btn-create-account {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
.btn-create-account::after {
  content: '';
  position: absolute; top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: skewX(-25deg);
  animation: shimmerBtn 4s ease-in-out infinite;
}
@keyframes shimmerBtn { 0%,75%,100%{left:-75%} 40%{left:130%} }
.btn-create-account:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 0 40px rgba(183,33,255,0.35), 0 0 80px rgba(183,33,255,0.12) !important;
  border-color: rgba(220,100,255,0.8) !important;
}

/* ═══════════════════════════════════════════
   8. REMOVE ANNOYING SIDE GLOW / FOG
   ═══════════════════════════════════════════ */
.fog, .fog-a, .fog-b { display: none !important; }
/* Keep cosmic glow but much more subtle */
.cosmic-glow {
  opacity: 0 !important;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(162,0,255,0.08) 0%, transparent 65%) !important;
}
body.risen .cosmic-glow { opacity: 1 !important; }

/* Kill the side border vignette glow */
body::before, body::after { display: none !important; }

/* ═══════════════════════════════════════════
   9. STARS — Very slow and calm
   ═══════════════════════════════════════════ */
.star {
  animation: starCalmBlink var(--d, 10s) var(--k, 0s) ease-in-out infinite !important;
}
@keyframes starCalmBlink {
  0%, 100% { opacity: 0.03; transform: scale(1); }
  50%       { opacity: 0.2;  transform: scale(1.05); }
}

/* ═══════════════════════════════════════════
   10. GENERAL CLEANUP — No squares, no grids
   ═══════════════════════════════════════════ */
#grid-layer { display: none !important; }
#l-beam, #l-line { display: none !important; }

/* Scrollbar polish */
* { scrollbar-width: thin; scrollbar-color: rgba(183,33,255,0.3) transparent; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: rgba(183,33,255,0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(183,33,255,0.6); }
::selection { background: rgba(183,33,255,0.35); color: #fff; }