.scroll-progress {
  position: fixed;
  z-index: 120;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
}

.loader {
  transform: none;
  transition: none;
  isolation: isolate;
}

.loader-light {
  position: absolute;
  z-index: -1;
  width: 46vw;
  aspect-ratio: 1;
  left: -30vw;
  top: 50%;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(255,77,36,.58) 0,rgba(255,77,36,.12) 28%,transparent 68%);
  filter: blur(14px);
  transform: translateY(-50%);
  animation: lightPass 1.55s cubic-bezier(.65,0,.25,1) forwards;
}

.loader-word { position: relative; overflow: hidden; }

.loader-word::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -18%;
  width: 18%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.95),rgba(255,77,36,.72),transparent);
  filter: blur(10px);
  transform: skewX(-12deg);
  animation: letterLight 1.35s .18s cubic-bezier(.65,0,.25,1) forwards;
  pointer-events: none;
}

.loader-word span {
  position: relative;
  --letter-color: var(--paper);
  color: #262626;
  text-shadow: 0 0 0 transparent;
  animation: letterIgnite .58s cubic-bezier(.2,.8,.2,1) both;
}

.loader-word span:nth-child(1) { animation-delay: .18s; }
.loader-word span:nth-child(2) { animation-delay: .34s; }
.loader-word span:nth-child(3) { animation-delay: .50s; }
.loader-word span:nth-child(4) { animation-delay: .66s; }
.loader-word span:nth-child(5) { animation-delay: .82s; }

.loader-word span:nth-child(2),
.loader-word span:nth-child(4) { --letter-color: var(--orange); color: #30170f; }

.loader-signal {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  color: #8d8d89;
  font: 500 .6rem var(--mono);
  letter-spacing: .1em;
}

.loader-signal i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(255,77,36,.55);
  animation: signalPulse .8s ease-out infinite;
}

.loader.done { animation: loaderFlashExit .78s cubic-bezier(.76,0,.24,1) forwards; }

@keyframes lightPass {
  0% { left: -35vw; transform: translateY(-50%) scale(.7); }
  55% { transform: translateY(-50%) scale(1.25); }
  100% { left: 88vw; transform: translateY(-50%) scale(.8); }
}

@keyframes letterLight {
  from { left: -18%; }
  to { left: 112%; }
}

@keyframes letterIgnite {
  0% { color: #262626; transform: scale(.9); filter: blur(8px); }
  55% { color: #fff; text-shadow: 0 0 34px rgba(255,255,255,.85); }
  100% { color: var(--letter-color); transform: none; filter: none; text-shadow: none; }
}

@keyframes signalPulse {
  to { box-shadow: 0 0 0 9px transparent; }
}

@keyframes loaderFlashExit {
  0% { opacity: 1; clip-path: inset(0); filter: brightness(1); }
  18% { filter: brightness(2.4); }
  100% { opacity: 0; clip-path: inset(0 0 100% 0); filter: brightness(1); visibility: hidden; }
}

.hero::after { display: none; }

.scroll-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.page-transition {
  position: fixed;
  z-index: 180;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: var(--ink);
  font: 600 .7rem var(--mono);
  letter-spacing: .09em;
  transform: translateY(102%);
  transition: transform .5s cubic-bezier(.8,0,.2,1);
  pointer-events: none;
}

.is-leaving .page-transition {
  transform: none;
}

.brand-mark path:first-child {
  transform-box: fill-box;
  transform-origin: center;
}

.brand:hover .brand-mark path:first-child {
  animation: markAssemble .65s cubic-bezier(.2,.8,.2,1);
}

@keyframes markAssemble {
  0% { transform: scale(.45) rotate(-8deg); opacity: .2; }
  65% { transform: scale(1.08); }
  100% { transform: none; opacity: 1; }
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.hero-orbit {
  right: 5vw;
  top: 37vh;
  width: 240px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 13px 16px;
  animation: none;
  overflow: hidden;
}

.hero-orbit::before {
  content: "BUILD / CONNECT / RELEASE";
  display: block;
  font: 500 .58rem var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
  animation: railMove 5s ease-in-out infinite alternate;
}

.hero-orbit span { display: none; }

@keyframes railMove {
  from { transform: translateX(-8px); }
  to { transform: translateX(24px); }
}

.project-group-title {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0;
  padding: 26px 0;
  border-top: 1px solid #3a3a3a;
}

.project-group-title > span {
  font: 500 .62rem var(--mono);
  color: #777;
}

.project-group-title > div {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: end;
}

.project-group-title h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 3.2rem);
  line-height: .95;
  letter-spacing: -.055em;
}

.project-group-title p {
  max-width: 430px;
  margin: 0;
  color: #888;
  line-height: 1.5;
}

.bonch-case {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  margin-bottom: 110px;
  padding: 28px;
  color: #15120d;
  background: #ff8a2b;
}

.bonch-case::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .24;
  background-image: linear-gradient(rgba(18,18,18,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(18,18,18,.35) 1px,transparent 1px);
  background-size: 54px 54px;
  transform: translateY(calc(var(--scroll-progress,0) * -54px));
}

.bonch-case::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -30%;
  bottom: -30%;
  left: -22%;
  width: 15%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  filter: blur(6px);
  transform: skewX(-16deg);
  pointer-events: none;
}

.bonch-case.visible::after { animation: bonchScan 4.8s 1s ease-in-out infinite; }

@keyframes bonchScan {
  0%,18% { left: -22%; opacity: 0; }
  28% { opacity: 1; }
  58%,100% { left: 112%; opacity: 0; }
}

.bonch-top,
.bonch-main,
.bonch-modules {
  position: relative;
  z-index: 1;
}

.bonch-top {
  display: flex;
  justify-content: space-between;
  font: 600 .62rem var(--mono);
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.live-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #15120d;
  animation: livePulse 1.7s ease-in-out infinite;
}

@keyframes livePulse { 50% { opacity: .25; transform: scale(.7); } }

.bonch-main {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 8vw;
  align-items: end;
  margin-top: 90px;
}

.bonch-kicker {
  font: 600 .62rem var(--mono);
  letter-spacing: .06em;
}

.bonch-main h2 {
  margin: 18px 0 0;
  font-size: clamp(5rem, 11vw, 12rem);
  line-height: .68;
  letter-spacing: -.09em;
}

.bonch-main h2 em {
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 2px #15120d;
}

.bonch-copy > p {
  margin: 0 0 32px;
  font-size: 1.05rem;
  line-height: 1.55;
}

.bonch-copy .bonch-detail {
  margin-top: 14px;
  color: rgba(19, 19, 19, .68);
  font-size: clamp(.78rem, 1.05vw, .92rem);
  line-height: 1.55;
}

.bonch-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.bonch-links a {
  padding: 13px 17px;
  border: 1px solid #15120d;
  border-radius: 99px;
  font: 600 .66rem var(--mono);
  transition: background .25s,color .25s,transform .25s;
}

.bonch-links a:hover {
  background: #15120d;
  color: #ff8a2b;
  transform: translateY(-3px);
}

.bonch-modules {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  margin-top: 80px;
  border-top: 1px solid #15120d;
  border-left: 1px solid #15120d;
}

.bonch-modules span {
  min-height: 76px;
  display: grid;
  place-items: center;
  border-right: 1px solid #15120d;
  border-bottom: 1px solid #15120d;
  font: 600 .58rem var(--mono);
  transition: background .25s,color .25s;
}

.bonch-case.visible .bonch-modules span {
  animation: moduleIn .55s cubic-bezier(.2,.8,.2,1) both;
}

.bonch-case.visible .bonch-modules span:nth-child(2) { animation-delay: .08s; }
.bonch-case.visible .bonch-modules span:nth-child(3) { animation-delay: .16s; }
.bonch-case.visible .bonch-modules span:nth-child(4) { animation-delay: .24s; }
.bonch-case.visible .bonch-modules span:nth-child(5) { animation-delay: .32s; }

@keyframes moduleIn {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.bonch-modules span:hover {
  background: #15120d;
  color: #ff8a2b;
}

.concepts-title {
  margin-top: 20px;
}

.case-visual::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: -30% -70%;
  background: linear-gradient(105deg,transparent 42%,rgba(255,255,255,.12) 50%,transparent 58%);
  transform: translateX(-45%);
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}

.case:hover .case-visual::after {
  transform: translateX(45%);
}

.case-nocturne .moon { display: none; }

.case-nocturne.visible .bottle { animation: nocturneFloat 5s ease-in-out infinite; }
.case-nocturne.visible .bottle b { animation: nocturneGlow 3.4s ease-in-out infinite; }
.case-nocturne.visible .scent-lines i { animation: scentBreath 4.2s ease-in-out infinite; }
.case-nocturne.visible .scent-lines i:nth-child(2) { animation-delay: -.9s; }
.case-nocturne.visible .scent-lines i:nth-child(3) { animation-delay: -1.8s; }

@keyframes nocturneFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes nocturneGlow {
  0%,100% { color: #f2eee9; text-shadow: 0 0 0 transparent; }
  50% { color: #fff; text-shadow: 0 0 28px rgba(202,185,226,.7); }
}

@keyframes scentBreath {
  0%,100% { opacity: .22; transform: scale(.94); }
  50% { opacity: .62; transform: scale(1.04); }
}

.case-tishe.visible .sun { animation: tisheSun 4s ease-in-out infinite; }
.case-tishe.visible .mountains.back { animation: mountainBack 7s ease-in-out infinite alternate; }
.case-tishe.visible .mountains.front { animation: mountainFront 6s ease-in-out infinite alternate; }
.case-tishe.visible .cabin i { animation: cabinLight 3.2s ease-in-out infinite; }

@keyframes tisheSun {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,92,34,0); }
  50% { transform: scale(1.06); box-shadow: 0 0 55px rgba(255,92,34,.38); }
}

@keyframes mountainBack {
  from { transform: translateY(-8%) translateX(-1.2%); }
  to { transform: translateY(-10%) translateX(1.2%); }
}

@keyframes mountainFront {
  from { transform: translateX(-.8%); }
  to { transform: translateX(.8%); }
}

@keyframes cabinLight {
  0%,100% { background: #fbd58b; box-shadow: 0 0 0 rgba(251,213,139,0); }
  50% { background: #fff0aa; box-shadow: 0 0 34px rgba(251,213,139,.85); }
}

@media (max-width: 800px) {
  .reveal {
    transform: translateY(16px);
  }

  .project-group-title {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .project-group-title > div {
    display: block;
  }

  .project-group-title p {
    margin-top: 14px;
  }

  .bonch-case {
    min-height: 690px;
    margin-bottom: 80px;
    padding: 20px;
  }

  .bonch-top span:last-child {
    max-width: 47%;
    text-align: right;
    line-height: 1.5;
  }

  .bonch-main {
    grid-template-columns: 1fr;
    gap: 52px;
    margin-top: 80px;
  }

  .bonch-main h2 {
    font-size: 22vw;
  }

  .bonch-copy > p {
    font-size: .96rem;
  }

  .bonch-copy .bonch-detail {
    margin-top: 10px;
    font-size: .76rem;
  }

  .bonch-modules {
    grid-template-columns: repeat(2,1fr);
    margin-top: 52px;
  }

  .bonch-modules span:last-child {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .page-transition,
  .bonch-case.visible .bonch-modules span,
  .case-visual::after {
    filter: none;
    clip-path: none;
    transition: none;
  }

  .live-badge i,
  .brand:hover .brand-mark path:first-child {
    animation: none;
  }

  .hero-orbit::before,
  .bonch-case.visible .bonch-modules span,
  .bonch-case.visible::after,
  .case-nocturne.visible .bottle,
  .case-nocturne.visible .bottle b,
  .case-nocturne.visible .scent-lines i,
  .case-tishe.visible .sun,
  .case-tishe.visible .mountains,
  .case-tishe.visible .cabin i,
  .loader-light,
  .loader-word::after,
  .loader-word span,
  .loader-signal i { animation: none; }
}