/* Sunrise Festival 2026 — bespoke homepage spotlight.
   Everything is scoped under .sunrise-fest so it can't leak into (or be
   clobbered by) the rest of the site's CSS — this design uses deliberately
   generic class names (.card, .container, .grid, .hero...) that would
   otherwise collide with base.css/home.css. */

.sunrise-fest {
  --dawn-deep: oklch(0.05 0.005 40);
  --dawn-glow: oklch(0.72 0.15 38);
  --dawn-sun:  oklch(0.80 0.10 55);
  --dawn-soft: oklch(0.98 0.01 95);

  display: block;
  background: var(--dawn-deep);
  color: var(--dawn-soft);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  border-radius: var(--radius-lg, 1rem);
  overflow: hidden;
  margin-bottom: 24px;
}
.sunrise-fest, .sunrise-fest * {
  box-sizing: border-box;
}
.sunrise-fest ::selection {
  background: color-mix(in oklch, var(--dawn-glow) 30%, transparent);
  color: #fff;
}
.sunrise-fest img { display: block; max-width: 100%; }
.sunrise-fest button, .sunrise-fest .cta { font: inherit; cursor: pointer; }

.sunrise-fest .hero {
  position: relative; padding: 4rem 1.5rem 2.5rem; overflow: hidden; text-align: center;
  /* home.css has its own unscoped `.hero{height:420px/380px/320px}` for the
     site's photo-carousel banner — since this component reuses the same
     class name, explicitly reset every property it sets so it can never
     leak in and clip our content (this is what was hiding the countdown). */
  height: auto; min-height: 0; max-height: none; z-index: auto; border-radius: 0; box-shadow: none;
}
@media (min-width: 768px) { .sunrise-fest .hero { padding: 5rem 1.5rem 3.5rem; } }

.sunrise-fest .hero-glow {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 300px;
  background: color-mix(in oklch, var(--dawn-glow) 10%, transparent);
  filter: blur(120px); border-radius: 9999px; z-index: 0;
  animation: sunriseGentlePulse 8s ease-in-out infinite;
}
@media (min-width: 768px) { .sunrise-fest .hero-glow { width: 800px; height: 400px; } }

.sunrise-fest .container { max-width: 72rem; margin: 0 auto; position: relative; z-index: 1; }

.sunrise-fest .badge {
  display: inline-block; max-width: 100%; padding: .375rem .75rem;
  border: 1px solid color-mix(in oklch, var(--dawn-glow) 50%, transparent);
  border-radius: 9999px; font-size: 9px; font-weight: 600;
  /* Tighter tracking on narrow phones — at .3em this long string doesn't
     fit on one line under ~400px and wraps awkwardly inside the pill shape. */
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2rem;
  animation: sunriseFloat 6s ease-in-out infinite, sunriseFadeInUp .8s cubic-bezier(.16,1,.3,1) both;
}
@media (min-width: 480px) { .sunrise-fest .badge { font-size: 10px; letter-spacing: .2em; padding: .375rem 1rem; } }
@media (min-width: 768px) { .sunrise-fest .badge { font-size: 12px; letter-spacing: .3em; } }

.sunrise-fest h1.title {
  font-family: "Syne", sans-serif; font-weight: 800; font-size: 2.75rem;
  letter-spacing: -.05em; margin-bottom: 1.5rem;
  background: linear-gradient(to bottom right, var(--dawn-glow), var(--dawn-sun), var(--dawn-soft));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: sunriseFadeInUp .8s cubic-bezier(.16,1,.3,1) both; animation-delay: 150ms;
}
@media (min-width: 768px) { .sunrise-fest h1.title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .sunrise-fest h1.title { font-size: 4.5rem; margin-bottom: 2rem; } }

.sunrise-fest .lede {
  max-width: 42rem; margin: 0 auto; font-size: 1rem; line-height: 1.7;
  color: color-mix(in oklch, var(--dawn-soft) 88%, transparent);
  animation: sunriseFadeInUp .8s cubic-bezier(.16,1,.3,1) both; animation-delay: 300ms;
}
@media (min-width: 768px) { .sunrise-fest .lede { font-size: 1.125rem; } }

.sunrise-fest .countdown {
  /* display:flex (not inline-flex) + margin:auto centers reliably as a block,
     flex-wrap+max-width means a too-narrow phone wraps to 2 rows instead of
     silently overflowing past .hero's overflow:hidden and getting clipped. */
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: .4rem; margin: 2rem auto 0; max-width: 100%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 1.1rem; padding: .625rem .75rem;
  box-shadow: 0 0 40px color-mix(in oklch, var(--dawn-glow) 12%, transparent);
  animation: sunriseFadeInUp .8s cubic-bezier(.16,1,.3,1) both; animation-delay: 450ms;
}
@media (min-width: 480px) { .sunrise-fest .countdown { gap: .75rem; padding: .75rem 1rem; } }
@media (min-width: 768px) { .sunrise-fest .countdown { gap: 1.25rem; margin-top: 2.5rem; padding: 1rem 1.5rem; } }

.sunrise-fest .cd-unit { text-align: center; min-width: 2.25rem; }
@media (min-width: 480px) { .sunrise-fest .cd-unit { min-width: 2.75rem; } }
@media (min-width: 768px) { .sunrise-fest .cd-unit { min-width: 3.25rem; } }
.sunrise-fest .cd-num { font-family: "Syne", sans-serif; font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--dawn-soft); }
@media (min-width: 480px) { .sunrise-fest .cd-num { font-size: 1.5rem; } }
@media (min-width: 768px) { .sunrise-fest .cd-num { font-size: 2rem; } }
.sunrise-fest .cd-label { font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: color-mix(in oklch, var(--dawn-soft) 68%, transparent); }
@media (min-width: 480px) { .sunrise-fest .cd-label { font-size: 9px; letter-spacing: .18em; } }
.sunrise-fest .cd-sep { font-family: "Syne", sans-serif; font-weight: 700; font-size: 1.25rem; color: color-mix(in oklch, var(--dawn-glow) 65%, transparent); }
@media (min-width: 480px) { .sunrise-fest .cd-sep { font-size: 1.5rem; } }
@media (min-width: 768px) { .sunrise-fest .cd-sep { font-size: 2rem; } }

.sunrise-fest .divider {
  margin-top: 2.5rem; display: flex; justify-content: center;
  animation: sunriseFadeInUp .8s cubic-bezier(.16,1,.3,1) both; animation-delay: 600ms;
}
.sunrise-fest .divider span { display: block; width: 10rem; max-width: 60%; height: 1px; background: linear-gradient(to right, transparent, var(--dawn-glow), transparent); }

.sunrise-fest .cards { padding: 0 1.5rem 3rem; max-width: 80rem; margin: 0 auto; }
@media (min-width: 768px) { .sunrise-fest .cards { padding-bottom: 4rem; } }

.sunrise-fest .grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .sunrise-fest .grid { grid-template-columns: repeat(3, 1fr); } }

.sunrise-fest .card {
  position: relative; display: flex; flex-direction: column; height: 440px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem; overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .5s ease, box-shadow .5s ease;
  animation: sunriseFadeInUp .8s cubic-bezier(.16,1,.3,1) both;
}
@media (min-width: 768px) { .sunrise-fest .card { height: 480px; } }
.sunrise-fest .grid .card:nth-child(1) { animation-delay: 750ms; }
.sunrise-fest .grid .card:nth-child(2) { animation-delay: 900ms; }
.sunrise-fest .grid .card:nth-child(3) { animation-delay: 1050ms; }

.sunrise-fest .card:hover { transform: translateY(-.5rem); box-shadow: 0 0 30px color-mix(in oklch, var(--dawn-glow) 15%, transparent); }
.sunrise-fest .card img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform .7s ease, opacity .7s ease; }
.sunrise-fest .card:hover img { transform: scale(1.05); opacity: .72; }
.sunrise-fest .card .overlay { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklch, var(--dawn-deep) 80%, transparent), color-mix(in oklch, var(--dawn-deep) 40%, transparent) 55%, transparent); z-index: 1; }
.sunrise-fest .card .body { position: relative; z-index: 2; margin-top: auto; padding: 1.5rem; }
@media (min-width: 768px) { .sunrise-fest .card .body { padding: 1.75rem; } }

.sunrise-fest .day-row { display: flex; align-items: flex-end; gap: .75rem; margin-bottom: 1rem; }
.sunrise-fest .day-num { font-family: "Syne", sans-serif; font-weight: 700; font-size: 2.25rem; line-height: 1; color: var(--dawn-sun); }
@media (min-width: 768px) { .sunrise-fest .day-num { font-size: 3rem; } }
.sunrise-fest .day-month { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; margin-bottom: .25rem; color: color-mix(in oklch, var(--dawn-soft) 75%, transparent); }

.sunrise-fest .card h3 { font-family: "Syne", sans-serif; font-weight: 700; font-size: 1.5rem; margin-bottom: .5rem; text-transform: uppercase; letter-spacing: -.01em; color: #fff; }
@media (min-width: 768px) { .sunrise-fest .card h3 { font-size: 1.75rem; } }
.sunrise-fest .card p {
  color: color-mix(in oklch, var(--dawn-soft) 82%, transparent); margin-bottom: 1.5rem; font-size: 12px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  /* Reserve space for 2 full lines regardless of actual tagline length, so the
     headliner row below (and the whole text block above, via .body's
     margin-top:auto) lands at the same height across every card. */
  min-height: 3.2em;
}
@media (min-width: 768px) { .sunrise-fest .card p { font-size: 14px; } }

.sunrise-fest .headliner { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.sunrise-fest .headliner .k { flex-shrink: 0; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: color-mix(in oklch, var(--dawn-soft) 55%, transparent); }
.sunrise-fest .headliner .v {
  font-size: 12px; font-weight: 500; color: var(--dawn-sun);
  /* Never wrap to a 2nd line — a long headliner name would otherwise make
     just that one card taller than its siblings. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 65%;
}
@media (min-width: 768px) { .sunrise-fest .headliner .v { font-size: 14px; } }

.sunrise-fest .cta-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem 3rem; text-align: center; }
.sunrise-fest .cta {
  display: inline-block; padding: 1rem 2rem; background: var(--dawn-glow); color: var(--dawn-deep);
  font-weight: 700; border-radius: 9999px; text-decoration: none;
  transition: transform .2s ease, background .2s ease;
  animation: sunriseFadeInUp .8s cubic-bezier(.16,1,.3,1) both; animation-delay: 1200ms;
}
@media (min-width: 768px) { .sunrise-fest .cta { padding: 1.25rem 3rem; } }
.sunrise-fest .cta:hover { background: var(--dawn-sun); transform: scale(1.05); }
.sunrise-fest .cta:active { transform: scale(.95); }
.sunrise-fest .foot { margin-top: 1.25rem; font-size: 10px; text-transform: uppercase; letter-spacing: .3em; color: color-mix(in oklch, var(--dawn-soft) 55%, transparent); }
@media (min-width: 768px) { .sunrise-fest .foot { letter-spacing: .4em; } }

@keyframes sunriseFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sunriseFadeInUp { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes sunriseGentlePulse { 0%,100% { opacity: .5; } 50% { opacity: .8; } }

@media (prefers-reduced-motion: reduce) {
  .sunrise-fest .hero-glow,
  .sunrise-fest .badge,
  .sunrise-fest h1.title,
  .sunrise-fest .lede,
  .sunrise-fest .countdown,
  .sunrise-fest .divider,
  .sunrise-fest .card,
  .sunrise-fest .cta {
    animation: none !important;
  }
}