/* ==========================================
   SVG DECORATION LAYER
   Premium depth and visual atmosphere
   ========================================== */

/* ==========================================
   1. GLOBAL SVG DECOR CONTAINER
   ========================================== */

.svg-decor-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* Ensure main content stays above decorations */
.page-wrapper {
  position: relative;
  z-index: 1;
}

.main-content {
  position: relative;
  z-index: 1;
}

/* ==========================================
   2. INDIVIDUAL SVG POSITIONING
   ========================================== */

/* Base styles for all decor SVGs */
.svg-decor {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

/* A) Left Edge Glow Blob */
.svg-decor--left-blob {
  left: -20%;
  top: 50%;
  transform: translateY(-50%);
  width: 640px;
  height: 640px;
  opacity: 0.08;
}

/* B) Right Top Ring Arc */
.svg-decor--right-arc {
  right: -8%;
  top: -8%;
  width: 520px;
  height: 520px;
  opacity: 0.07;
}

/* C) Center Dots Grid */
.svg-decor--dots-grid {
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  width: 1000px;
  height: 280px;
  opacity: 0.05;
}

/* D) Bottom Diagonal Lines */
.svg-decor--diagonals {
  left: 50%;
  bottom: 15%;
  transform: translateX(-50%);
  width: 1100px;
  height: 400px;
  opacity: 0.05;
}

/* ==========================================
   3. SECTION-LEVEL DECORATIONS
   ========================================== */

/* Base class for section decorations */
.section-decor {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.section-decor svg {
  width: 100%;
  height: 100%;
}

/* Hero section decoration - Enhanced */
.hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.hero-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Watermark text background - VISIBLE but subtle */
.hero-decor__watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.hero-decor__watermark-text {
  font-size: clamp(120px, 20vw, 280px);
  font-weight: 900;
  font-family: var(--font-main);
  color: transparent;
  /* Increased opacity for visibility: 0.05-0.07 range */
  background: linear-gradient(180deg, rgba(230, 196, 106, 0.07) 0%, rgba(31, 191, 155, 0.05) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.05em;
  white-space: nowrap;
  user-select: none;
  opacity: 1;
}

/* Central symbol (laurel wreath / ranking ring) - more visible */
.hero-decor__symbol {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  opacity: 0.14;
  z-index: 1;
}

/* Radial arcs - visible behind hero card */
.hero-decor__arcs {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.12;
  z-index: 0;
}

/* Radial rays from corners */
.hero-decor__rays {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.10;
  z-index: 0;
}

/* Ambient glow - stronger presence */
.hero-decor__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  opacity: 0.18;
  z-index: 0;
}

/* ==========================================
   HERO SIDE DECORATIONS - VISIBLE
   Left: Poker chip arc rings
   Right: Card outlines + star accents
   ========================================== */

/* LEFT SIDE DECORATION */
.hero-decor__left {
  position: absolute;
  /* Use clamp to keep 30-40% visible on screen */
  left: clamp(-40px, -3vw, -16px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(320px, 28vw, 480px);
  height: clamp(400px, 35vw, 600px);
  pointer-events: none;
  z-index: 0;
}

/* Glow behind left decoration */
.hero-decor__left::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(ellipse at center,
    rgba(230, 196, 106, 0.18) 0%,
    rgba(31, 191, 155, 0.08) 40%,
    transparent 70%
  );
  z-index: -1;
  pointer-events: none;
}

.hero-decor__left svg {
  width: 100%;
  height: 100%;
}

/* RIGHT SIDE DECORATION */
.hero-decor__right {
  position: absolute;
  /* Use clamp to keep 30-40% visible on screen */
  right: clamp(-40px, -3vw, -16px);
  top: 45%; /* Slightly offset to avoid symmetry */
  transform: translateY(-50%);
  width: clamp(360px, 30vw, 520px);
  height: clamp(450px, 38vw, 650px);
  pointer-events: none;
  z-index: 0;
}

/* Glow behind right decoration */
.hero-decor__right::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(ellipse at center,
    rgba(31, 191, 155, 0.16) 0%,
    rgba(230, 196, 106, 0.07) 40%,
    transparent 70%
  );
  z-index: -1;
  pointer-events: none;
}

.hero-decor__right svg {
  width: 100%;
  height: 100%;
}

/* Large screens (1400px+): decor more visible */
@media (min-width: 1400px) {
  .hero-decor__left {
    left: -30px;
    width: 450px;
    height: 560px;
  }

  .hero-decor__right {
    right: -30px;
    width: 500px;
    height: 620px;
  }

  .hero-decor__left::before,
  .hero-decor__right::before {
    opacity: 1.1;
  }
}

/* Extra large screens (1920px+) */
@media (min-width: 1920px) {
  .hero-decor__left {
    left: -20px;
    width: 520px;
    height: 650px;
  }

  .hero-decor__right {
    right: -20px;
    width: 560px;
    height: 700px;
  }
}

/* Tablet: smaller but visible */
@media (max-width: 1200px) {
  .hero-decor__left {
    left: -30px;
    width: 280px;
    height: 350px;
    opacity: 0.85;
  }

  .hero-decor__right {
    right: -30px;
    width: 300px;
    height: 380px;
    opacity: 0.85;
  }

  .hero-decor__left::before,
  .hero-decor__right::before {
    width: 100%;
    height: 100%;
    opacity: 0.8;
  }
}

/* Mobile: keep ONE decoration, reduce size significantly */
@media (max-width: 768px) {
  /* Move left to top-left corner */
  .hero-decor__left {
    left: -20px;
    top: 0;
    transform: translateY(0);
    width: 180px;
    height: 220px;
    opacity: 0.6;
  }

  .hero-decor__left::before {
    width: 80%;
    height: 80%;
    opacity: 0.5;
  }

  /* Move right to bottom-right corner */
  .hero-decor__right {
    right: -20px;
    top: auto;
    bottom: 0;
    transform: translateY(0);
    width: 200px;
    height: 250px;
    opacity: 0.6;
  }

  .hero-decor__right::before {
    width: 80%;
    height: 80%;
    opacity: 0.5;
  }
}

/* Small mobile: hide left, keep right smaller */
@media (max-width: 480px) {
  .hero-decor__left {
    display: none;
  }

  .hero-decor__right {
    width: 140px;
    height: 180px;
    opacity: 0.5;
  }
}

/* ==========================================
   HERO SIDE DECOR ANIMATIONS (Desktop only)
   Very slow float: ±6px, 14-18s duration
   ========================================== */

@keyframes hero-side-float-left {
  0%, 100% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(calc(-50% - 6px));
  }
}

@keyframes hero-side-float-right {
  0%, 100% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(calc(-50% + 5px));
  }
}

/* Apply animations only on desktop */
@media (min-width: 1024px) {
  .hero-decor__left {
    animation: hero-side-float-left 16s ease-in-out infinite;
  }

  .hero-decor__right {
    animation: hero-side-float-right 18s ease-in-out infinite;
  }
}

/* Disable for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-decor__left,
  .hero-decor__right {
    animation: none !important;
  }
}

/* ==========================================
   HERO ANIMATIONS
   ========================================== */

@keyframes hero-symbol-float {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform: translate(-50%, calc(-50% - 6px)) rotate(1deg);
  }
}

@keyframes hero-glow-pulse {
  0%, 100% {
    opacity: 0.10;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.14;
    transform: translate(-50%, -50%) scale(1.02);
  }
}

@keyframes hero-arcs-drift {
  0%, 100% {
    opacity: 0.08;
  }
  50% {
    opacity: 0.10;
  }
}

.hero-decor__symbol {
  animation: hero-symbol-float 16s ease-in-out infinite;
}

.hero-decor__glow {
  animation: hero-glow-pulse 12s ease-in-out infinite;
}

.hero-decor__arcs {
  animation: hero-arcs-drift 14s ease-in-out infinite;
}

/* Disable animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-decor__symbol,
  .hero-decor__glow,
  .hero-decor__arcs,
  .hero-decor__rays {
    animation: none !important;
  }
}

/* ==========================================
   HERO RESPONSIVE - TABLET
   ========================================== */

@media (max-width: 1024px) {
  .hero-decor__symbol {
    width: 450px;
    height: 450px;
    opacity: 0.06;
  }

  .hero-decor__glow {
    width: 550px;
    height: 550px;
    opacity: 0.10;
  }

  .hero-decor__watermark-text {
    font-size: clamp(80px, 15vw, 180px);
    opacity: 0.6;
  }
}

/* ==========================================
   HERO RESPONSIVE - MOBILE
   ========================================== */

@media (max-width: 768px) {
  .hero-decor__symbol {
    width: 350px;
    height: 350px;
    opacity: 0.05;
  }

  .hero-decor__glow {
    width: 400px;
    height: 400px;
    opacity: 0.08;
  }

  .hero-decor__arcs {
    opacity: 0.05;
  }

  .hero-decor__rays {
    display: none;
  }

  .hero-decor__watermark-text {
    font-size: 80px;
    opacity: 0.4;
  }
}

@media (max-width: 480px) {
  .hero-decor__symbol {
    width: 280px;
    height: 280px;
    opacity: 0.04;
  }

  .hero-decor__glow {
    width: 300px;
    height: 300px;
    opacity: 0.06;
  }

  .hero-decor__arcs {
    display: none;
  }

  .hero-decor__watermark-text {
    font-size: 60px;
    opacity: 0.3;
  }
}

/* ==========================================
   HERO LARGE SCREENS
   ========================================== */

@media (min-width: 1400px) {
  .hero-decor__symbol {
    width: 700px;
    height: 700px;
    opacity: 0.08;
  }

  .hero-decor__glow {
    width: 850px;
    height: 850px;
    opacity: 0.14;
  }
}

@media (min-width: 1800px) {
  .hero-decor__symbol {
    width: 800px;
    height: 800px;
    opacity: 0.09;
  }

  .hero-decor__glow {
    width: 1000px;
    height: 1000px;
  }

  .hero-decor__watermark-text {
    font-size: 320px;
  }
}

/* Trust section decoration */
.trust-section {
  position: relative;
  z-index: 1;
}

.trust-decor {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
}

.trust-decor svg {
  width: 100%;
  height: 100%;
  opacity: 0.04;
}

/* TOP 10 section decoration */
#top-casinos {
  position: relative;
  z-index: 1;
  /* Remove overflow:hidden to allow decor to be visible at edges */
  overflow: visible;
  /* Add horizontal padding for safe area - decor sits in this space */
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: clamp(20px, 5vw, 80px);
}

.top10-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Allow decor to extend beyond section bounds */
  overflow: visible;
}

/* Left side decoration - poker chips
   Positioned to keep 30-40% VISIBLE on screen */
.top10-decor__left {
  position: absolute;
  /* Use clamp to ensure visibility: never more than 60px off-screen */
  left: clamp(-60px, -3vw, -20px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(200px, 20vw, 320px);
  height: clamp(400px, 45vw, 640px);
  pointer-events: none;
  z-index: 0;
}

.top10-decor__left svg {
  width: 100%;
  height: 100%;
}

/* Right side decoration - cards & arcs
   Positioned to keep 30-40% VISIBLE on screen */
.top10-decor__right {
  position: absolute;
  /* Use clamp to ensure visibility: never more than 60px off-screen */
  right: clamp(-60px, -3vw, -20px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(200px, 20vw, 320px);
  height: clamp(400px, 45vw, 640px);
  pointer-events: none;
  z-index: 0;
}

.top10-decor__right svg {
  width: 100%;
  height: 100%;
}

/* Large screens (1400px+): decor more visible */
@media (min-width: 1400px) {
  #top-casinos {
    padding-left: 100px;
    padding-right: 100px;
  }

  .top10-decor__left {
    left: -40px;
    width: 350px;
    height: 700px;
  }

  .top10-decor__right {
    right: -40px;
    width: 350px;
    height: 700px;
  }
}

/* Extra large screens (1920px+): full visibility */
@media (min-width: 1920px) {
  #top-casinos {
    padding-left: 120px;
    padding-right: 120px;
  }

  .top10-decor__left {
    left: -30px;
    width: 380px;
    height: 760px;
  }

  .top10-decor__right {
    right: -30px;
    width: 380px;
    height: 760px;
  }
}

/* Responsive - Tablet: smaller but still visible */
@media (max-width: 1200px) {
  #top-casinos {
    padding-left: 40px;
    padding-right: 40px;
  }

  .top10-decor__left {
    left: -30px;
    width: 180px;
    height: 360px;
    opacity: 0.8;
  }

  .top10-decor__right {
    right: -30px;
    width: 180px;
    height: 360px;
    opacity: 0.8;
  }
}

/* Responsive - Mobile: corner positioning instead of sides */
@media (max-width: 768px) {
  #top-casinos {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  /* Move to top-left corner */
  .top10-decor__left {
    left: -20px;
    top: 0;
    transform: translateY(0);
    width: 140px;
    height: 280px;
    opacity: 0.5;
  }

  /* Move to bottom-right corner */
  .top10-decor__right {
    right: -20px;
    top: auto;
    bottom: 0;
    transform: translateY(0);
    width: 140px;
    height: 280px;
    opacity: 0.5;
  }
}

/* Small mobile: smaller corner decorations */
@media (max-width: 480px) {
  .top10-decor__left {
    width: 100px;
    height: 200px;
    opacity: 0.4;
  }

  .top10-decor__right {
    width: 100px;
    height: 200px;
    opacity: 0.4;
  }
}

/* Content section relative positioning */
.section {
  position: relative;
  z-index: 1;
}

/* ==========================================
   4. MINIMAL MOTION ANIMATION
   ========================================== */

@keyframes float-gentle {
  0%, 100% {
    transform: translateY(0) translateX(-50%);
  }
  50% {
    transform: translateY(-8px) translateX(-50%);
  }
}

@keyframes float-left {
  0%, 100% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(calc(-50% - 6px));
  }
}

@keyframes float-right {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(2deg);
  }
}

@keyframes pulse-opacity {
  0%, 100% {
    opacity: 0.05;
  }
  50% {
    opacity: 0.07;
  }
}

/* Apply animations */
.svg-decor--left-blob {
  animation: float-left 14s ease-in-out infinite;
}

.svg-decor--right-arc {
  animation: float-right 18s ease-in-out infinite;
}

.svg-decor--dots-grid {
  animation: float-gentle 12s ease-in-out infinite;
}

.svg-decor--diagonals {
  animation: pulse-opacity 16s ease-in-out infinite;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .svg-decor,
  .section-decor svg,
  .hero-decor svg,
  .trust-decor svg,
  .top10-decor svg {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================
   5. RESPONSIVE - TABLET
   ========================================== */

@media (max-width: 1200px) {
  .svg-decor--left-blob {
    width: 480px;
    height: 480px;
    left: -25%;
    opacity: 0.06;
  }

  .svg-decor--right-arc {
    width: 400px;
    height: 400px;
    right: -12%;
    top: -10%;
    opacity: 0.06;
  }

  .svg-decor--dots-grid {
    width: 700px;
    height: 200px;
    opacity: 0.04;
  }

  .svg-decor--diagonals {
    width: 800px;
    height: 300px;
    opacity: 0.04;
  }
}

/* ==========================================
   6. RESPONSIVE - MOBILE
   ========================================== */

@media (max-width: 768px) {
  /* Reduce sizes by 50% */
  .svg-decor--left-blob {
    width: 320px;
    height: 320px;
    left: -30%;
    top: 30%;
    opacity: 0.05;
  }

  /* Hide large desktop-only decorations */
  .svg-decor--right-arc {
    display: none;
  }

  .svg-decor--diagonals {
    display: none;
  }

  /* Keep dots but smaller */
  .svg-decor--dots-grid {
    width: 400px;
    height: 120px;
    opacity: 0.03;
    top: 35%;
  }

  /* Section decorations smaller */
  .hero-decor__blob {
    width: 300px;
    height: 300px;
    opacity: 0.04;
  }

  .trust-decor svg,
  .top10-decor svg {
    opacity: 0.03;
  }
}

@media (max-width: 480px) {
  .svg-decor--left-blob {
    width: 240px;
    height: 240px;
    opacity: 0.04;
  }

  .svg-decor--dots-grid {
    width: 280px;
    height: 80px;
    opacity: 0.025;
  }
}

/* ==========================================
   7. LARGE SCREENS ENHANCEMENT
   ========================================== */

@media (min-width: 1600px) {
  .svg-decor--left-blob {
    width: 760px;
    height: 760px;
    left: -15%;
    opacity: 0.09;
  }

  .svg-decor--right-arc {
    width: 620px;
    height: 620px;
    right: -5%;
    opacity: 0.08;
  }

  .svg-decor--dots-grid {
    width: 1200px;
    height: 320px;
    opacity: 0.06;
  }

  .svg-decor--diagonals {
    width: 1400px;
    height: 500px;
  }
}

@media (min-width: 2000px) {
  .svg-decor--left-blob {
    width: 900px;
    height: 900px;
    opacity: 0.10;
  }

  .svg-decor--right-arc {
    width: 720px;
    height: 720px;
    opacity: 0.09;
  }
}