:root {
  --page-gutter: clamp(20px, 3vw, 46px);
  --card-inset: clamp(18px, 1.7vw, 26px);
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body::before {
  background:
    radial-gradient(ellipse at 50% 112%, transparent 0 56%, rgb(31 160 215 / 2.5%) 56.2% 56.5%, transparent 56.8% 66%, rgb(213 165 65 / 1.8%) 66.2% 66.4%, transparent 66.7%),
    radial-gradient(circle at 50% -20%, rgb(19 116 168 / 3%), transparent 42%);
}

.brand {
  padding-inline: var(--page-gutter);
}

.site-header::before {
  right: var(--page-gutter);
  left: var(--page-gutter);
  width: auto;
  background:
    linear-gradient(90deg, #7f92a3 0 12%, transparent 12% 13.5%, var(--brand-blue) 13.5% 58%, transparent 58% 59.5%, var(--brand-gold) 59.5% 60%, transparent 60% 72%, #4f6577 72% 100%);
  transform-origin: left center;
  animation: rail-arrive 950ms 120ms var(--motion-ease) both;
}

.site-nav a {
  overflow: hidden;
}

.site-nav a::after {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: #16293a;
  content: "";
  opacity: 0;
  rotate: 45deg;
  translate: -50% 0;
  transition: opacity 180ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current="page"]::after {
  opacity: 1;
}

.home-stage {
  --pointer-x: 50%;
  --pointer-y: 48%;
  position: relative;
  isolation: isolate;
}

.home-stage::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(circle 320px at var(--pointer-x) var(--pointer-y), rgb(30 187 246 / 9%), transparent 72%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.home-stage.has-pointer::before {
  opacity: 1;
}

.home-intro,
.home-doors {
  position: relative;
  z-index: 1;
}

.home-intro {
  background:
    radial-gradient(ellipse at 50% 70%, transparent 0 44%, rgb(37 148 195 / 14%) 44.2% 44.5%, transparent 44.8% 56%, rgb(215 165 65 / 8%) 56.2% 56.4%, transparent 56.7%),
    radial-gradient(ellipse at 50% 55%, rgb(25 175 236 / 14%), transparent 38%),
    linear-gradient(180deg, #060b12, #03070c);
}

.home-intro::before {
  top: -58%;
  width: min(86vw, 1080px);
  height: 170%;
  border: 0;
  background:
    radial-gradient(ellipse at 50% 70%, transparent 0 55%, rgb(173 195 213 / 13%) 55.2% 55.5%, transparent 55.8%),
    conic-gradient(from 225deg at 50% 70%, transparent 0 9%, rgb(69 102 128 / 14%) 9.2% 9.5%, transparent 9.7% 40%, rgb(69 102 128 / 14%) 40.2% 40.5%, transparent 40.7%);
  clip-path: none;
}

.home-intro::after {
  width: 2px;
  background: linear-gradient(180deg, transparent 3%, rgb(215 165 65 / 72%) 33%, #fff4ce 49%, rgb(26 200 255 / 78%) 66%, transparent 96%);
  box-shadow: 0 0 18px rgb(25 200 255 / 22%);
  opacity: 0.58;
  animation: energy-breathe 3.6s ease-in-out infinite;
}

.home-brand-title {
  animation: brand-reveal 880ms 90ms var(--motion-ease) both;
}

.home-doors {
  min-height: 0;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  align-items: start;
  gap: clamp(14px, 1.4vw, 22px);
  padding: 22px var(--page-gutter) 34px;
  background:
    radial-gradient(ellipse at 50% 0, rgb(20 153 215 / 9%), transparent 48%),
    #03070c;
}

.home-doors::before {
  top: -6px;
  width: 92px;
  height: 28px;
  background:
    linear-gradient(135deg, transparent 47%, var(--brand-gold) 48% 49%, transparent 50%),
    linear-gradient(45deg, transparent 47%, var(--brand-blue) 48% 49%, transparent 50%);
  opacity: 0.72;
}

.home-door,
.home-door--apps,
.home-door--frattura,
.home-door--jukebox {
  grid-template-rows: auto auto;
}

.home-door {
  min-height: 0;
  clip-path: polygon(
    28px 0,
    calc(50% - 20px) 0,
    50% 12px,
    calc(50% + 20px) 0,
    calc(100% - 28px) 0,
    100% 28px,
    100% calc(100% - 18px),
    calc(100% - 18px) 100%,
    18px 100%,
    0 calc(100% - 18px),
    0 28px
  );
  animation: portal-arrive 720ms var(--motion-ease) both;
  transform-origin: center top;
}

.home-door:nth-child(1) {
  animation-delay: 180ms;
}

.home-door:nth-child(2) {
  animation-delay: 255ms;
}

.home-door:nth-child(3) {
  animation-delay: 330ms;
}

.home-door::before {
  background:
    linear-gradient(155deg, #b7c5d0 0 8%, #29455a 18%, #1779a6 48%, #7f6838 78%, #263e52 92%) border-box;
  opacity: 0.78;
}

.home-door::after {
  top: 0;
  width: 42%;
  height: 2px;
  opacity: 0.48;
  animation: portal-current 4.4s 1.2s ease-in-out infinite;
}

.home-door:hover,
.home-door:focus-visible {
  translate: 0 -7px;
  box-shadow: 0 28px 64px rgb(0 0 0 / 48%);
}

.home-door:hover::after,
.home-door:focus-visible::after {
  width: 84%;
}

.door-media {
  width: calc(100% - (var(--card-inset) * 2));
  margin: var(--card-inset) var(--card-inset) 0;
}

.door-media::before {
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-color: rgb(214 225 234 / 58%);
}

.door-media::after {
  background:
    linear-gradient(112deg, transparent 0 44%, rgb(191 231 250 / 8%) 48%, transparent 52% 100%),
    linear-gradient(180deg, transparent 70%, rgb(1 5 9 / 22%));
  background-position: 140% 0, 0 0;
  background-size: 220% 100%, 100% 100%;
  transition: background-position 800ms var(--motion-ease);
}

.home-door:hover .door-media::after,
.home-door:focus-visible .door-media::after {
  background-position: -40% 0, 0 0;
}

.door-media img {
  transition: translate 620ms var(--motion-ease);
}

.home-door:hover .door-media img,
.home-door:focus-visible .door-media img {
  translate: 0 -3px;
}

.door-copy {
  min-height: 176px;
  padding: 24px var(--card-inset) 30px;
}

.door-action {
  transition:
    color 180ms ease,
    letter-spacing 260ms var(--motion-ease);
}

.home-door:hover .door-action,
.home-door:focus-visible .door-action {
  color: #f8fdff;
  letter-spacing: 0.18em;
}

.door-copy p:last-of-type {
  max-width: 38ch;
}

.section-head,
.jukebox-head,
.project-page__hero {
  padding-inline: var(--page-gutter);
  background:
    radial-gradient(ellipse at 18% 100%, transparent 0 56%, rgb(30 159 215 / 10%) 56.2% 56.5%, transparent 56.8%),
    radial-gradient(circle at 18% 0%, rgb(26 168 226 / 11%), transparent 31rem),
    linear-gradient(145deg, #060c13, #0a1520 66%, #050a10);
}

.section-head::before,
.jukebox-head::before,
.project-page__hero::before {
  top: auto;
  bottom: -5px;
  left: var(--page-gutter);
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-gold));
  rotate: 45deg;
  opacity: 0.8;
}

.section-head::after,
.jukebox-head::after,
.project-page__hero::after {
  right: var(--page-gutter);
  left: var(--page-gutter);
  background:
    linear-gradient(90deg, var(--brand-blue) 0 34%, transparent 34% 36%, var(--brand-gold) 36% 36.5%, transparent 36.5% 64%, #698195 64% 82%, transparent 82%);
  transform-origin: left center;
  animation: rail-arrive 820ms 120ms var(--motion-ease) both;
}

.product-story__copy {
  padding-inline: var(--page-gutter);
}

.product-story__media {
  margin-inline: var(--page-gutter);
}

.fracture-hero {
  padding-inline: var(--page-gutter);
}

.fracture-titleband {
  position: relative;
  border-left: 0;
}

.fracture-titleband::before {
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--brand-gold) 28%, var(--brand-blue) 72%, transparent);
  content: "";
  opacity: 0.7;
}

.site-footer {
  padding-inline: var(--page-gutter);
}

.site-footer::before {
  right: var(--page-gutter);
  left: var(--page-gutter);
  background:
    linear-gradient(90deg, transparent 0 6%, var(--brand-blue) 6% 42%, transparent 42% 44%, var(--brand-gold) 44% 44.5%, transparent 44.5% 72%, #536c80 72% 91%, transparent 91%);
}

@keyframes brand-reveal {
  0% {
    opacity: 0.28;
    clip-path: inset(0 44% 0 44%);
    translate: 0 14px;
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    translate: 0 0;
  }
}

@keyframes portal-arrive {
  0% {
    opacity: 0.42;
    translate: 0 24px;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes rail-arrive {
  from {
    scale: 0 1;
  }
  to {
    scale: 1 1;
  }
}

@keyframes energy-breathe {
  0%,
  100% {
    opacity: 0.34;
    box-shadow: 0 0 10px rgb(25 200 255 / 12%);
  }
  50% {
    opacity: 0.88;
    box-shadow: 0 0 32px rgb(25 200 255 / 38%);
  }
}

@keyframes portal-current {
  0%,
  100% {
    opacity: 0.34;
  }
  50% {
    opacity: 0.94;
  }
}

@media (max-width: 1120px) {
  .home-doors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-inline: var(--page-gutter);
  }

  .door-copy {
    min-height: 188px;
  }
}

@media (max-width: 780px) {
  :root {
    --page-gutter: clamp(16px, 2.5vw, 22px);
    --card-inset: clamp(12px, 2vw, 18px);
  }

  .door-copy {
    min-height: 202px;
    padding-top: 20px;
  }
}

@media (max-width: 560px) {
  :root {
    --page-gutter: 14px;
    --card-inset: 14px;
  }

  .home-intro {
    min-height: 200px;
  }

  .home-doors {
    padding: 14px var(--page-gutter) 24px;
  }

  .home-door {
    margin-bottom: 14px;
    clip-path: polygon(
      24px 0,
      calc(50% - 18px) 0,
      50% 10px,
      calc(50% + 18px) 0,
      calc(100% - 24px) 0,
      100% 24px,
      100% calc(100% - 16px),
      calc(100% - 16px) 100%,
      16px 100%,
      0 calc(100% - 16px),
      0 24px
    );
  }

  .door-copy {
    min-height: 174px;
    padding: 22px var(--card-inset) 28px;
  }

  .section-head,
  .jukebox-head,
  .project-page__hero {
    padding-inline: 22px;
  }

  .section-head::before,
  .jukebox-head::before,
  .project-page__hero::before {
    left: 22px;
  }

  .section-head::after,
  .jukebox-head::after,
  .project-page__hero::after {
    right: 22px;
    left: 22px;
  }

  .product-story__copy {
    padding-inline: 22px;
  }

  .product-story__media,
  .product-story--reverse .product-story__media {
    margin-inline: 22px;
  }

  .fracture-hero {
    padding-inline: 22px;
  }
}

@media (hover: none) {
  .home-stage::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header::before,
  .home-brand-title,
  .home-door,
  .home-door::after,
  .home-intro::after,
  .section-head::after,
  .jukebox-head::after,
  .project-page__hero::after {
    animation: none;
  }

  .home-door,
  .door-media::after,
  .door-media img,
  .door-action {
    transition: none;
  }

  .home-door:hover,
  .home-door:focus-visible,
  .home-door:hover .door-media img,
  .home-door:focus-visible .door-media img {
    translate: 0 0;
  }
}