/* Fravior theme.css — extracted + cleaned from static code.html */
html,body{background:#0e0d17;}

/* ---- block ---- */
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* Marquee track: 4 identical groups, each ending with pr-6, so -50% (2 groups) loops gaplessly. */
.fravior-marquee-track { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .fravior-marquee-track { animation: none !important; } }
/* Desktop capsule must not override Tailwind's `hidden` on mobile. */
@media (max-width: 767px) { #nav-capsule-container { display: none !important; } }
/* Anchored sections must clear the fixed header. */
section[id] { scroll-margin-top: 84px; }
@media (min-width: 768px) { section[id] { scroll-margin-top: 96px; } }

/* ---- block ---- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
  .reflective-glass {
    background: linear-gradient(135deg, rgba(32, 30, 41, 0.65) 0%, rgba(19, 18, 29, 0.5) 100%);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.15), 0 16px 36px -12px rgba(0, 0, 0, 0.55);
  }
  .reflective-glass-card {
    background: linear-gradient(145deg, rgba(42, 41, 52, 0.45) 0%, rgba(20, 19, 28, 0.7) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.18), 0 20px 40px -15px rgba(0, 0, 0, 0.5);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reflective-glass-card:hover {
    transform: translateY(-4px);
    border-color: rgba(198, 191, 255, 0.4);
    box-shadow: inset 0 1px 3px 0 rgba(255, 255, 255, 0.4), 0 25px 50px -10px rgba(108, 92, 231, 0.35), 0 0 35px rgba(122, 83, 242, 0.3);
  }
  .violet-glow-text {
    text-shadow: 0 0 35px rgba(198, 191, 255, 0.45);
  }
  @keyframes pulseSlow {
    0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.28; }
    50% { transform: scale(1.1) translate(25px, -20px); opacity: 0.45; }
  }
  .animate-ambient-1 {
    animation: pulseSlow 16s ease-in-out infinite alternate;
  }
  .animate-ambient-2 {
    animation: pulseSlow 20s ease-in-out infinite alternate-reverse;
  }

  /* Liquid Mercury / Water Wave Shimmer Keyframe */
  @keyframes liquidWave {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  /* Refined Fluid Luminous Water / Liquid Mercury Bubble Indicator */
  .glowing-indicator-bubble {
    position: absolute;
    pointer-events: none;
    border-radius: 9999px;
    background: radial-gradient(circle at 50% 30%, rgba(216, 180, 254, 0.25) 0%, rgba(142, 84, 233, 0.4) 40%, rgba(108, 92, 231, 0.25) 75%, transparent 100%);
    border: 1.5px solid rgba(216, 180, 254, 0.9);
    box-shadow: 0 0 35px rgba(108, 92, 231, 0.65), 0 0 15px rgba(168, 85, 247, 0.85), inset 0 1px 3px rgba(255, 255, 255, 0.7), inset 0 -2px 8px rgba(108, 92, 231, 0.45);
    transition: left 0.45s cubic-bezier(0.25, 1.25, 0.4, 1), top 0.45s cubic-bezier(0.25, 1.25, 0.4, 1), width 0.4s cubic-bezier(0.25, 1.25, 0.4, 1), height 0.4s cubic-bezier(0.25, 1.25, 0.4, 1), opacity 0.25s ease-out;
    z-index: 1;
    overflow: visible;
  }

  /* Water Specular Tension Glint along top rim */
  .glowing-indicator-bubble::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 15%;
    right: 15%;
    height: 38%;
    border-radius: 9999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.1) 60%, transparent 100%);
    pointer-events: none;
    filter: blur(0.5px);
  }

  /* Soft Diffused Ambient Violet Water Aura radiating outward */
  .glowing-indicator-bubble::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 9999px;
    background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.65) 0%, rgba(108, 92, 231, 0.35) 55%, transparent 75%);
    filter: blur(8px);
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
  }

  /* Fluid Reflective Water Buttons with Liquid Mercury Physics */
  .fluid-reflective-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: all 0.35s cubic-bezier(0.25, 1.25, 0.4, 1);
  }

  /* Watery specular meniscus sheen highlight */
  .fluid-reflective-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.05) 75%, transparent 100%);
    border-radius: 9999px;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease;
  }

  /* Interactive Liquid Ripple & Luminous Water Bloom Cursor Follower */
  .fluid-reflective-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: radial-gradient(circle 95px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(235, 215, 255, 0.55) 0%, rgba(168, 85, 247, 0.45) 35%, rgba(108, 92, 231, 0.25) 60%, transparent 85%);
    opacity: var(--hover-opacity, 0);
    mix-blend-mode: screen;
    pointer-events: none;
    transition: opacity 0.28s ease-out;
    filter: blur(1.5px);
    z-index: 2;
  }

  .fluid-reflective-btn:hover {
    border-color: rgba(220, 190, 255, 0.95);
    box-shadow: 0 0 35px rgba(108, 92, 231, 0.65), 0 0 16px rgba(168, 85, 247, 0.8), inset 0 1px 3px rgba(255, 255, 255, 0.65), inset 0 -2px 8px rgba(108, 92, 231, 0.45);
  }

  /* Primary Electric Violet Liquid Gradient Fill */
  .liquid-violet-core {
    background: linear-gradient(135deg, #6c5ce7 0%, #7f5fff 35%, #8b5cf6 70%, #a855f7 100%);
    background-size: 200% 200%;
    animation: liquidWave 8s ease infinite;
  }

  /* Navbar Capsule Track */
  .nav-capsule-track {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.375rem;
    background: rgba(32, 30, 41, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 8px 24px -6px rgba(0, 0, 0, 0.5);
  }

/* ---- block ---- */
html, body {
  min-height: 100% !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: static !important;
}
canvas, #water-bubbles-canvas, .fixed.inset-0.pointer-events-none, .glass-specular-flare {
  pointer-events: none !important;
}
button, a, input, select, textarea, [role="button"], .fluid-reflective-btn, .nav-item-pill {
  pointer-events: auto !important;
  cursor: pointer !important;
}
header, nav, main, section, footer {
  position: relative;
  z-index: 10;
}

/* ---- block ---- */
:root {
    --glass-light-x: 50vw;
    --glass-light-y: 35vh;
    --glass-angle: 135deg;
    --glass-tilt-x: 0deg;
    --glass-tilt-y: 0deg;
  }

  .glass-specular-flare {
    background: radial-gradient(circle 650px at var(--glass-light-x) var(--glass-light-y), rgba(216, 180, 254, 0.18) 0%, rgba(142, 84, 233, 0.12) 25%, rgba(108, 92, 231, 0.05) 50%, transparent 75%);
    mix-blend-mode: screen;
    pointer-events: none !important;
    transition: opacity 0.4s ease;
  }

  .glass-prismatic-caustic {
    background:
      radial-gradient(ellipse 550px 320px at var(--glass-light-x) var(--glass-light-y), rgba(168, 85, 247, 0.14) 0%, rgba(56, 189, 248, 0.08) 35%, rgba(192, 132, 252, 0.04) 60%, transparent 80%),
      conic-gradient(from var(--glass-angle) at var(--glass-light-x) var(--glass-light-y), rgba(198, 191, 255, 0.07) 0deg, rgba(168, 85, 247, 0.09) 60deg, rgba(56, 189, 248, 0.08) 120deg, transparent 180deg, rgba(198, 191, 255, 0.06) 240deg, transparent 360deg);
    mix-blend-mode: screen;
    filter: blur(24px);
    pointer-events: none !important;
  }

  .glass-moving-sheen {
    background: linear-gradient(var(--glass-angle), transparent 30%, rgba(255, 255, 255, 0.04) 48%, rgba(216, 180, 254, 0.08) 50%, rgba(255, 255, 255, 0.04) 52%, transparent 70%);
    mix-blend-mode: overlay;
    pointer-events: none !important;
  }

  #interactive-bg-container, #interactive-bg-container * {
    pointer-events: none !important;
  }

/* ---- block ---- */
#nav-capsule-container #nav-fluid-bubble { opacity: 0; pointer-events: none !important; transition: opacity 0.25s ease-out, left 0.35s cubic-bezier(0.25, 1.25, 0.4, 1), top 0.35s cubic-bezier(0.25, 1.25, 0.4, 1), width 0.35s cubic-bezier(0.25, 1.25, 0.4, 1), height 0.35s cubic-bezier(0.25, 1.25, 0.4, 1) !important; } #nav-capsule-container:hover #nav-fluid-bubble.is-hovered { opacity: 1 !important; }

/* ---- block ---- */
#nav-fluid-bubble { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.3s cubic-bezier(0.25, 1.25, 0.4, 1), left 0.4s cubic-bezier(0.25, 1.25, 0.4, 1), top 0.4s cubic-bezier(0.25, 1.25, 0.4, 1), width 0.4s cubic-bezier(0.25, 1.25, 0.4, 1), height 0.4s cubic-bezier(0.25, 1.25, 0.4, 1) !important; } #nav-capsule-container:hover #nav-fluid-bubble, .nav-capsule-track:hover .glowing-indicator-bubble { opacity: 1 !important; }