/*
 * The opening animation: a navy screen, the app icon (a heart with a cross) pops in and beats once, "MHP" rises letter by letter,
 * "MEDICAL HELP PROGRAM" spreads in under it. About 4.5 seconds; a click, "Пропустить" or Esc ends it at once.
 */
.li { --navy: #0b2748; --tile: #143a6a; --teal: #38d6c4; position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, #0d2b4e 0%, #0a2342 100%); color: #fff; transition: opacity .6s ease, visibility .6s;
  /* iOS Safari: `inset:0` on a fixed element is sized once, while the address bar is still expanded. When Safari then
     collapses it and the viewport grows, a stale-height overlay leaves the real page visible at the bottom. 100dvh
     tracks the viewport live, so the overlay always reaches the true bottom edge; height:100% is the fallback for
     browsers that don't know dvh yet. */
  height: 100%; height: 100dvh; }
.li[hidden] { display: none; }
.li.out { opacity: 0; visibility: hidden; }
.li-glow { position: absolute; left: 50%; top: 48%; width: min(120vw, 1100px); height: min(80vh, 700px); transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(56, 214, 196, .16), rgba(56, 214, 196, .05) 55%, transparent 75%); opacity: 0; }
.li.play .li-glow { animation: li-glow 1.6s .3s ease-out forwards; }
@keyframes li-glow { to { opacity: 1; } }

.li-lockup { position: relative; display: flex; align-items: center; gap: clamp(22px, 3.4vw, 54px); padding: 0 24px; }
.li-words { display: grid; gap: clamp(8px, 1.2vw, 16px); }

/* the icon tile */
.li-tile { position: relative; flex: none; width: clamp(104px, 15vw, 200px); aspect-ratio: 1; border-radius: 24%; display: grid; place-items: center;
  background: linear-gradient(150deg, #1a4678, #112f58); box-shadow: 0 18px 50px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .08);
  opacity: 0; transform: scale(.6); }
.li.play .li-tile { animation: li-tile .8s .15s cubic-bezier(.2, 1.35, .4, 1) forwards, li-beat 1.5s 2.2s ease-in-out 1; }
@keyframes li-tile { to { opacity: 1; transform: scale(1); } }
@keyframes li-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.08); } 28% { transform: scale(1); } 42% { transform: scale(1.05); } 60% { transform: scale(1); } }
.li-icon { width: 62%; height: 62%; overflow: visible; }
.li-heart-line { fill: none; stroke: #fff; stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.li.play .li-heart-line { animation: li-draw .8s .55s cubic-bezier(.5, 0, .3, 1) forwards, li-line-out .3s 1.45s ease-out forwards; }
@keyframes li-draw { to { stroke-dashoffset: 0; } } @keyframes li-line-out { to { opacity: 0; } }
.li-heart { fill: #fff; fill-opacity: 0; transform-box: fill-box; transform-origin: center; }
.li.play .li-heart { animation: li-fill .5s 1.2s ease-out forwards; }
@keyframes li-fill { to { fill-opacity: 1; } }
.li-plus rect { fill: var(--teal); }
.li-plus { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.li.play .li-plus { animation: li-plus .55s 1.65s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes li-plus { to { transform: scale(1); } }
/* a soft ring leaves the icon with the heartbeat */
.li-ring { position: absolute; inset: 0; border-radius: 24%; border: 2px solid var(--teal); opacity: 0; }
.li.play .li-ring { animation: li-ring 1.5s 2.25s ease-out 1; } .li.play .li-ring.r2 { animation-delay: 2.55s; }
@keyframes li-ring { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }

/* MHP: each letter rises out of a mask */
.li-name { display: flex; font: 800 clamp(64px, 11.5vw, 150px)/.92 Manrope, system-ui, "Segoe UI", sans-serif; letter-spacing: -.02em; overflow: hidden; padding-bottom: .06em; }
.li-name span { display: inline-block; transform: translateY(110%); }
.li.play .li-name span { animation: li-rise .75s cubic-bezier(.2, .9, .25, 1) forwards; }
.li.play .li-name span:nth-child(1) { animation-delay: 1.3s; } .li.play .li-name span:nth-child(2) { animation-delay: 1.42s; } .li.play .li-name span:nth-child(3) { animation-delay: 1.54s; }
@keyframes li-rise { to { transform: none; } }

/* MEDICAL HELP PROGRAM: spreads out while it fades in */
.li-tag { font: 700 clamp(11px, 1.85vw, 25px)/1 Manrope, system-ui, "Segoe UI", sans-serif; text-transform: uppercase; color: var(--teal); white-space: nowrap; letter-spacing: .6em; opacity: 0; transform: translateY(8px); }
.li.play .li-tag { animation: li-tag 1.1s 2.15s cubic-bezier(.2, .8, .25, 1) forwards; }
@keyframes li-tag { to { opacity: 1; letter-spacing: .27em; transform: none; } }

.li-skip { position: absolute; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); padding: 9px 18px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 0; background: rgba(255, 255, 255, .07); color: #cfe3ee; font: 700 13px Manrope, system-ui, sans-serif; cursor: pointer; }
.li-skip:hover { background: rgba(255, 255, 255, .16); }

/* a phone held upright: the icon above the words, everything centred */
@media (max-width: 700px) {
  .li-lockup { flex-direction: column; text-align: center; gap: 26px; }
  .li-words { justify-items: center; }
  .li-tile { width: clamp(110px, 34vw, 160px); }
  .li-name { font-size: clamp(64px, 22vw, 110px); }
  .li-tag { font-size: clamp(11px, 3.2vw, 15px); }
  @keyframes li-tag { to { opacity: 1; letter-spacing: .2em; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .li { display: none !important; } }