:root {
  --hdn-ink: #000818;
  --hdn-cyan: #5cc8ee;
  --hdn-blue: #1f5bff;
  --hdn-violet: #7a6cff;
  --hdn-ease: cubic-bezier(.2,.72,.25,1);
  --hdn-mx: 50%;
  --hdn-my: 20%;
}

html { scroll-behavior: smooth; }
body.hdn-fluid-ready { overflow-x: clip; }
body.hdn-fluid-ready::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

::selection { background: var(--hdn-cyan); color: var(--hdn-ink); }

.hdn-progress {
  position: fixed;
  z-index: 9999;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--hdn-violet), var(--hdn-blue), var(--hdn-cyan));
  box-shadow: 0 0 16px rgba(92,200,238,.8);
  pointer-events: none;
}

.hdn-header {
  transition: background-color .45s var(--hdn-ease), border-color .45s var(--hdn-ease),
              box-shadow .45s var(--hdn-ease), transform .45s var(--hdn-ease) !important;
}
body.hdn-scrolled .hdn-header {
  position: sticky !important;
  top: 0 !important;
  background: rgba(0,8,24,.76) !important;
  border-color: rgba(92,200,238,.24) !important;
  box-shadow: 0 12px 40px rgba(0,4,15,.34), inset 0 -1px rgba(255,255,255,.04);
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
}

.hdn-mapintro,
.hdn-hero,
.hdn-cover {
  isolation: isolate;
}
.hdn-mapintro::after,
.hdn-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(700px circle at var(--hdn-mx) var(--hdn-my), rgba(92,200,238,.14), transparent 48%),
    linear-gradient(180deg, transparent 50%, rgba(0,8,24,.42));
  transition: opacity .35s ease;
}

.hdn-reveal {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(.985);
  filter: blur(7px);
  transition: opacity .85s var(--hdn-ease), transform .85s var(--hdn-ease), filter .85s var(--hdn-ease);
  transition-delay: var(--hdn-delay, 0ms);
}
.hdn-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}

.hdn-story,
.hdn-rail-item,
.hdn-artist,
.hdn-f-row,
.hdn-ev,
.wp-block-post-template > li {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  transform: perspective(1000px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .38s var(--hdn-ease), border-color .3s ease, box-shadow .38s var(--hdn-ease) !important;
}
.hdn-story:hover,
.hdn-rail-item:hover,
.hdn-artist:hover,
.hdn-f-row:hover,
.wp-block-post-template > li:hover {
  --lift: -8px;
  box-shadow: 0 24px 64px rgba(0,4,15,.34), 0 0 0 1px rgba(92,200,238,.16);
}

.hdn-story-img,
.hdn-rail-img,
.hdn-artist-img {
  overflow: hidden;
}
.hdn-story-img::before,
.hdn-rail-img::before,
.hdn-artist-img::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-75%) rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transition: transform .75s var(--hdn-ease), opacity .25s ease;
}
.hdn-story:hover .hdn-story-img::before,
.hdn-rail-item:hover .hdn-rail-img::before,
.hdn-artist:hover .hdn-artist-img::before {
  opacity: 1;
  transform: translateX(75%) rotate(18deg);
}

.hdn-btn,
.hdn-nav-submit,
.hdn-sh-link,
.hdn-ev-btn,
.hdn-mapintro-cue {
  position: relative;
  overflow: hidden;
  transform: translate3d(var(--mag-x,0), var(--mag-y,0), 0);
  transition: transform .28s var(--hdn-ease), box-shadow .28s ease, color .28s ease, background .28s ease !important;
}
.hdn-btn::before,
.hdn-nav-submit::before,
.hdn-sh-link::before,
.hdn-ev-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  transform: translateX(-110%);
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transition: transform .58s var(--hdn-ease);
}
.hdn-btn:hover::before,
.hdn-nav-submit:hover::before,
.hdn-sh-link:hover::before,
.hdn-ev-btn:hover::before { transform: translateX(110%); }

.hdn-sh-t,
.hdn-mapintro-tag,
.hdn-f-word,
.hdn-hero-title {
  text-wrap: balance;
}
.hdn-f-word span,
.hdn-hero-title span {
  display: inline-block;
  transition: transform .5s var(--hdn-ease), color .35s ease, text-shadow .35s ease;
}
.hdn-f-word:hover span:nth-child(odd) { transform: translateY(-7px); color: var(--hdn-cyan); }
.hdn-f-word:hover span:nth-child(even) { transform: translateY(7px); color: #fff; }

.hdn-block-blue,
.hdn-block-slant,
.hdn-cta4 {
  background-size: 180% 180% !important;
  animation: hdnGradientFlow 14s ease infinite;
}
@keyframes hdnGradientFlow {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (max-width: 820px) {
  .hdn-reveal { transform: translate3d(0,22px,0); filter: blur(4px); }
  .hdn-story:hover,.hdn-rail-item:hover,.hdn-artist:hover,.wp-block-post-template > li:hover { --lift: -4px; }
  .hdn-header { backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; }
  body.hdn-fluid-ready::before { opacity: .035; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .hdn-reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .hdn-story,.hdn-rail-item,.hdn-artist,.hdn-f-row,.hdn-ev,.wp-block-post-template > li { transform: none !important; }
}