:root {
  color-scheme: dark;
  --orange: #ff5a0a;
  --night: #02060c;
}

* { box-sizing: border-box; }

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

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.launch {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 100%;
  isolation: isolate;
  background: #02060c;
}

.approved-concept {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  animation: reveal 1.4s cubic-bezier(.2,.75,.25,1) both,
             breathe 10s ease-in-out 1.4s infinite alternate;
  will-change: opacity, filter, transform;
}

.approved-picture { display: contents; }

.mobile-composition { display: none; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes reveal {
  from { opacity: 0; transform: scale(1.008); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes breathe {
  from { filter: brightness(.995) saturate(1); }
  to { filter: brightness(1.025) saturate(1.035); }
}

@media (max-width: 700px), (max-aspect-ratio: 3 / 4) {
  body { overflow: auto; }

  .launch {
    min-height: 100svh;
    height: auto;
    overflow: hidden;
    background:
      radial-gradient(circle at 66% 30%, rgba(225,65,7,.15), transparent 28%),
      linear-gradient(#02060c 0%, #030910 54%, #02060c 100%);
  }

  .approved-concept { display: none; }

  .mobile-composition {
    display: grid;
    min-height: 100svh;
    grid-template-rows: minmax(33svh, 36svh) 1fr;
    animation: reveal 1.25s cubic-bezier(.2,.75,.25,1) both;
  }

  .mobile-bird {
    position: relative;
    margin: -1px -28vw 0;
    background-image: url('/puffin-homepage.png');
    background-repeat: no-repeat;
    background-size: auto 64svh;
    background-position: 50% 3%;
    mask-image: linear-gradient(to bottom, #000 52%, transparent 84%);
    -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 84%);
    animation: breathe 10s ease-in-out 1.25s infinite alternate;
  }

  .mobile-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 max(20px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom));
    text-align: center;
    transform: translateY(-1.2svh);
  }

  .wordmark {
    color: #f6f6f4;
    font-size: clamp(3.1rem, 17vw, 5rem);
    font-weight: 600;
    line-height: .9;
    letter-spacing: .18em;
    text-indent: .18em;
    text-shadow: 0 4px 18px rgba(0,0,0,.55);
  }

  .letter-n {
    position: relative;
    display: inline-block;
    width: .92em;
    height: .9em;
    margin-left: .015em;
    vertical-align: -.035em;
  }
  .letter-n svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .n-white { fill: #f6f6f4; }
  .n-cut,
  .n-orange {
    fill: none;
    stroke-linecap: butt;
  }
  .n-cut {
    stroke: #03070d;
    stroke-width: 18;
  }
  .n-orange {
    stroke: var(--orange);
    stroke-width: 8;
  }

  .tagline,
  .taking-flight,
  .coming-soon,
  footer {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .25em;
  }

  .tagline {
    margin-top: 2.2svh;
    max-width: 31rem;
    color: #f3f4f4;
    font-size: clamp(.58rem, 2.45vw, .8rem);
    line-height: 1.8;
  }
  .tagline span { color: var(--orange); }

  .divider {
    width: 28px;
    height: 1px;
    margin: 2.6svh 0 2.3svh;
    background: var(--orange);
    box-shadow: 0 0 8px rgba(255,90,10,.35);
  }

  .taking-flight {
    color: #9fa4ab;
    font-size: clamp(.48rem, 2.2vw, .68rem);
    line-height: 1.7;
  }

  .coming-soon {
    margin-top: 1.5svh;
    color: var(--orange);
    font-size: clamp(.92rem, 4.5vw, 1.35rem);
    letter-spacing: .34em;
    text-indent: .34em;
  }

  .puffin-mark {
    width: clamp(31px, 9vw, 42px);
    height: auto;
    margin-top: 2svh;
    fill: none;
    stroke: var(--orange);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 7px rgba(255,90,10,.82));
  }

  footer {
    display: flex;
    flex-direction: column;
    gap: .9svh;
    margin-top: auto;
    padding-top: 2svh;
    color: #a9adb1;
    font-size: clamp(.47rem, 2vw, .61rem);
  }
  footer span:last-child { color: var(--orange); }
}

@media (max-width: 700px) {
  body { overflow: hidden; }

  .approved-concept {
    display: block;
    object-fit: contain;
    object-position: 50% 50%;
  }

  .mobile-composition { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .approved-concept,
  .mobile-composition,
  .mobile-bird { animation: none; }
}