/* Hero: a poster. The wordmark is set in Anton with a risograph-style offset print; the venue name links
   to Google Maps. One short entrance on load: the sun's rays grow out of the dark, then the type lands. */

.hero{--hero-gutter:clamp(16px,4vw,56px);--hero-rule:rgb(var(--brand-blush-rgb) / 0.45);--hero-soft:var(--brand-blush);position:relative;isolation:isolate;overflow:clip;min-height:100vh;min-height:100svh;padding:0;color:var(--text);background:radial-gradient(ellipse 72% 58% at 50% 46%,var(--brand-deep),rgb(var(--brand-deep-rgb) / 0) 72%),var(--background)}

/* ---------- Composition ---------- */
.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;padding:calc(var(--header-h) + clamp(14px,3.5svh,40px)) var(--hero-gutter) clamp(70px,10svh,100px);text-align:center}

.hero-kicker{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,18px);margin:0 0 clamp(10px,2.4svh,26px);font-family:var(--sans);font-size:clamp(.75rem,.7rem + .2vw,.875rem);line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:var(--hero-soft)}
.hero-kicker span{margin-right:-.2em}
.hero-kicker::before,.hero-kicker::after{content:"";flex:0 0 clamp(18px,5vw,72px);height:1px;background:linear-gradient(90deg,transparent,var(--hero-rule))}
.hero-kicker::after{background:linear-gradient(270deg,transparent,var(--hero-rule))}

/* The hand-drawn REINCAROCK logo (Artboard 1), centred on the sun */
.hero-mark{position:relative;display:grid;place-items:center;width:100%}
.hero .hero-title{position:relative;z-index:1;margin:0;font-family:var(--serif);font-size:min(19.2vw,30svh);font-weight:400;line-height:.92;letter-spacing:0;font-variant-ligatures:none;white-space:nowrap;text-transform:uppercase;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hero-logo{display:block;width:var(--logo-w,min(92vw,640px,calc((100svh - 400px) * 1.733)));height:auto;margin-inline:auto;-webkit-user-drag:none}
/* Stacked (phones, tablets): the info groups don't exist as boxes, so everything stays one centred column */
.hero-info,.hero-where,.hero-what{display:contents}

/* Artboard 2: the radiating sun behind the logo. Dim orange line art on black, screened onto the hero,
   so the black drops out without an alpha channel (a fraction of the file size). */
.hero-art{position:absolute;left:50%;top:50%;z-index:0;width:min(92vw,96svh);max-width:none;height:auto;translate:-50% -50%;mix-blend-mode:screen;opacity:.6;pointer-events:none;user-select:none}

/* ---------- Entrance (motion allowed, JS on) ----------
   The hero opens dark. js/hero.mjs draws the sun's rays in from the bottom-left and top-right corners (it adds
   .is-rays and drives clip-path), then the logo lands in the middle. If that script never runs, the sun reveals
   itself after 2.6s. The type's entrance is pure CSS
   with backwards fill only, so text can't stay hidden if a script fails and nothing lingers afterwards. */
:root[data-motion="full"].js .hero-art{clip-path:circle(0 at 50% 50%);animation:hero-sun-fallback .9s ease-out 2.6s both}
:root[data-motion="full"].js .hero-art.is-rays{clip-path:none;animation:none}
@keyframes hero-sun-fallback{to{clip-path:circle(75% at 50% 50%)}}
@keyframes hero-rise{from{opacity:0;translate:0 18px}}
@keyframes hero-fade{from{opacity:0}}
:root[data-motion="full"].js :is(.hero-logo,.hero-kicker,.hero-venue,.hero-date,.hero-lineup,.hero-actions){animation:hero-rise .9s var(--ease-out) backwards}
:root[data-motion="full"].js .hero-logo{animation-duration:1.1s;animation-delay:1.2s}
:root[data-motion="full"].js .hero-kicker{animation-delay:1.4s}
:root[data-motion="full"].js .hero-venue{animation-delay:1.5s}
:root[data-motion="full"].js .hero-date{animation-delay:1.57s}
:root[data-motion="full"].js .hero-lineup{animation-delay:1.64s}
:root[data-motion="full"].js .hero-actions{animation-delay:1.71s}
:root[data-motion="full"].js :is(.hero-footnote,.hero .corner,.site-header){animation:hero-fade .8s ease 1.75s backwards}

/* Venue line: a quiet label over the venue name, which opens Google Maps */
.hero-venue{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,.9svh,10px);margin-top:clamp(16px,3.4svh,36px)}
.hero-venue-label{display:flex;align-items:center;gap:14px;font-family:var(--sans);font-size:clamp(.75rem,.72rem + .12vw,.8125rem);line-height:1.4;letter-spacing:.28em;text-transform:uppercase;color:var(--hero-soft)}
.hero-venue-label::before,.hero-venue-label::after{content:"";width:24px;height:1px;background:var(--hero-rule)}
.hero-venue-label::after{margin-left:-.28em}
.hero-venue-link{display:inline-flex;align-items:center;gap:.3em;font-family:var(--serif);font-size:clamp(1.5rem,1.05rem + 1.6vw,2.35rem);line-height:1.15;letter-spacing:.03em;text-transform:uppercase;color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--hero-rule);transition:text-decoration-color .25s ease}
.hero-venue-link:hover{text-decoration-color:currentColor}
.hero-venue-pin{flex:none;width:.4em;height:.5em;color:var(--muted);transition:translate .3s var(--ease-spring),color .25s ease}
.hero-venue-link:hover .hero-venue-pin,.hero-venue-link:focus-visible .hero-venue-pin{translate:0 -.12em;color:var(--text)}

.hero-date{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;margin-top:clamp(10px,2.2svh,22px);font-size:clamp(.8125rem,.77rem + .18vw,.9375rem);line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--hero-soft)}
.hero-date span:last-child{margin-right:-.12em}
/* The four bands, the strongest reason to come, right under the date */
.hero-lineup{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px .7em;margin-top:clamp(8px,1.6svh,16px);font-family:var(--serif);font-size:clamp(1.05rem,.9rem + .55vw,1.45rem);line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.hero-lineup i{font-style:normal;color:var(--red-hot)}
.hero-lineup span:not(.sr-only){white-space:nowrap}
.hero-date-sep{color:var(--hero-rule)}

.hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 30px;margin-top:clamp(18px,3.4svh,36px)}
.hero .hero-cta{min-height:56px;padding:15px 34px;font-size:.85rem;letter-spacing:.18em}
.hero .hero-more{padding:12px 0;border-bottom:1px solid var(--hero-rule);font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
.hero .hero-more:hover{text-decoration:none;border-color:var(--text)}

/* Crop marks, like the corners of a print sheet */
.hero .corner{position:absolute;z-index:2;display:grid;place-items:center;width:30px;height:30px;border:0;background:none;color:var(--muted);font-size:15px;line-height:1;opacity:.7;pointer-events:none}
.hero .corner::before,.hero .corner::after{content:"";position:absolute;background:var(--hero-rule)}
.hero .corner::before{width:100%;height:1px}
.hero .corner::after{width:1px;height:100%}
.hero .corner-tl{top:calc(var(--header-h) + 12px);left:12px}
.hero .corner-tr{top:calc(var(--header-h) + 12px);right:12px}
.hero .corner-bl{bottom:12px;left:12px}
.hero .corner-br{bottom:12px;right:12px}
.hero .corner-tl::before,.hero .corner-tr::before{top:0}
.hero .corner-bl::before,.hero .corner-br::before{bottom:0}
.hero .corner-tl::after,.hero .corner-bl::after{left:0}
.hero .corner-tr::after,.hero .corner-br::after{right:0}

.hero-footnote{position:absolute;left:56px;right:56px;bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:.75rem;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--hero-soft)}
.hero-footnote::before{content:"";order:1;flex:1;height:1px;background:linear-gradient(90deg,rgb(var(--brand-blush-rgb) / 0.06),rgb(var(--brand-blush-rgb) / 0.32) 50%,rgb(var(--brand-blush-rgb) / 0.06))}
.hero-footnote span:last-child{order:2;margin-right:-.18em}

/* ---------- Wide screens: a big logo, with the info flanking its tail ----------
   Below ~68% of its height the logo is only the thin tail (at 46-52% of its width), so the info row is pulled up
   to start there: venue and date to the left of the tail, lineup and tickets to the right. The sun is sized to the
   logo as drawn (95.5% of its width, centred just above it), and a dark wash at the foot of the hero fades any rays
   that reach the edge, so they never end in a hard line. */
@media (min-width:1000px) and (min-height:600px){
  .hero{--logo-w:min(84vw,1100px,calc((100svh - 185px) * 1.33))}
  .hero-art{width:calc(var(--logo-w) * .955);translate:-50% calc(-50% - var(--logo-w) * .018)}
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:0;height:clamp(90px,15svh,150px);pointer-events:none;background:linear-gradient(rgb(var(--brand-deep-rgb) / 0),var(--background) 85%)}
  .hero-info{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--logo-w) * .15) minmax(0,1fr);align-items:start;position:relative;z-index:1;width:100%;max-width:1400px;margin-top:calc(var(--logo-w) * -.18)}
  .hero-where{grid-column:1;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
  .hero-what{grid-column:3;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
  .hero-venue{align-items:flex-end;margin-top:0}
  .hero-venue-label::after{display:none}
  .hero-venue-label{margin-right:-.28em}
  .hero-date{flex-direction:column;align-items:flex-end;gap:2px}
  .hero-date-sep{display:none}
  .hero-lineup{justify-content:flex-start;margin-top:clamp(26px,3.6svh,40px)}
  .hero-actions{justify-content:flex-start;margin-top:clamp(16px,2.4svh,26px)}
  .hero-footnote{z-index:1}
}

/* ---------- Phones and portrait tablets: a larger sun around the logo ---------- */
@media (max-width:560px),(max-width:900px) and (orientation:portrait){
  .hero-art{width:min(124vw,66svh)}
}
@media (max-width:600px){
  .hero{--hero-gutter:16px}
  .hero-kicker{gap:10px;font-size:.7rem;letter-spacing:.14em}
  .hero-kicker span{margin-right:-.14em}
  .hero-kicker::before,.hero-kicker::after{flex-basis:14px}
  .hero-inner{padding-bottom:64px}
  .hero-date{flex-direction:column;gap:2px;letter-spacing:.1em}
  .hero-date-sep{display:none}
  .hero-date span:last-child{margin-right:-.1em}
  .hero-actions{flex-direction:column;gap:6px}
  .hero .hero-cta{min-width:min(260px,100%)}
  .hero-footnote{left:50px;right:50px;bottom:17px;font-size:.6875rem;letter-spacing:.12em;gap:10px}
  .hero-footnote span:last-child{margin-right:-.12em}
  .hero .corner{width:24px;height:24px;font-size:12px}
  .hero .corner-tl,.hero .corner-tr{top:calc(var(--header-h) + 8px)}
}
@media (max-width:360px){
  .hero-kicker{font-size:.625rem;letter-spacing:.08em}
  .hero-kicker span{margin-right:-.08em}
  .hero-lineup{gap:2px .5em;font-size:.9rem}
  .hero-kicker::before,.hero-kicker::after{display:none}
  .hero-venue-label{letter-spacing:.24em}
  .hero-date{font-size:.75rem}
  .hero-footnote{left:40px;right:40px;letter-spacing:.08em}
}
@media (max-width:600px) and (max-height:760px){
  .hero-inner{padding-top:calc(var(--header-h) + 10px);padding-bottom:52px}
  .hero-kicker{margin-bottom:10px}
  .hero-venue{margin-top:12px}
  .hero-date{margin-top:8px}
  .hero-lineup{margin-top:6px}
  .hero-actions{margin-top:14px;gap:0}
  .hero .hero-cta{min-height:52px}
  .hero .hero-more{padding:10px 0}
  .hero-footnote{bottom:14px}
  .hero .corner-bl,.hero .corner-br{bottom:9px}
}
@media (max-height:520px) and (orientation:landscape){
  .hero-inner{padding-bottom:58px}
}