/*
 * Awaken landing (templates/awaken/core/landing.html): depth, photo layout and motion.
 * Motion follows theawakennetwork.com's own feel (one expo-out curve, image wipes,
 * nothing bouncy) at about 1.5x their timing, since Joe asked for a little slower.
 * Every animation sits under prefers-reduced-motion: no-preference and ends
 * visible, so the page is complete with JS off. static/js/awaken_landing.js adds
 * .is-waiting (hold back until scrolled in), .is-playing and .is-paused (hero photos).
 * Photos keep their own tones: no filter, tint or blend mode anywhere in this file.
 */
:root { --ms-al-ease: cubic-bezier(0.19, 1, 0.22, 1); }

/* Dark band; its last 6rem is page color, so the doors straddle the edge. */
.ms-al-hero {
  overflow-x: clip;
  background: linear-gradient(to bottom, var(--color-text) calc(100% - 6rem), transparent 0);
}
@media (min-width: 1024px) {
  .ms-al-hero { background: linear-gradient(to bottom, var(--color-text) calc(100% - 7rem), transparent 0); }
  /* The hero photo runs to the right edge of the window. */
  .ms-al-bleed {
    margin-left: 0;
    margin-right: calc(-1 * max(1.5rem, (100vw - 72rem) / 2 + 1.5rem));
    border-radius: 2rem 0 0 2rem;
  }
}

.ms-al-slides { position: relative; margin-top: 0; margin-bottom: 0; overflow: hidden; background: rgb(255 255 255 / 0.06); }
.ms-al-slides > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ms-al-slides > img + img { opacity: 0; }

.ms-al-pause {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  background: rgb(255 255 255 / 0.92); color: var(--color-text);
  box-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.5);
  transition: background-color 225ms ease;
}
.ms-al-pause[hidden] { display: none; }
.ms-al-pause:hover { background: #fff; }
.ms-al-pause:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ms-al-pause svg { width: 1rem; height: 1rem; fill: currentColor; }
.ms-al-pause__play, .ms-al-pause[aria-pressed="true"] .ms-al-pause__bars { display: none; }
.ms-al-pause[aria-pressed="true"] .ms-al-pause__play { display: inline; }

/* The two doors: the whole card is the link's target, so it may lift. */
.ms-al-door {
  position: relative;
  box-shadow: 0 22px 44px -20px rgb(0 0 0 / 0.5);
  transition: transform 450ms var(--ms-al-ease), box-shadow 450ms var(--ms-al-ease);
}
.ms-al-door:hover, .ms-al-door:focus-within { box-shadow: 0 32px 60px -22px rgb(0 0 0 / 0.6); }
.ms-al-door a::after { content: ""; position: absolute; inset: 0; }

/* The five intake steps, joined as a path. */
.ms-al-steps li { position: relative; }
.ms-al-steps li + li::before {
  content: ""; position: absolute; left: 0.6875rem; top: -0.75rem;
  width: 2px; height: 0.75rem; background: rgb(255 255 255 / 0.6); transform-origin: top;
}
@media (min-width: 1280px) {
  .ms-al-steps li + li::before { left: -0.75rem; top: calc(50% - 1px); width: 0.5rem; height: 2px; transform-origin: left; }
}

.ms-al-wave { display: block; width: 100%; height: 2.5rem; fill: var(--color-accent); }
@media (min-width: 1024px) { .ms-al-wave { height: 4.5rem; } }

/* Three overlapping circle photos: the people a planter is sent with. */
.ms-al-bubbles { position: relative; height: 15rem; max-width: 26rem; }
.ms-al-bubbles > div {
  position: absolute; overflow: hidden; border-radius: 999px;
  border: 5px solid var(--color-accent); background: rgb(0 0 0 / 0.06);
}
.ms-al-bubbles img { width: 100%; height: 100%; object-fit: cover; }
.ms-al-bubbles > div:nth-child(1) { left: 0; top: 1.5rem; width: 12rem; height: 12rem; }
.ms-al-bubbles > div:nth-child(2) { left: 10rem; top: 0; width: 9rem; height: 9rem; }
.ms-al-bubbles > div:nth-child(3) { left: 13.5rem; top: 7.5rem; width: 7rem; height: 7rem; }
@media (min-width: 1024px) {
  .ms-al-bubbles { height: 19rem; max-width: 27rem; }
  .ms-al-bubbles > div:nth-child(1) { top: 2rem; width: 15rem; height: 15rem; }
  .ms-al-bubbles > div:nth-child(2) { left: 12.5rem; width: 11rem; height: 11rem; }
  .ms-al-bubbles > div:nth-child(3) { left: 17.5rem; top: 9.5rem; width: 8.5rem; height: 8.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .ms-al-door:hover, .ms-al-door:focus-within { transform: translateY(-4px); }

  /* Focal moment: the headline rises line by line on load. */
  .ms-al-line { animation: ms-al-rise 1350ms var(--ms-al-ease) both; }
  .ms-al-line:nth-child(2) { animation-delay: 135ms; }
  .ms-al-line:nth-child(3) { animation-delay: 270ms; }

  /* Hero photos: a slow crossfade with a gentle drift, 12s each (1.8s fades). */
  .ms-al-slides.is-playing > img { animation: ms-al-slide 36s linear infinite both; will-change: opacity, transform; }
  .ms-al-slides.is-playing > img:nth-of-type(1) { animation-delay: -1.8s; }
  .ms-al-slides.is-playing > img:nth-of-type(2) { animation-delay: 10.2s; }
  .ms-al-slides.is-playing > img:nth-of-type(3) { animation-delay: 22.2s; }
  .ms-al-slides.is-paused > img { animation-play-state: paused; }

  /* Steps: each line draws from the step before, then the step arrives. */
  .ms-al-steps li { animation: ms-al-fade 750ms var(--ms-al-ease) calc(600ms + var(--i, 0) * 240ms) both; }
  .ms-al-steps li + li::before { animation: ms-al-draw 600ms var(--ms-al-ease) calc(600ms + var(--i, 0) * 240ms) both; }

  /* Photos wipe up from their bottom edge and settle; lists follow. */
  .ms-al-wipe { animation: ms-al-wipe 1650ms var(--ms-al-ease) calc(var(--p, 0) * 180ms) both; }
  .ms-al-wipe img { animation: ms-al-settle 2400ms var(--ms-al-ease) calc(var(--p, 0) * 180ms) both; }
  .ms-al-rise { animation: ms-al-rise 1000ms var(--ms-al-ease) calc(var(--p, 0) * 180ms + 375ms + var(--i, 0) * 70ms) both; }
  .ms-al-pop { animation: ms-al-pop 1350ms var(--ms-al-ease) calc(var(--i, 0) * 225ms) both; }
  .ms-al-pop img { animation: ms-al-settle 2100ms var(--ms-al-ease) calc(var(--i, 0) * 225ms) both; }

  /* Held back below the fold until the group scrolls in. Opacity, not visibility,
     so screen readers and find-in-page still reach the content. */
  .is-waiting :is(.ms-al-wipe, .ms-al-wipe img, .ms-al-rise, .ms-al-pop, .ms-al-pop img),
  .is-waiting.ms-al-steps li, .is-waiting.ms-al-steps li::before { animation: none; opacity: 0; }
}

@keyframes ms-al-rise { from { opacity: 0; transform: translateY(0.4em); } }
@keyframes ms-al-fade { from { opacity: 0; transform: translateX(-0.375rem); } }
@keyframes ms-al-draw { from { transform: scale(0); } }
@keyframes ms-al-wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ms-al-settle { from { transform: scale(1.12); } }
@keyframes ms-al-pop { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(50% at 50% 50%); } }
@keyframes ms-al-slide {
  0% { opacity: 0; transform: scale(1); }
  5% { opacity: 1; }
  33.3% { opacity: 1; }
  38.3% { opacity: 0; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.08); }
}