/**
 * =============================================================================
 * SECTIONS CSS — Extracted inline styles from JS template literals
 * =============================================================================
 *
 * Contains all section-specific CSS previously embedded in <style> blocks
 * inside Hero.js, FeatureShowcase.js, and CrossChain.js.
 *
 * SECTIONS:
 * 1. Hero — gradient background, floating icon animations, CTA gradient rotate
 * 2. Feature Showcase — animated gradient border, glassmorphism, scale animation
 * 3. Cross Chain — platform carousel infinite scroll
 *
 * =============================================================================
 */

/* ==========================================================================
   1. HERO SECTION
   ========================================================================== */

/* --- Animated gradient background --- */
.hero-gradient-bg {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(98, 84, 241, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(5, 225, 247, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(98, 84, 241, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #0a0818 0%, #0d0a22 50%, #0a0818 100%);
  background-size: 200% 200%, 200% 200%, 100% 100%, 100% 100%;
  animation: heroGradientShift 15s ease-in-out infinite alternate;
}

@keyframes heroGradientShift {
  0%   { background-position: 0% 50%, 100% 50%, 50% 100%, 0% 0%; }
  50%  { background-position: 100% 50%, 0% 50%, 50% 0%, 0% 0%; }
  100% { background-position: 50% 0%, 50% 100%, 50% 50%, 0% 0%; }
}

/* --- HERO FLOATING ICONS — 3 concentric orbits with float + fade --- */

.hero-icon { will-change: transform, opacity; transition: translate 0.3s ease-out; }

/* Orbit 1: Inner — 5 chain icons (largest, most visible) */
.hero-front:nth-child(1) { animation: heroFloatE 6s ease-in-out infinite, heroFadeFront 9s ease-in-out infinite 1s; }
.hero-front:nth-child(2) { animation: heroFloatA 7s ease-in-out infinite 1s, heroFadeFront 10s ease-in-out infinite 0s; }
.hero-front:nth-child(3) { animation: heroFloatD 7.5s ease-in-out infinite 2s, heroFadeFront 11s ease-in-out infinite 3s; }
.hero-front:nth-child(4) { animation: heroFloatC 6.5s ease-in-out infinite 0.5s, heroFadeFront 8s ease-in-out infinite 2s; }
.hero-front:nth-child(5) { animation: heroFloatB 5.5s ease-in-out infinite 1.5s, heroFadeFront 10s ease-in-out infinite 4s; }

/* Orbit 2: Middle — 5 platform icons (medium) */
.hero-mid:nth-child(1) { animation: heroFloatD 9s ease-in-out infinite, heroFadeMid 11s ease-in-out infinite 2s; }
.hero-mid:nth-child(2) { animation: heroFloatA 8s ease-in-out infinite 1.5s, heroFadeMid 9s ease-in-out infinite 0s; }
.hero-mid:nth-child(3) { animation: heroFloatE 10s ease-in-out infinite 3s, heroFadeMid 10s ease-in-out infinite 4s; }
.hero-mid:nth-child(4) { animation: heroFloatC 7s ease-in-out infinite 0.5s, heroFadeMid 12s ease-in-out infinite 1s; }
.hero-mid:nth-child(5) { animation: heroFloatB 8.5s ease-in-out infinite 2s, heroFadeMid 10s ease-in-out infinite 3s; }

/* Orbit 3: Outer — 6 platform icons (smallest, faintest) */
.hero-back:nth-child(1) { animation: heroFloatA 12s ease-in-out infinite, heroFadeBack 10s ease-in-out infinite 1s; }
.hero-back:nth-child(2) { animation: heroFloatB 14s ease-in-out infinite 2s, heroFadeBack 12s ease-in-out infinite 3s; }
.hero-back:nth-child(3) { animation: heroFloatC 11s ease-in-out infinite 4s, heroFadeBack 14s ease-in-out infinite 0s; }
.hero-back:nth-child(4) { animation: heroFloatD 13s ease-in-out infinite 1.5s, heroFadeBack 11s ease-in-out infinite 2s; }
.hero-back:nth-child(5) { animation: heroFloatE 12.5s ease-in-out infinite 3.5s, heroFadeBack 13s ease-in-out infinite 1.5s; }
.hero-back:nth-child(6) { animation: heroFloatA 14.5s ease-in-out infinite 1s, heroFadeBack 15s ease-in-out infinite 4s; }

/* 5 reusable float keyframes — visual variety comes from different durations & delays */
@keyframes heroFloatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(8px,-12px); } }
@keyframes heroFloatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-10px,-15px); } }
@keyframes heroFloatC { 0%,100% { transform: translate(0,0); } 50% { transform: translate(12px,10px); } }
@keyframes heroFloatD { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-14px,-10px); } }
@keyframes heroFloatE { 0%,100% { transform: translate(0,0); } 50% { transform: translate(6px,14px); } }

/* Fade keyframes — wider opacity ranges per orbit distance */
@keyframes heroFadeBack  { 0%,100% { opacity: 0.08; } 50% { opacity: 0.4; } }
@keyframes heroFadeMid   { 0%,100% { opacity: 0.15; } 50% { opacity: 0.6; } }
@keyframes heroFadeFront { 0%,100% { opacity: 0.35; } 50% { opacity: 0.9; } }

@media (max-width: 640px) {
  .hero-back  { opacity: 0.2; }
  .hero-mid   { opacity: 0.3; }
  .hero-front { opacity: 0.5; }
}

/* --- CTA Gradient Rotate Animation --- */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-angle-fill {
  syntax: '<angle>';
  initial-value: 55deg;
  inherits: false;
}
.gradient-border-rotate {
  background: conic-gradient(from var(--angle, 0deg), #6254F1, #05E1F7, #6254F1);
  animation: rotate-gradient 3s linear infinite;
}
@keyframes rotate-gradient {
  to { --angle: 360deg; }
}
.gradient-fill-rotate {
  --gradient-angle-fill: 55deg;
  background: linear-gradient(var(--gradient-angle-fill), #6254F1 13.13%, #05E1F7 93.35%);
  transition: --gradient-angle-fill 0.25s ease-out;
}
.gradient-fill-rotate:hover { --gradient-angle-fill: 235deg; }


/* ==========================================================================
   2. FEATURE SHOWCASE SECTION
   ========================================================================== */

/* --- Animated gradient border --- */
@property --showcase-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes showcaseGradientSpin {
  to { --showcase-angle: 360deg; }
}

.showcase-glow-wrapper {
  background: conic-gradient(from var(--showcase-angle), #9b8fff, #1af0ff, #9b8fff);
  animation: showcaseGradientSpin 4s linear infinite;
}

/* Rotating glow shadow — separate element behind the border */
.showcase-glow-shadow {
  background: conic-gradient(from var(--showcase-angle), #9b8fff, #1af0ff, #9b8fff);
  animation: showcaseGradientSpin 4s linear infinite;
  filter: blur(28px);
  opacity: 0.55;
}

/* --- Security section animated gradient border (purple + gold) --- */
@property --security-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes securityGradientSpin {
  to { --security-angle: 360deg; }
}

.security-glow-wrapper {
  background: conic-gradient(from var(--security-angle), #8176f4, #d4a843, #8176f4);
  animation: securityGradientSpin 4s linear infinite;
}

.security-glow-shadow {
  background: conic-gradient(from var(--security-angle), #8176f4, #d4a843, #8176f4);
  animation: securityGradientSpin 4s linear infinite;
  filter: blur(28px);
  opacity: 0.55;
}

/* --- Inner container — fully opaque so gradient only shows at border edge --- */
.showcase-glass {
  background: rgb(10, 8, 24);
}

/* --- Glassmorphism tab pill --- */
.showcase-tab-pill {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Scroll-driven scale animation --- */
.showcase-scale-container {
  transform-origin: center;
  will-change: transform;
  transform: scale(0.75);
}

/* --- Hide scrollbar on tab bar for mobile --- */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}


/* ==========================================================================
   3. CROSS CHAIN SECTION
   ========================================================================== */

@keyframes platform-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.platform-scroll-track {
  animation: platform-scroll 35s linear infinite;
  width: max-content;
}

.platform-scroll-track:hover {
  animation-play-state: paused;
}