/* ============================================================
   Allie Burd — Placeholder Landing Page
   Standalone, no dependencies. Manrope, brand palette.
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Manrope-Light.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Manrope-Regular.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Manrope-Medium.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Manrope-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Manrope-Bold.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Manrope-ExtraBold.ttf") format("truetype"); }

/* ---------- TOKENS ---------- */
:root {
  --ab-navy:        #13132D;
  --ab-warm-white:  #F2EFEA;
  --ab-warm-white-2:#E8E2D6;
  --ab-aqua:        #7FDAEA;
  --ab-terracotta:  #C36347;
  --ab-mustard:     #D5A33B;

  --ab-fg-on-dark-1: #F2EFEA;
  --ab-fg-on-dark-2: #C8C8D4;
  --ab-fg-on-dark-3: #8E8EA0;

  --ab-ease-out: cubic-bezier(.2,.7,.2,1);
  --ab-ease-in-out: cubic-bezier(.65,0,.35,1);
}

/* ---------- BASE ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--ab-navy);
  color: var(--ab-warm-white);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  position: relative;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--ab-aqua); color: var(--ab-navy); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ab-aqua); border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ab-warm-white); color: var(--ab-navy);
  padding: 12px 18px; border-radius: 0 0 8px 0;
  font-weight: 600; z-index: 999;
}
.skip:focus { left: 0; }

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

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 18px; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0 48px;
  background: transparent;
}
.nav__brand { text-decoration: none; display: inline-flex; align-items: center; }
.nav__lockup { height: 72px; width: auto; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 120px 48px 80px;
  overflow-x: clip;
  background:
    radial-gradient(ellipse 95% 75% at 22% 22%,
      #45456A 0%,
      #36365A 25%,
      #2E2E49 50%,
      rgba(46,46,73,0) 80%),
    var(--ab-navy);
  /* overflow-y intentionally visible so absolute positioned elements can extend past hero bottom */
}
.hero__bg-splat {
  position: absolute;
  z-index: 0;
  right: -15%;
  bottom: -25%;
  width: 60vw;
  aspect-ratio: 1;
  background: #2E2E49;
  /* Two-layer mask: splat shape × radial fade (intersected) */
  mask-image:
    radial-gradient(circle at 75% 75%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%),
    url("assets/element-splat.svg");
  -webkit-mask-image:
    radial-gradient(circle at 75% 75%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%),
    url("assets/element-splat.svg");
  mask-size: 100% 100%, contain;
  -webkit-mask-size: 100% 100%, contain;
  mask-position: center, center;
  -webkit-mask-position: center, center;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-mode: alpha, alpha;
  -webkit-mask-mode: alpha, alpha;
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  filter: blur(2px);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1320px; margin: 0 auto; width: 100%;
}
.hero__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.hero__lockup-wrap {
  position: relative;
  display: inline-block;
  margin: 0;
}
.hero__lockup {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: flex-end;
  gap: 0;
  /* base height that drives wordmark size; bird scales relative to this via its own height rule */
  height: clamp(72px, 7.4vw, 130px);
}
.hero__lockup-wordmark {
  display: block;
  height: 100%;
  width: auto;
  aspect-ratio: 3251 / 1172;
  background: var(--ab-warm-white-2);
  mask: url("assets/allie-burd-wordmark-light.png") center / contain no-repeat;
  -webkit-mask: url("assets/allie-burd-wordmark-light.png") center / contain no-repeat;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
}
.hero__lockup-bird {
  display: block;
  /* Scale up — bird is now ~190% of wordmark height so the beak reaches further right */
  height: calc(190% - 10px);
  width: auto;
  /* Pull less aggressively — bird body has breathing room from wordmark,
     but the beak (rightmost part of the bird image) still extends over it. */
  margin-right: calc(-18% - 10px);
  position: relative;
  z-index: 2;
  top: 10px;
}
.hero__lockup-wordmark {
  position: relative;
  z-index: 1;
  top: 10px;
}
.hero__lockup-underline {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 2%;
  bottom: calc(-60% + 30px);
  height: 100%;
  background: #2E2E49;
  mask: url("assets/element-03.svg") center / 100% 100% no-repeat;
  -webkit-mask: url("assets/element-03.svg") center / 100% 100% no-repeat;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
  pointer-events: none;
}

.hero__eb {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--ab-aqua);
  margin-bottom: 32px;
}
.hero__h1 {
  font-size: clamp(40px, 5.2vw, 96px);
  font-weight: 600; letter-spacing: -0.025em; line-height: 1.0;
  color: var(--ab-warm-white);
  margin: 0;
  max-width: 24ch;
  text-wrap: balance;
  position: relative;
  z-index: 1;
}
.hero__h1-wrap {
  position: relative;
  display: block;
}
.hero__h1-underline {
  position: absolute;
  z-index: 0;
  left: -4%;
  right: -4%;
  top: 50%;
  height: 70%;
  background: #2E2E49;
  mask: url("assets/element-03.svg") center / 100% 100% no-repeat;
  -webkit-mask: url("assets/element-03.svg") center / 100% 100% no-repeat;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
  pointer-events: none;
}
.hero__h1 em {
  font-style: italic;
  font-weight: 600;
  color: var(--ab-aqua);
}
.hero__h1-hi {
  color: var(--ab-warm-white);
}
.hero__h1-body {
  color: var(--ab-warm-white-2);
}
.hero__wordmark-wrap {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}
.hero__wordmark {
  display: inline-block;
  vertical-align: -0.28em;
  height: 1.45em;
  aspect-ratio: 3251 / 1172;
  margin: 0 0.04em;
  background: var(--ab-warm-white-2);
  mask: url("assets/allie-burd-wordmark-light.png") center / contain no-repeat;
  -webkit-mask: url("assets/allie-burd-wordmark-light.png") center / contain no-repeat;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
}
.hero__ground {
  position: absolute;
  z-index: 1;
  left: -2%; right: -2%;
  bottom: 22%;
  height: 16%;
  background: var(--ab-warm-white-2);
  mask: url("assets/element-03.svg") center / 100% 100% no-repeat;
  -webkit-mask: url("assets/element-03.svg") center / 100% 100% no-repeat;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
  pointer-events: none;
}
.hero__amp {
  display: inline-block;
  vertical-align: -0.18em;
  width: 0.78em;
  height: 0.92em;
  margin: 0 0.14em;
  background: var(--ab-warm-white-2);
  mask: url("assets/element-ampersand.svg") center / contain no-repeat;
  -webkit-mask: url("assets/element-ampersand.svg") center / contain no-repeat;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
}
.hero__lede {
  font-size: clamp(20px, 1.7vw, 28px);
  font-weight: 300; line-height: 1.45;
  color: var(--ab-warm-white);
  max-width: 60ch;
  margin: 0;
  text-wrap: pretty;
}
.hero__lede strong {
  font-weight: 600;
  color: var(--ab-warm-white);
}
.hero__cta-row {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 28px;
}
.hero__cta {
  display: inline-flex; align-items: center;
  background: var(--ab-aqua); color: var(--ab-navy);
  font-size: clamp(20px, 1.7vw, 28px);
  font-weight: 800; letter-spacing: 0;
  padding: 0.55em calc(1em - 1.5px);
  border-radius: 999px;
  text-decoration: none;
  transition: background 220ms var(--ab-ease-out), color 220ms var(--ab-ease-out), transform 120ms var(--ab-ease-out);
}
.hero__cta:hover { background: var(--ab-warm-white); color: var(--ab-navy); }
.hero__cta:active { transform: translateY(1px); }

.hero__cta--ghost {
  background: transparent;
  color: var(--ab-warm-white-2);
  box-shadow: inset 0 0 0 1.5px var(--ab-warm-white-2);
  padding: calc(0.55em - 1.5px) calc(1em - 1.5px);
}
.hero__cta--ghost:hover {
  background: var(--ab-warm-white);
  color: var(--ab-navy);
  box-shadow: inset 0 0 0 1.5px var(--ab-warm-white);
}

.hero__bird-wrap {
  position: relative;
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
}
.hero__bird {
  position: relative;
  z-index: 2;
  width: 195%; height: auto; max-height: 118vh;
  object-fit: contain;
  transform: scaleX(-1);
  transform-origin: center;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.35));
}
.hero__bg-bird {
  position: absolute;
  z-index: 1;
  bottom: -160px;
  left: 50%;
  transform: translateX(-50%);
  height: 150vh;
  width: auto;
  max-width: none;
  opacity: 0.55;
  pointer-events: none;
}
.hero__splat {
  position: absolute;
  z-index: 1;
  background: var(--ab-mustard);
  mask: url("assets/element-splat.svg") center / contain no-repeat;
  -webkit-mask: url("assets/element-splat.svg") center / contain no-repeat;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
  pointer-events: none;
}
.hero__splat--lg {
  width: 92%;
  aspect-ratio: 1;
  top: -8%;
  right: -34%;
}
.hero__splat--md {
  width: 52%;
  aspect-ratio: 1;
  bottom: 4%;
  left: -26%;
}
.hero__splat--sm {
  width: 26%;
  aspect-ratio: 1;
  top: 10%;
  left: -16%;
}

/* ---------- "MORE COMING" NOTE ---------- */
.note {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 32px 48px;
  text-align: center;
  font-size: 13px;
  color: var(--ab-fg-on-dark-3);
  letter-spacing: 0.02em;
}
.note strong { color: var(--ab-warm-white); font-weight: 600; }

/* ---------- RESPONSIVE ---------- */
@media (min-width: 721px) {
  .hero__lede { max-width: 74ch; }
}
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .hero__bird-wrap { max-width: 220px; margin: 0 auto; order: -1; }
}
@media (max-width: 720px) {
  .hero { padding: 80px 24px 60px; }
  .hero__copy { gap: 18px; }
  .hero__cta-row { margin-top: 18px; }
  .hero__lockup-bird { margin-right: -18%; }
  .hero__h1 { max-width: 20ch; text-wrap: balance; line-height: 1.2; }
  .hero__h1-hi,
  .hero__h1-body { display: block; text-wrap: balance; }
.hero__lockup-underline { bottom: calc(-60% + 10px); }
  .note { padding: 24px 24px; }
}