/* Navigation is a separate fixed HUD panel; the hero logo never changes size. */
html {
  scroll-padding-top:104px
}

.scroll-header {
  position:fixed;
  inset:0 0 auto;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:76px;
  padding:0 24px;
  background:#080b10f5;
  border:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(calc(-100% - 16px));
  transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .4s ease,visibility .4s;
  pointer-events:none
}

.scroll-header.is-visible {
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto
}

.scroll-brand {
  display:flex;
  flex:none;
  align-items:center;
  width:184px;
  min-height:64px
}

.scroll-brand img {
  display:block;
  width:100%;
  height:76px;
  object-fit:contain
}

.scroll-nav {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-sm)
}

.scroll-nav a {
  position:relative;
  padding:var(--space-sm) 12px;
  justify-content:center;
  display:flex;
  align-items:center;
  min-height:44px;
  font:400 clamp(10px,.85vw,13px)/1.5 var(--body);
  text-transform:uppercase;
  white-space:nowrap;
  transition:color 180ms ease
}

.scroll-nav a:hover,.scroll-nav a:focus-visible {
  color:var(--orange)
}

/* A cut-corner control and precise three-line glyph continue the hero HUD. */
.menu-toggle {
  border:0;
  min-height:48px;
  padding:12px;
  background:#080b10f2
}

.menu-icon {
  width:22px;
  height:16px;
  border:0;
  transform:none!important;
  background:linear-gradient(var(--orange),var(--orange)) right center/14px 1px no-repeat;
  transition:background-size .2s
}

.menu-icon::before,.menu-icon::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  border:0;
  background:currentColor;
  transition:transform .2s
}

.menu-icon::after {
  top:auto;
  bottom:0
}

.menu-toggle[aria-expanded="true"] .menu-icon {
  background-size:0 1px
}

.menu-toggle[aria-expanded="true"] .menu-icon::before {
  transform:translateY(7.5px) rotate(45deg)
}

.menu-toggle[aria-expanded="true"] .menu-icon::after {
  transform:translateY(-7.5px) rotate(-45deg)
}

.menu-toggle:focus-visible {
  outline:2px solid var(--orange);
  outline-offset:4px
}

.hero .nav-main.is-open {
  background:#080b10fa;
  background-image:var(--panel-marks);
  border-color:var(--line)
}

@media(min-width:768px) and (max-width:1100px) {
  .scroll-header {
    gap:16px;
    padding-inline:16px
  }
  .scroll-brand {
    width:140px
  }
  .scroll-nav {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--space-xs) var(--space-sm);
    padding-block:var(--space-sm)
  }
  .scroll-nav a {
    font-size:10px;
    min-height:36px;
    padding:var(--space-sm)
  }
  html {
    scroll-padding-top:128px
  }
}

@media (max-width:767px) {
  .scroll-header .scroll-menu-toggle {
    display:flex;
    position:relative;
    inset:auto;
    z-index:2
  }
  .scroll-nav {
    display:none;
    position:absolute;
    inset:100% 0 auto;
    padding:18px;
    background:#080b10fa;
    border:0;
    max-height:calc(100svh - 120px);
    overflow:auto;
    overscroll-behavior:contain
  }
  .scroll-nav a {
    padding:12px;
    font-size:12px;
    white-space:normal;
    border:0
  }
  html {
    scroll-padding-top:90px
  }
  .scroll-header {
    min-height:64px;
    padding:0 12px;
    gap:12px
  }
  .scroll-brand {
    width:140px;
    min-height:62px
  }
  .scroll-brand img {
    height:62px
  }
  .scroll-nav.is-open {
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-sm);
    padding:var(--space-md);
    max-height:calc(100svh - 98px)
  }
  .hero .nav-main {
    max-height:calc(100svh - 96px);
    overflow:auto;
    overscroll-behavior:contain
  }
  .hero .nav-main a {
    border:0
  }
  .hero .event-date {
    font-size:clamp(18px,5.3cqw,22px)
  }
  .hero-date-panel {
    gap:12px;
    padding-inline:24px
  }
}

/* Line-by-line scan: original text and its colours are preserved, without clones. */
.reveal-run,.reveal-word {
  font:inherit!important;
  color:inherit!important;
  text-transform:inherit!important
}

.reveal-run {
  display:inline!important;
  margin:0!important;
  padding:0!important
}

.reveal-word {
  display:inline-block!important;
  position:relative;
  margin:0!important;
  padding:0!important;
  vertical-align:baseline;
  max-width:100%;
  overflow:clip;
  overflow-wrap:anywhere;
  white-space:normal;
  word-break:break-word
}

.reveal-ready:not(.is-revealing) .reveal-word {
  opacity:0
}

.is-revealing .reveal-word {
  animation:text-scan .9s cubic-bezier(.25,.45,.35,1) var(--reveal-delay,0ms) both
}

.is-revealing .reveal-word::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 2px,#080b1055 2px 3px),linear-gradient(90deg,var(--orange) 0 65%,#fff 65% 72%,transparent 72%);
  animation:scan-edge .9s cubic-bezier(.25,.45,.35,1) var(--reveal-delay,0ms) both
}

@keyframes text-scan {
  0% {
    opacity:0;
    clip-path:inset(0 100% 0 0)
  }
  35% {
    opacity:.65
  }
  100% {
    opacity:1;
    clip-path:inset(0 -1px 0 0)
  }
}

@keyframes scan-edge {
  0% {
    opacity:0;
    transform:translateX(-100%)
  }
  25% {
    opacity:.55
  }
  70% {
    opacity:.2
  }
  100% {
    opacity:0;
    transform:translateX(105%)
  }
}

@media(prefers-reduced-motion:reduce) {
  .scroll-header {
    transition:none
  }
  .reveal-ready .reveal-word {
    opacity:1!important;
    animation:none!important;
    clip-path:none!important
  }
  .reveal-word::after {
    display:none!important
  }
  .menu-icon,.menu-icon::before,.menu-icon::after {
    transition:none
  }
}