@font-face {
  font-family: "BTY Cinzel Decorative";
  src: url("assets/bty-cinzel-decorative-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "BTY Cinzel";
  src: url("assets/bty-cinzel-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "BTY Cinzel";
  src: url("assets/bty-cinzel-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: dark;
  background: #07040b;
  --ink: #07040b;
  --gold: #ffd36a;
  --pumpkin: #f47b20;
  --bone: #f2e8d3;
  --cyan: #62d9e8;
  --mint: #a7f0d1;
  --scene-x: 0px;
  --scene-y: 0px;
  --cloud-x: 0px;
  --cloud-y: 0px;
  --fog-x: 0px;
  --fog-y: 0px;
  --product-x: 0px;
  --product-y: 0px;
  --copy-x: 0px;
  --copy-y: 0px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

body {
  font-family: "BTY Cinzel", "Palatino Linotype", "Book Antiqua", Georgia,
    serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.living-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  contain: layout paint;
  color: var(--bone);
  background: #080710;
  cursor: default;
}

.scene,
.scene img,
.light-field,
.cloud-field,
.fog-field,
.motes,
.horseman-track,
.product-stage,
.frame-vignette {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.scene {
  z-index: 0;
  inset: -8px;
  overflow: hidden;
  background: #080710;
}

.scene img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  transform: translate3d(var(--scene-x), var(--scene-y), 0) scale(1.025);
  transform-origin: 50% 55%;
  transition: filter 900ms ease;
}

.light-field {
  z-index: 1;
  inset: 0;
  overflow: hidden;
}

.light {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: 0.7;
  mix-blend-mode: screen;
  will-change: opacity, transform;
  animation: practical-flicker 6.4s ease-in-out infinite;
}

.light--pumpkin {
  top: 17%;
  left: -1%;
  width: 14%;
  height: 27%;
  background: radial-gradient(
    ellipse at center,
    rgb(255 205 104 / 72%) 0%,
    rgb(244 99 19 / 36%) 37%,
    transparent 74%
  );
  filter: blur(12px);
}

.light--street {
  bottom: 7%;
  left: -3%;
  width: 31%;
  height: 38%;
  background: radial-gradient(
    ellipse at center,
    rgb(255 174 57 / 35%) 0%,
    rgb(213 76 20 / 17%) 44%,
    transparent 76%
  );
  filter: blur(21px);
  animation-delay: -2.3s;
  animation-duration: 7.1s;
}

.light--route {
  bottom: 5%;
  left: 24%;
  width: 27%;
  height: 30%;
  background: radial-gradient(
    ellipse at center,
    rgb(244 137 42 / 28%) 0%,
    rgb(71 170 190 / 18%) 42%,
    transparent 78%
  );
  filter: blur(24px);
  animation-delay: -5.1s;
  animation-duration: 8.3s;
}

.light--graveyard {
  top: 23%;
  right: -4%;
  width: 22%;
  height: 46%;
  background: radial-gradient(
    ellipse at center,
    rgb(101 232 244 / 38%) 0%,
    rgb(27 130 158 / 18%) 44%,
    transparent 79%
  );
  filter: blur(22px);
  animation-delay: -3.8s;
  animation-duration: 9.1s;
}

.light--lantern {
  right: 20%;
  bottom: -1%;
  width: 15%;
  height: 22%;
  background: radial-gradient(
    ellipse at center,
    rgb(255 211 126 / 50%) 0%,
    rgb(238 91 19 / 22%) 39%,
    transparent 76%
  );
  filter: blur(14px);
  animation-delay: -4.6s;
  animation-duration: 7.7s;
}

.cloud-field {
  z-index: 2;
  inset: 0;
  overflow: hidden;
  transform: translate3d(var(--cloud-x), var(--cloud-y), 0);
  -webkit-mask-image: radial-gradient(
    ellipse 45% 32% at 52% 15%,
    #000 14%,
    rgb(0 0 0 / 92%) 47%,
    transparent 84%
  );
  mask-image: radial-gradient(
    ellipse 45% 32% at 52% 15%,
    #000 14%,
    rgb(0 0 0 / 92%) 47%,
    transparent 84%
  );
}

.cloud {
  position: absolute;
  display: block;
  width: auto;
  max-width: none;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.cloud--far {
  top: -38%;
  left: 22%;
  width: 63%;
  opacity: 0.3;
  filter: blur(1.4px) saturate(0.76);
  animation: cloud-far-drift 43s cubic-bezier(0.45, 0.05, 0.55, 0.95)
    infinite alternate;
}

.cloud--near {
  top: -31%;
  left: 26%;
  width: 69%;
  opacity: 0.22;
  filter: blur(0.35px) saturate(0.92);
  transform-origin: 50% 62%;
  animation: cloud-near-drift 29s cubic-bezier(0.37, 0, 0.63, 1) infinite
    alternate;
}

.fog-field {
  z-index: 3;
  inset: 0;
  overflow: hidden;
  transform: translate3d(var(--fog-x), var(--fog-y), 0);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 40%,
    rgb(0 0 0 / 18%) 55%,
    #000 76%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 40%,
    rgb(0 0 0 / 18%) 55%,
    #000 76%,
    #000 100%
  );
}

.fog {
  position: absolute;
  display: block;
  width: auto;
  max-width: none;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.fog--rear {
  right: -14%;
  bottom: -51%;
  width: 126%;
  opacity: 0.22;
  filter: blur(3.2px) saturate(0.72);
  animation: fog-rear-drift 39s cubic-bezier(0.45, 0.05, 0.55, 0.95)
    infinite alternate;
}

.fog--front {
  right: -6%;
  bottom: -55%;
  width: 119%;
  opacity: 0.31;
  filter: blur(1px) saturate(0.87);
  animation: fog-front-drift 24s cubic-bezier(0.37, 0, 0.63, 1) infinite
    alternate;
}

.motes {
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.72;
}

.horseman-track {
  z-index: 4;
  bottom: 17%;
  left: 0;
  width: clamp(96px, 10vw, 150px);
  opacity: 0;
  transform: translate3d(-190%, 0, 0) scale(0.72);
  will-change: transform, opacity;
}

.horseman-track img {
  display: block;
  width: 100%;
  height: auto;
  filter: blur(0.4px) drop-shadow(0 0 9px rgb(98 217 232 / 18%));
}

.living-hero[data-horseman="running"] .horseman-track {
  animation: horseman-cross 7.6s cubic-bezier(0.28, 0.62, 0.34, 1) both;
}

.product-stage {
  z-index: 5;
  right: clamp(6px, 2.4vw, 44px);
  bottom: clamp(-7px, -0.35vw, -2px);
  width: min(58.5vw, 880px);
  transform: translate3d(var(--product-x), var(--product-y), 0);
  transform-origin: 62% 78%;
  will-change: transform;
}

.product-stage::before {
  position: absolute;
  z-index: -1;
  right: 2%;
  bottom: 8%;
  width: 74%;
  height: 55%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgb(32 196 224 / 11%) 0%,
    rgb(88 41 122 / 7%) 44%,
    transparent 72%
  );
  filter: blur(22px);
  content: "";
}

.product-stage img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 28px 32px rgb(0 0 0 / 58%));
}

.hero-copy {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: clamp(28px, 6.2vw, 108px);
  width: min(40vw, 560px);
  margin: 0;
  transform: translate3d(var(--copy-x), calc(-50% + var(--copy-y)), 0);
  text-align: center;
  text-shadow: 0 3px 18px rgb(0 0 0 / 92%), 0 1px 2px #000;
  will-change: transform;
}

.eyebrow {
  margin: 0;
  color: var(--gold);
  font-size: clamp(0.69rem, 0.82vw, 0.83rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.title {
  position: relative;
  isolation: isolate;
  margin: 0.16em 0 0;
  color: #f0a12b;
  font-family: "BTY Cinzel Decorative", "Palatino Linotype", Georgia, serif;
  font-size: clamp(4.4rem, 8.1vw, 8.3rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.76;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgb(255 211 106 / 78%);
  text-shadow: 0 2px 0 #6f2d0b, 0 4px 0 #3c1608,
    0 0 13px rgb(244 123 32 / 88%), 0 0 34px rgb(244 123 32 / 44%),
    0 12px 28px rgb(0 0 0 / 90%);
}

.title::before {
  position: absolute;
  z-index: -1;
  inset: -31% -24%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgb(255 165 39 / 42%) 0%,
    rgb(241 91 17 / 19%) 38%,
    rgb(104 29 11 / 4%) 62%,
    transparent 77%
  );
  content: "";
  filter: blur(22px);
  opacity: 0.86;
  transform: scaleX(1.08);
  animation: title-aura 5.7s ease-in-out infinite;
  pointer-events: none;
}

.title span {
  display: block;
  white-space: nowrap;
}

.collection-label {
  margin: clamp(20px, 2vw, 30px) 0 0;
  color: #e7ce82;
  font-size: clamp(0.9rem, 1.16vw, 1.17rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero-note {
  max-width: 38rem;
  margin: 12px auto 0;
  color: rgb(242 232 211 / 90%);
  font-size: clamp(0.82rem, 0.9vw, 0.96rem);
  letter-spacing: 0.035em;
  line-height: 1.5;
}

.primary-cta {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(19px, 2vw, 28px);
  padding: 14px clamp(24px, 3vw, 42px);
  border: 1px solid rgb(167 240 209 / 88%);
  border-radius: 999px;
  color: #f6efe2;
  background: rgb(4 18 24 / 84%);
  box-shadow: 0 0 0 1px rgb(98 217 232 / 16%) inset,
    0 0 18px rgb(98 217 232 / 43%), 0 0 42px rgb(98 217 232 / 18%),
    0 14px 32px rgb(0 0 0 / 45%);
  font-size: clamp(0.79rem, 0.94vw, 0.94rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 180ms ease, color 180ms ease,
    background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.primary-cta svg {
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}

.primary-cta:hover,
.primary-cta:focus-visible {
  border-color: var(--gold);
  color: #fff8e4;
  background: rgb(26 11 39 / 93%);
  box-shadow: 0 0 0 1px rgb(255 211 106 / 22%) inset,
    0 0 24px rgb(255 211 106 / 46%), 0 14px 32px rgb(0 0 0 / 50%);
  transform: translateY(-1px);
}

.primary-cta:hover svg,
.primary-cta:focus-visible svg {
  transform: translateX(3px);
}

.primary-cta:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 5px;
}

.frame-vignette {
  z-index: 8;
  inset: 0;
  border: 1px solid rgb(255 211 106 / 12%);
  background: radial-gradient(
      ellipse 76% 72% at 50% 48%,
      transparent 62%,
      rgb(0 0 0 / 25%) 100%
    ),
    linear-gradient(to bottom, rgb(0 0 0 / 15%), transparent 16% 82%, rgb(0 0 0 / 24%));
  box-shadow: 0 0 70px rgb(0 0 0 / 38%) inset;
}

.living-hero[data-motion="ready"] .hero-copy {
  animation: copy-arrive 780ms cubic-bezier(0.2, 0.72, 0.24, 1) both;
}

.living-hero[data-motion="ready"] .product-stage {
  animation: products-arrive 980ms 80ms cubic-bezier(0.2, 0.72, 0.24, 1)
    both;
}

.living-hero[data-paused="true"] *,
.living-hero[data-paused="true"] *::before,
.living-hero[data-paused="true"] *::after {
  animation-play-state: paused !important;
}

.living-hero[data-motion="still"] *,
.living-hero[data-motion="still"] *::before,
.living-hero[data-motion="still"] *::after {
  animation-play-state: paused !important;
}

.living-hero[data-motion="still"] .motes,
.living-hero[data-motion="still"] .horseman-track {
  display: none;
}

.living-hero[data-save-data="true"] .cloud--near,
.living-hero[data-save-data="true"] .fog--rear,
.living-hero[data-save-data="true"] .motes,
.living-hero[data-save-data="true"] .horseman-track {
  display: none;
}

@keyframes copy-arrive {
  from {
    opacity: 0;
    transform: translate3d(var(--copy-x), calc(-50% + var(--copy-y) + 8px), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(var(--copy-x), calc(-50% + var(--copy-y)), 0);
  }
}

@keyframes products-arrive {
  from {
    opacity: 0;
    transform: translate3d(
      var(--product-x),
      calc(var(--product-y) + 12px),
      0
    );
  }
  to {
    opacity: 1;
    transform: translate3d(var(--product-x), var(--product-y), 0);
  }
}

@keyframes practical-flicker {
  0%,
  100% {
    opacity: 0.48;
    transform: scale(0.94);
  }
  18% {
    opacity: 0.7;
  }
  22% {
    opacity: 0.59;
  }
  48% {
    opacity: 0.84;
    transform: scale(1.04);
  }
  73% {
    opacity: 0.63;
  }
  78% {
    opacity: 0.76;
  }
}

@keyframes title-aura {
  0%,
  100% {
    opacity: 0.58;
    transform: scaleX(1.02) scaleY(0.92);
  }
  46% {
    opacity: 0.95;
    transform: scaleX(1.12) scaleY(1.06);
  }
  53% {
    opacity: 0.78;
  }
}

@keyframes cloud-far-drift {
  0% {
    opacity: 0.2;
    transform: translate3d(-16%, -1.5%, 0) scale(0.92, 0.96);
  }
  54% {
    opacity: 0.33;
  }
  100% {
    opacity: 0.26;
    transform: translate3d(12%, 2%, 0) scale(1.05, 1.01);
  }
}

@keyframes cloud-near-drift {
  0% {
    opacity: 0.17;
    transform: translate3d(12%, 1%, 0) scale(1.06, 0.98);
  }
  45% {
    opacity: 0.27;
  }
  100% {
    opacity: 0.2;
    transform: translate3d(-13%, -2%, 0) scale(0.96, 1.05);
  }
}

@keyframes fog-rear-drift {
  0% {
    opacity: 0.15;
    transform: translate3d(10%, 2%, 0) scale(1.04, 0.96);
  }
  53% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.2;
    transform: translate3d(-9%, -2%, 0) scale(0.96, 1.04);
  }
}

@keyframes fog-front-drift {
  0% {
    opacity: 0.23;
    transform: translate3d(-8%, 3%, 0) scale(0.97, 0.94);
  }
  48% {
    opacity: 0.34;
  }
  100% {
    opacity: 0.27;
    transform: translate3d(8%, -2%, 0) scale(1.04, 1.06);
  }
}

@keyframes horseman-cross {
  0% {
    opacity: 0;
    transform: translate3d(-190%, 3px, 0) scale(0.72);
  }
  12% {
    opacity: 0.36;
  }
  82% {
    opacity: 0.28;
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(100vw + 190%), -6px, 0) scale(0.84);
  }
}

@media (max-width: 960px) {
  .living-hero {
    min-height: 720px;
  }

  .hero-copy {
    top: 41%;
    left: clamp(22px, 4.5vw, 44px);
    width: min(47vw, 430px);
  }

  .title {
    font-size: clamp(3.75rem, 10vw, 6.15rem);
  }

  .product-stage {
    right: -3vw;
    bottom: 1%;
    width: min(59vw, 590px);
  }

  .cloud--far {
    top: -24%;
    left: 18%;
    width: 76%;
  }

  .cloud--near {
    top: -18%;
    left: 16%;
    width: 82%;
  }

  .fog--rear {
    bottom: -42%;
  }

  .fog--front {
    bottom: -47%;
  }
}

@media (max-width: 640px) {
  .living-hero {
    min-height: 820px;
  }

  .scene {
    inset: 0;
  }

  .scene img {
    object-position: center 54%;
    transform: none;
  }

  .hero-copy {
    top: clamp(27px, 6.5vw, 46px);
    right: 16px;
    left: 16px;
    width: auto;
    transform: translate3d(var(--copy-x), var(--copy-y), 0);
  }

  .living-hero[data-motion="ready"] .hero-copy {
    animation: mobile-copy-arrive 680ms ease-out both;
  }

  .eyebrow {
    font-size: 0.61rem;
    letter-spacing: 0.17em;
  }

  .title {
    margin-top: 0.2em;
    font-size: clamp(3.35rem, 17vw, 5.05rem);
    line-height: 0.79;
  }

  .collection-label {
    margin-top: 14px;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
  }

  .hero-note {
    max-width: 22rem;
    margin-top: 8px;
    font-size: 0.73rem;
    line-height: 1.42;
  }

  .primary-cta {
    min-height: 49px;
    gap: 9px;
    margin-top: 15px;
    padding: 12px 21px;
    font-size: 0.71rem;
    letter-spacing: 0.135em;
  }

  .primary-cta svg {
    width: 16px;
    height: 16px;
  }

  .product-stage {
    right: -4%;
    bottom: 1.5%;
    width: 108%;
    transform: none;
  }

  .living-hero[data-motion="ready"] .product-stage {
    animation: mobile-products-arrive 880ms 80ms
      cubic-bezier(0.2, 0.72, 0.24, 1) both;
  }

  .cloud-field {
    -webkit-mask-image: radial-gradient(
      ellipse 70% 28% at 50% 27%,
      #000 13%,
      rgb(0 0 0 / 90%) 48%,
      transparent 87%
    );
    mask-image: radial-gradient(
      ellipse 70% 28% at 50% 27%,
      #000 13%,
      rgb(0 0 0 / 90%) 48%,
      transparent 87%
    );
  }

  .cloud--far {
    top: 1%;
    left: -24%;
    width: 156%;
    opacity: 0.24;
  }

  .cloud--near {
    top: 6%;
    left: -33%;
    width: 174%;
    opacity: 0.18;
  }

  .fog-field {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 48%,
      rgb(0 0 0 / 30%) 60%,
      #000 74%,
      #000 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 48%,
      rgb(0 0 0 / 30%) 60%,
      #000 74%,
      #000 100%
    );
  }

  .fog--rear {
    right: -58%;
    bottom: -12%;
    width: 230%;
    opacity: 0.16;
  }

  .fog--front {
    right: -53%;
    bottom: -17%;
    width: 220%;
    opacity: 0.23;
  }

  .horseman-track {
    display: none;
  }

  .light--pumpkin {
    top: 31%;
    left: -8%;
    width: 42%;
    height: 28%;
  }

  .light--street {
    bottom: 24%;
    left: -12%;
    width: 67%;
    height: 27%;
  }

  .light--route {
    bottom: 22%;
    left: 25%;
    width: 50%;
    height: 24%;
  }

  .light--graveyard {
    top: 37%;
    right: -17%;
    width: 58%;
    height: 34%;
  }

  .light--lantern {
    right: 3%;
    bottom: 1%;
    width: 31%;
    height: 19%;
  }
}

@keyframes mobile-copy-arrive {
  from {
    opacity: 0;
    transform: translate3d(var(--copy-x), calc(var(--copy-y) + 7px), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(var(--copy-x), var(--copy-y), 0);
  }
}

@keyframes mobile-products-arrive {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .living-hero *,
  .living-hero *::before,
  .living-hero *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .scene img,
  .cloud-field,
  .fog-field,
  .product-stage,
  .hero-copy {
    transform: none !important;
  }

  .horseman-track,
  .motes,
  .cloud--near,
  .fog--front {
    display: none !important;
  }

  .cloud--far,
  .fog--rear,
  .title::before,
  .light {
    animation: none !important;
  }
}