.carving-hero{
  position:relative;
  isolation:isolate;
  background-image:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('/assets/images/CP Homepage static.png');
  background-position:center 30%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  padding: clamp(2rem, 5vw, 5rem) 1.25rem;
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}

.home-hero {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 90vh;
  padding: clamp(16px, 5vw, 64px);
  background-color: black;
  overflow: hidden;
  z-index: 0; /* Ensure stacking context */
}

/* Fading skull background image */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/proverbnoback.png'); /* Your skull image */
  background-repeat: no-repeat;
  background-position: left;
  background-size: auto 210%;
  opacity: 0;
  animation: fadeIn 2.5s ease-in forwards;
  z-index: 0;
  pointer-events: none;
}

/* Keyframes for fade-in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

@keyframes fadeInText {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: right center;
  line-height: 1;
  gap: 0;
  z-index: 1;
}

.hero-copy span:nth-child(0),
.hero-copy span:nth-child(1) {
  display: block;
  margin-bottom: -0.2em; 
  line-height: 1;
}

.drip-text {
  font-family: 'Shlop', sans-serif;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  animation: spooky-flicker 6s linear infinite;
}

.drip-text.outline {
  font-size: clamp(3rem, 13vw, 20rem);
  color: transparent;
  -webkit-text-stroke: 2px white;
}

.drip-text.neon {
  font-size: clamp(1.5rem, 5vw, 4rem);
  color: rgb(9, 160, 9);
  margin-block: -0.5rem; /* compress spacing between lines */
  animation: fadeInText 1.5s ease-in forwards;
}

.drip-text.details {
  font-size: clamp(1.5rem, 2vw, 4rem);
  color: rgb(214, 99, 4);
  margin-block: -0.5rem; /* compress spacing between lines */
  cursor: pointer;
}

.event-details {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.event-text {
  font-size: 1.25rem;
  color: #ccc;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 1px;
  text-shadow: 0 0 6px black;
}

/* 🔘 Button styling */
.btn--primary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #14ff3d;
  color: black;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow: 0 0 12px #0aff2f, 0 0 20px #0aff2f;
  transition: background 0.3s ease, transform 0.2s;
  animation: spooky-flicker 6s linear infinite;
}

.btn--primary:hover {
  background-color: #10cc2d;
  transform: scale(1.05);
}


@media (max-width: 768px) {
  .home-hero {
    justify-content: center;
    background-position: center 10%;
    background-size: 85vw auto;
    padding: 48px 16px;
  }

  .home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/proverbnoback.png'); /* Your skull image */
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 180%;
    opacity: 0;
    animation: fadeIn 2.5s ease-in forwards;
    z-index: 0;
    pointer-events: none;
  }

  .drip-text.outline {
    font-size: clamp(3rem, 25vw, 20rem);
    color: transparent;
    -webkit-text-stroke: 2px white;
  }

  .drip-text.neon {
    font-size: clamp(1.5rem, 12vw, 4rem);
    color: rgb(9, 160, 9);
  }

  .hero-copy {
    align-items: center;
    text-align: center;
  }
}

footer{
  padding:2rem 1rem; text-align:center; color:var(--muted);
}
.social-link{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius: 999px; padding:.35rem .75rem;
  background: #141414; border:1px solid #1f1f1f;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.social-link:hover{
  border-color: var(--ring);
  box-shadow: 0 0 0 6px var(--ring);
  transform: translateY(-1px);
}
.social-icon{ width:1.1rem; height:1.1rem; filter: grayscale(1) brightness(1.6); }

.reveal{ opacity:0; transform: translateY(14px); }
.reveal.is-visible{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
}

@keyframes spooky-flicker{
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity:1; }
  20%, 24%, 55% { opacity:.72; }
  23% { opacity:.45; }
}

.event-card{
  max-width: 960px;
  margin: clamp(1rem, 4vw, 2rem) auto 2.5rem;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 1.5rem);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255,60,0,.08), transparent 60%),
    var(--surface);
  border:1px solid #222;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.event-card h2{
  font-family: Creepster, cursive;
  color: var(--accent);
  font-size: var(--step-2);
  margin:0 0 .75rem;
  letter-spacing:.4px;
  text-shadow: 0 0 14px color-mix(in oklab, var(--accent) 40%, transparent);
}

.event-list{
  list-style:none; margin:0; padding:0;
  font-size: var(--step-0);
  line-height:1.7;
}
.event-list li{ margin:.4rem 0; }
.event-list strong{ color:#fff; }
.event-list .free{
  color:#1bac0e; font-weight:700;
  text-shadow: 0 0 12px rgba(21,211,91,.25);
}

.map-card{
  max-width: 1100px;
  margin: clamp(1rem, 4vw, 2rem) auto 2.5rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255,60,0,.06), transparent 60%),
    var(--surface);
  border:1px solid #222;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.map-card h3{
  font-family: Creepster, cursive;
  color: var(--accent);
  font-size: var(--step-2);
  margin: 0 0 .75rem;
  letter-spacing:.4px;
  text-shadow: 0 0 14px color-mix(in oklab, var(--accent) 40%, transparent);
}

.map-embed{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  outline: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.map-embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
}

.map-actions{
  margin-top: .75rem;
  border: 1px solid white;
  max-width: fit-content;
  padding: 10px;
}

.parking-info {
  margin-top: 1.5rem;
  padding: 1rem;
  border-left: 4px solid limegreen;
  background-color: rgba(255, 255, 255, 0.02);
  color: #ccc;
  font-size: 1rem;
  max-width: 640px;
}

.parking-info h4 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  color: #fff;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}