:root {
  --black: #020306;
  --white: #eeeae2;
  --orange: #e35b1c;
}

body > .page-grain,
body > .site-header,
body > main#top,
body > .footer {
  display: none !important;
}

* { box-sizing: border-box; }

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--black);
}

body {
  color: var(--white);
  font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }
::selection { color: var(--white); background: rgba(227, 91, 28, .55); }

.landing {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 73% 48%, rgba(19, 33, 66, .18), transparent 30%),
    linear-gradient(115deg, #030407 0%, #05070a 48%, #010204 100%);
}

.product {
  position: absolute;
  z-index: -4;
  inset: -3%;
  background: url("assets/kart-nathan-cardholder-hero.png") 64% center / cover no-repeat;
  filter: brightness(.34) saturate(.76) contrast(1.2);
  transform: scale(1.035);
  animation: emerge 2.8s cubic-bezier(.2, .7, .2, 1) both;
}

.shadow {
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 3, 6, .99) 0%, rgba(2, 3, 6, .88) 38%, rgba(2, 3, 6, .22) 68%, rgba(2, 3, 6, .52) 100%),
    linear-gradient(0deg, rgba(2, 3, 6, .92) 0%, transparent 37%, rgba(2, 3, 6, .3) 100%),
    radial-gradient(ellipse at 75% 49%, transparent 0%, rgba(2, 3, 6, .38) 38%, rgba(2, 3, 6, .8) 78%);
}

.edge-light {
  position: absolute;
  z-index: -2;
  top: 23%;
  right: 3%;
  width: 48%;
  height: 58%;
  opacity: .34;
  background: radial-gradient(ellipse at center, rgba(24, 66, 179, .14), transparent 66%);
  filter: blur(54px);
  animation: breathe 7s ease-in-out infinite alternate;
}

.grain {
  position: fixed;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.header {
  position: absolute;
  inset: 0 0 auto;
  padding: clamp(28px, 4vw, 58px) clamp(24px, 5vw, 76px);
}

.brand-lockup {
  display: inline-block;
  opacity: .76;
  transition: opacity .3s ease;
}

.brand-lockup:hover,
.brand-lockup:focus-visible { opacity: 1; }

.logo-crop {
  position: relative;
  display: block;
  width: 120px;
  height: 72px;
  overflow: hidden;
  mix-blend-mode: screen;
}

.logo-crop img {
  position: absolute;
  top: -42px;
  left: -82px;
  width: 284px;
  max-width: none;
  filter: invert(1) grayscale(1) contrast(1.3);
}

.statement {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(24px, 8vw, 128px);
  transform: translateY(-48%);
}

.statement h1 {
  margin: 0;
  font-family: Didot, "Bodoni MT", "Times New Roman", serif;
  font-size: clamp(58px, 8.2vw, 144px);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.055em;
}

.statement span { display: block; }

.quiet {
  color: rgba(238, 234, 226, .18);
  animation: phrase-in 1.5s .25s both;
}

.noticeable {
  margin-top: .15em;
  color: rgba(238, 234, 226, .65);
  font-style: italic;
  animation: phrase-in 1.5s .48s both;
}

.teaser-contact {
  position: absolute;
  right: clamp(24px, 5vw, 76px);
  bottom: clamp(28px, 4vw, 54px);
  display: flex;
  align-items: center;
  gap: 22px;
  color: rgba(238, 234, 226, .55);
  font-size: 10px;
  letter-spacing: .08em;
}

.teaser-contact .contact-label {
  color: rgba(238, 234, 226, .22);
  font-size: 8px;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.teaser-contact a {
  padding: 8px 0;
  border-bottom: 1px solid rgba(227, 91, 28, .38);
  transition: color .3s ease, border-color .3s ease;
}

.teaser-contact a:hover,
.teaser-contact a:focus-visible {
  color: var(--white);
  border-color: var(--orange);
}

@keyframes emerge {
  from { opacity: 0; transform: scale(1.075); filter: brightness(.08) saturate(.3) contrast(1.35); }
  to { opacity: 1; transform: scale(1.035); filter: brightness(.34) saturate(.76) contrast(1.2); }
}

@keyframes phrase-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes breathe {
  from { opacity: .22; transform: scale(.94); }
  to { opacity: .44; transform: scale(1.06); }
}

@media (max-width: 760px) {
  .landing { background: #020306; }
  .product {
    inset: 0;
    background-position: 71% center;
    filter: brightness(.28) saturate(.7) contrast(1.24);
  }
  .shadow {
    background:
      linear-gradient(0deg, rgba(2, 3, 6, .94) 0%, rgba(2, 3, 6, .3) 57%, rgba(2, 3, 6, .52) 100%),
      linear-gradient(90deg, rgba(2, 3, 6, .88) 0%, rgba(2, 3, 6, .24) 72%, rgba(2, 3, 6, .48) 100%);
  }
  .statement { top: 43%; left: 24px; right: 24px; }
  .statement h1 { font-size: clamp(55px, 17vw, 92px); line-height: .86; }
  .teaser-contact {
    right: auto;
    left: 24px;
    bottom: 28px;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}