/* ============================================================
   Horizon Music Festival — shared design system
   Editorial Cinematic · Montserrat · sunset-horizon signature
   ============================================================ */

:root{ --sunset: linear-gradient(90deg, #EA1A17 0%, #EA4316 26%, #C92468 55%, #9C34A8 80%, #4A37AC 100%); }
html{ scroll-behavior:smooth; }
body{ background:#0C0710; -webkit-font-smoothing:antialiased; }

/* ---- signature: sunset horizon line ---- */
.horizon-rule{ height:3px; border-radius:99px; background:var(--sunset); box-shadow:0 0 18px 0 rgba(234,67,22,.55), 0 0 42px 0 rgba(201,36,104,.35); }
.horizon-divider{ height:2px; width:100%; background:var(--sunset); box-shadow:0 0 22px 1px rgba(234,67,22,.5), 0 -1px 30px 0 rgba(201,36,104,.4); }
.text-sunset{ background:var(--sunset); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- type ---- */
.eyebrow{ font-weight:300; letter-spacing:0.26em; text-transform:uppercase; }
.section-h{ font-weight:800; text-transform:uppercase; letter-spacing:-0.03em; line-height:0.95; font-size:clamp(1.9rem,4.6vw,3.6rem); }
.hero-h1{ font-weight:900; text-transform:uppercase; letter-spacing:-0.035em; line-height:0.92; font-size:clamp(2.15rem,8.5vw,6.3rem); }
.hero-h1 span.line{ display:block; }
@media (min-width:768px){ .hero-h1{ line-height:0.9; } .hero-h1 span.line{ white-space:nowrap; } }
.hero-sub{ text-shadow:0 2px 26px rgba(12,7,16,.75); }

/* sub-page title: big but a touch smaller than the home hero */
.page-title{ font-weight:900; text-transform:uppercase; letter-spacing:-0.035em; line-height:0.92; font-size:clamp(2.4rem,6.5vw,5rem); }

/* ---- texture ---- */
.grain::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---- CTAs ---- */
/* display:inline-flex makes overflow:hidden actually clip the sliding ::before fill
   (overflow does NOT apply to plain inline <a> elements, which let the gradient escape) */
.btn-rsvp{ display:inline-flex; align-items:center; justify-content:center; background:#fff; color:#160C1D; position:relative; isolation:isolate; overflow:hidden; transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, color .35s ease; }
.btn-rsvp.block{ display:block; }
.btn-rsvp::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--sunset); transform:translateY(101%); transition:transform .4s cubic-bezier(.16,1,.3,1); }
.btn-rsvp:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 14px 34px -10px rgba(201,36,104,.7); }
.btn-rsvp:hover::before{ transform:translateY(0); }
.btn-rsvp:active{ transform:translateY(0); }
.btn-outline{ border:1.5px solid rgba(255,255,255,.35); color:#fff; transition:border-color .3s, background-color .3s, transform .3s; }
.btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px); }
/* dark outline for use on light backgrounds */
.btn-outline-dark{ border:1.5px solid rgba(22,12,29,.25); color:#160C1D; transition:border-color .3s, background-color .3s, transform .3s; }
.btn-outline-dark:hover{ border-color:rgba(22,12,29,.6); background:rgba(22,12,29,.04); transform:translateY(-2px); }

.link-ghost{ position:relative; }
.link-ghost::after{ content:""; position:absolute; left:0; bottom:-3px; height:1.5px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.16,1,.3,1); }
.link-ghost:hover::after{ transform:scaleX(1); }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:3px solid #EA4316; outline-offset:3px; border-radius:4px; }

/* ---- media cards ---- */
.artist-card img{ transition:transform .6s cubic-bezier(.16,1,.3,1), filter .5s ease; }
.artist-card:hover img{ transform:scale(1.05); }
.hover-zoom img{ transition:transform .7s cubic-bezier(.16,1,.3,1); }
.hover-zoom:hover img{ transform:scale(1.04); }

/* ---- FAQ / accordion ---- */
.faq summary::-webkit-details-marker{ display:none; }
.faq summary{ cursor:pointer; list-style:none; }
.faq .chev{ transition:transform .3s ease; }
.faq details[open] .chev{ transform:rotate(45deg); }

/* ---- entrance choreography ---- */
@keyframes riseIn{ from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:translateY(0);} }
.rise{ opacity:0; animation:riseIn .9s cubic-bezier(.16,1,.3,1) forwards; }
.d1{animation-delay:.15s} .d2{animation-delay:.32s} .d3{animation-delay:.49s} .d4{animation-delay:.66s} .d5{animation-delay:.83s}
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---- nav ---- */
#nav{ transition:background-color .4s ease, backdrop-filter .4s ease, border-color .4s ease; }
#nav.solid{ background-color:rgba(12,7,16,.85); backdrop-filter:blur(12px); border-color:rgba(255,255,255,.08); }
/* pages with a light header start with a solid nav */
#nav.always-solid{ background-color:rgba(12,7,16,.92); backdrop-filter:blur(12px); border-color:rgba(255,255,255,.08); }

#mobileMenu{ transition:opacity .35s ease, visibility .35s ease; }
#mobileMenu.hidden-menu{ opacity:0; visibility:hidden; pointer-events:none; }

@media (prefers-reduced-motion: reduce){
  .rise,.reveal{ animation:none; opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .artist-card:hover img, .hover-zoom:hover img{ transform:none; }
}