:root {
  --ink: #eef2ec;
  --muted: rgba(238, 242, 236, 0.72);
  --line: rgba(220, 181, 127, 0.26);
  --gold: #d6ae78;
  --gold-soft: rgba(214, 174, 120, 0.46);
  --teal-950: #07191b;
  --teal-900: #0b2326;
  --teal-800: #14383b;
  --teal-700: #245255;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--teal-950);
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--teal-950);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

.page-shell {
  position: relative;
  display: grid;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 68% 16%, rgba(78, 126, 126, 0.42), transparent 30rem),
    radial-gradient(ellipse at 20% 78%, rgba(214, 174, 120, 0.11), transparent 30rem),
    linear-gradient(130deg, #061517 0%, var(--teal-900) 36%, var(--teal-800) 100%);
  background-size: 112% 112%, 118% 118%, 100% 100%;
  animation: field-shift 18s ease-in-out infinite alternate;
}

.page-shell::before {
  position: absolute;
  inset: 0;
  z-index: -4;
  content: "";
  background:
    linear-gradient(90deg, rgba(2, 12, 13, 0.9), transparent 30%, rgba(9, 25, 27, 0.42)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.3));
}

.page-shell::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -3;
  width: min(28rem, 31vw);
  content: "";
  background:
    linear-gradient(90deg, transparent, rgba(255, 232, 195, 0.12) 38%, transparent 42%),
    linear-gradient(90deg, rgba(4, 16, 18, 0.08), rgba(255, 222, 176, 0.12) 1px, transparent 2px),
    repeating-linear-gradient(
      90deg,
      rgba(5, 17, 19, 0.18) 0 3.7rem,
      rgba(255, 236, 207, 0.08) 3.7rem 3.78rem,
      rgba(14, 39, 41, 0.4) 3.78rem 7.2rem
    );
  border-left: 1px solid rgba(224, 184, 126, 0.24);
  box-shadow:
    inset 1.2rem 0 3rem rgba(0, 0, 0, 0.28),
    inset -0.8rem 0 2rem rgba(237, 194, 135, 0.12);
  opacity: 0.82;
  animation: panel-presence 9s ease-in-out infinite alternate;
}

.ambient {
  position: absolute;
  z-index: -3;
  width: 46rem;
  height: 26rem;
  max-width: 86vw;
  filter: blur(72px);
  opacity: 0.26;
  transform: translate3d(0, 0, 0);
  animation: drift 18s ease-in-out infinite alternate;
}

.ambient-one {
  top: -9rem;
  right: 3vw;
  background: linear-gradient(90deg, transparent, rgba(87, 145, 143, 0.55), transparent);
}

.ambient-two {
  bottom: -11rem;
  left: -14rem;
  background: linear-gradient(90deg, transparent, rgba(214, 174, 120, 0.22), transparent);
  animation-duration: 22s;
  animation-delay: -7s;
}

.grain {
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.48) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 64%, rgba(255, 255, 255, 0.36) 0 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  animation: grain-shift 12s steps(4) infinite;
}

.light-sweep {
  position: absolute;
  inset: -35% auto -30% -42%;
  z-index: -2;
  width: 42%;
  min-width: 22rem;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 240, 213, 0.04) 38%,
    rgba(255, 231, 190, 0.16) 50%,
    rgba(255, 240, 213, 0.04) 62%,
    transparent 100%
  );
  transform: skewX(-14deg);
  animation: sweep 10s cubic-bezier(0.45, 0, 0.22, 1) infinite;
}

.linework {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.linework span {
  position: absolute;
  width: 1px;
  height: 36vh;
  background: linear-gradient(180deg, transparent, var(--line), transparent);
  opacity: 0.72;
  transform-origin: top;
  animation: line-rise 8s ease-in-out infinite;
}

.linework span:nth-child(1) {
  top: 12%;
  left: 18%;
}

.linework span:nth-child(2) {
  right: 19%;
  bottom: 15%;
  height: 42vh;
  animation-delay: -2.4s;
}

.linework span:nth-child(3) {
  top: 22%;
  right: 34%;
  height: 24vh;
  animation-delay: -5s;
}

.floor-line {
  position: absolute;
  right: 0;
  bottom: 10.8vh;
  left: 5vw;
  z-index: -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226, 185, 126, 0.46), transparent);
  box-shadow: 0 1.2rem 2.8rem rgba(214, 174, 120, 0.14);
  opacity: 0.78;
  animation: floor-glow 7s ease-in-out infinite alternate;
}

.hero {
  display: grid;
  grid-template-rows: minmax(10.5rem, 0.48fr) auto;
  align-content: center;
  width: min(74rem, calc(100% - 3rem));
  height: 100svh;
  min-height: 0;
  margin: 0 auto;
  padding: clamp(1.2rem, 3.2vw, 3.6rem) 0 clamp(3.6rem, 6vh, 4.8rem);
}

.brand-image {
  align-self: end;
  justify-self: center;
  width: min(36rem, 78vw);
  max-height: min(30vh, 17rem);
  object-fit: contain;
  filter:
    drop-shadow(0 2.4rem 2.8rem rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 1.4rem rgba(214, 174, 120, 0.1));
  opacity: 0;
  transform: translateY(1.25rem) scale(0.985);
  animation:
    reveal-brand 1.35s cubic-bezier(0.18, 0.84, 0.26, 1) 0.08s forwards,
    brand-breathe 7.5s ease-in-out 1.65s infinite;
}

.statement {
  width: min(47rem, 100%);
  margin: clamp(1rem, 2.4vw, 2.2rem) auto 0;
  text-align: center;
}

.kicker {
  margin: 0 0 1rem;
  color: var(--gold);
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.8rem);
  animation: reveal-copy 0.9s ease 0.62s forwards;
}

h1 {
  margin: 0;
  color: #fff9ed;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(2.15rem, 5.2vw, 4.9rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 1.2rem 2rem rgba(0, 0, 0, 0.24);
  opacity: 0;
  transform: translateY(1rem);
  animation: reveal-copy 1s cubic-bezier(0.18, 0.84, 0.26, 1) 0.82s forwards;
}

.support {
  width: min(40rem, 100%);
  margin: clamp(0.85rem, 1.45vw, 1.25rem) auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  font-weight: 400;
  line-height: 1.7;
  opacity: 0;
  transform: translateY(1rem);
  animation: reveal-copy 1s cubic-bezier(0.18, 0.84, 0.26, 1) 1.02s forwards;
}

.support p {
  margin: 0;
}

.support .emphasis {
  width: min(38rem, 100%);
  margin: 0.55rem auto 0;
  color: #fff2d8;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.08rem, 1.85vw, 1.55rem);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: balance;
  text-shadow: 0 1rem 1.8rem rgba(0, 0, 0, 0.26);
}

.signature {
  position: absolute;
  right: 0;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 0;
  color: rgba(238, 242, 236, 0.58);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-align: center;
  opacity: 0;
  animation: reveal-footer 1s ease 1.45s forwards;
}

@keyframes reveal-brand {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes brand-breathe {
  0%,
  100% {
    filter:
      drop-shadow(0 2.4rem 2.8rem rgba(0, 0, 0, 0.34))
      drop-shadow(0 0 1.4rem rgba(214, 174, 120, 0.1));
    transform: translateY(0) scale(1);
  }

  50% {
    filter:
      drop-shadow(0 2.7rem 3.1rem rgba(0, 0, 0, 0.38))
      drop-shadow(0 0 2rem rgba(214, 174, 120, 0.18));
    transform: translateY(-0.22rem) scale(1.004);
  }
}

@keyframes reveal-copy {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reveal-footer {
  to {
    opacity: 1;
  }
}

@keyframes field-shift {
  from {
    background-position: 48% 48%, 52% 54%, center;
  }

  to {
    background-position: 52% 50%, 48% 48%, center;
  }
}

@keyframes panel-presence {
  from {
    transform: translateX(0);
    opacity: 0.72;
  }

  to {
    transform: translateX(-0.45rem);
    opacity: 0.9;
  }
}

@keyframes floor-glow {
  from {
    opacity: 0.44;
    transform: translateX(-1.4rem);
  }

  to {
    opacity: 0.82;
    transform: translateX(0.8rem);
  }
}

@keyframes drift {
  from {
    transform: translate3d(-1.4rem, -0.6rem, 0) scale(1) rotate(-2deg);
  }

  to {
    transform: translate3d(1.8rem, 0.8rem, 0) scale(1.06) rotate(2deg);
  }
}

@keyframes sweep {
  0%,
  18% {
    transform: translateX(0) skewX(-14deg);
    opacity: 0;
  }

  36% {
    opacity: 1;
  }

  70%,
  100% {
    transform: translateX(330vw) skewX(-14deg);
    opacity: 0;
  }
}

@keyframes grain-shift {
  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-1.5%, 1%);
  }

  50% {
    transform: translate(1%, -1.5%);
  }

  75% {
    transform: translate(-0.5%, -1%);
  }
}

@keyframes line-rise {
  0%,
  100% {
    opacity: 0.24;
    transform: translateY(1.4rem) scaleY(0.72);
  }

  50% {
    opacity: 0.72;
    transform: translateY(-1rem) scaleY(1);
  }
}

@media (max-width: 720px) {
  .page-shell {
    background:
      radial-gradient(circle at 72% 10%, rgba(78, 126, 126, 0.32), transparent 18rem),
      radial-gradient(circle at 0% 92%, rgba(214, 174, 120, 0.13), transparent 17rem),
      linear-gradient(145deg, #061517 0%, #102d30 100%);
  }

  .page-shell::after {
    width: 24vw;
    min-width: 5.5rem;
    opacity: 0.46;
  }

  .hero {
    grid-template-rows: minmax(8.5rem, 0.4fr) auto;
    width: min(100% - 2rem, 39rem);
    height: 100svh;
    min-height: 0;
    padding: 1rem 0 3.6rem;
  }

  .brand-image {
    width: min(25rem, 88vw);
    max-height: 24vh;
  }

  .statement {
    margin-top: 1.4rem;
  }

  h1 {
    font-size: clamp(1.9rem, 11.2vw, 3.7rem);
    line-height: 1.02;
  }

  .support {
    font-size: 1rem;
    line-height: 1.68;
  }

  .linework span:nth-child(1) {
    left: 7%;
  }

  .linework span:nth-child(2) {
    right: 8%;
  }

  .linework span:nth-child(3) {
    display: none;
  }
}

@media (max-width: 420px) {
  .hero {
    width: min(100% - 1.25rem, 23rem);
    grid-template-rows: minmax(7.4rem, 0.35fr) auto;
  }

  .kicker {
    font-size: 0.68rem;
  }

  .brand-image {
    width: min(21rem, 88vw);
    max-height: 21vh;
  }

  .support {
    font-size: 0.9rem;
    line-height: 1.52;
  }

  .support .emphasis {
    font-size: clamp(0.98rem, 5.1vw, 1.18rem);
    line-height: 1.38;
  }
}

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