/* Peptual — Coming Soon teaser, option 2 (plays once, then holds)

   Background: the hero video from the Peptual site under a 50% black
   overlay, exactly like the site's hero.
   0.6–3.0 s  the logo loads in letter by letter (seven slices of the PNG,
              0.24 s apart, each taking 1.1 s to settle)
   3.4–4.4 s  "PEPTUAL TELEHEALTH" eyebrow rises in as one line
   4.4–5.7 s  "Coming Soon" headline rises in, word by word */

:root {
  --navy: #0b1220;
  --white: #ffffff;
  --blue: #4594e1;
  --font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rise: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font);
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--navy);
}

/* ---------- Background ---------- */

.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%),
    rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* ---------- Content ---------- */

.content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.6vw, 2rem);
  padding: 2rem;
  text-align: center;
}

/* Logo: a box with the PNG's aspect ratio, filled by seven absolutely
   positioned slices. Each slice shows only its own letter by sizing the
   full image to the box width and offsetting it. */
.logo-word {
  position: relative;
  width: clamp(240px, 46vw, 680px);
  aspect-ratio: 767 / 177;
}

.glyph {
  position: absolute;
  top: 0;
  height: 100%;
  background-image: url("peptual-logo.png");
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(22%);
  filter: blur(6px);
  animation: glyph-in 1.1s var(--rise) forwards;
}

@keyframes glyph-in {
  0% {
    opacity: 0;
    transform: translateY(22%);
    filter: blur(6px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Slice geometry measured from the PNG's alpha channel (767 px wide):
   P 0–132 · e 132–266 · p 266–383 · t 383–483 · u 483–595 · a 595–727 · l 727–767 */
.glyph-1 {
  left: 0%;
  width: 17.21%;
  background-size: 581.061% 100%;
  background-position: 0% 0;
  animation-delay: 0.60s;
}

.glyph-2 {
  left: 17.21%;
  width: 17.471%;
  background-size: 572.388% 100%;
  background-position: 20.853% 0;
  animation-delay: 0.84s;
}

.glyph-3 {
  left: 34.681%;
  width: 15.254%;
  background-size: 655.556% 100%;
  background-position: 40.923% 0;
  animation-delay: 1.08s;
}

.glyph-4 {
  left: 49.935%;
  width: 13.038%;
  background-size: 767% 100%;
  background-position: 57.421% 0;
  animation-delay: 1.32s;
}

.glyph-5 {
  left: 62.973%;
  width: 14.602%;
  background-size: 684.821% 100%;
  background-position: 73.74% 0;
  animation-delay: 1.56s;
}

.glyph-6 {
  left: 77.575%;
  width: 17.21%;
  background-size: 581.061% 100%;
  background-position: 93.701% 0;
  animation-delay: 1.80s;
}

.glyph-7 {
  left: 94.785%;
  width: 5.215%;
  background-size: 1917.5% 100%;
  background-position: 100% 0;
  animation-delay: 2.04s;
}

/* ---------- Copy ---------- */

.eyebrow,
.headline {
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 0.35em;
}

.eyebrow {
  font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.75rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.headline {
  font-weight: 800;
  font-size: clamp(2.2rem, 6.5vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--white);
  text-shadow: 0 0 2em rgba(69, 148, 225, 0.35);
}

.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  animation: word-in 1s var(--rise) forwards;
}

.eyebrow { animation-delay: 3.4s; }
.headline .word:nth-child(1) { animation-delay: 4.4s; }
.headline .word:nth-child(2) { animation-delay: 4.7s; }

@keyframes word-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Reduced motion: everything visible, video paused ---------- */

@media (prefers-reduced-motion: reduce) {
  .glyph,
  .word {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}