/* Opening scene: photograph, headline, actions and statistics share one frame. */
.hero {
  --hero-safe-edge: clamp(20px, 4vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(900px, auto);
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: #470c0c;
}
.hero .hero-photo {
  display: block;
  position: relative;
  z-index: 0;
  grid-area: 1 / 1;
  inset: auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;
  margin: 0;
  padding: 0;
  transform: none;
  clip-path: none;
  mask: none;
}
.hero::before {
  content: '';
  display: block;
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  inset: auto;
  height: auto;
  /* A soft U-shaped shade covers the bright projection and lights. Its
     darkest core spans the middle third, fading into the room at the sides
     and rounding away below the headline, timer and ticket button. */
  background:
    radial-gradient(ellipse 36% 68% at 50% 8%, #000d 0%, #000c 42%, #0009 64%, #0004 82%, transparent 100%),
    linear-gradient(180deg, #0006 0%, #0002 48%, transparent 78%);
  pointer-events: none;
}
.hero .hero-content {
  position: relative;
  z-index: 3;
  grid-area: 1 / 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - var(--hero-safe-edge) * 2);
  min-width: 0;
  max-width: 1160px;
  margin: 0 auto;
  padding: 148px 0 240px;
}
.hero h1 {
  grid-area: auto;
  width: 100%;
  min-width: 0;
  max-width: 1160px;
  margin: 0;
  padding: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: balance;
}
.hero .event-meta {
  grid-area: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 62px 0 0;
}
.hero .event-meta span + span {
  display: inline-flex;
  align-items: center;
  border: 0;
  padding: 0;
}
.hero .event-meta span + span::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-right: 18px;
  border-radius: 50%;
  background: var(--red);
}
.hero .hero-ticket {
  grid-area: auto;
  flex-shrink: 0;
}
.hero .hero-pattern {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  align-self: end;
  inset: auto;
  width: 100%;
  height: clamp(260px, 18vw, 380px);
  aspect-ratio: auto;
  background: url('./assets/motifs/hero-photo-pixels-soft.svg?v=4-cellular') center bottom / cover no-repeat;
  mask: none;
  opacity: 1;
  transform: none;
  pointer-events: none;
}
.hero .hero-stats {
  position: relative;
  z-index: 4;
  grid-area: 1 / 1;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 80px);
  width: calc(100% - var(--hero-safe-edge) * 2);
  max-width: 980px;
  min-width: 0;
  margin: 0 auto clamp(32px, 3vw, 56px);
  text-align: center;
  text-shadow: 0 2px 18px #250606a6;
}
.hero .hero-stats > div { min-width: 0; }
.hero .hero-stats dd { max-width: none; }
.press { background: #470c0c; }
.press-logos > img:nth-child(3) { filter: brightness(0) invert(1); }

@media (max-width: 1366px) {
  .hero {
    grid-template-rows: minmax(max(clamp(720px, 75vh, 860px), 56.25vw), auto);
    grid-template-rows: minmax(max(clamp(720px, 75svh, 860px), 56.25vw), auto);
  }
  .hero .hero-content {
    max-width: 920px;
    padding: clamp(128px, 13.1vw, 144px) 0 180px;
  }
  .hero h1 {
    font-size: clamp(34px, calc(20px + 3.5vw), 64px);
    line-height: 1.06;
    letter-spacing: -.04em;
  }
  .hero .event-meta {
    gap: 16px;
    margin-top: 24px;
    font-size: clamp(15px, 1.75vw, 18px);
    line-height: 1.5;
  }
  .hero .event-meta span + span::before { margin-right: 16px; }
  .hero .hero-ticket {
    align-self: center;
    min-width: 0;
    max-width: 100%;
    margin: 24px 0 0;
    padding-inline: clamp(16px, 4.5vw, 26px);
    gap: clamp(16px, 4vw, 24px);
  }
  .hero .hero-ticket > span:nth-child(2) { min-width: 0; }
  .hero .hero-stats {
    max-width: 800px;
    gap: clamp(10px, 2vw, 24px);
    margin-bottom: 32px;
  }
  .hero .hero-stats dt {
    font-size: clamp(28px, 7.5vw, 64px);
    line-height: 1.15;
  }
  .hero .hero-stats dd {
    margin-top: 10px;
    font-size: clamp(13px, 1.8vw, 20px);
    line-height: 1.35;
  }
}
@media (max-width: 700px) {
  /* The centre crop fills the phone with the stage, so widen the same shade
     to keep every line legible while the audience remains visible below. */
  .hero::before {
    background:
      radial-gradient(ellipse 88% 62% at 50% 6%, #000d 0%, #000c 40%, #0009 66%, #0003 86%, transparent 100%),
      linear-gradient(180deg, #0005 0%, #0002 48%, transparent 78%);
  }
  .hero .hero-content { padding-bottom: 160px; }
  .hero .event-meta { flex-direction: column; gap: 8px; }
  .hero .event-meta span + span::before { display: none; }
  .hero .hero-pattern {
    height: clamp(180px, 54.1667vw, 300px);
    background-image: url('./assets/motifs/hero-photo-pixels-soft-mobile.svg?v=4-cellular');
  }
  .hero .hero-stats { margin-bottom: 24px; }
  html:not(.js) .hero { padding-top: 0; }
  html:not(.js) .hero .hero-content { padding-top: 220px; }
}


/* Shared offer colours sampled from the supplied early-bird reference. */
:root { --offer-blue:#0a49ba; --offer-blue-bright:#246ef5; --ticket-white:#fdf2f2; }
.hero .event-meta { font-family:inherit; }
.hero .event-meta span + span::before { border-radius:0; background:var(--offer-blue-bright); }
.hero-countdown { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px 24px; margin-top:14px; color:#fff; }
.hero-countdown[hidden], .hero-offer-tag[hidden] { display:none; }
.hero-countdown-label { font-size:20px; line-height:1.4; }
.hero-countdown-values { display:flex; align-items:baseline; gap:10px; font-size:28px; line-height:1.2; font-variant-numeric:tabular-nums; }
.hero-countdown-values > span { white-space:nowrap; }
.hero-countdown-values b { font-weight:400; }
.hero-countdown-values abbr { text-decoration:none; }
/* Fixed square pixels keep the separators crisp at every countdown width. */
.hero-countdown-values i {
  display:flex;
  flex:0 0 4px;
  flex-direction:column;
  align-self:center;
  gap:4px;
  width:4px;
  height:12px;
  color:var(--offer-blue-bright);
  font-size:0;
  font-style:normal;
  line-height:0;
}
.hero-countdown-values i::before,
.hero-countdown-values i::after {
  content:'';
  flex:0 0 4px;
  width:4px;
  height:4px;
  border-radius:0;
  background:currentColor;
}
.hero-action { display:flex; flex-direction:column; align-items:center; width:min(540px,100%); max-width:100%; margin-top:52px; }
.hero-offer-tag { position:relative; display:flex; align-items:stretch; justify-content:center; max-width:calc(100% - 36px); margin:0 0 -1px; color:#fff; background:var(--offer-blue-bright); font-size:18px; line-height:1.3; }
.hero-offer-tag > span { padding:11px 16px; white-space:nowrap; }
.hero-offer-tag > span:first-child { background:var(--offer-blue); }
.hero-offer-tag::before, .hero-offer-tag::after { content:''; position:absolute; bottom:0; width:18px; height:25px; }
.hero-offer-tag::before { right:100%; background:var(--offer-blue); }
.hero-offer-tag::after { left:100%; background:var(--offer-blue-bright); }
.hero .hero-action .hero-ticket { width:100%; min-width:0; max-width:100%; margin:0; min-height:90px; padding:15px 30px; justify-content:space-between; gap:16px; background:var(--ticket-white); --pixel-red:var(--offer-blue); --pixel-teal:var(--offer-blue-bright); --pixel-contrast:#79a7ff; }
.hero .hero-action .hero-ticket > span:nth-child(2) { flex:1; min-width:0; }
.hero .hero-action .hero-ticket:hover { background:#fff; }
@media(max-width:1366px) {
  .hero .hero-content { padding-bottom:210px; }
  .hero-action { margin-top:42px; }
}
@media(max-width:700px) {
  .hero .hero-content { padding-bottom:170px; }
  .hero .event-meta { flex-direction:row; gap:10px; margin-top:24px; font-size:clamp(13px,3.3vw,17px); }
  .hero .event-meta span + span::before { display:block; width:6px; height:6px; flex-basis:6px; margin-right:10px; }
  .hero-countdown { margin-top:16px; gap:8px 12px; }
  .hero-countdown-label { font-size:16px; }
  .hero-countdown-values { font-size:22px; gap:6px; }
  .hero-action { margin-top:34px; }
  .hero-offer-tag { max-width:calc(100% - 24px); font-size:clamp(12px,3.3vw,14px); }
  .hero-offer-tag > span { padding:11px 8px; }
  .hero-offer-tag::before, .hero-offer-tag::after { width:12px; height:24px; }
  .hero .hero-action .hero-ticket { min-height:82px; padding:13px 22px; gap:14px; }
  .hero-ticket small { font-size:14px; }
}
@media(max-width:380px) {
  .hero-countdown { flex-direction:column; gap:6px; }
  .hero-countdown-label { font-size:14px; }
  .hero-countdown-values { font-size:23px; }
  .hero-action { margin-top:28px; }
}

/* 01 · Phone composition: the headline holds the top, the timer, offer and
   button hold the foot, and the room stays clear through the middle. Two
   shades, one from each end, fade out before they meet. */
@media (max-width: 700px) {
  /* The frame is sized from the screen, never from the measured scene: the
     pinned hero's height is derived from the button's position, so a content
     box that stretched to that height would grow it again on every measure. */
  .hero .hero-content, .hero-scene .hero .hero-content { align-self: start; justify-content: flex-start; box-sizing: border-box; min-height: 100svh; padding-bottom: 196px; }
  /* the pinned scene zeroes the foot; keep the timer and button off the edge */
  .hero-scene.is-pinned .hero .hero-content { padding-bottom: 96px; }
  .hero .hero-countdown { margin-top: auto; }
  .hero .hero-countdown[hidden] + .hero-action { margin-top: auto; }
  .hero::before {
    background:
      linear-gradient(180deg, #000e 0%, #000c 16%, #0007 28%, #0000 44%),
      linear-gradient(0deg, #000e 0%, #000b 18%, #0006 32%, #0000 50%);
  }
}