/* ============================================
   Modern Effects — Rattanatip
   Glassmorphism · Glow · Texture · Grain
   ============================================ */

/* ---------- Glassmorphism ---------- */

.glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius, 14px);
}

.glass-light {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius, 14px);
}

.glass-dark {
  background: rgba(24, 24, 27, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius, 14px);
}

.glass-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg, 20px);
  padding: 2rem;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.glass-border {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius, 14px);
  position: relative;
}

.glass-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.2)
  );
  z-index: -1;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
}

.glass-glow {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg, 20px);
  box-shadow:
    0 0 30px rgba(185, 28, 28, 0.15),
    0 0 60px rgba(245, 158, 11, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.06);
}


/* ---------- Glow Effects ---------- */

/* Box glow */
.glow-red {
  box-shadow:
    0 0 15px rgba(185, 28, 28, 0.35),
    0 0 45px rgba(185, 28, 28, 0.15);
}

.glow-gold {
  box-shadow:
    0 0 15px rgba(245, 158, 11, 0.4),
    0 0 45px rgba(245, 158, 11, 0.18);
}

.glow-red-strong {
  box-shadow:
    0 0 20px rgba(185, 28, 28, 0.5),
    0 0 60px rgba(185, 28, 28, 0.25),
    0 0 100px rgba(185, 28, 28, 0.1);
}

.glow-gold-strong {
  box-shadow:
    0 0 20px rgba(245, 158, 11, 0.55),
    0 0 60px rgba(245, 158, 11, 0.28),
    0 0 100px rgba(245, 158, 11, 0.12);
}

/* Text glow */
.glow-text-red {
  text-shadow:
    0 0 8px rgba(185, 28, 28, 0.4),
    0 0 24px rgba(185, 28, 28, 0.2);
}

.glow-text-gold {
  text-shadow:
    0 0 8px rgba(245, 158, 11, 0.45),
    0 0 24px rgba(245, 158, 11, 0.22);
}

/* Hover glow — subtle rest state, bright on hover */
.glow-hover-red {
  transition: box-shadow var(--transition, all 0.3s ease);
}

.glow-hover-red:hover {
  box-shadow:
    0 0 20px rgba(185, 28, 28, 0.5),
    0 0 50px rgba(185, 28, 28, 0.25);
}

.glow-hover-gold {
  transition: box-shadow var(--transition, all 0.3s ease);
}

.glow-hover-gold:hover {
  box-shadow:
    0 0 20px rgba(245, 158, 11, 0.55),
    0 0 50px rgba(245, 158, 11, 0.28);
}

/* Animated glow border
   Uses overflow: hidden ONLY on a wrapper element so child
   content is never clipped. Requires markup:
     <div class="glow-border">
       <div class="glow-border-inner">...content...</div>
     </div>
   Or use as-is on elements that naturally clip their children. */
.glow-border {
  position: relative;
  border-radius: var(--radius, 14px);
  overflow: hidden;
  /* Ensure child stacking works */
  isolation: isolate;
}

/* Background that "fills in" the animated border ring */
.glow-border::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: calc(var(--radius, 14px) - 2px);
  background: var(--cream, #FFFBEB);
  z-index: 1;
  pointer-events: none;
}

/* Rotating conic-gradient ring.
   Uses overflow: visible on the pseudo so it can exceed
   the bounding box of the parent without clipping. */
.glow-border::before {
  content: '';
  position: absolute;
  /* Expand far enough to cover corners during rotation */
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    var(--red, #B91C1C),
    var(--gold, #FBBF24),
    var(--red-light, #DC2626),
    var(--yellow, #F59E0B),
    var(--red, #B91C1C)
  );
  animation: glowBorderSpin 4s linear infinite;
  /* Sit behind the ::after fill and any child content */
  z-index: -1;
}

/* Helper inner element — pushes content above the pseudo fill */
.glow-border > :not(:empty) {
  position: relative;
  z-index: 2;
}

@keyframes glowBorderSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Gradient glow line (divider) */
.glow-line {
  height: 3px;
  border: none;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--red, #B91C1C) 20%,
    var(--gold, #FBBF24) 50%,
    var(--red, #B91C1C) 80%,
    transparent
  );
  box-shadow:
    0 0 12px rgba(185, 28, 28, 0.4),
    0 0 24px rgba(245, 158, 11, 0.2);
  opacity: 0.8;
}


/* ---------- Texture & Grain ---------- */

/* Film-grain noise overlay */
.grain-overlay {
  position: relative;
  overflow: hidden;
}

.grain-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* Noise background for sections */
.noise-bg {
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Subtle dot pattern */
.texture-dots {
  background-image: radial-gradient(
    circle,
    rgba(185, 28, 28, 0.08) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
}

/* Subtle line pattern */
.texture-lines {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(185, 28, 28, 0.04) 10px,
    rgba(185, 28, 28, 0.04) 11px
  );
}

/* Mesh gradient background */
.mesh-gradient-bg {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(185, 28, 28, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(185, 28, 28, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 90%, rgba(251, 191, 36, 0.06) 0%, transparent 50%),
    var(--cream, #FFFBEB);
}


/* ---------- Utility Combinations ---------- */

/* Glass card with tilt data attribute support */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow var(--transition, all 0.3s ease);
}

[data-tilt]:hover {
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Magnetic button base style */
[data-magnetic] {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Counter base style */
[data-counter] {
  font-variant-numeric: tabular-nums;
}


/* ---------- Accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
  .glow-border::before {
    animation: none;
  }

  [data-tilt] {
    transition: none !important;
  }

  [data-magnetic] {
    transition: none !important;
  }

  .glass-card:hover {
    transition: none;
  }

  .glow-hover-red,
  .glow-hover-gold {
    transition: none;
  }
}


/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  .glass-card {
    padding: 1.25rem;
  }

  .grain-overlay::after {
    opacity: 0.03;
    background-size: 150px 150px;
  }
}

@media (max-width: 480px) {
  .glass-card {
    padding: 1rem;
    border-radius: var(--radius, 14px);
  }
}