:root {
  color-scheme: light;
  --ink: #101010;
  --water: #171717;
  --water-deep: #070707;
  --paper: #fbfbfa;
  --white: #ffffff;
  --silver: #dfe7ef;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: "Century Gothic", "Avenir Next", "Segoe UI", Arial, sans-serif;
  color: var(--white);
  background: var(--paper);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.noise,
.chromatic {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

.noise {
  opacity: .14;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 40%, rgba(0,0,0,.85) 0 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  filter: contrast(190%);
  animation: noiseShift .28s steps(2) infinite;
}

.chromatic {
  opacity: .18;
  mix-blend-mode: screen;
  background:
    linear-gradient(90deg, rgba(255,0,80,.22), transparent 42%, rgba(0,240,255,.24));
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  padding: 120px 22px 108px;
  background: var(--paper);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 6;
  height: 31vh;
  background: linear-gradient(to bottom, transparent, rgba(251,251,250,.38) 44%, var(--paper) 92%);
  pointer-events: none;
}

.hero-art {
  position: absolute;
  inset: -4%;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 35%, rgba(255,255,255,.05)),
    url("assets/home-art.PNG") center / cover no-repeat;
  filter: saturate(.62) contrast(1.18) brightness(.72);
  transform: scale(1.04);
  animation: homeDrift 18s ease-in-out infinite alternate;
  will-change: opacity, filter, transform;
}

.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 54% 24%, rgba(255,255,255,.24), transparent 22%),
    radial-gradient(circle at 45% 63%, rgba(8,12,20,.34), transparent 42%),
    linear-gradient(90deg, rgba(255,255,255,.02), rgba(0,230,255,.11), rgba(255,0,130,.08));
  mix-blend-mode: screen;
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .9;
  background:
    radial-gradient(circle at 49% 48%, transparent 0 24%, rgba(0,0,0,.34) 58%, rgba(0,0,0,.58) 100%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.1) 70%, rgba(251,251,250,.72));
}

.star-field {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.star-field span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px #fff;
  animation: twinkle 3.8s ease-in-out infinite;
}

.star-field span:nth-child(1) { left: 13%; top: 18%; animation-delay: .1s; }
.star-field span:nth-child(2) { left: 27%; top: 72%; animation-delay: .6s; }
.star-field span:nth-child(3) { left: 47%; top: 13%; animation-delay: 1.1s; }
.star-field span:nth-child(4) { left: 72%; top: 31%; animation-delay: 1.7s; }
.star-field span:nth-child(5) { left: 84%; top: 64%; animation-delay: 2.2s; }
.star-field span:nth-child(6) { left: 58%; top: 82%; animation-delay: 2.8s; }

.brand-lockup {
  position: relative;
  z-index: 4;
  width: min(340px, 46vw);
  min-width: 210px;
  pointer-events: none;
  user-select: none;
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.8))
    drop-shadow(0 0 36px rgba(190,220,255,.4));
  will-change: opacity, transform;
}

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
  filter: invert(1);
}

.hero-links {
  position: absolute;
  left: 50%;
  bottom: clamp(54px, 8vh, 96px);
  z-index: 8;
  width: min(920px, calc(100% - 52px));
  display: flex;
  justify-content: space-between;
  gap: 22px;
  transform: translateX(-50%);
}

.hero-links a,
.page-header nav a {
  font-family: "Century Gothic", "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.12rem, 1.75vw, 1.75rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: .04em;
  color: rgba(255,255,255,.98);
  text-shadow:
    0 0 3px rgba(9,16,24,.8),
    0 0 18px rgba(255,255,255,.78),
    0 2px 16px rgba(0,0,0,.74);
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}

.hero-links a:hover,
.page-header nav a:hover {
  transform: translateY(-3px) rotate(-1deg);
  opacity: .82;
  filter: blur(.15px);
}

.about {
  position: relative;
  min-height: 122svh;
  padding: 0 clamp(20px, 5vw, 86px) 82px;
  color: var(--white);
  background: var(--paper);
  overflow: hidden;
}

.wave-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--paper);
}

.wave-stage::after {
  content: "";
  position: absolute;
  inset: 34% 0 0;
  z-index: 0;
  background: linear-gradient(180deg, var(--water), var(--water-deep) 72%);
}

.wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 250px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 250'%3E%3Cpath d='M0 112C75 108 126 95 190 76C265 53 333 61 410 91C488 122 555 128 639 106C731 82 787 45 886 62C1014 84 1062 130 1200 100V250H0Z' fill='%23171717'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 1200px 250px;
  animation-name: waveMove;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.wave-one {
  top: 20.4%;
  z-index: 4;
  opacity: 1;
  animation-duration: 17s;
  animation-delay: 0s;
}

.wave-two {
  top: 22.5%;
  z-index: 3;
  opacity: .72;
  animation-duration: 24s;
  animation-delay: -6s;
}

.wave-three {
  top: 24.8%;
  z-index: 2;
  opacity: .46;
  animation-duration: 32s;
  animation-delay: -13s;
}

.wave-four {
  top: 27%;
  z-index: 1;
  opacity: .28;
  animation-duration: 42s;
  animation-delay: -20s;
}

.profile-float {
  position: relative;
  z-index: 5;
  width: clamp(220px, 22vw, 360px);
  aspect-ratio: 1;
  margin: 0 auto;
  top: clamp(104px, 13vh, 156px);
  animation: profileBob 5.2s ease-in-out infinite alternate;
}

.profile-ring {
  position: absolute;
  inset: 4%;
  z-index: 0;
  border: 4px solid rgba(20,20,20,.68);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}

.profile-ring::after {
  content: "";
  position: absolute;
  inset: -7%;
  border: 3px solid rgba(20,20,20,.3);
  border-radius: 50%;
}

.profile-bear {
  position: absolute;
  left: -11%;
  top: -6%;
  z-index: 3;
  width: 118%;
  height: 118%;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.18));
}

.profile-crown {
  position: absolute;
  z-index: 4;
  width: 31%;
  right: -4%;
  top: -14%;
  transform-origin: 50% 80%;
  filter: drop-shadow(0 10px 8px rgba(0,0,0,.22));
  animation: crownBob 3.3s ease-in-out infinite alternate;
}

.find-me {
  position: relative;
  z-index: 6;
  display: grid;
  justify-items: center;
  width: min(760px, 100%);
  margin: clamp(126px, 18vh, 188px) auto 0;
}

.find-me h2 {
  margin: 0 0 10px;
  font-family: "Century Gothic", "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  font-weight: 300;
  line-height: .95;
  letter-spacing: .04em;
  color: rgba(225,235,247,.92);
}

.social-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(8px, 1.5vw, 18px);
}

.social-row a {
  display: grid;
  place-items: center;
  width: clamp(50px, 5.8vw, 78px);
  aspect-ratio: 1;
  transition: transform .2s ease, filter .2s ease;
}

.social-row a:hover {
  transform: translateY(-4px) rotate(-2deg);
  filter: drop-shadow(0 0 14px rgba(220,235,255,.5));
}

.social-row img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.find-me-arrow {
  position: absolute;
  left: calc(50% + 310px);
  top: 42px;
  width: clamp(150px, 16vw, 245px);
  transform: rotate(-5deg);
  opacity: .9;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.18));
}

.about-copy {
  position: relative;
  z-index: 3;
  width: min(820px, 100%);
  margin: clamp(120px, 18vh, 210px) auto 0 12vw;
}

.about-copy h1 {
  margin: 0 0 28px;
  font-family: "Century Gothic", "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.2rem, 5.3vw, 5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .035em;
  color: var(--silver);
}

.about-copy p {
  max-width: 70ch;
  margin: 0;
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  line-height: 1.85;
  color: rgba(226,235,244,.88);
}

.page-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px clamp(18px, 4vw, 58px);
  mix-blend-mode: difference;
}

.mini-logo {
  display: block;
  width: 90px;
  pointer-events: auto;
}

.mini-logo img {
  display: block;
  width: 100%;
  filter: invert(1);
}

.page-header nav {
  display: flex;
  gap: clamp(18px, 4vw, 72px);
}

.inner-page {
  min-height: 100svh;
  color: var(--white);
  background:
    radial-gradient(circle at 70% 16%, rgba(255,255,255,.14), transparent 26%),
    radial-gradient(circle at 18% 78%, rgba(170,190,215,.16), transparent 28%),
    linear-gradient(135deg, #191919, #050505);
}

.wip-page {
  min-height: 100svh;
  display: grid;
  place-content: center;
  gap: 14px;
  padding: 120px 24px;
  text-align: center;
}

.wip-page p {
  margin: 0;
  font-family: "Century Gothic", "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.2rem, 2vw, 2rem);
  color: var(--silver);
}

.wip-page h1 {
  margin: 0;
  font-family: "Century Gothic", "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 9vw, 8rem);
  font-weight: 300;
  line-height: 1;
  color: #fff;
}

@keyframes homeDrift {
  from { transform: scale(1.04) translate3d(-.8%, -.4%, 0); }
  to { transform: scale(1.09) translate3d(.8%, .6%, 0); }
}

@keyframes waveMove {
  from { background-position-x: 0; }
  to { background-position-x: -1200px; }
}

@keyframes profileBob {
  from { transform: translateY(0) rotate(-3deg); }
  to { transform: translateY(16px) rotate(3deg); }
}

@keyframes crownBob {
  from { transform: translate3d(0, 0, 0) rotate(12deg); }
  to { transform: translate3d(8px, -12px, 0) rotate(19deg); }
}

@keyframes twinkle {
  0%, 100% { opacity: .24; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.35); }
}

@keyframes noiseShift {
  from { transform: translate(0, 0); }
  to { transform: translate(1px, -1px); }
}

@media (max-width: 900px) {
  .hero-links {
    width: min(330px, calc(100% - 44px));
    display: grid;
    justify-items: center;
    gap: 16px;
    bottom: 54px;
  }

  .find-me-arrow {
    position: relative;
    left: auto;
    top: auto;
    justify-self: end;
    margin-top: -10px;
    margin-right: 4vw;
  }

  .about-copy {
    margin-left: 0;
  }

  .page-header {
    align-items: flex-start;
  }

  .page-header nav {
    display: grid;
    justify-items: end;
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .brand-lockup {
    min-width: 178px;
  }

  .wave-stage::after {
    inset: 32% 0 0;
  }

  .wave-one { top: 18%; }
  .wave-two { top: 20.2%; }
  .wave-three { top: 22.6%; }
  .wave-four { top: 25%; }

  .profile-float {
    top: 86px;
    width: min(290px, 74vw);
  }

  .find-me {
    margin-top: 116px;
  }

  .social-row a {
    width: 52px;
  }
}