@font-face {
  font-family: 'RVFont';
  src: url('../assets/rvfont.ttf') format('truetype');
  font-display: block;
}

@property --glow-spread {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --glow-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

:root {
  --spring: linear(
    0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%,
    0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%,
    1.159, 1.163, 1.157, 1.143 30%, 1.088 34.4%,
    1.012 39.3%, 0.949 42.9%, 0.907, 0.879, 0.869 51%,
    0.877 54.4%, 0.902, 0.939 61.4%, 0.967, 0.988,
    1.004 70.1%, 1.012 72.6%, 1.017 75%, 1 100%
  );
  --gradient-hue-1: 210;
  --gradient-hue-2: 215;
  --gradient-sat-1: 38%;
  --gradient-sat-2: 44%;
  --gradient-light-1: 20%;
  --gradient-light-2: 12%;
}

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

body, html, #app {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

#app {
  position: relative;
  overflow: hidden;
  user-select: none;
  background: radial-gradient(
    ellipse at center,
    hsl(var(--gradient-hue-1), var(--gradient-sat-1), var(--gradient-light-1)) 0%,
    hsl(var(--gradient-hue-2), var(--gradient-sat-2), var(--gradient-light-2)) 100%
  );
  animation: gradient-shift 32s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%,100% { --gradient-hue-1:210; --gradient-hue-2:215; --gradient-sat-1:38%; --gradient-sat-2:44%; --gradient-light-1:20%; --gradient-light-2:12%; }
  16.67%  { --gradient-hue-1:205; --gradient-hue-2:222; --gradient-sat-1:40%; --gradient-sat-2:46%; --gradient-light-1:22%; --gradient-light-2:13%; }
  33.33%  { --gradient-hue-1:216; --gradient-hue-2:210; --gradient-sat-1:42%; --gradient-sat-2:40%; --gradient-light-1:23%; --gradient-light-2:14%; }
  50%     { --gradient-hue-1:222; --gradient-hue-2:205; --gradient-sat-1:39%; --gradient-sat-2:43%; --gradient-light-1:21%; --gradient-light-2:13%; }
  66.67%  { --gradient-hue-1:208; --gradient-hue-2:220; --gradient-sat-1:38%; --gradient-sat-2:41%; --gradient-light-1:20%; --gradient-light-2:12%; }
  83.33%  { --gradient-hue-1:213; --gradient-hue-2:213; --gradient-sat-1:41%; --gradient-sat-2:43%; --gradient-light-1:22%; --gradient-light-2:13%; }
}

#app canvas {
  display: block;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

#caustics-canvas {
  z-index: 0;
  opacity: 0.35;
  mix-blend-mode: screen;
}

#particles-canvas {
  z-index: 3;
  pointer-events: none;
}

#goldfish-container {
  position: fixed;
  width: 100%; height: 100%;
  top: 0; left: 0;
  z-index: 2;
  pointer-events: none;
}
#goldfish-container canvas {
  position: absolute !important;
  top: 0; left: 0;
  width: 100% !important; height: 100% !important;
}

#app::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,120,30,0.07)  0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(200,80,20,0.08)   0%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(180,100,0,0.10)   0%, transparent 80%);
  pointer-events: none;
  z-index: 4;
  animation: ambient-shift 42s ease-in-out infinite;
}

@keyframes ambient-shift {
  0%,100% { opacity: 1; }
  25%     { opacity: 0.72; }
  50%     { opacity: 0.88; }
  75%     { opacity: 0.78; }
}

.wordmark-container {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  text-align: center;
  pointer-events: none;
  width: 100%;
  padding: 0 20px;
  will-change: transform;
}

.wordmark {
  font-family: 'RVFont', Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1;
  pointer-events: auto;   /* clickable (container stays non-interactive) */
  cursor: pointer;
}

.wordmark .char {
  display: inline-block;
  color: hsl(calc(360deg * var(--char-percent)), 90%, 75%);
  animation: rainbow-colors 2s linear infinite, float-effect 6s ease-in-out infinite;
  animation-delay: calc(-2s * var(--char-percent)), calc(0.1s * var(--char-index));
  transform-origin: center bottom;
  will-change: transform, color;
}

@keyframes rainbow-colors {
  0%   { color: #81a1c1; }
  25%  { color: #b48ead; }
  50%  { color: #8fbcbb; }
  75%  { color: #ebcb8b; }
  100% { color: #88c0d0; }
}

@keyframes float-effect {
  0%,100% { transform: translateY(0)     scale(1);    }
  25%     { transform: translateY(-15px) rotate(-2deg) scale(1.10); }
  50%     { transform: translateY(-20px) scale(1.20); }
  75%     { transform: translateY(-10px) rotate(2deg)  scale(1.10); }
}

@media (min-width: 1600px)                          { .wordmark { font-size: 9vw;   } }
@media (max-width: 1599px) and (min-width: 1200px) { .wordmark { font-size: 8.5vw; } }
@media (max-width: 1199px) and (min-width: 992px)  { .wordmark { font-size: 8vw;   } }
@media (max-width: 991px)  and (min-width: 768px)  { .wordmark { font-size: 7vw;   } }
@media (max-width: 767px)  and (min-width: 480px)  { .wordmark { font-size: 5rem;  } }
@media (max-width: 479px)                          { .wordmark { font-size: 3.6rem; } }

#dc-copy-toast {
  position: fixed;
  top: 18px; right: -260px;
  z-index: 3000;
  display: flex; align-items: center; gap: 10px;
  background: rgba(8,12,22,0.97);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  transition: right 0.35s cubic-bezier(0.23,1,0.32,1), opacity 0.25s ease;
  opacity: 0;
  min-width: 180px;
}
#dc-copy-toast.dc-toast-in  { right: 18px; opacity: 1; }
#dc-copy-toast.dc-toast-out { right: -260px; opacity: 0; }
.dc-toast-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(88,101,242,0.18);
  border: 1px solid rgba(88,101,242,0.35);
  display: flex; align-items: center; justify-content: center;
  color: #7289da; flex-shrink: 0;
}
.dc-toast-title { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.90); }
.dc-toast-sub   { font-size: 0.68rem; color: rgba(255,255,255,0.38); margin-top: 1px; }

.banner-modal, .avatar-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.88);
  display: none; align-items: center; justify-content: center;
  z-index: 2000;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 20px;
}
.modal-content {
  position: relative;
  max-width: 90%; max-height: 90%;
  display: flex; flex-direction: column; align-items: center;
}
.close-modal {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  z-index: 10;
}
.close-modal:hover { background: rgba(255,255,255,0.20); transform: scale(1.1); }
.close-modal i { font-size: 16px; color: white; }
.enlarged-avatar, .banner-image {
  max-width: 100%; max-height: 80vh;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  border: 2px solid rgba(255,255,255,0.10);
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  #app, #app::before, .wordmark .char { animation: none; }
}