:root {
  color-scheme: dark;
  --bg: #09050d;
  --pink: #ff69b4;
  --pink-hot: #ff3d9b;
  --pink-light: #ffc9e6;
  --muted: #bfaabb;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; color: #fff8fd; background: var(--bg); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid #ffd2ee; outline-offset: 3px; }
[hidden] { display: none !important; }
main { position: relative; min-height: 100vh; min-height: 100dvh; isolation: isolate; }
.backdrop { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 50% 44%, #190e21 0%, #0b0710 46%, #07040a 100%); z-index: -1; }
.backdrop__glow { position: absolute; width: min(70vw, 650px); aspect-ratio: 1; border-radius: 50%; filter: blur(78px); opacity: .25; animation: drift 16s ease-in-out infinite alternate; }
.backdrop__glow--a { background: #f43191; top: -32%; left: -20%; }
.backdrop__glow--b { background: #8d3bbb; right: -24%; bottom: -35%; animation-delay: -8s; }
.grain { position: absolute; inset: 0; opacity: .15; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.star { position: absolute; width: var(--size); height: var(--size); top: var(--y); left: var(--x); background: #ffd7eb; border-radius: 50%; opacity: var(--opacity); box-shadow: 0 0 9px #fca4ce80; animation: twinkle var(--duration) ease-in-out infinite alternate; animation-delay: var(--delay); }
.floating-heart { position: absolute; left: var(--x); bottom: -10vh; color: #ffa6d8; opacity: 0; filter: drop-shadow(0 0 9px #ff459d99); font-size: var(--size); animation: floatHeart var(--duration) linear infinite; animation-delay: var(--delay); }
.gate { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 40px 18px; overflow: hidden; }
.gate.is-leaving { animation: gateLeave .5s ease-in both; }
.gate__ring { position: absolute; left: 50%; top: 50%; width: min(100vw, 670px); aspect-ratio: 1; border: 1px solid #ff9bd22e; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; animation: ringBreath 6s ease-in-out infinite; }
.gate__ring--two { width: min(125vw, 910px); opacity: .45; animation-delay: -3s; }
.gate__card { position: relative; width: min(100%, 470px); padding: clamp(28px, 5vw, 48px); border: 1px solid #f7abd82c; border-radius: 29px; background: linear-gradient(152deg, #271525dd, #100b17e8 64%, #190f1bd9); box-shadow: 0 30px 120px #0009, inset 0 1px #ffe3f024; backdrop-filter: blur(20px); text-align: center; }
.gate__card::before, .finale__card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: linear-gradient(145deg, #ffb7d83a, transparent 40%, #fb77c222); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; padding: 1px; }
.gate__seal { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 28px; border: 1px solid #ff9fce77; border-radius: 23px; color: #ffb9de; background: linear-gradient(135deg, #f6389140, #fe8cca12); font-size: 46px; line-height: 1; box-shadow: 0 0 40px #fa378b27, inset 0 1px #ffffff30; animation: sealPulse 3s ease-in-out infinite; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0; color: #ecb9d2; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: #ff6cba; box-shadow: 0 0 11px #ff62ae; }
.gate__title { margin: 18px 0 14px; font-size: clamp(40px, 8.5vw, 64px); line-height: 1.02; letter-spacing: -.065em; font-weight: 850; }
.gate__title em { font-style: normal; background: linear-gradient(95deg, #ff87c5 5%, #ff4fa9 56%, #ffe1f1); color: transparent; background-clip: text; -webkit-background-clip: text; }
.gate__description { max-width: 330px; margin: 0 auto 30px; font-size: 14px; line-height: 1.72; color: var(--muted); }
.password-form { text-align: left; }
.password-form__label { display: block; margin: 0 0 10px 3px; font-size: 12px; font-weight: 700; color: #f5deeb; }
.password-form__control { position: relative; display: flex; align-items: center; height: 60px; border: 1px solid #ffb3d84c; border-radius: 15px; background: #090810bb; transition: border-color .25s, box-shadow .25s; }
.password-form__control:focus-within { border-color: #ff79b9; box-shadow: 0 0 0 4px #fe4a9a13; }
.password-form__lock { width: 48px; text-align: center; color: #fdaed8; font-size: 25px; }
.password-form input { width: 100%; min-width: 0; height: 100%; background: transparent; border: none; outline: none; color: #fff1fb; letter-spacing: .35em; font-size: 26px; font-weight: 750; }
.password-form input::placeholder { color: #9f7993; letter-spacing: .3em; }
.password-form__toggle { flex: 0 0 45px; height: 100%; border: 0; background: transparent; color: #bd91ac; font-size: 23px; }
.password-form__toggle:hover { color: #fff; }
.password-form__error { min-height: 25px; margin: 6px 0 0; padding: 1px 3px; color: #ffa3c8; font-size: 12px; }
.password-form.is-wrong .password-form__control { animation: shake .35s ease both; border-color: #ff588e; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 13px; width: 100%; min-height: 58px; padding: 14px 20px; border: none; border-radius: 15px; background: linear-gradient(105deg, #ff4da0, #ff83c2); color: #230919; font-size: 14px; font-weight: 850; box-shadow: 0 10px 38px #ff448d46, inset 0 1px #ffddedb0; transition: transform .2s, box-shadow .2s; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 14px 45px #ff448d70; }
.primary-button:active { transform: translateY(1px); }
.primary-button span { font-size: 19px; }
.gate__footer { margin: 28px 0 0; color: #aa829f; font-size: 11px; }
.gate__footer span { color: #fd73b5; }
.edge-label { position: absolute; bottom: 25px; font-size: 9px; font-weight: 700; letter-spacing: .18em; color: #b881a266; }
.edge-label--left { left: 24px; }
.edge-label--right { right: 24px; }

/* Вторая сцена: самолёт с посадкой и дверью */
.scene { position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 460px; overflow: hidden; }
.scene__hud { position: absolute; top: max(26px, env(safe-area-inset-top)); left: clamp(18px, 5vw, 64px); right: clamp(18px, 5vw, 64px); display: flex; align-items: center; justify-content: space-between; z-index: 12; }
.flight-tag { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #ee9fcb47; padding: 10px 14px; border-radius: 100px; background: #250e2190; color: #ffb7d8; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.flight-tag__icon { font-size: 16px; }
.skip-button { border: 1px solid #ffffff2b; border-radius: 50px; padding: 10px 13px; color: #dbbfce; background: #25112075; font-size: 11px; }
.skip-button:hover { background: #ff559b35; color: #fff; }
.scene__caption { position: absolute; top: 20%; left: 12px; right: 12px; z-index: 2; text-align: center; color: #ffe0f0; font-size: clamp(18px, 4vw, 29px); font-weight: 750; letter-spacing: -.04em; text-shadow: 0 0 30px #ff42965c; transition: opacity .4s; }
.scene__moon { position: absolute; width: clamp(110px, 21vw, 220px); aspect-ratio: 1; top: 16%; right: 12%; border-radius: 50%; background: radial-gradient(circle at 35% 33%, #ffe0f2, #f68fc3 51%, #ba4d9b 77%); box-shadow: 0 0 70px #fa7ab75a, 0 0 150px #f0448733; opacity: .46; }
.scene__cloud { position: absolute; width: 290px; height: 45px; border-radius: 50%; filter: blur(28px); background: #7a376e; opacity: .3; animation: cloudDrift 12s linear infinite alternate; }
.scene__cloud--one { top: 34%; left: 3%; }
.scene__cloud--two { top: 47%; right: 3%; animation-delay: -6s; }
.aircraft { position: absolute; z-index: 5; left: 50%; top: 53%; width: min(86vw, 650px); aspect-ratio: 840 / 330; transform: translate(calc(-50% - 120vw), calc(-50% - 25vh)) rotate(-8deg); will-change: transform; filter: drop-shadow(0 15px 27px #ff559c44); }
.aircraft svg { display: block; width: 100%; height: 100%; overflow: visible; }
.aircraft.is-flying { animation: jetLanding 3.65s cubic-bezier(.28,.65,.2,1) forwards; }
.aircraft.is-landed { transform: translate(-50%, -50%) rotate(0); }
#aircraftDoor { transform-box: fill-box; transform-origin: 0% 50%; transition: transform .85s cubic-bezier(.16,1,.3,1), opacity .5s; }
.aircraft.is-open #aircraftDoor { transform: scaleX(.04) skewY(-7deg); opacity: .5; }
.door-beacon { position: absolute; left: 38%; top: 49%; width: 6%; aspect-ratio: 1; border-radius: 50%; background: #ffd2ec; filter: blur(12px); box-shadow: 0 0 25px 20px #ff68b8; opacity: 0; transition: opacity .7s; pointer-events: none; }
.aircraft.is-open .door-beacon { opacity: .98; }
.runway { position: absolute; top: 66%; left: -5%; right: -5%; height: 4px; background: linear-gradient(90deg, transparent, #e265a899 16%, #ffd2ec 50%, #e265a899 84%, transparent); box-shadow: 0 1px 20px #f661ac70, 0 60px 140px 38px #d43c9840; display: flex; justify-content: space-around; }
.runway__stripe { margin-top: 25px; width: 13%; height: 3px; background: #ffbadd55; box-shadow: 0 0 11px #ff87c455; transform: skewX(-28deg); }
.scene__subline { position: absolute; bottom: 9%; left: 12px; right: 12px; text-align: center; color: #e7a6ca; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.particles, .heart-layer { position: fixed; inset: 0; overflow: hidden; z-index: 20; pointer-events: none; }
.particle { position: absolute; left: 0; top: 0; will-change: transform, opacity; color: #ffc5e4; font-weight: 900; text-shadow: 0 0 12px #ff49a5, 0 0 25px #fa6eae; }
.heart-layer { z-index: 22; transition: opacity .32s ease, filter .32s ease; }
.heart-layer.is-shattering { opacity: 0; filter: blur(14px) brightness(3); }
.love-word { position: absolute; top: 0; left: 0; white-space: nowrap; color: #ff9cd2; font-weight: 850; letter-spacing: -.025em; line-height: 1; transform: translate(-50%,-50%); text-shadow: 0 0 12px #f943a78c, 0 0 23px #fb51a063; will-change: transform, opacity; user-select: none; }
.heart-layer.is-complete { animation: heartbeat 1.25s ease-in-out 2; }
.flash { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; background: #ffd0ea; }
.flash.is-flashing { animation: twoFlashes .9s ease-out both; }

/* Третья сцена: финальное письмо */
.finale { position: relative; min-height: 100vh; min-height: 100dvh; padding: 35px 18px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.finale__light { position: absolute; width: min(95vw, 660px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #e34d9950, transparent 65%); filter: blur(45px); animation: sealPulse 5s ease-in-out infinite; }
.finale__card { position: relative; width: min(100%, 600px); padding: clamp(32px, 6vw, 63px) clamp(25px, 6vw, 58px); border: 1px solid #ffb4db46; border-radius: 30px; background: linear-gradient(140deg, #2a1428e6, #100916f5 68%, #240f22ea); box-shadow: 0 30px 110px #000c, 0 0 130px #ff54ae17, inset 0 1px #fff4; text-align: center; transform: translateY(30px) scale(.96); opacity: 0; }
.finale.is-visible .finale__card { animation: finaleEnter .9s var(--ease) forwards; }
.finale__crown { margin-bottom: 17px; color: #ffa8d5; font-size: 53px; line-height: 1; text-shadow: 0 0 30px #ff61af77; }
.finale h2 { margin: 20px 0 20px; font-size: clamp(45px, 10vw, 83px); font-weight: 850; letter-spacing: -.075em; line-height: 1; background: linear-gradient(115deg, #fff4fa, #ff9dcc 58%, #ff4ca0); background-clip: text; -webkit-background-clip: text; color: transparent; }
.finale__comma { color: #ff62b0; }
.finale__divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 25px; color: #ff69b4; }
.finale__divider::before, .finale__divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #f577b25d); }
.finale__divider::after { transform: rotate(180deg); }
.finale__text { margin: 0 0 13px; color: #ead3e0; font-size: clamp(15px, 3.5vw, 19px); line-height: 1.65; }
.finale__text--emphasis { color: #ff9dd2; font-size: clamp(18px, 4vw, 23px); font-weight: 800; }
.finale__evening { margin: 22px 0 30px; color: #fff2fa; font-size: clamp(21px, 5vw, 28px); font-weight: 800; letter-spacing: -.03em; }
.finale__evening span { display: inline-block; animation: sealPulse 2s infinite; }
.replay-button { padding: 13px 20px; border: 1px solid #ff90c27d; border-radius: 100px; background: #ff5baa17; color: #ffc5e2; font-size: 13px; font-weight: 750; transition: background .2s, transform .2s; }
.replay-button:hover { background: #ff5baa3d; transform: translateY(-2px); }
.replay-button span { font-size: 20px; vertical-align: -2px; margin-right: 5px; }
.finale__footer { position: relative; margin: 24px 0 0; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: #bf89aa; text-align: center; }

@keyframes drift { to { transform: translate(13%, 11%); } }
@keyframes twinkle { to { opacity: .12; transform: scale(.4); } }
@keyframes floatHeart { 0% { opacity: 0; transform: translate3d(0,0,0) rotate(-12deg) scale(.8); } 15% { opacity: .38; } 85% { opacity: .25; } 100% { opacity: 0; transform: translate3d(var(--sway), -120vh, 0) rotate(22deg) scale(1.4); } }
@keyframes ringBreath { 50% { opacity: .3; transform: translate(-50%,-50%) scale(1.045); } }
@keyframes sealPulse { 50% { transform: scale(1.07); filter: brightness(1.2); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes gateLeave { to { opacity: 0; transform: scale(1.055); filter: blur(10px); } }
@keyframes jetLanding {
  0% { transform: translate(calc(-50% - 115vw), calc(-50% - 26vh)) rotate(-9deg) scale(.79); }
  55% { transform: translate(-62%, calc(-50% - 9vh)) rotate(-4deg) scale(.95); }
  77% { transform: translate(-50%, calc(-50% + 7px)) rotate(1.4deg) scale(1); }
  86% { transform: translate(-50%, calc(-50% - 13px)) rotate(-1deg) scale(1); }
  100% { transform: translate(-50%, -50%) rotate(0) scale(1); }
}
@keyframes cloudDrift { to { transform: translateX(90px); } }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.06); } 55% { transform: scale(1.015); } 77% { transform: scale(1.07); } }
@keyframes twoFlashes { 0%, 100% { opacity: 0; } 16% { opacity: .95; } 34% { opacity: 0; } 57% { opacity: .85; } 79% { opacity: 0; } }
@keyframes finaleEnter { to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 480px) {
  .gate { padding: max(22px, env(safe-area-inset-top)) 17px max(30px, env(safe-area-inset-bottom)); }
  .gate__card { padding: 28px 23px 25px; border-radius: 24px; }
  .gate__seal { margin-bottom: 21px; width: 61px; height: 61px; font-size: 41px; }
  .gate__description { font-size: 13px; margin-bottom: 22px; }
  .gate__title { font-size: clamp(40px, 10.5vw, 52px); }
  .gate__footer { margin-top: 21px; }
  .edge-label { display: none; }
  .scene__caption { top: 23%; }
  .scene__moon { top: 28%; right: 10%; }
  .aircraft { width: 94vw; }
  .runway { top: 62%; }
  .scene__subline { bottom: 13%; font-size: 10px; }
  .flight-tag { font-size: 9px; padding: 9px 11px; }
  .finale__card { padding: 31px 23px 33px; }
  .finale h2 { font-size: clamp(46px, 13vw, 68px); }
  .finale__text { line-height: 1.52; }
  .desktop-break { display: none; }
}
@media (max-height: 650px) {
  .gate { padding-block: 18px; }
  .gate__card { padding-block: 20px; }
  .gate__seal { width: 49px; height: 49px; font-size: 34px; margin-bottom: 14px; }
  .gate__title { margin: 13px 0 10px; font-size: 40px; }
  .gate__description { margin-bottom: 15px; }
  .gate__footer { margin-top: 15px; }
  .scene__caption { top: 16%; }
  .scene__subline { bottom: 5%; }
  .finale { padding-block: 12px; }
  .finale__card { padding-block: 22px; }
  .finale__crown { font-size: 38px; margin-bottom: 6px; }
  .finale h2 { margin: 11px 0; font-size: clamp(41px, 9vw, 65px); }
  .finale__divider { margin: 10px 0 14px; }
  .finale__text { margin-bottom: 7px; }
  .finale__evening { margin: 12px 0 19px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
.scene.is-heart .aircraft,
.scene.is-heart .runway,
.scene.is-heart .scene__caption,
.scene.is-heart .scene__subline,
.scene.is-heart .scene__moon,
.scene.is-heart .scene__cloud { opacity: 0; transition: opacity .8s ease; }