@font-face {
  font-family: "Junge";
  src: url("./fonts/web/junge-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Kalnia";
  src: url("./fonts/web/kalnia-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
}

@font-face {
  font-family: "GE MB MB";
  src: url("./fonts/web/ge-mb-mb-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("./fonts/web/noto-naskh-arabic-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #2f1b0f;
  --terracotta: #e79a82;
  --peach: #ffd6b5;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}
.intro-lock { overflow: hidden !important; }
.intro-lock .paper,
.intro-lock .paper-scroll { overflow: hidden !important; }
html.automated-journey { scroll-behavior: auto; }
html.automated-journey,
html.automated-journey body,
html.automated-journey .paper,
html.automated-journey .paper-scroll { overscroll-behavior: none; touch-action: none; scrollbar-width: none; }
html.automated-journey::-webkit-scrollbar,
html.automated-journey body::-webkit-scrollbar,
html.automated-journey .paper::-webkit-scrollbar,
html.automated-journey .paper-scroll::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--scene-color, var(--peach)); color: var(--ink); transition: background-color 180ms linear; overflow-x: clip; }
body:not(.arch-ready) .start-content,
body:not(.arch-ready) .card-content,
body:not(.arch-ready) .scroll-cue,
body:not(.arch-ready) .signature { visibility: hidden; }

.screen {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 2rem 2.6rem;
}

.paper-scroll { position: relative; }
main, .paper-scroll, .screen, .start-screen, .card-screen { background: transparent !important; overflow-x: clip; }

.moon-art {
  position: fixed;
  z-index: 0;
  top: clamp(.75rem, 3svh, 2rem);
  left: calc(50% - 1rem);
  translate: -50% 0;
  width: clamp(7.2rem, 33.3vw, 11.7rem);
  height: auto;
  opacity: .9;
  pointer-events: none;
  user-select: none;
  scale: 1.2;
  transition: top .9s cubic-bezier(.22, 1, .36, 1);
  animation: moon-drift 7s ease-in-out infinite;
}
.balloon-art {
  position: fixed;
  z-index: 1;
  top: 78vh;
  width: clamp(3.42rem, 16.2vw, 6.3rem);
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: top .9s cubic-bezier(.22, 1, .36, 1), opacity .7s ease;
  animation: balloon-hover 18s ease-in-out infinite;
}
.balloon-one { left: 27%; }
.balloon-one { left: 15%; width: clamp(3.6rem, 16.74vw, 6.53rem); }
.balloon-two { left: 58%; width: clamp(4.46rem, 20.97vw, 8.19rem); animation-delay: -7s; }
.cloud-art {
  position: fixed;
  z-index: 1;
  top: 70vh;
  width: clamp(9rem, 40.5vw, 16.2rem);
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: top .9s cubic-bezier(.22, 1, .36, 1), left .9s cubic-bezier(.22, 1, .36, 1), right .9s cubic-bezier(.22, 1, .36, 1), opacity .7s ease;
  animation: cloud-sway 16s ease-in-out infinite;
}
.cloud-left { left: -30vw; }
.cloud-right { right: -30vw; top: 74vh; width: clamp(10.35rem, 46.58vw, 18.63rem); animation-delay: -6s; }
.crib-final-art,
.teddy-final-art {
  position: fixed;
  z-index: 120;
  bottom: clamp(-8rem, -12vh, -3rem);
  width: clamp(13.5rem, 57vw, 27rem);
  height: auto;
  opacity: 0;
  filter: none;
  mix-blend-mode: normal;
  isolation: isolate;
  pointer-events: none;
  user-select: none;
  transition: opacity 1.4s ease;
}
.crib-final-art { left: clamp(-1rem, -3vw, 1rem); bottom: clamp(-7rem, -10vh, -2rem); transform: scaleX(-1); animation: crib-sway 15s ease-in-out infinite; }
.teddy-final-art { right: clamp(-1rem, -3vw, 1rem); width: clamp(13.5rem, 57vw, 27rem); animation: teddy-sway 15s ease-in-out infinite; animation-delay: -4s; }

.decor-layer { display: none; }
.paper-texture {
  position: fixed;
  z-index: 100;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .68;
  mix-blend-mode: multiply;
  filter: contrast(1.25);
  pointer-events: none;
  user-select: none;
}
.arch-border {
  position: fixed;
  z-index: 90;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  filter: sepia(.35) saturate(.65) hue-rotate(325deg);
}
.arch-rails {
  position: fixed;
  z-index: 89;
  inset: 0;
  width: 100vw;
  height: max(150svh, 1200px);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  filter: sepia(.35) saturate(.65) hue-rotate(325deg);
  transform: scaleX(-1);
  transform-origin: center;
}
.arch-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(14px, 4.5vw, 24px);
  background-image: image-set(url("./assets/optimized/arch-768.webp") 1x, url("./assets/optimized/arch-1536.webp") 2x);
  background-repeat: no-repeat;
  background-size: 115vw auto;
}
.arch-rail::after {
  content: "";
  position: absolute;
  top: min(143.75vw, 100%);
  right: 0;
  bottom: 0;
  left: 0;
  background-image: image-set(url("./assets/optimized/arch-768.webp") 1x, url("./assets/optimized/arch-1536.webp") 2x);
  background-repeat: no-repeat;
  background-size: auto 100%;
  transform: scaleY(-1);
}
.arch-rail-left {
  left: 0;
  background-position: -7.5vw 0;
}
.arch-rail-left::after { background-position: left bottom; }
.arch-rail-right {
  right: 0;
  background-position: calc(100% + 7.5vw) 0;
}
.arch-rail-right::after { background-position: right bottom; }
@media (max-width: 699px) {
  .screen { padding-inline: clamp(2rem, 10vw, 2.6rem); }
  .arch-border {
    inset: 0;
    width: 100vw;
    height: 100svh;
    object-fit: contain;
    object-position: center top;
    transform: scaleX(-1) scale(1.15);
    transform-origin: center top;
  }
  .start-content {
    width: min(100%, 23rem);
    margin-top: 0;
    padding-top: 0;
  }
  .start-content .arabic {
    margin-top: clamp(1rem, 5svh, 3rem);
    font-size: clamp(1.75rem, 8.7vw, 2.7rem);
  }
}
@media (max-width: 400px) {
  .start-content {
    margin-top: 0;
    padding-top: 0;
  }
  .start-content .arabic {
    margin-top: clamp(1.5rem, 5svh, 3rem);
  }
}
.decor {
  position: absolute;
  height: auto;
  object-fit: contain;
  scale: 1.2;
  opacity: .52;
  filter: brightness(0) saturate(100%) invert(88%) sepia(16%) saturate(480%) hue-rotate(329deg) brightness(104%) contrast(96%);
  will-change: transform;
}
.decor-cloud { width: clamp(11rem, 55vw, 21rem); top: 13%; right: -7rem; animation: decor-drift-a 9s ease-in-out infinite; }
.decor-cloud-center { width: clamp(9rem, 43vw, 17rem); top: 46%; left: -5rem; opacity: .22; animation: decor-drift-c 12s ease-in-out infinite reverse; filter: var(--filter-cream); }
.decor-stars { width: clamp(8rem, 38vw, 15rem); top: 54%; right: -4.4rem; animation: decor-drift-c 10s ease-in-out infinite; }
.decor-stars-lower { top: 93%; left: -4rem; right: auto; opacity: .38; animation: decor-drift-b 11s ease-in-out infinite; }
.decor-stars-center { width: clamp(6rem, 28vw, 11rem); top: 67%; left: 27%; opacity: .2; animation: decor-drift-a 8s ease-in-out infinite reverse; filter: var(--filter-rose); }
.decor-balloons { width: clamp(10rem, 46vw, 18rem); top: 70%; left: -6rem; opacity: .4; animation: decor-drift-a 12s ease-in-out infinite reverse; }
.decor-balloons-right { width: clamp(9rem, 42vw, 16rem); top: 32%; right: -6rem; left: auto; opacity: .3; animation: decor-drift-b 10s ease-in-out infinite; filter: var(--filter-gold); }
.decor-moon-cloud { width: clamp(9rem, 42vw, 16rem); top: 79%; right: -5rem; opacity: .38; animation: decor-drift-c 13s ease-in-out infinite reverse; filter: var(--filter-cream); }
.decor-divider { width: clamp(8rem, 37vw, 14rem); top: 61%; left: 33%; opacity: .25; animation: decor-drift-b 9s ease-in-out infinite; filter: var(--filter-rose); }
.decor-stars-mid-left { width: clamp(7rem, 31vw, 12rem); top: 24%; left: 8%; opacity: .32; animation: decor-drift-b 8s ease-in-out infinite; filter: var(--filter-lilac); }
.decor-cloud-mid-right { width: clamp(10rem, 45vw, 17rem); top: 38%; right: 8%; opacity: .24; animation: decor-drift-a 14s ease-in-out infinite; filter: var(--filter-peach); }
.decor-balloons-mid { width: clamp(8rem, 35vw, 14rem); top: 51%; left: 15%; opacity: .22; animation: decor-drift-c 10s ease-in-out infinite; filter: var(--filter-coral); }
.decor-moon-mid { width: clamp(8rem, 34vw, 13rem); top: 59%; right: 18%; opacity: .18; animation: decor-drift-a 12s ease-in-out infinite reverse; filter: var(--filter-blue); }
.decor-stars-top-right { width: clamp(6rem, 27vw, 11rem); top: 7%; right: 12%; opacity: .34; animation: decor-drift-c 7s ease-in-out infinite; filter: var(--filter-gold); }
.decor-cloud-bottom { width: clamp(11rem, 48vw, 19rem); top: 82%; left: 18%; opacity: .2; animation: decor-drift-b 15s ease-in-out infinite; filter: var(--filter-lilac); }
.decor-balloons-lower-right { width: clamp(8rem, 37vw, 15rem); top: 91%; right: 13%; left: auto; opacity: .25; animation: decor-drift-a 9s ease-in-out infinite reverse; filter: var(--filter-peach); }
.decor-divider-lower { width: clamp(7rem, 30vw, 12rem); top: 73%; right: 24%; left: auto; opacity: .24; animation: decor-drift-c 11s ease-in-out infinite; filter: var(--filter-coral); }

/* Let the ornaments drift gently enough that the movement never competes with the announcement. */
.decor { animation-duration: 24s !important; }
.decor-cross { animation-duration: 48s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.decor-cross { height: auto; max-height: 11vh; width: auto; max-width: 40vw; }

/* Celestial forms stay in the upper third. Baby objects live in the lower half. */
.decor-cloud, .decor-moon-cloud, .decor-stars-top-right { top: 4% !important; }
.decor-cloud-center { top: 18% !important; }
.decor-moon-mid { top: 28% !important; }
.decor-stars, .decor-stars-center { top: 24% !important; }
.decor-balloons, .decor-balloons-right, .decor-balloons-lower-right,
.decor-extra-a, .decor-extra-b, .decor-extra-c, .decor-extra-d,
.decor-extra-g, .decor-extra-h { top: 56% !important; }
.decor-cross:nth-of-type(1) { top: 6%; }
.decor-cross:nth-of-type(2) { top: 14%; }
.decor-cross:nth-of-type(3) { top: 22%; }
.decor-cross:nth-of-type(4) { top: 30%; }
.decor-cross:nth-of-type(5) { top: 38%; }
.decor-cross:nth-of-type(6) { top: 46%; }
.decor-cross:nth-of-type(7) { top: 54%; }
.decor-cross:nth-of-type(8) { top: 62%; }
.decor-cross:nth-of-type(9) { top: 70%; }
.decor-cross:nth-of-type(10) { top: 78%; }
.decor-cross:nth-of-type(11) { top: 86%; }
.decor-cross:nth-of-type(12) { top: 94%; }
.decor-cross:nth-of-type(13) { top: 10%; }
.decor-cross:nth-of-type(14) { top: 26%; }
.decor-cross:nth-of-type(15) { top: 42%; }
.decor-cross:nth-of-type(16) { top: 58%; }
.decor-cross:nth-of-type(17) { top: 74%; }
.decor-cross:nth-of-type(18) { top: 90%; }
.sweep-a { animation-name: icon-sweep-a; }
.sweep-b { animation-name: icon-sweep-b; }
.sweep-c { animation-name: icon-sweep-c; }
.sweep-d { animation-name: icon-sweep-d; }

@keyframes icon-sweep-a { 0% { transform: translate3d(-115vw, 0, 0) rotate(-8deg); } 45% { transform: translate3d(0, 24px, 0) rotate(5deg); } 100% { transform: translate3d(115vw, -12px, 0) rotate(-4deg); } }
@keyframes icon-sweep-b { 0% { transform: translate3d(115vw, 18px, 0) rotate(8deg); } 48% { transform: translate3d(0, -20px, 0) rotate(-5deg); } 100% { transform: translate3d(-115vw, 12px, 0) rotate(6deg); } }
@keyframes icon-sweep-c { 0% { transform: translate3d(-115vw, -14px, 0) rotate(5deg); } 50% { transform: translate3d(0, 28px, 0) rotate(-7deg); } 100% { transform: translate3d(115vw, -18px, 0) rotate(4deg); } }
@keyframes icon-sweep-d { 0% { transform: translate3d(115vw, -20px, 0) rotate(-6deg); } 50% { transform: translate3d(0, 16px, 0) rotate(7deg); } 100% { transform: translate3d(-115vw, -16px, 0) rotate(-5deg); } }

/* Keep every ornament in its own calm drift lane. */
.decor-cross { animation-duration: 18s; }
.sweep-a { animation-name: decor-drift-a; }
.sweep-b { animation-name: decor-drift-b; }
.sweep-c { animation-name: decor-drift-c; }
.sweep-d { animation-name: decor-drift-a; animation-direction: reverse; }
.decor-layer > .decor-cross:nth-child(2) { top: 4% !important; }
.decor-layer > .decor-cross:nth-child(3) { top: 12% !important; }
.decor-layer > .decor-cross:nth-child(4) { top: 20% !important; }
.decor-layer > .decor-cross:nth-child(5) { top: 28% !important; }
.decor-layer > .decor-cross:nth-child(6) { top: 36% !important; }
.decor-layer > .decor-cross:nth-child(7) { top: 44% !important; }
.decor-layer > .decor-cross:nth-child(8) { top: 52% !important; }
.decor-layer > .decor-cross:nth-child(9) { top: 64% !important; }
.decor-layer > .decor-cross:nth-child(10) { top: 76% !important; }
.decor-layer > .decor-cross:nth-child(11) { top: 80% !important; }
.decor-layer > .decor-cross:nth-child(12) { top: 88% !important; }
.decor-layer > .decor-cross:nth-child(13) { top: 96% !important; }
.decor-layer > .decor-cross:nth-child(14) { top: 12% !important; }
.decor-layer > .decor-cross:nth-child(15) { top: 28% !important; }
.decor-layer > .decor-cross:nth-child(16) { top: 44% !important; }
.decor-layer > .decor-cross:nth-child(17) { top: 60% !important; }
.decor-layer > .decor-cross:nth-child(18) { top: 76% !important; }
.decor-layer > .decor-cross:nth-child(19) { top: 92% !important; }

/* Final category placement overrides. */
.decor-cloud, .decor-moon-cloud, .decor-stars-top-right { top: 4% !important; }
.decor-cloud-center { top: 18% !important; }
.decor-moon-mid { top: 28% !important; }
.decor-stars, .decor-stars-center { top: 24% !important; }
.decor-balloons, .decor-balloons-right, .decor-balloons-lower-right,
.decor-extra-a, .decor-extra-b, .decor-extra-c, .decor-extra-d,
.decor-extra-g, .decor-extra-h { top: 56% !important; }
.decor-extra-a { width: 7rem; top: 17%; left: 33%; opacity: .2; animation: decor-drift-a 8s ease-in-out infinite; filter: var(--filter-peach); }
.decor-extra-b { width: 10rem; top: 29%; left: 28%; opacity: .18; animation: decor-drift-c 13s ease-in-out infinite; filter: var(--filter-blue); }
.decor-extra-c { width: 8rem; top: 63%; right: 30%; left: auto; opacity: .2; animation: decor-drift-b 9s ease-in-out infinite; filter: var(--filter-gold); }
.decor-extra-d { width: 6rem; top: 76%; left: 38%; opacity: .18; animation: decor-drift-a 7s ease-in-out infinite reverse; filter: var(--filter-lilac); }
.decor-extra-e { width: 8rem; top: 11%; left: 41%; opacity: .16; animation: decor-drift-b 14s ease-in-out infinite; filter: var(--filter-coral); }
.decor-extra-f { width: 9rem; top: 48%; right: 28%; left: auto; opacity: .18; animation: decor-drift-c 10s ease-in-out infinite reverse; filter: var(--filter-peach); }
.decor-extra-g { width: 7rem; top: 86%; left: 43%; opacity: .17; animation: decor-drift-b 12s ease-in-out infinite reverse; filter: var(--filter-blue); }
.decor-extra-h { width: 8rem; top: 35%; left: 5%; opacity: .25; animation: decor-drift-a 9s ease-in-out infinite; filter: var(--filter-gold); }

:root {
  --filter-cream: brightness(0) saturate(100%) invert(93%) sepia(15%) saturate(420%) hue-rotate(328deg) brightness(104%) contrast(92%);
  --filter-rose: brightness(0) saturate(100%) invert(86%) sepia(12%) saturate(350%) hue-rotate(320deg) brightness(105%) contrast(91%);
  --filter-gold: brightness(0) saturate(100%) invert(90%) sepia(9%) saturate(250%) hue-rotate(320deg) brightness(104%) contrast(92%);
  --filter-lilac: brightness(0) saturate(100%) invert(88%) sepia(10%) saturate(330%) hue-rotate(320deg) brightness(104%) contrast(91%);
  --filter-peach: brightness(0) saturate(100%) invert(87%) sepia(20%) saturate(430%) hue-rotate(320deg) brightness(105%) contrast(91%);
  --filter-coral: brightness(0) saturate(100%) invert(66%) sepia(18%) saturate(390%) hue-rotate(320deg) brightness(88%) contrast(92%);
  --filter-blue: brightness(0) saturate(100%) invert(64%) sepia(20%) saturate(390%) hue-rotate(320deg) brightness(86%) contrast(92%);
}

.start-content { width: min(100%, 23rem); min-height: 100%; margin-top: 0; }
.start-content { position: relative; z-index: 88; }
.prayer-screen, .scroll-cue { position: relative; z-index: 91; }
.card-content { position: relative; z-index: 130; isolation: isolate; }
.opening-copy { position: absolute; top: 50%; left: 0; width: calc(100% - 1rem); margin-inline: .5rem; transform: translateY(-50%); transform-origin: center top; }
.bismillah-intro { margin: 0 auto 1.35rem; text-align: center; filter: none !important; }
.bismillah-intro img { display: block; width: min(12rem, 72%); height: auto; margin: 0 auto .55rem; }
.bismillah-intro p { margin: 0; font-family: "Junge", "DM Serif Display", Georgia, serif; font-size: clamp(.84rem, 3.8vw, 1.05rem); line-height: 1.28; }
.ayat-group { display: none; width: 100%; margin-top: 1rem; }
.ayat-group .arabic,
.ayat-group .translation,
.ayat-group .reference { opacity: 0; }
.signature { z-index: 91; }
.arabic {
  margin: 0 0 3.5rem;
  text-align: right;
  font-family: "GE MB MB", "Noto Naskh Arabic", serif;
  font-size: clamp(2.4rem, 9.8vw, 2.75rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.05em;
  opacity: 0;
  transform: translateY(24px);
  clip-path: none;
}
.arabic-line,
.translation-line {
  display: inline-block;
  min-height: 1em;
}
.arabic-line { display: block; white-space: nowrap; }

.arabic-text {
  background:
    linear-gradient(#704a32, #704a32),
    url("./assets/optimized/paper-texture-512.webp");
  background-blend-mode: multiply;
  background-size: auto, 220px;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.paper-text,
.translation,
.reference,
.closing,
.intro,
.date,
.scroll-cue,
.signature {
  color: #704b35;
  filter: url("#paper-ink");
  text-shadow:
    0.2px 0 rgba(70, 40, 25, .25),
    -0.2px 0 rgba(70, 40, 25, .18),
    0 0 .45px rgba(70, 40, 25, .28);
}

.translation, .reference, .closing, .intro, .date {
  font-family: "Junge", "DM Serif Display", Georgia, serif;
  font-weight: 400;
}
.translation, .reference, .closing { opacity: 0; transform: translateY(24px); }
body.arch-ready .translation { animation: none; }
body.translation-written .reference { animation: first-text-in 1.4s cubic-bezier(.22, 1, .36, 1) .15s forwards; }
.translation { margin: 0; font-size: clamp(1.08rem, 4.8vw, 1.35rem); line-height: 1.28; }
.translation { text-align: left; }
.reference { position: static; width: 100%; margin: 1.4rem 0 0; font-size: clamp(1rem, 4.2vw, 1.2rem); line-height: 1.28; }
.closing {
  position: absolute;
  top: 84%;
  left: 50%;
  width: calc(100% - 1rem);
  max-width: 26rem;
  margin: 0;
  transform: translateX(-50%) translateY(24px);
  font-size: clamp(1.18rem, 5.2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.28;
  text-align: center;
  overflow-wrap: normal;
  white-space: nowrap;
}
.closing-line { display: block; opacity: 0; max-width: 100%; }
.prayer-screen { min-height: 75svh; margin-top: -28svh; margin-bottom: 30svh; padding-top: 28svh; }
.prayer-screen .closing {
  position: static;
  width: min(100%, 26rem);
  margin: 0 auto;
  transform: translateY(12svh);
}
body.closing-ready .closing { opacity: 1; }
body.closing-ready .closing-line { animation: gentle-fade-in 1.4s ease forwards; }
body.closing-ready .closing-line:nth-child(2) { animation-delay: .3s; }
body.closing-ready .closing-line:nth-child(3) { animation-delay: .6s; }

.scroll-cue {
  position: absolute;
  bottom: 1.8rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  opacity: 0;
  font: .68rem/1 "Junge", Georgia, serif;
  letter-spacing: .08em;
  text-transform: lowercase;
}
.scroll-cue span { width: 1px; height: 2.5rem; background: var(--ink); display: block; }

.card-content { width: min(100%, 34rem); max-width: calc(100% - 1rem); text-align: center; margin-top: -1rem; overflow-x: clip; transition: transform 2s cubic-bezier(.22, 1, .36, 1); }
.card-content :is(.intro, .date, .pronunciation-button, .name-meaning, .name-dua, .family-note) {
  -webkit-text-stroke: .08px rgba(47, 27, 15, .34);
}
.intro { margin: 0 0 .85rem; color: #5f3c29; font-size: clamp(.94rem, 4.1vw, 1.12rem); line-height: 1.3; transition: color 2s cubic-bezier(.22, 1, .36, 1); }
h1 {
  width: fit-content;
  margin: 0 auto .9rem;
  font-family: "Kalnia", "GFS Didot", Georgia, serif;
  max-width: 100%;
  font-size: clamp(1.85rem, 9vw, 4rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.06em;
  white-space: nowrap;
}
.textured-text { position: relative; z-index: 131; width: fit-content; max-width: 100%; margin-inline: auto; overflow: visible; overflow-wrap: anywhere; color: #704A32; -webkit-text-stroke: .18px rgba(70, 40, 25, .52); text-shadow: 0 0 .25px rgba(70, 40, 25, .3); clip-path: inset(-.08em 100% -.22em -.1em); }
.textured-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(74, 43, 26, .32), rgba(74, 43, 26, .32)),
    url("./assets/optimized/paper-texture-512.webp");
  background-size: auto, 220px;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  mix-blend-mode: multiply;
  pointer-events: none;
}
body.arch-ready .textured-text { animation: none; }
body.arch-ready .textured-text.name-visible { animation: write-name 6.67s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes write-name {
  0% { clip-path: inset(-.08em 100% -.22em -.1em); filter: url("#paper-ink") blur(.35px); }
  95% { clip-path: inset(-.08em -.16em -.22em -.1em); filter: url("#paper-ink") blur(.08px); }
  100% { clip-path: inset(-.08em -.16em -.22em -.1em); filter: url("#paper-ink"); }
}
@keyframes first-text-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes gentle-fade-in { from { opacity: 0; } to { opacity: 1; } }
.date { display: flex; align-items: center; justify-content: center; gap: clamp(.18rem, 1.2vw, .4rem); max-width: 100%; margin: 0 auto; color: #4b2d1e; font-size: clamp(.64rem, 3vw, 1rem); line-height: 1.28; text-align: center; white-space: nowrap; }
.date-lead { display: inline; margin: 0; font-size: inherit; }
.date-values { display: inline-flex; align-items: center; justify-content: center; gap: clamp(.18rem, 1.2vw, .4rem); white-space: nowrap; }
.date-divider { font-size: .42em; opacity: .72; }
.card-content > .intro,
.card-content > .textured-text,
.card-content > .date { translate: 0 -5svh; }
.signature { position: absolute; right: 1.5rem; bottom: 1.2rem; margin: 0; opacity: .3; font-size: 1rem; }
.final-details { display: grid; width: min(100%, 22rem); max-width: 100%; margin: .15rem auto 0; padding-bottom: clamp(2rem, 5svh, 3.5rem); justify-items: center; opacity: 0; filter: blur(8px); transform: translateY(.8rem) scale(.98); pointer-events: none; transition: opacity 2s cubic-bezier(.22, 1, .36, 1), filter 2s cubic-bezier(.22, 1, .36, 1), transform 2s cubic-bezier(.22, 1, .36, 1); }
.pronunciation-button { display: none; align-items: center; gap: .65rem; border: 0; padding: .25rem; background: transparent; color: #573522; font: 400 clamp(.75rem, 3.3vw, .92rem)/1.2 "Junge", Georgia, serif; cursor: pointer; }
.phonetic { letter-spacing: .015em; }
.sound-mark { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid rgba(87,53,34,.48); border-radius: 50%; transition: transform .25s ease, background-color .25s ease; }
.sound-mark svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.pronunciation-button:hover .sound-mark,
.pronunciation-button:focus-visible .sound-mark { transform: scale(1.06); background: rgba(246,220,194,.24); }
.meaning-rule { display: none; }
.name-meaning { margin: 0; color: #402619; font-family: "Kalnia", Georgia, serif; font-size: clamp(1rem, 4.4vw, 1.3rem); line-height: 1.25; text-wrap: balance; }
.meaning-arabic,
.meaning-english { display: block; }
.meaning-arabic { margin-bottom: .18em; font-family: "GE MB MB", "Noto Naskh Arabic", serif; font-size: 1.6em; }
.name-dua,
.family-note { font-family: "Junge", Georgia, serif; }
.name-dua { max-width: 21rem; margin: .4rem 0 0; color: #573522; font-size: clamp(.84rem, 3.5vw, 1.04rem); line-height: 1.3; text-wrap: balance; }
.family-note { max-width: 100%; margin: 1.85rem 0 0; color: #4b2d1e; font-size: clamp(.58rem, 2.8vw, 1.1rem); line-height: 1.45; letter-spacing: -.015em; text-align: center; white-space: nowrap; }
.card-content.details-visible .intro { color: #422719; }
.card-content.details-visible .final-details { opacity: 1; filter: blur(0); transform: translateY(-.15rem) scale(1); pointer-events: auto; }

.moon-art, .start-content, .scroll-cue { will-change: transform; }

@keyframes moon-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(20px, 13px, 0) rotate(3deg); }
}
@keyframes balloon-hover {
  0%, 100% { transform: translate3d(-4px, 0, 0) rotate(-5deg); }
  50% { transform: translate3d(24px, -20px, 0) rotate(7deg); }
}
@keyframes cloud-sway {
  0%, 100% { transform: translate3d(-5px, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(12px, -10px, 0) rotate(2deg); }
}
@keyframes crib-sway {
  0%, 100% { transform: scaleX(-1) translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: scaleX(-1) translate3d(8px, -4px, 0) rotate(1deg); }
}
@keyframes teddy-sway {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(-8px, -5px, 0) rotate(2deg); }
}

@keyframes decor-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-30px, 37px, 0) rotate(-7deg); } }
@keyframes decor-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(33px, -30px, 0) rotate(8deg); } }
@keyframes decor-drift-c { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-23px, -37px, 0) rotate(10deg); } }

@media (prefers-reduced-motion: reduce) {
  .moon-art, .decor { animation: none; }
  .bismillah-intro { opacity: 1 !important; }
  .ayat-group { display: block !important; }
  .ayat-group .arabic,
  .ayat-group .translation,
  .ayat-group .reference { opacity: 1; }
  .arabic, .translation, .reference, .closing, .closing-line { opacity: 1; transform: none; clip-path: none; animation: none; }
  .textured-text { clip-path: none; animation: none; }
}

@media (min-width: 700px) {
  body { background: #efe2d4; overflow: hidden; }
  .paper {
    position: relative;
    isolation: isolate;
    container-type: size;
    width: min(calc(100% - 4rem), 430px);
    height: min(92dvh, 932px);
    margin: 4dvh auto;
    overflow: hidden;
    background: var(--scene-color, var(--peach));
    box-shadow: 0 24px 70px rgba(74, 43, 26, .2), 0 4px 14px rgba(74, 43, 26, .12);
  }
  .paper-scroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(112, 75, 53, .35) transparent;
  }
  .paper .moon-art,
  .paper .balloon-art,
  .paper .cloud-art,
  .paper .crib-final-art,
  .paper .teddy-final-art,
  .paper .paper-texture,
  .paper .arch-border,
  .paper .arch-rails { position: absolute; }
  .paper .moon-art {
    top: clamp(.75rem, 3cqh, 2rem);
    width: clamp(7.2rem, 33.3cqw, 11.7rem);
  }
  .paper .balloon-art {
    top: 78cqh;
    width: clamp(3.42rem, 16.2cqw, 6.3rem);
  }
  .paper .balloon-one { width: clamp(3.6rem, 16.74cqw, 6.53rem); }
  .paper .balloon-two { width: clamp(4.46rem, 20.97cqw, 8.19rem); }
  .paper .cloud-art {
    top: 70cqh;
    width: clamp(9rem, 40.5cqw, 16.2rem);
  }
  .paper .cloud-left { left: -30cqw; }
  .paper .cloud-right { right: -30cqw; top: 74cqh; width: clamp(10.35rem, 46.58cqw, 18.63rem); }
  .paper .crib-final-art,
  .paper .teddy-final-art {
    bottom: clamp(-8rem, -12cqh, -3rem);
    width: clamp(13.5rem, 57cqw, 27rem);
  }
  .paper .crib-final-art { left: clamp(-1rem, -3cqw, 1rem); bottom: clamp(-7rem, -10cqh, -2rem); }
  .paper .teddy-final-art { right: clamp(-1rem, -3cqw, 1rem); width: clamp(13.5rem, 57cqw, 27rem); }
  .paper .paper-texture { inset: 0; width: 100%; height: 100%; }
  .paper .arch-border {
    z-index: 90;
    inset: 0;
    width: 100cqw;
    height: 100cqh;
    transform: scaleX(-1) scale(1.15);
    transform-origin: center top;
    object-fit: contain;
    object-position: center top;
    opacity: 1;
  }
  .paper .arch-rails {
    inset: 0;
    width: 100cqw;
    height: max(150cqh, 1200px);
    transform: scaleX(-1);
  }
  .paper .arch-rail {
    width: clamp(14px, 4.5cqw, 24px);
    background-repeat: no-repeat;
    background-size: 115cqw auto;
  }
  .paper .arch-rail::after { top: min(143.75cqw, 100%); background-size: auto 100%; }
  .paper .arch-rail-left { background-position: -7.5cqw 0; }
  .paper .arch-rail-right { background-position: calc(100% + 7.5cqw) 0; }
  .screen {
    min-height: 100cqh;
    padding: 2rem clamp(2rem, 10cqw, 2.6rem);
  }
  .start-content .arabic {
    margin-top: clamp(1rem, 5cqh, 3rem);
    font-size: clamp(1.75rem, 8.7cqw, 2.7rem);
  }
  .bismillah-intro p { font-size: clamp(.84rem, 3.8cqw, 1.05rem); }
  .translation { font-size: clamp(1.08rem, 4.8cqw, 1.35rem); }
  .reference { font-size: clamp(1rem, 4.2cqw, 1.2rem); }
  .closing { font-size: clamp(1.18rem, 5.2cqw, 1.5rem); }
  .prayer-screen { min-height: 75cqh; margin-top: -28cqh; margin-bottom: 30cqh; padding-top: 28cqh; }
  .prayer-screen .closing { transform: translateY(12cqh); }
  .intro { font-size: clamp(.94rem, 4.1cqw, 1.12rem); }
  h1 { font-size: clamp(1.85rem, 9cqw, 4rem); }
  .date { font-size: clamp(.78rem, 3.4cqw, 1rem); }
  .card-content > .intro,
  .card-content > .textured-text,
  .card-content > .date { translate: 0 -5cqh; }
  .final-details { padding-bottom: clamp(2rem, 5cqh, 3.5rem); }
  .pronunciation-button { font-size: clamp(.75rem, 3.3cqw, .92rem); }
  .name-meaning { font-size: clamp(1rem, 4.4cqw, 1.3rem); }
  .name-dua { font-size: clamp(.84rem, 3.5cqw, 1.04rem); }
  .family-note { font-size: clamp(.88rem, 3.7cqw, 1.1rem); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }