/*
 * Phone-only rendering path. It keeps every chapter and interaction but avoids
 * long-lived fixed effects and expensive compositing on narrow viewports.
 */
html.mobile-lite,
html.mobile-lite body {
  background: #fff9ee;
  scroll-behavior: auto;
}

html.mobile-lite .memory-atmosphere,
html.mobile-lite .memory-thread,
html.mobile-lite .ambient-petals,
html.mobile-lite .touch-aura,
html.mobile-lite .film__grain,
html.mobile-lite .photo-reel__noise {
  display: none;
}

html.mobile-lite .entry-gate__rings,
html.mobile-lite .entry-gate__eclipse,
html.mobile-lite .entry-gate__rings i,
html.mobile-lite .entry-gate__eclipse i,
html.mobile-lite .line-puppy-art--entry,
html.mobile-lite .line-puppy-art--film,
html.mobile-lite .line-puppy-goodnight,
html.mobile-lite .halo,
html.mobile-lite .constellation__core {
  animation: none !important;
  will-change: auto !important;
}

html.mobile-lite .photo-slot,
html.mobile-lite .photo-slot *,
html.mobile-lite .reel-frame,
html.mobile-lite .constellation-photo,
html.mobile-lite .photo-reel__track {
  will-change: auto !important;
}

html.mobile-lite body.line-puppy-theme .memory-mark,
html.mobile-lite .global-countdown,
html.mobile-lite .ui5-mobile-nav,
html.mobile-lite .memory-viewer__backdrop,
html.mobile-lite .memory-viewer__step,
html.mobile-lite .entry-login,
html.mobile-lite .letter-section__inside {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.mobile-lite .entry-gate__rings,
html.mobile-lite .entry-gate__eclipse,
html.mobile-lite .line-puppy-section-art,
html.mobile-lite .line-puppy-atlas,
html.mobile-lite .line-puppy-goodnight,
html.mobile-lite .photo-slot,
html.mobile-lite .letter-section__inside,
html.mobile-lite .goodnight__ring {
  box-shadow: 4px 4px 0 rgba(39, 49, 58, .13) !important;
}

html.mobile-lite .photo-reel__track {
  transition: none;
}

html.mobile-lite .reel-frame {
  transition: none;
}

/*
 * The desktop story is a continuous, sticky camera movement. On phones that
 * means several full-screen compositor layers and a scroll-time renderer.
 * Keep every chapter and photo slot, but present them as a light document
 * flow that the browser can paint only when it approaches the viewport.
 */
  html.mobile-lite body {
    overflow-x: clip;
  }

  html.mobile-lite .entry-gate__aurora,
  html.mobile-lite .entry-gate__grain,
  html.mobile-lite .entry-gate__beams,
  html.mobile-lite .entry-gate__stars,
  html.mobile-lite .entry-gate__rings,
  html.mobile-lite .entry-gate__eclipse,
  html.mobile-lite .entry-gate__thread-soft {
    display: none;
  }

  html.mobile-lite .entry-gate__thread,
  html.mobile-lite .entry-gate__festival-message,
  html.mobile-lite .entry-login,
  html.mobile-lite .entry-gate__story {
    filter: none !important;
  }

  html.mobile-lite .motion-toggle {
    display: none;
  }

  html.mobile-lite [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html.mobile-lite .photo-slot::before,
  html.mobile-lite .photo-slot::after {
    mix-blend-mode: normal;
  }

  html.mobile-lite .photo-slot::before {
    opacity: 0;
    background: none;
  }

  html.mobile-lite .photo-slot__picker,
  html.mobile-lite .photo-slot__image {
    transform: none !important;
    transition: none !important;
  }

  html.mobile-lite .film,
  html.mobile-lite .atlas,
  html.mobile-lite .photo-reel,
  html.mobile-lite .constellation,
  html.mobile-lite .letter-section,
  html.mobile-lite .goodnight {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
    isolation: auto;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* Opening: convert the five scrolling scenes into a compact reading flow. */
  html.mobile-lite .film {
    min-height: 0;
    height: auto !important;
    margin: 0;
    padding: 72px 20px 64px;
    color: #27313a;
    background: #fff4c9 !important;
  }

  html.mobile-lite .film__sticky {
    position: relative;
    top: auto;
    display: flex;
    height: auto !important;
    min-height: 0;
    gap: 28px;
    overflow: visible;
    opacity: 1 !important;
    background: transparent !important;
    transform: none !important;
    will-change: auto !important;
  }

  html.mobile-lite .film__sticky::after,
  html.mobile-lite .wash,
  html.mobile-lite .film__grain,
  html.mobile-lite .film__stars,
  html.mobile-lite .film__chapter-count,
  html.mobile-lite .film__progress,
  html.mobile-lite .journey-line,
  html.mobile-lite .halo,
  html.mobile-lite .film__scroll-cue {
    display: none !important;
  }

  html.mobile-lite .line-puppy-art--film {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(100%, 400px);
    margin: 0 auto 4px;
    opacity: 1 !important;
    transform: none !important;
  }

  html.mobile-lite .photo-card {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(72vw, 300px);
    margin: 0 auto;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  html.mobile-lite .photo-card--second,
  html.mobile-lite .photo-card--third {
    width: min(56vw, 230px);
  }

  html.mobile-lite .scene-copy {
    position: relative;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    max-width: none !important;
    margin: 0;
    padding: 0 2px;
    color: #27313a;
    opacity: 1 !important;
    pointer-events: auto;
    text-align: left !important;
    transform: none !important;
    will-change: auto !important;
  }

  html.mobile-lite .scene-copy h1,
  html.mobile-lite .scene-copy h2,
  html.mobile-lite .scene-copy__body {
    color: #27313a;
    text-shadow: none;
  }

  html.mobile-lite .scene-copy__body {
    color: #42515b;
  }

  /* The photo wall becomes a native two-column grid instead of positioned tiles. */
  html.mobile-lite .atlas {
    min-height: 0;
    margin: 0 !important;
    padding: 72px 20px 64px !important;
    color: #27313a;
    background: #ddf3e5 !important;
    box-shadow: none !important;
  }

  html.mobile-lite .atlas::before,
  html.mobile-lite .atlas__ambient {
    display: none;
  }

  html.mobile-lite .line-puppy-atlas {
    position: relative;
    top: auto;
    right: auto;
    display: block;
    width: min(52vw, 230px);
    margin: 0 0 24px auto;
    transform: none !important;
  }

  html.mobile-lite .atlas__intro,
  html.mobile-lite .atlas__afterword {
    width: auto;
    margin: 0;
  }

  html.mobile-lite .atlas__margin-note {
    position: relative;
    top: auto;
    right: auto;
    margin: 26px 0 0;
    text-align: left;
  }

  html.mobile-lite .atlas__masonry {
    display: grid;
    height: auto !important;
    margin: 36px 0 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  html.mobile-lite .atlas-photo {
    position: relative;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    margin: 0;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html.mobile-lite .atlas__little-line {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 8px 0;
    grid-column: 1 / -1;
    opacity: 1 !important;
    text-align: left;
    transform: none !important;
  }

  html.mobile-lite .atlas__afterword {
    margin-top: 42px;
    opacity: 1 !important;
    transform: none !important;
  }

  /* The reel is intentionally a grid on phones: no viewport-wide horizontal track. */
  html.mobile-lite .photo-reel {
    height: auto !important;
    margin: 0 !important;
    padding: 72px 20px 64px;
    color: #27313a;
    background: #a9ddec !important;
  }

  html.mobile-lite .photo-reel__sticky {
    position: relative;
    top: auto;
    display: block;
    height: auto !important;
    min-height: 0;
    overflow: visible;
    background: transparent !important;
    transform: none !important;
  }

  html.mobile-lite .photo-reel__sky,
  html.mobile-lite .photo-reel__flare,
  html.mobile-lite .photo-reel__noise,
  html.mobile-lite .photo-reel__meter {
    display: none;
  }

  html.mobile-lite .line-puppy-section-art--reel {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: block;
    width: min(58vw, 250px);
    margin: 0 0 24px auto;
    transform: none !important;
  }

  html.mobile-lite .photo-reel__copy {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto !important;
    margin: 0;
    color: #27313a;
    transform: none !important;
  }

  html.mobile-lite .photo-reel__copy h2,
  html.mobile-lite .photo-reel__detail {
    color: #27313a;
    text-shadow: none;
  }

  html.mobile-lite .photo-reel__detail {
    margin-left: 0;
    color: #42515b;
  }

  html.mobile-lite .photo-reel__track {
    position: relative;
    top: auto;
    left: auto;
    display: grid;
    width: auto;
    margin-top: 30px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    perspective: none;
    transform: none !important;
  }

  html.mobile-lite .reel-frame {
    width: auto !important;
    margin: 0;
    opacity: 1 !important;
    box-shadow: 4px 4px 0 rgba(39, 49, 58, .13) !important;
    transform: none !important;
  }

  /* Constellation cards are also placed in-flow, removing the second sticky scene. */
  html.mobile-lite .constellation {
    height: auto !important;
    margin: 0 !important;
    padding: 72px 20px 64px;
    color: #27313a;
    background: #fff1b8 !important;
  }

  html.mobile-lite .constellation__sticky {
    position: relative;
    top: auto;
    display: grid;
    height: auto !important;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    overflow: visible;
    background: transparent !important;
    transform: none !important;
  }

  html.mobile-lite .constellation__sky,
  html.mobile-lite .constellation__core,
  html.mobile-lite .constellation__line,
  html.mobile-lite .constellation__touch-note {
    display: none;
  }

  html.mobile-lite .line-puppy-section-art--constellation,
  html.mobile-lite .constellation__copy,
  html.mobile-lite .constellation__seal {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto !important;
    margin: 0;
    grid-column: 1 / -1;
    transform: none !important;
  }

  html.mobile-lite .line-puppy-section-art--constellation {
    width: min(48vw, 210px) !important;
    margin: 0 0 22px auto;
  }

  html.mobile-lite .constellation__copy {
    color: #27313a;
    text-align: left;
    pointer-events: auto;
  }

  html.mobile-lite .constellation__copy h2,
  html.mobile-lite .constellation__body {
    color: #27313a;
    text-shadow: none;
  }

  html.mobile-lite .constellation__body {
    color: #42515b;
  }

  html.mobile-lite .constellation-photo {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto !important;
    margin: 0;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  html.mobile-lite .constellation__seal {
    margin-top: 18px;
    color: #27313a;
    text-align: left;
  }

  html.mobile-lite .letter-section {
    min-height: 0;
    margin: 0 !important;
    padding: 72px 20px 64px !important;
    background: #f5cb55 !important;
  }

  html.mobile-lite .letter-section::before,
  html.mobile-lite .letter-section__thread {
    display: none;
  }

  html.mobile-lite .line-puppy-section-art--letter {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: block;
    width: min(42vw, 170px);
    margin: 0 0 24px auto;
    transform: none !important;
  }

  html.mobile-lite .letter-section__inside {
    padding: 32px 24px;
    box-shadow: 5px 5px 0 rgba(39, 49, 58, .14) !important;
    transform: none !important;
    will-change: auto !important;
  }

  html.mobile-lite .letter-section__inside::after {
    display: none;
  }

  html.mobile-lite .goodnight {
    min-height: 680px;
    margin: 0 !important;
    padding: 64px 20px 40px;
    background: #8dd0e6 !important;
  }

  html.mobile-lite .goodnight__ring {
    display: none;
  }

  html.mobile-lite .line-puppy-goodnight {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    display: block;
    width: min(88vw, 360px);
    margin: 0 auto 32px;
    opacity: 1 !important;
    transform: none !important;
  }

  html.mobile-lite .goodnight__content,
  html.mobile-lite .goodnight__note {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    margin: 0;
    transform: none;
  }

  html.mobile-lite .goodnight__note {
    margin-top: 38px;
  }

/* Keep the countdown visible on phones without the desktop scroll morph. */
html.mobile-lite .global-countdown--home {
  top: max(72px, calc(env(safe-area-inset-top) + 64px));
  left: 50%;
  width: min(320px, calc(100vw - 28px));
  min-height: 52px;
  padding: 8px 10px;
  box-shadow: 3px 3px 0 rgba(39, 49, 58, .13) !important;
  transform: translateX(-50%);
  transition: none;
}

html.mobile-lite .global-countdown--home .global-countdown__event {
  font-size: 9px;
}

html.mobile-lite .global-countdown--home .global-countdown__units {
  gap: 4px;
}

html.mobile-lite .global-countdown--home .global-countdown__units b {
  font-size: 12px;
}

html.mobile-lite .global-countdown--home .global-countdown__next {
  max-height: 16px;
  margin-top: 5px;
  opacity: .82;
  transition: none;
}

html.mobile-lite body.line-puppy-theme .memory-mark,
html.mobile-lite body.line-puppy-theme.is-scrolled .memory-mark {
  background: #fff9ee;
  box-shadow: none;
}

/* Standalone pages share this file so their long lists stay light too. */
@media (max-width: 760px) {
  .ui3-scrollbar {
    display: none !important;
  }

  .standalone-page.ui3-ready {
    animation: none !important;
  }

  .standalone-page .global-nav,
  .ui5-mobile-nav {
    background: #fffdf7;
    box-shadow: none;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .ui3-backtop,
  .ui3-toast,
  dialog::backdrop {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .ui3-backtop,
  .global-countdown,
  .global-countdown__next,
  .command-button,
  .icon-button,
  .gallery-photo,
  .gallery-photo__favorite,
  .calendar-day,
  .memories-heatmap__cell {
    transition: none !important;
  }

  .gallery-photo {
    content-visibility: auto;
    contain-intrinsic-size: auto 176px;
    box-shadow: 3px 3px 0 rgba(39, 49, 58, .11) !important;
  }

  .memories-stats article,
  .memories-journal,
  .memories-journal__stats article,
  .memories-today__card,
  .memories-notes,
  .gallery-empty,
  dialog {
    box-shadow: 3px 3px 0 rgba(39, 49, 58, .12) !important;
  }
}