/* Pips Place — Casino Hotel | shared styles */

:root {
  --ink: #0b2a22;
  --pine: #123c2f;
  --moss: #1f5c46;
  --moss-light: #2f7a5c;
  --copper: #c1673a;
  --copper-light: #e08a55;
  --sand: #f4ede0;
  --cream: #faf6ee;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Space Grotesque', sans-serif;
  background-color: var(--cream);
  color: var(--ink);
}

.font-display {
  font-family: 'Fraunces', serif;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--cream);
}
::-webkit-scrollbar-thumb {
  background: var(--moss);
  border-radius: 6px;
}

/* Fade/slide utility transitions used with Alpine x-transition */
.pp-underline {
  position: relative;
}
.pp-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0%;
  background: var(--copper);
  transition: width 0.35s ease;
}
.pp-underline:hover::after,
.pp-underline.active::after {
  width: 100%;
}

.pp-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.pp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -12px rgba(11, 42, 34, 0.35);
}

.pp-img-zoom {
  overflow: hidden;
}
.pp-img-zoom img {
  transition: transform 0.7s ease;
}
.pp-img-zoom:hover img {
  transform: scale(1.08);
}

.pp-chip-pattern {
  background-image: radial-gradient(circle at 20% 30%, rgba(193, 103, 58, 0.15) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(47, 122, 92, 0.25) 0, transparent 45%);
}

.pp-divider {
  height: 3px;
  width: 64px;
  background: linear-gradient(90deg, var(--copper), var(--copper-light));
  border-radius: 999px;
}

.pp-counter-fallback {
  background: linear-gradient(135deg, var(--pine), var(--moss));
}

@keyframes pp-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.pp-fade-up {
  animation: pp-fade-up 0.7s ease both;
}

/* Sticky header shadow state handled via Alpine class binding, base styles here */
.pp-header {
  backdrop-filter: blur(10px);
}