/* ═══════════════════════════════════════════════════════════════
   SILK PREMIUM — scoped, clean, no side-effects
   All selectors are explicitly scoped to avoid overriding
   form controls, dashboard pages, or non-hero headings.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Background ──────────────────────────────────────────── */
body {
  background: radial-gradient(
    circle at top,
    #1a0d05 0%,
    #080808 40%,
    #050505 100%
  ) !important;
  overflow-x: hidden;
}

/* Animated star field overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.65) 1px,
    transparent 1.5px
  );
  background-size: 150px 150px;
  animation: silkStarsFade 10s ease-in-out infinite alternate;
}

@keyframes silkStarsFade {
  from { opacity: 0.12; }
  to   { opacity: 0.5; }
}

/* ── 2. Hero h1 glow — SCOPED to hero section only ─────────── */
/* Hero h1 uses text-3xl; section titles use text-2xl text-center */
.component h1.text-3xl {
  animation: silkHeroGlow 4s ease-in-out infinite alternate;
}

@keyframes silkHeroGlow {
  from { text-shadow: 0 0 10px rgba(255, 180, 120, 0.2); }
  to   { text-shadow: 0 0 28px rgba(255, 180, 120, 0.65); }
}

/* ── 3. Card hover — scoped to .component sections only ─────── */
.component a.group,
.component > div > div[class*="bg-card"],
.component .bg-card\/75 {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.32s ease;
}

.component a.group:hover,
.component > div > div[class*="bg-card"]:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.38),
              0 0 0 1px rgba(255, 180, 120, 0.05);
}

/* Feature cards */
.component .bg-card\/75:not(nav .bg-card\/75) {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
}

/* ── 4. Navbar glass — scoped ────────────────────────────────── */
nav.component > div {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: box-shadow 0.3s ease;
}

/* Class toggled by animations.js on scroll */
nav.component > div.silk-scrolled {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.42),
              0 0 0 1px rgba(255, 180, 120, 0.06);
}

/* ── 5. Accent buttons — scoped to nav & .component areas ───── */
nav .border-accent-500,
nav .bg-accent-500,
.component a[class*="border-accent"],
.component a[class*="bg-accent"],
.component button[class*="border-accent"],
.component button[class*="bg-accent"] {
  transition: transform 0.2s ease,
              box-shadow 0.2s ease,
              background-color 0.15s ease !important;
}

nav .border-accent-500:hover,
nav .bg-accent-500:hover,
.component a[class*="border-accent"]:hover,
.component a[class*="bg-accent"]:hover,
.component button[class*="border-accent"]:hover,
.component button[class*="bg-accent"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 140, 60, 0.22);
}

/* ── 6. Scroll progress bar ──────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(
    90deg,
    rgb(var(--cl-accent)),
    rgba(255, 180, 120, 0.35)
  );
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
}

/* ── 7. Cursor glow (desktop) ────────────────────────────────── */
#cursor-glow {
  position: fixed;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 150, 70, 0.055) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  will-change: left, top;
  transition: left 80ms linear, top 80ms linear;
}

/* ── 8. Particle float keyframe ──────────────────────────────── */
@keyframes particleFloat {
  0%   { transform: translateY(0) scale(1);     opacity: 0.55; }
  50%  { transform: translateY(-42vh) scale(1.1); opacity: 0.85; }
  100% { transform: translateY(-100vh) scale(0.75); opacity: 0; }
}

/* ── 9. Section reveal on scroll ─────────────────────────────── */
.silk-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease,
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.silk-reveal.silk-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Section highlight border on viewport enter (from animations.js) */
.highlight-on-scroll {
  transition: outline 0.3s ease;
  outline: 1px solid transparent;
}

.highlighted {
  outline: 1px solid rgba(var(--cl-accent), 0.08);
}

/* ── 10. Stats box accent underline animation ─────────────────── */
.stats-box {
  position: relative;
}

.stats-box::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  height: 2px;
  width: 36px;
  background: rgb(var(--cl-accent));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.stats-box.visible::after {
  transform: translateX(-50%) scaleX(1);
}

/* ── 11. Form field focus glow (scoped to known modal/form wrappers) */
.customer-login-modal input:focus,
.ticket-create-modal input:focus,
.ticket-create-modal textarea:focus,
[x-data*="buyNow"] input:focus,
[x-data*="buyNow"] textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--cl-accent), 0.22) !important;
}

/* ── 12. Footer subtle depth ──────────────────────────────────── */
footer {
  box-shadow: 0 -1px 24px rgba(0, 0, 0, 0.28);
}

/* ── 13. Splide arrow micro-interaction ───────────────────────── */
.splide .splide__arrow {
  transition: background 0.2s ease, transform 0.2s ease !important;
}

.splide .splide__arrow:hover {
  background: rgba(var(--cl-accent), 0.18) !important;
  transform: translateY(-50%) scale(1.12) !important;
}

/* ── 14. Typewriter cursor (from animations.js) ───────────────── */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── 15. Ripple effect (from animations.js) ───────────────────── */
@keyframes rippleExpand {
  to { transform: scale(1); opacity: 0; }
}

/* ── 16. Keep particles.js canvas visible ─────────────────────── */
#disabled_particles-js canvas {
  display: block !important;
  pointer-events: none !important;
}

/* ── 17. Section titles — animated accent underline ──────────── */
.component h1.text-2xl.text-center {
  position: relative;
  display: inline-block;
}

/* The HR already exists in the template; we just enhance it */
.component hr.border-accent-500 {
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  animation: silkTitleBar 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes silkTitleBar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── 18. Announcement bar ─────────────────────────────────────── */
.announcement.component {
  position: relative;
  overflow: hidden;
}

.announcement.component::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 180, 120, 0.06) 50%,
    transparent 100%
  );
  animation: silkAnnouncementShimmer 4s ease-in-out infinite;
}

@keyframes silkAnnouncementShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── 19. Product badges — subtle pulse ────────────────────────── */
.component .badges .bg-accent-500 {
  animation: silkBadgePulse 3s ease-in-out infinite;
}

@keyframes silkBadgePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.8; }
}

/* ── 20. Custom scrollbar (webkit) ────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--cl-accent), 0.35);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--cl-accent), 0.55);
}

/* ── 21. Social icon hover — smooth color transition ─────────── */
footer a[class*="size-8"] {
  transition: color 0.2s ease, transform 0.2s ease !important;
}

footer a[class*="size-8"]:hover {
  transform: scale(1.18) !important;
}

/* ── 22. Product "View Details" button — premium border anim ─── */
.component a.group .border-accent-500 {
  position: relative;
  overflow: hidden;
}

.component a.group .border-accent-500::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--cl-accent));
  transform: translateX(-101%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

.component a.group:hover .border-accent-500::before {
  transform: translateX(0);
}

.component a.group .border-accent-500 > * {
  position: relative;
  z-index: 1;
}

/* ── 23. Login modal — glass effect ──────────────────────────── */
[x-show="appCustomer.modalIsOpen"] .bg-background {
  backdrop-filter: blur(2px);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(255, 180, 120, 0.06);
}

/* OTP input micro-animation */
[x-ref*="modalOtpInputs"] {
  transition: border-color 0.15s ease, transform 0.15s ease,
              box-shadow 0.15s ease !important;
}

[x-ref*="modalOtpInputs"]:focus {
  transform: scale(1.05) !important;
}

/* ── 24. Cart page quantity buttons ──────────────────────────── */
[x-data*="cartPage"] button[class*="bg-white"] {
  transition: background-color 0.15s ease !important;
}

/* ── 25. Silk image hover reveal ─────────────────────────────── */
.component a.group img {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.45s ease;
  filter: brightness(0.92);
}

.component a.group:hover img {
  transform: scale(1.03);
  filter: brightness(1);
}