/* keepshiningRuth */

:root {
  --ink: #4a1a1d;
  --ink-2: #5e2a2d;
  --ink-soft: #7a5150;
  --rose: #ab6b72;
  --rose-2: #9b5961;
  --line: rgba(122, 70, 70, .45);
  --cream: #fbf3ec;
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Avenir Next", "Avenir", "Segoe UI", sans-serif;
  --script: "Allura", "Snell Roundhand", cursive;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  background: #f3dccb;
  background: radial-gradient(120% 80% at 70% 70%, #f7d9bf 0%, #f1d3c6 45%, #e9cbc6 100%);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
textarea { user-select: text; -webkit-user-select: text; }

/* ---------- app: full-screen, background edge to edge ---------- */

.app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: #f6e4d6;
}

/* content column – full width on phones, centred on bigger screens */
.col {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, 500px);
  translate: -50% 0;
  container-type: size;
}
.col-head { z-index: 20; pointer-events: none; }

/* ---------- scenes ---------- */

.scenes, .scene { position: absolute; inset: 0; }
.scenes { z-index: 0; }   /* keeps the photos behind all text */

/* the new photo fades in ON TOP of the old one, so nothing ever turns pale in between */
.scene {
  opacity: 0;
  transition: opacity 0s linear 1.3s;
  background:
    linear-gradient(180deg, #f6eae2 0%, #f6e3d6 22%, #f5d8c4 42%, #f2cbb0 58%, #eec3a8 70%, #e8c0b0 100%);
  background-size: cover;
  background-position: center;
}
.scene.is-active { opacity: 1; z-index: 1; transition: opacity 1.2s var(--ease); }
.app.booting .scene, .app.booting .view, .app.booting .state { transition: none !important; }
[hidden] { display: none !important; }
.scene svg.art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene.has-photo svg.art { display: none; }
.scenes .scene.has-photo { background-size: cover; background-repeat: no-repeat; }
/* wide screens: the whole photo stays sharp in the middle (sky behind the text, just like on the phone),
   the sides are filled with a soft, blurred copy of the same photo – no white veil, no frame */
@media (min-aspect-ratio: 2/3) {
  .scene.has-photo::before,
  .scene.has-photo::after {
    content: "";
    position: absolute;
    background-image: inherit;
    background-repeat: no-repeat;
    pointer-events: none;
  }
  .scene.has-photo::before {
    inset: -80px;
    background-size: cover;
    background-position: center 60%;
    filter: blur(44px) saturate(1.1);
  }
  .scene.has-photo::after {
    top: -8%;
    bottom: -8%;
    left: 50%;
    aspect-ratio: 941 / 1672;
    translate: -50% 0;
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 12%, rgba(0, 0, 0, .85) 24%, #000 32%, #000 68%, rgba(0, 0, 0, .85) 76%, rgba(0, 0, 0, .35) 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 12%, rgba(0, 0, 0, .85) 24%, #000 32%, #000 68%, rgba(0, 0, 0, .85) 76%, rgba(0, 0, 0, .35) 88%, transparent 100%);
  }
  .scene .floaters { z-index: 2; }
}
/* which part of each photo stays visible on wide screens */
.scene[data-scene="psalm"].has-photo { background-position: 30% 78%; }
.scene[data-scene="letgo"].has-photo { background-position: 20% 72%; }
.scene[data-scene="released"].has-photo { background-position: 30% 62%; }
.scene[data-scene="intention"].has-photo,
.scene[data-scene="journal"].has-photo { background-position: 30% 76%; }
.scene[data-scene="intentionSet"].has-photo { background-position: 40% 70%; }

.scene[data-scene="released"] {
  background: linear-gradient(180deg, #f3ebe4 0%, #f5e6da 30%, #f6dfcd 55%, #f2d3bd 78%, #eccab6 100%);
}
.scene[data-scene="letgo"] {
  background: linear-gradient(180deg, #f4e7dc 0%, #f4dfcf 25%, #f2d1b9 50%, #ecc4a3 70%, #dcb38f 100%);
}

/* floating things (seeds, feathers, petals) */
.floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.floater {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--w) * 1px);
  opacity: 0;
  animation: drift var(--d) linear var(--delay) infinite;
  will-change: transform, opacity;
}
.floater > i {
  display: block;
  animation: sway var(--sw) ease-in-out infinite alternate;
}
.floater svg { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 2 / 3); filter: drop-shadow(0 0 .8px rgba(150, 95, 60, .55)) drop-shadow(0 0 4px rgba(255, 248, 236, .95)); }
.floater.blur svg { filter: blur(1.4px) drop-shadow(0 0 1px rgba(150, 95, 60, .5)) drop-shadow(0 0 4px rgba(255, 248, 236, .9)); }
.floater.feather svg { --ar: 1 / 3; filter: drop-shadow(0 2px 6px rgba(190, 120, 100, .25)); }
.floater.bokeh {
  border-radius: 50%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 252, 244, .85) 0%, rgba(255, 246, 230, .35) 45%, rgba(255, 240, 220, 0) 70%);
}

@keyframes drift {
  0%   { transform: translate(0, 0) rotate(var(--r)); opacity: 0; }
  12%  { opacity: var(--o); }
  80%  { opacity: var(--o); }
  100% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) + var(--spin))); opacity: 0; }
}
@keyframes sway {
  from { transform: translateX(calc(var(--amp) * -1px)) rotate(-8deg); }
  to   { transform: translateX(calc(var(--amp) * 1px)) rotate(8deg); }
}

.scene:not(.is-active) .floater,
.scene:not(.is-active) .floater > i,
.scene:not(.is-active) .anim { animation-play-state: paused; }

.anim-sway { transform-box: fill-box; transform-origin: 0% 100%; animation: branch 9s ease-in-out infinite alternate; }
.anim-sway.r { transform-origin: 100% 100%; animation-duration: 11s; }
@keyframes branch { from { transform: rotate(-1.2deg); } to { transform: rotate(1.4deg); } }
.anim-shimmer { animation: shimmer 4.5s ease-in-out infinite alternate; }
@keyframes shimmer { from { opacity: .55; } to { opacity: 1; } }
.anim-pulse { transform-box: fill-box; transform-origin: center; animation: pulse 6s ease-in-out infinite alternate; }
@keyframes pulse { from { transform: scale(.94); opacity: .8; } to { transform: scale(1.06); opacity: 1; } }

/* ---------- header ---------- */

.top {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(max(env(safe-area-inset-top), 0px) + min(5.2cqh, 46px)) 6.5cqw 0 6.2cqw;
  pointer-events: none;
}
.top > * { pointer-events: auto; }

.logo {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--ink-2);
  line-height: 1;
}
.logo-text {
  font-family: var(--script);
  font-size: min(12.8cqw, 6.6cqh);
  letter-spacing: -.01em;
  white-space: nowrap;
  padding-right: .1em;
}
.logo-heart {
  width: min(15cqw, 7.8cqh);
  height: auto;
  margin-left: max(-3.2cqw, -1.7cqh);
  margin-top: -1.4cqh;
  color: #a05660;
  overflow: visible;
}

.burger {
  width: 38px;
  height: 38px;
  margin-right: -4px;
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 8px;
  color: var(--ink-2);
}
.burger span {
  display: block;
  width: 30px;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .45s var(--ease), opacity .3s;
}
.app.menu-open .burger span:nth-child(1) { transform: translateY(9.6px) rotate(45deg); }
.app.menu-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.app.menu-open .burger span:nth-child(3) { transform: translateY(-9.6px) rotate(-45deg); }

/* ---------- views ---------- */

main { position: absolute; inset: 0; z-index: 5; }

.view, .state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s linear .6s;
}
.view.is-active, .view .state.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 1s var(--ease) .3s, transform 1.1s var(--ease) .3s, visibility 0s;
}
.view { padding: 0 8cqw; }
.state { padding: 0 9cqw; }

/* shared typography */
.eyebrow {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: min(4.1cqw, 2cqh);
  letter-spacing: .26em;
  color: var(--ink-2);
  text-indent: .26em;
}
.rule {
  display: block;
  width: min(31cqw, 122px);
  height: 1px;
  margin: 2.6cqh 0 2.7cqh;
  background: var(--line);
}
.title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: min(15.5cqw, 7.6cqh);
  line-height: 1.02;
  letter-spacing: -.005em;
  color: var(--ink);
}
.title-sm { font-size: min(11.2cqw, 5.4cqh); line-height: 1.1; }

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2.6cqh 0 2.2cqh;
  color: #a85c66;
}
.divider span { width: min(17cqw, 68px); height: 1px; background: var(--line); }
.divider svg { width: 15px; height: 14px; }

.lead {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: min(5.1cqw, 2.45cqh);
  line-height: 1.45;
  color: var(--ink-2);
}
.lead.serif { font-family: var(--serif); font-weight: 500; font-size: min(5.6cqw, 2.7cqh); line-height: 1.4; }

/* ---------- psalm view ---------- */

.view[data-view="psalm"] { padding-top: 18.6cqh; }

.ps-title {
  margin: 0 0 3.2cqh;
  font-family: var(--sans);
  font-weight: 400;
  font-size: min(5.2cqw, 2.55cqh);
  letter-spacing: .2em;
  text-indent: .2em;
  color: var(--ink-2);
}
.ps-verse {
  margin: 0;
  max-width: 86cqw;
  font-family: var(--serif);
  font-weight: 500;
  font-size: min(12.4cqw, 6cqh);
  line-height: 1.06;
  color: #3e1316;
  text-wrap: balance;
}
.ps-verse, .ps-ref { transition: opacity .6s var(--ease); }
.view.is-loading .ps-verse, .view.is-loading .ps-ref { opacity: 0; }
.ps-ref {
  margin: 3.1cqh 0 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: min(3.8cqw, 1.85cqh);
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--ink-2);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4.5cqw;
  color: #fdf3ee;
  background: rgba(166, 98, 106, .8);
  border-radius: 999px;
  box-shadow: 0 10px 28px -14px rgba(110, 40, 50, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .25s var(--ease), background .3s, box-shadow .3s;
}
.btn:active { transform: scale(.97); background: rgba(150, 84, 93, .9); }
.btn .ico { flex: none; }

.btn-psalm {
  position: absolute;
  top: 61.4cqh;
  left: 50%;
  translate: -50% 0;
  width: min(74cqw, 300px);
  height: min(15cqw, 7.3cqh);
  padding: 0 6cqw 0 8.5cqw;
  justify-content: space-between;
  white-space: nowrap;
  font-family: var(--sans);
  font-weight: 300;
  font-size: min(6.2cqw, 3cqh, 25px);
  letter-spacing: .07em;
  background: rgba(176, 106, 113, .72);
}
.btn-psalm .ico { width: min(8.6cqw, 4.2cqh); height: auto; aspect-ratio: 32 / 30; }

/* ---------- write views (let it go / intention) ---------- */

.state[data-state="write"] { padding-top: 20.8cqh; }
.view[data-view="intention"] .state[data-state="write"] { padding-top: 19.6cqh; }

.write {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4.3cqh;
}
.view[data-view="intention"] .write { margin-top: 4cqh; }

.field {
  position: relative;
  width: calc(100% + 3cqw);
}
textarea {
  display: block;
  width: 100%;
  height: min(24cqh, 52cqw);
  resize: none;
  padding: 2.6cqh 6cqw;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .75);
  background: rgba(252, 246, 241, .78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -18px rgba(120, 60, 50, .35), inset 0 1px 2px rgba(120, 70, 60, .06);
  font-family: var(--serif);
  font-size: max(16px, min(5.3cqw, 2.6cqh));
  line-height: 1.45;
  color: var(--ink);
  outline: none;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.view[data-view="intention"] textarea { height: min(19.5cqh, 44cqw); }
textarea::placeholder { color: #a48a86; opacity: 1; }
textarea:focus {
  border-color: rgba(200, 140, 140, .6);
  background: rgba(253, 248, 244, .88);
  box-shadow: 0 12px 34px -16px rgba(140, 60, 60, .35), 0 0 0 4px rgba(214, 160, 160, .16);
}
textarea.is-releasing { color: transparent; transition: color .2s; }

.field.shake { animation: shake .5s var(--ease); }
@keyframes shake {
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(2px); }
}

.btn-main {
  width: 100%;
  height: min(18cqw, 8.6cqh);
  margin-top: 3.1cqh;
  font-family: var(--serif);
  font-weight: 500;
  font-size: min(7cqw, 3.4cqh);
  letter-spacing: .01em;
}
.btn-main .ico { width: min(8cqw, 3.9cqh); height: auto; aspect-ratio: 1; }

/* ---------- done states ---------- */

.state-done { justify-content: center; padding-bottom: 6cqh; }
.state-set { justify-content: flex-start; padding-top: 14.5cqh; }

.again {
  margin-top: 4.5cqh;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 10px 14px;
  border-bottom: 1px solid transparent;
  opacity: 0;
  transition: opacity 1s;
}
.state.is-active .again { opacity: .95; transition-delay: 2.5s; }
.again { color: var(--ink-2); font-weight: 400; }

.my-intent {
  margin: 3cqh 0 0;
  max-width: 78cqw;
  font-family: var(--serif);
  font-style: italic;
  font-size: min(5.4cqw, 2.6cqh);
  line-height: 1.35;
  color: var(--ink-2);
  opacity: 0;
  transition: opacity 1.2s 1.8s;
}
.my-intent:empty { display: none; }
.state.is-active .my-intent { opacity: .9; }

.after { display: flex; justify-content: center; gap: 6px; margin-top: 4.5cqh; }
.after .again { margin-top: 0; padding: 10px 12px; }
.after .again + .again { border-left: 1px solid var(--line); border-radius: 0; }
.state-set .after { margin-top: 2.4cqh; }

/* ---------- my journal ---------- */

.view[data-view="journal"] { padding: 17cqh 6cqw 0; }
.view[data-view="journal"] .divider { margin: 2cqh 0 2.2cqh; }

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(252, 246, 241, .62);
  border: 1px solid rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.tabs button {
  padding: 8px 15px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: background .3s, color .3s;
}
.tabs button.is-on { background: rgba(166, 98, 106, .85); color: #fdf3ee; }

.journal {
  flex: 1;
  min-height: 0;
  width: calc(100% + 4cqw);
  margin-top: 2.4cqh;
  padding: 1cqh 2cqw calc(5cqh + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  -webkit-mask-image: linear-gradient(transparent 0, #000 18px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(transparent 0, #000 18px, #000 calc(100% - 40px), transparent 100%);
  scrollbar-width: none;
}
.journal::-webkit-scrollbar { display: none; }

.j-day {
  margin: 2.2cqh 0 1.2cqh;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-2);
}
.j-day:first-child { margin-top: .6cqh; }

.j-card {
  position: relative;
  margin: 0 0 12px;
  padding: 16px 44px 16px 18px;
  border-radius: 16px;
  background: rgba(252, 246, 241, .84);
  border: 1px solid rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px -18px rgba(110, 50, 45, .4);
  animation: card-in .6s var(--ease) both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } }
.j-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rose-2);
}
.j-meta svg { width: 13px; height: 13px; flex: none; }
.j-meta .j-time { color: var(--ink-soft); opacity: .8; letter-spacing: .1em; }
.j-text {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.4;
  color: #3f1d20;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  user-select: text;
  -webkit-user-select: text;
}
.j-card.intention .j-text { font-style: italic; }
.j-del {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-soft);
  opacity: .45;
}
.j-del:hover, .j-del:focus-visible { opacity: .9; }

.j-open {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.j-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1.2cqh 0 calc(2.4cqh + env(safe-area-inset-bottom));
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.j-foot button { padding: 8px 6px; }

.j-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 3cqw;
}
.j-panel .lead { margin-bottom: 3.4cqh; }
.j-panel .field + .field { margin-top: 12px; }
.j-panel .btn-main { margin-top: 2.6cqh; }
.j-panel .again { opacity: .95; margin-top: 1.6cqh; }
input[type="password"] {
  display: block;
  width: 100%;
  height: 58px;
  padding: 0 22px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .75);
  background: rgba(252, 246, 241, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -18px rgba(120, 60, 50, .35);
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}
input[type="password"]::placeholder { color: #9c817d; opacity: 1; }
input[type="password"]:focus { border-color: rgba(200, 140, 140, .6); box-shadow: 0 0 0 4px rgba(214, 160, 160, .18); }
.j-msg {
  min-height: 1.4em;
  margin: 1.8cqh 0 0;
  padding: 0 4px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  color: #8e2f3c;
  text-align: center;
}
.j-msg.ok { color: var(--ink-2); }
.j-card.pending .j-time::after { content: " · not saved yet"; }

.j-empty {
  margin: 8cqh auto 0;
  max-width: 70cqw;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.glow-heart {
  width: min(56cqw, 27cqh);
  aspect-ratio: 1;
  margin-bottom: 1cqh;
}
.glow-heart svg { width: 100%; height: 100%; overflow: visible; }
.glow-heart .heart-line { stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(255, 220, 180, .9)); }
.glow-heart .rays line { opacity: 0; }
.state.is-active .glow-heart .heart-line { animation: draw 2.4s var(--ease) .7s forwards; }
.state.is-active .glow-heart .rays line { animation: ray 1.4s var(--ease) forwards, twinkle 3.5s ease-in-out infinite alternate; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ray { from { opacity: 0; } to { opacity: .85; } }
@keyframes twinkle { from { opacity: .85; } to { opacity: .35; } }

/* ---------- menu ---------- */

.menu {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(250, 239, 231, .82);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s .5s;
}
.app.menu-open .menu { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.menu-col { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.menu ul { list-style: none; margin: 0; padding: 0 6cqw; width: 100%; text-align: center; }
.menu li { display: flex; justify-content: center; }
.menu li { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .6s var(--ease); }
.app.menu-open .menu li { opacity: 1; transform: none; }
.app.menu-open .menu li:nth-child(2) { transition-delay: .07s; }
.app.menu-open .menu li:nth-child(3) { transition-delay: .14s; }
.app.menu-open .menu li:nth-child(4) { transition-delay: .21s; }
.app.menu-open .menu li:nth-child(n+5) { transition-delay: .28s; }
.menu .m-install .m-title { font-size: min(7.4cqw, 3.6cqh); color: var(--rose-2); }
.ios-hint {
  margin: 2.6cqh 0 0;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .55);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-2);
}
.ios-hint b { font-weight: 400; }
.ios-hint svg { width: 17px; height: 17px; vertical-align: -3px; color: #2f6fdb; }
.menu li + li { margin-top: 3.8cqh; }
.menu button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 12px; text-align: center; }
.m-title { font-family: var(--serif); font-weight: 500; font-size: min(9.6cqw, 4.6cqh); color: var(--ink); line-height: 1.05; }
.m-sub { font-family: var(--sans); font-weight: 300; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.menu button.is-current .m-title { color: var(--rose-2); }
.menu-foot {
  position: absolute;
  bottom: calc(7cqh + env(safe-area-inset-bottom));
  margin: 0;
  font-family: var(--script);
  font-size: 30px;
  color: var(--rose-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.menu-foot svg { width: 13px; height: 12px; }

/* ---------- psalm sheet ---------- */

.sheet-wrap { position: absolute; inset: 0; z-index: 30; visibility: hidden; transition: visibility 0s .6s; }
.sheet-wrap.open { visibility: visible; transition: none; }
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(80, 40, 38, .22);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.sheet-wrap.open .sheet-backdrop { opacity: 1; }
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 600px;
  margin: 0 auto;
  height: 84%;
  padding: 34px clamp(26px, 8vw, 54px) calc(30px + env(safe-area-inset-bottom));
  border-radius: 30px 30px 0 0;
  background: rgba(251, 244, 238, .95);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 -20px 50px -20px rgba(90, 40, 30, .35);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  transform: translateY(102%);
  transition: transform .6s var(--ease);
  user-select: text;
  -webkit-user-select: text;
}
.sheet-wrap.open .sheet { transform: none; }
.sheet-grip { position: absolute; top: 10px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: rgba(140, 90, 85, .3); }
.sheet-x { position: absolute; top: 14px; right: 18px; width: 40px; height: 40px; font-size: 30px; line-height: 1; color: var(--ink-soft); font-family: var(--sans); font-weight: 300; }
.sheet .eyebrow { margin-top: 10px; font-size: 13px; }
.sheet-title { margin: 12px 0 0; font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1; color: var(--ink); }
.sheet .divider { justify-content: center; margin: 18px 0 22px; }
.sheet-body { text-align: left; font-family: var(--serif); font-size: 21px; line-height: 1.55; color: #3f2022; }
.sheet-body p { margin: 0 0 .55em; }
.sheet-body sup { font-family: var(--sans); font-size: 11px; font-weight: 400; color: var(--rose); margin-right: 5px; letter-spacing: .04em; vertical-align: .55em; line-height: 0; }
.sheet-body .hl { background: linear-gradient(transparent 58%, rgba(226, 170, 170, .38) 58%); }
.sheet-body .sel { font-family: var(--sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--rose); text-align: center; margin: 1.4em 0 .8em; }
.sheet-end { margin: 26px 0 0; color: var(--rose); }
.sheet-end svg { width: 22px; height: 21px; }

/* ---------- birthday greeting ---------- */

.gift {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(249, 236, 228, .7);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--ease), visibility 0s .9s;
}
.gift.open { opacity: 1; visibility: visible; transition: opacity 1.2s var(--ease); }
.gift-col { display: grid; place-items: center; padding: 0 8cqw; }
.gift-card { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gift-script { margin: 0; font-family: var(--script); font-size: min(17cqw, 8.4cqh); line-height: 1; color: var(--rose-2); }
.gift-name { margin: 0; font-family: var(--serif); font-weight: 500; font-size: min(15cqw, 7.4cqh); line-height: 1.05; color: var(--ink); }
.gift-verse { margin: 0; font-family: var(--serif); font-weight: 500; font-size: min(8cqw, 3.9cqh); line-height: 1.2; color: var(--ink); }
.gift .ps-ref { margin-top: 2cqh; }
.gift .btn-main { width: min(70cqw, 280px); margin-top: 5cqh; }

/* ---------- effects layer ---------- */

.fx { position: absolute; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }
.fx-text {
  position: absolute;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.fx-text span {
  display: inline-block;
  animation: fly-word var(--d) var(--ease) var(--delay) forwards;
}
@keyframes fly-word {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0); filter: blur(0); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.7); filter: blur(5px); }
}
.fx-seed {
  position: absolute;
  width: calc(var(--w) * 1px);
  animation: burst var(--d) cubic-bezier(.2, .7, .3, 1) var(--delay) forwards;
  opacity: 0;
}
.fx-seed svg { display: block; width: 100%; aspect-ratio: 2 / 3; filter: drop-shadow(0 0 .8px rgba(150, 95, 60, .55)) drop-shadow(0 0 4px rgba(255, 248, 236, 1)); }
@keyframes burst {
  0%   { opacity: 0; transform: translate(0, 0) rotate(var(--r)) scale(.4); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) + 50deg)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .floater, .floater > i, .anim-sway, .anim-shimmer, .anim-pulse { animation: none !important; }
  .floater { opacity: var(--o); }
}