/* The hidden letter behind the logo (js/love.js). Real photographs, plain type, one gold line. */
html.love-lock, html.love-lock body { overflow: hidden; overscroll-behavior: none; }
html.love-lock #chat-btn, html.love-lock #back-top, html.love-lock #chat-panel { display: none !important; }
.love-hint { animation: loveHint .6s ease; }
@keyframes loveHint { 30% { text-shadow: 0 0 18px rgba(245,197,24,.9); } }

.love { position: fixed; inset: 0; z-index: 4000; background: #020306; color: #f5f5f3; opacity: 0; transition: opacity .9s ease;
  font-family: 'Barlow', 'Montserrat', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
.love.open { opacity: 1; }
.love[hidden] { display: none !important; }

/* the photographs: the pad while the letter plays, the launch at the end */
.love-bg, .love-bg img, .love-shade { position: absolute; inset: 0; }
.love-bg img { width: 100%; height: 100%; object-fit: cover; transition: opacity 2.2s ease, transform 14s ease-out; }
.love-pad { object-position: 50% 30%; opacity: .5; transform: scale(1.08); }
.love.open .love-pad { transform: scale(1); }
.love-streak { opacity: 0; object-position: 30% 60%; transform: scale(1.1); }
.love.launched .love-pad { opacity: 0; }
.love.launched .love-streak { opacity: .9; transform: scale(1); }
.love-shade { background: radial-gradient(80% 70% at 50% 50%, rgba(2,3,6,.55), rgba(2,3,6,.88)); transition: background 2s ease; }
.love.launched .love-shade { background: linear-gradient(180deg, rgba(2,3,6,.55) 0%, rgba(2,3,6,.2) 35%, rgba(2,3,6,.75) 100%); }

/* top bar */
.love-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: calc(16px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px)); }
.love-file { font-family: 'Barlow Semi Condensed', 'Barlow', 'Montserrat', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #f5c518; }
.love-tools { display: flex; gap: 8px; }
.love-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.35); color: #fff; cursor: pointer; border-radius: 0; transition: border-color .2s; }
.love-btn:hover { border-color: #fff; }
.love-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.love-sound .off { display: none; }
.love-sound[aria-pressed="false"] .on { display: none; }
.love-sound[aria-pressed="false"] .off { display: inline; }

/* the letter */
.love-stage { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 90px max(24px, env(safe-area-inset-right, 0px)) 110px max(24px, env(safe-area-inset-left, 0px)); }
.love-stage > * { grid-area: 1 / 1; }
.love-intro { font-size: clamp(22px, 3vw, 34px); font-weight: 300; letter-spacing: .01em; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity 1.2s ease, transform 1.2s ease; }
.love-intro.on { opacity: 1; transform: none; }
.love-letter { max-width: 34em; display: flex; flex-direction: column; gap: .35em; text-align: left; font-size: clamp(19px, 2.2vw, 27px); line-height: 1.6; font-weight: 300; opacity: 0; transition: opacity .7s ease, transform 1s ease; }
html[lang="zh"] .love-letter { letter-spacing: .04em; }
.love-letter.on { opacity: 1; }
.love-letter.up { opacity: .28; transform: translateY(-18vh) scale(.92); }
.love-line { opacity: 0; transform: translateY(8px); transition: opacity 1s ease, transform 1s ease; text-shadow: 0 1px 14px rgba(0,0,0,.6); }
.love-line.in { opacity: 1; transform: none; }
.love-line:last-child { color: #fff; }

/* progress: one short line per passage */
.love-dots { position: absolute; left: 50%; bottom: calc(38px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 3; display: flex; gap: 6px; opacity: 0; transition: opacity .6s; }
.love-dots.on { opacity: 1; }
.love-dots i { width: 22px; height: 2px; background: rgba(255,255,255,.2); transition: background .5s; }
.love-dots i.on { background: #f5c518; }
.love-tap { position: absolute; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); z-index: 3; text-align: center; font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.55); opacity: 0; transition: opacity .6s; pointer-events: none; }
.love-tap.on { opacity: 1; }
.love-credit-old { position: absolute; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 3; margin: 0; font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif; font-size: 11px; letter-spacing: .06em; color: rgba(255,255,255,.45); max-width: 60%; text-align: right; }

/* the question */
.love-ask { width: min(520px, 100%); display: flex; flex-direction: column; gap: 18px; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .9s ease, transform .9s ease; margin-top: 18vh; }
.love-ask.on { opacity: 1; pointer-events: auto; transform: none; }
.love.typing .love-ask { margin-top: 0; }
.love-q { font-size: clamp(22px, 2.8vw, 32px); font-weight: 500; }
.love-field { display: flex; border-bottom: 1.5px solid rgba(255,255,255,.6); }
.love-field input { flex: 1; min-width: 0; height: 56px; border: 0; background: transparent; color: #fff; font: inherit; font-size: 22px; outline: none; padding: 0; }
.love-field input::placeholder { color: rgba(255,255,255,.35); }
.love-send { width: 56px; height: 56px; border: 0; background: transparent; color: #f5c518; cursor: pointer; display: grid; place-items: center; }
.love-send svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.love-ask.busy .love-send { opacity: .4; }
.love-err { min-height: 1.4em; font-size: 15px; color: #ffb35c; opacity: 0; transition: opacity .4s; margin: 0; }
.love-err.on { opacity: 1; }
.love-ask.bad .love-field { animation: loveNo .45s ease; }
@keyframes loveNo { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* the end: the rocket carries the name */
.love-reveal { width: min(1080px, 100%); max-height: 100%; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "named photo" "notes photo"; gap: 26px 48px; align-items: end; opacity: 0; pointer-events: none; transition: opacity 1.6s ease; }
.love-reveal.on { opacity: 1; pointer-events: auto; }
.love-named { grid-area: named; display: flex; flex-direction: column; gap: 10px; }
.love-rocket { font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #f5c518; }
.love-name { font-size: clamp(54px, 9vw, 120px); font-weight: 600; line-height: 1; letter-spacing: -.01em; text-shadow: 0 2px 30px rgba(0,0,0,.6); overflow-wrap: anywhere; }
.love-photo { grid-area: photo; margin: 0; border: 1px solid rgba(255,255,255,.35); background: #000; padding: 10px; align-self: center; }
.love-photo img { display: block; width: 100%; max-height: 62vh; object-fit: contain; opacity: 0; filter: brightness(1.8) contrast(.6) saturate(0); transition: opacity 2.4s ease .6s, filter 5s ease .6s; }
.love-reveal.on .love-photo img { opacity: 1; filter: none; }
.love-notes { grid-area: notes; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.75; font-weight: 300; color: #e3e6ea; }
.love-notes p { margin: 0; }
.love-notes p:empty { display: none; }
.love-notes .n-confirmed { font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: #f5c518; }

/* the launch: her rocket on the pad, the count, the real liftoff */
.love-launch { position: fixed; inset: 0; z-index: 1; grid-area: auto; background: #000; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 1.4s ease; }
.love-launch.on { opacity: 1; pointer-events: auto; }
.ll-frame { position: absolute; left: 50%; top: 50%; width: max(100vw, 177.78vh); height: max(100vh, 56.25vw); transform: translate(-50%, -50%); overflow: hidden; }
.ll-zoom { position: absolute; inset: 0; container-type: size; transform-origin: 50% 72%; transition: transform 5s cubic-bezier(.45,0,.25,1), opacity 1s ease; }
.love-launch.near .ll-zoom { transform: scale(1.8); }
.ll-pad { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* her name, painted down the orange core stage */
.ll-name { position: absolute; z-index: 2; left: 49.9%; top: 74%; transform: translate(-50%, -50%) rotate(90deg); white-space: nowrap; font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: min(1.9cqw, calc(17cqw / var(--n, 6) / .78)); line-height: 1; color: #15171b; mix-blend-mode: multiply; opacity: 0; transition: opacity 2s ease 1.2s; }
.love-launch.on .ll-name { opacity: .9; }
.ll-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s linear; }
.love.flying .ll-film { opacity: 1; }
.love-launch.lit .ll-name { opacity: 0; transition: opacity 1.5s ease .5s; }
.ll-label { position: absolute; left: max(24px, env(safe-area-inset-left, 0px)); bottom: calc(40px + env(safe-area-inset-bottom, 0px)); font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #f5c518; text-shadow: 0 1px 10px rgba(0,0,0,.7); }
.ll-count { position: absolute; right: max(24px, env(safe-area-inset-right, 0px)); bottom: calc(26px + env(safe-area-inset-bottom, 0px)); font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(56px, 11vw, 140px); line-height: 1; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.ll-count.tick { animation: llTick 1s ease; }
@keyframes llTick { 0% { opacity: .2; transform: translateY(6px); } 18% { opacity: 1; transform: none; } }
.ll-skip { position: absolute; right: max(20px, env(safe-area-inset-right, 0px)); top: calc(70px + env(safe-area-inset-top, 0px)); height: 34px; padding: 0 14px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.35); color: rgba(255,255,255,.8); font: 600 11px/1 'Barlow Semi Condensed', 'Barlow', sans-serif; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; border-radius: 0; }
.ll-skip:hover { border-color: #fff; color: #fff; }
.love.pad .love-dots, .love.pad .love-tap { opacity: 0 !important; }

/* the mission patch */
.love-patch { width: clamp(150px, 20vw, 220px); aspect-ratio: 1; margin-bottom: 10px; opacity: 0; transform: scale(.9) rotate(-8deg); transition: opacity 1.4s ease .3s, transform 1.6s cubic-bezier(.2,.8,.2,1) .3s; }
.love-patch svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 30px rgba(0,0,0,.6)); }
.love-reveal.on .love-patch { opacity: 1; transform: none; }
@media (max-width: 760px) { .love-patch { width: 140px; } }

@media (max-width: 760px) {
  .love-reveal { grid-template-columns: minmax(0, 1fr); grid-template-areas: "named" "photo" "notes"; align-items: start; gap: 18px; }
  .love-photo img { max-height: 42vh; }
}
@media (prefers-reduced-motion: reduce) {
  .love-bg img, .love-line, .love-letter, .love-intro, .love-photo img { transition: opacity .3s ease; transform: none !important; }
}

/* the words over the launch */
.love-intro { display: flex; flex-direction: column; gap: .3em; }
.ll-words { position: absolute; z-index: 3; left: max(28px, env(safe-area-inset-left, 0px)); right: 28px; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); max-width: 21em; margin: 0; display: flex; flex-direction: column; gap: .2em;
  font-size: clamp(22px, 2.7vw, 36px); line-height: 1.4; font-weight: 400; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(10px); transition: opacity .9s ease, transform .9s ease; pointer-events: none; }
.ll-words.on { opacity: 1; transform: none; }
.love-launch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0) 60%), linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,0) 45%); pointer-events: none; transition: opacity 1s; }
.love.flying .love-launch::after { opacity: .4; }
.love-launch.after .ll-words { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 50%); text-align: center; width: min(90vw, 22em); align-items: center; }
.love-launch.after .ll-words.on { transform: translate(-50%, 50%); }
.love-launch.after .ll-words span:last-child { color: #f5c518; }
html[lang="zh"] .ll-words { letter-spacing: .04em; }
@media (max-width: 760px) { .ll-words { bottom: calc(120px + env(safe-area-inset-bottom, 0px)); font-size: 22px; } }
.ll-label, .ll-count, .ll-skip { z-index: 3; }
.love-launch::after { z-index: 1; }

/* ---------- the trail writes her name across the night sky, then it becomes a star ---------- */
.ll-sky { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; transition: opacity 1.6s ease;
  background: radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 64%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 46% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 42%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 78% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 70%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 82%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 36% 88%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 55% 76%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 94% 34%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 20% 44%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1px 1px at 72% 88%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(120% 80% at 50% 110%, #0f1a33 0%, #03050a 60%); }
.love-launch.sky .ll-sky { opacity: 1; }
.ll-write { position: absolute; left: 50%; top: 42%; width: min(92vw, 1000px); transform: translate(-50%, -50%); overflow: visible; transition: transform 1.8s cubic-bezier(.6,0,.2,1), opacity 1.4s ease; }
.ll-write text { font-family: Caveat, 'Segoe Script', cursive; font-weight: 700; font-size: 190px; fill: rgba(245,197,24,0); stroke: #f5c518; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 2600; stroke-dashoffset: 2600; filter: drop-shadow(0 0 10px rgba(255,190,80,.55)); }
.love-launch.sky .ll-write text { animation: llWrite 4.2s cubic-bezier(.45,.05,.3,1) .6s forwards; }
@keyframes llWrite { 80% { stroke-dashoffset: 0; fill: rgba(245,197,24,0); } 100% { stroke-dashoffset: 0; fill: rgba(245,197,24,.95); } }
.love-launch.star .ll-write { transform: translate(-50%, -260%) scale(.02); opacity: 0; }
.ll-star { position: absolute; left: 50%; top: 16%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff6cf; opacity: 0; transform: scale(.2);
  box-shadow: 0 0 12px 4px rgba(245,197,24,.9), 0 0 40px 12px rgba(245,197,24,.35); transition: opacity 1.2s ease 1.2s, transform 1.2s ease 1.2s; }
.love-launch.star .ll-star { opacity: 1; transform: scale(1); animation: llTwinkle 2.6s ease-in-out 2.6s infinite; }
@keyframes llTwinkle { 50% { transform: scale(.75); opacity: .75; } }
.love-launch.sky .ll-words { z-index: 4; }
.love-launch.sky.after .ll-words { bottom: 34%; }

/* ---------- the photo, developing like a polaroid, with the date written under it ---------- */
.love-photo { background: #f4f1ea !important; padding: 12px 12px 54px !important; border: 0 !important; box-shadow: 0 30px 80px rgba(0,0,0,.55); transform: rotate(-1.6deg); position: relative; }
.love-pdate { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: Caveat, cursive; font-weight: 700; font-size: 26px; color: #2b2b2b; opacity: 0; transition: opacity 1.2s ease 3.2s; }
.love-reveal.on .love-pdate { opacity: 1; }

/* ---------- the boarding pass ---------- */
.love-ticket { grid-area: ticket; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; opacity: 0; transform: translateY(16px); transition: opacity 1s ease 2.4s, transform 1s ease 2.4s; }
.love-reveal.on .love-ticket { opacity: 1; transform: none; }
.lt-card { display: flex; width: min(640px, 100%); border: 1.5px solid #f5c518; background: radial-gradient(120% 100% at 0% 0%, rgba(245,197,24,.08), transparent 60%), #05070c; }
.lt-main { flex: 1; padding: 20px 22px; min-width: 0; }
.lt-h { display: block; font-family: 'Barlow Semi Condensed', Barlow, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #f5c518; }
.lt-name { display: block; margin: 6px 0 10px; font-family: Caveat, cursive; font-weight: 700; font-size: 46px; line-height: 1.1; color: #fff; overflow-wrap: anywhere; }
.lt-main dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px 18px; }
.lt-main dt { font-family: 'Barlow Semi Condensed', Barlow, sans-serif; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #9a9ea6; }
.lt-main dd { margin: 2px 0 0; font-family: Barlow, sans-serif; font-weight: 600; font-size: 15px; color: #f5f5f3; }
.lt-stub { flex: none; width: 92px; border-left: 1.5px dashed rgba(245,197,24,.6); display: grid; place-items: center; }
.lt-stub span { font-family: Barlow, sans-serif; font-weight: 700; font-size: 34px; color: #f5c518; }
.lt-save { height: 40px; padding: 0 16px; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; font: 600 12px/1 'Barlow Semi Condensed', Barlow, sans-serif; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; border-radius: 0; }
.lt-save:hover { border-color: #f5c518; color: #f5c518; }

/* ---------- a few words back ---------- */
.love-reply { grid-area: reply; width: min(640px, 100%); display: flex; flex-direction: column; gap: 10px; padding-bottom: 30px; opacity: 0; transition: opacity 1s ease 3.4s; }
.love-reveal.on .love-reply { opacity: 1; }
.lr-q { font-family: Barlow, sans-serif; font-size: 18px; color: #fff; }
.love-reply textarea { width: 100%; resize: vertical; min-height: 84px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.4); color: #fff; font: 16px/1.6 Barlow, sans-serif; border-radius: 0; outline: none; }
.love-reply textarea:focus { border-color: #f5c518; }
.lr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lr-knows { font-family: 'Barlow Semi Condensed', Barlow, sans-serif; font-size: 12px; letter-spacing: .08em; color: #9a9ea6; }
.lr-send { flex: none; height: 40px; padding: 0 18px; border: 0; background: #f5c518; color: #05070c; font: 600 12px/1 'Barlow Semi Condensed', Barlow, sans-serif; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; border-radius: 0; }
.love-reply.sent textarea, .love-reply.sent .lr-send { opacity: .4; pointer-events: none; }
.lr-done { margin: 0; min-height: 1.4em; font-family: Caveat, cursive; font-size: 24px; color: #f5c518; }
.love-reveal { grid-template-areas: "named photo" "notes photo" "ticket ticket" "reply reply"; }
@media (max-width: 760px) { .love-reveal { grid-template-areas: "named" "photo" "notes" "ticket" "reply"; } .ll-write text { font-size: 150px; } .lt-name { font-size: 38px; } .lt-stub { width: 70px; } }