/**
 * ============================================
 * Stylesheet: shaun-theme.css
 * Area:       毛氈海洋主题 (Felt Ocean Theme)
 * Version:    v3.1
 * ============================================
 *
 * WHAT THIS FILE DOES:
 *   Global felt-ocean visual theme overrides.
 *   Covers: body bg, nav, cards, buttons, footer,
 *   scrollbar, hero text, image overlays, seal anim card.
 *
 * DEPENDS ON:
 *   - React bundle CSS (index-DRkbXttW.css)
 *
 * CHANGELOG:
 *   v3.1 - Added module header; modularized
 *   v3   - Felt Ocean Vertical Scene + Seal Animation
 */

/* === GLOBAL - Remove old background === */
html {
  background: #87CEEB !important;
  background-attachment: fixed !important;
}

body {
  background: transparent !important;
  overflow-x: hidden;
}

/* === FELT TEXTURE OVERLAY === */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='felt'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23felt)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  mix-blend-mode: overlay;
}

/* === ROOT === */
#root {
  position: relative;
  z-index: 2;
  background: transparent !important;
}

/* === OCEAN BACKGROUND SEGMENTS === */
#ocean-bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#ocean-bg-scroll {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
  transition: transform 0.1s linear;
}

#ocean-bg-scroll img {
  display: block;
  width: 100%;
  height: auto;
}

/* === OVERRIDE INLINE DARK GRADIENT === */
div.absolute.inset-0[style*="background: linear-gradient(oklch"] {
  background: transparent !important;
}

div[style*="oklch(0.15 0.04 250)"],
div[style*="oklch(0.2 0.06 245)"],
div[style*="oklch(0.18 0.05 248)"],
div[style*="oklch(0.12 0.04 255)"],
div[style*="oklch(0.08 0.03 260)"] {
  background: transparent !important;
}

/* Noise texture overlay - reduce */
div.absolute.inset-0[style*="fractalNoise"] {
  opacity: 0.03 !important;
}

/* Underwater glow -> transparent */
div[style*="oklch(0.20 0.08 150"],
div[style*="oklch(0.25 0.10 140"] {
  background: transparent !important;
}

/* === NAVIGATION BAR === */
nav.fixed {
  background: linear-gradient(
    135deg,
    rgba(30, 80, 140, 0.92),
    rgba(40, 100, 160, 0.88),
    rgba(30, 80, 140, 0.92)
  ) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 
    0 2px 12px rgba(0, 40, 80, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.backdrop-blur-xl[class*="bg-\\[oklch(0.97_0.02_90"] {
  background: linear-gradient(
    135deg,
    rgba(30, 80, 140, 0.92),
    rgba(40, 100, 160, 0.88),
    rgba(30, 80, 140, 0.92)
  ) !important;
  border-bottom: 2px dashed rgba(255, 255, 255, 0.2) !important;
}

nav a, nav button, nav span,
nav [class*="text-"] {
  color: #FFF8E7 !important;
}

nav [class*="rounded-full"][class*="bg-\\[oklch(0.90"] {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFF8E7 !important;
}

nav [class*="rounded-full"][class*="bg-\\[oklch(0.90"]:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}

nav [class*="bg-\\[oklch(0.55_0.12_215)"] {
  background: #E8734A !important;
}

nav [class*="bg-\\[oklch(0.75_0.14_15)"] {
  background: rgba(232, 115, 74, 0.9) !important;
}

/* === HERO TEXT === */
[class*="font-display"],
[class*="text-5xl"],
[class*="text-6xl"],
[class*="text-7xl"] {
  color: #FFFFFF !important;
  text-shadow: 
    0 2px 8px rgba(0, 30, 60, 0.6),
    0 0 30px rgba(255, 200, 80, 0.2) !important;
}

[class*="text-\\[oklch(0.85"],
[class*="text-\\[oklch(0.88"],
[class*="text-\\[oklch(0.90"] {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* === BUTTONS === */
[class*="bg-\\[oklch(0.75_0.14_15)"][class*="rounded-2xl"],
a[class*="bg-\\[oklch(0.75_0.14_15)"],
button[class*="bg-\\[oklch(0.75_0.14_15)"] {
  background: linear-gradient(145deg, #E8734A, #D4603A, #C85030) !important;
  color: #FFF8E7 !important;
  box-shadow: 
    0 4px 16px rgba(200, 80, 48, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    0 2px 0 rgba(160, 60, 30, 0.5) !important;
  border: 2px dashed rgba(255, 255, 255, 0.3) !important;
}

[class*="bg-\\[oklch(0.85_0.08_210"],
[class*="bg-\\[oklch(0.92_0.02_210)"][class*="rounded-2xl"] {
  background: linear-gradient(145deg, rgba(200, 230, 255, 0.9), rgba(180, 215, 245, 0.85)) !important;
  color: #1E4A7A !important;
  border-color: rgba(100, 160, 220, 0.5) !important;
}

/* === CARDS - Felt stitched look === */
[class*="rounded-3xl"][class*="bg-\\[oklch(0.93"],
[class*="rounded-3xl"][class*="border-2"][class*="border-dashed"] {
  background: linear-gradient(
    145deg,
    rgba(255, 252, 245, 0.94),
    rgba(245, 240, 230, 0.91),
    rgba(255, 252, 245, 0.94)
  ) !important;
  border-color: rgba(139, 90, 43, 0.35) !important;
  box-shadow: 
    0 6px 24px rgba(0, 40, 80, 0.12),
    inset 0 1px 3px rgba(255, 255, 255, 0.7),
    inset 0 0 0 3px rgba(139, 90, 43, 0.05) !important;
}

[class*="rounded-3xl"][class*="bg-\\[oklch(0.93"]::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  z-index: 1;
}

/* === SECTION HEADINGS === */
[class*="text-\\[oklch(0.95"],
[class*="text-\\[oklch(0.96"],
[class*="text-\\[oklch(0.97"] {
  color: #FFFFFF !important;
  text-shadow: 0 2px 6px rgba(0, 30, 60, 0.5);
}

[class*="text-\\[oklch(0.72"],
[class*="text-\\[oklch(0.65_0.15_220)"] {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Dark text on cards */
[class*="text-\\[oklch(0.30"],
[class*="text-\\[oklch(0.35"],
[class*="text-\\[oklch(0.40"],
[class*="text-\\[oklch(0.42"],
[class*="text-\\[oklch(0.45"],
[class*="text-\\[oklch(0.48"],
[class*="text-\\[oklch(0.50"] {
  color: #2A1F14 !important;
}

[class*="text-\\[oklch(0.55_0.12_215)"] {
  color: #1E6090 !important;
}

[class*="text-\\[oklch(0.75_0.14_15)"],
[class*="text-\\[oklch(0.70_0.20_25)"],
[class*="text-\\[oklch(0.60_0.20_25)"],
[class*="text-\\[oklch(0.60_0.18_20)"] {
  color: #C85030 !important;
}

/* === IMAGE OVERLAYS === */
[class*="bg-gradient-to-t"][class*="from-black"] {
  background: linear-gradient(
    to top,
    rgba(10, 30, 60, 0.85),
    rgba(10, 30, 60, 0.25),
    transparent
  ) !important;
}

/* === SEAL ANIMATION CARD === */
.seal-animation-card {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  border: 3px dashed rgba(139, 90, 43, 0.4);
  box-shadow: 
    0 8px 32px rgba(0, 40, 80, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.seal-animation-card:hover {
  transform: scale(1.02);
  box-shadow: 
    0 12px 40px rgba(0, 40, 80, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.seal-animation-card img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.15s ease;
}

/* === FOOTER === */
footer {
  background: linear-gradient(
    180deg,
    rgba(10, 30, 60, 0.95),
    rgba(5, 15, 35, 0.98)
  ) !important;
  border-top: 2px dashed rgba(100, 160, 220, 0.3) !important;
}

footer * {
  color: rgba(200, 220, 245, 0.8) !important;
}

footer a:hover {
  color: #FFD54F !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: rgba(30, 80, 140, 0.08); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(30, 80, 140, 0.4), rgba(20, 60, 110, 0.5));
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.15);
}
::-webkit-scrollbar-thumb:hover { background: rgba(30, 80, 140, 0.6); }

::selection {
  background: rgba(100, 180, 255, 0.3);
  color: #FFFFFF;
}

/* === BORDER OVERRIDES === */
[class*="border-\\[oklch(0.87"],
[class*="border-\\[oklch(0.80"],
[class*="border-\\[oklch(0.75_0.12"] {
  border-color: rgba(139, 90, 43, 0.3) !important;
}

/* === WHITE TEXT ON DARK BG === */
[class*="text-white"] {
  color: #FFFFFF !important;
}

img { filter: none !important; }

/* === FLOATING PARTICLES === */
.felt-particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  0% { opacity: 0; transform: translateY(100vh) scale(0.5); }
  10% { opacity: 0.6; }
  90% { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-10vh) scale(1.2); }
}

/* === PRE-SALE BADGE === */
.inline-block[class*="rounded-full"][class*="bg-\\[oklch(0.75_0.14_15/0.2)"] {
  background: rgba(255, 200, 80, 0.2) !important;
  border-color: rgba(255, 200, 80, 0.4) !important;
  color: #FFD54F !important;
}

/* === SEARCH/FILTER === */
[class*="bg-\\[oklch(0.85_0.05_210"] {
  background: rgba(200, 230, 255, 0.25) !important;
  border-color: rgba(100, 160, 220, 0.3) !important;
}

/* === LOADING SCREEN === */
[class*="fixed"][class*="inset-0"][class*="z-\\[100\\]"][class*="bg-black"] {
  background: radial-gradient(ellipse at center, #1E6090, #0A1E3C) !important;
}