/* The page, the card column every section sits in, the jasmine seam between the garden and the
   muslin, the muslin itself, and the two colours of every title: moon-pearl on the night and
   midnight ink on the muslin. The palette is THEME.md, 8. */

:root {
  --night: #12324a;         /* midnight teal-blue: the deep colour */
  --night-deep: #0a1f30;
  --moon: #c9d6de;          /* moon silver: kickers on the night, rules */
  --pearl: #f4f1e8;
  --muslin: #f0ebe0;        /* the light colour */
  --leaf: #86a093;
  --diya: #e8a23a;          /* the only warm colour */
  --ink: #173a52;           /* text on the muslin */
  --kick: #56717f;          /* kickers on the muslin */
  --table: #0b1c2a;

  /* the functions' colours (the events define them; the RSVP reuses them) */
  --mehndi: #d9962a;
  --nikah: #e9e4d6;
  --nikah-edge: #8a979e;
  --baraat: #a3263d;
  --walima: #6f93bd;

  /* The card fills a phone. On a laptop or desktop it is a 3:4 column, the
     shape of a tablet held upright, lying on the table. */
  --card-w: min(100%, max(calc(100svh * .75), 360px));
  --seam-h: 40px;
  --band-w: 56px;           /* the muslin's embroidered edges */
}

/* A tablet (set in the page's <head>) is filled edge to edge, either way up. */
html.is-tablet { --card-w: 100%; }

/* Tablets and the laptop column show the seam and the embroidery a little larger. */
html.is-tablet,
html:not(.is-tablet) .card { --seam-h: 52px; --band-w: 76px; }

@media (max-aspect-ratio: 5/8) {
  html:not(.is-tablet) .card { --seam-h: 40px; --band-w: 56px; }
}

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

html { -webkit-text-size-adjust: 100%; }

html, body {
  margin: 0;
  /* The garden at night, with the moon's glow high above the column: the table the card lies on. */
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(150, 185, 210, .16), transparent 70%),
    radial-gradient(ellipse at 50% 40%, #153a54 0%, #0b1c2a 62%, #06121c 100%) fixed;
  background-color: var(--table);
}

body { min-height: 100vh; }

img { display: block; max-width: 100%; }

.card {
  position: relative;
  width: var(--card-w);
  margin: 0 auto;
  background: var(--night);
  box-shadow: 0 0 60px rgba(2, 8, 16, .65);
}

/* ------------------------------------------------------------ the seam */

/* A muslin section's edges (the letter, the events, the RSVP): the rope of jasmine buds wound with
   silver beads, lying across each join with the garden, above both, with its own soft shadow.
   One file, cut where the rope meets itself (assets-src/theme/build_theme.py). Each muslin
   section carries two:
     <div class="seam seam-top" aria-hidden="true"><i></i></div>
     <div class="seam seam-bot" aria-hidden="true"><i></i></div>
   The <i> is a glint of moonlight that runs along the rope now and then, cut to the rope. */
.seam-edged { position: relative; }

.seam {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: var(--seam-h);
  background: url(../assets/theme/seam.webp) 50% 50% / auto 100% repeat-x;
  filter: drop-shadow(0 3px 3px rgba(6, 22, 36, .42));
  pointer-events: none;
}

.seam-top { top: calc(var(--seam-h) * -.5); }
.seam-bot { bottom: calc(var(--seam-h) * -.5); }

.seam i {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(236, 246, 255, .75) 50%, transparent 62%) -80% 0 / 36% 100% no-repeat;
  -webkit-mask: url(../assets/theme/seam.webp) 50% 50% / auto 100% repeat-x;
          mask: url(../assets/theme/seam.webp) 50% 50% / auto 100% repeat-x;
  mix-blend-mode: screen;
  animation: mr-seam-glint 10s ease-in-out 2.5s infinite;
}

.seam-bot i { animation-delay: 7s; }

@keyframes mr-seam-glint {
  0% { background-position: -80% 0; }
  30%, 100% { background-position: 180% 0; }
}

/* ------------------------------------------------------------ the muslin (surface P) */

/* The letter, the events and the RSVP lie on ivory muslin: its plain weave (a tile that repeats
   with no join) and its white chikankari jasmine down both sides, which fade into the weave
   (assets-src/theme/build_theme.py). .muslin-moon, first in the section, is its moonlight (and,
   from the letter on, the moon-shadows of jasmine strings). The section's own content goes above
   it: give its blocks position: relative. */
.muslin {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  background:
    url(../assets/theme/muslin-l.webp) 0 0 / var(--band-w) auto repeat-y,
    url(../assets/theme/muslin-r.webp) 100% 0 / var(--band-w) auto repeat-y,
    url(../assets/theme/muslin.webp) 50% 0 / 300px auto repeat,
    var(--muslin);
  color: var(--ink);
}

.muslin-moon {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 40% at 28% 12%, rgba(255, 253, 246, .38), transparent 70%),
    linear-gradient(180deg, rgba(40, 80, 110, .07), transparent 22%, transparent 78%, rgba(40, 80, 110, .08));
}

/* The moon-shadows of jasmine strings, as if the curtain's strings hung between the moon (up to
   the left) and the cloth: soft, slanting a little, fading out down the section, and stirring
   slowly as the strings sway (assets/theme/strings.webp, made from the opening's curtain by
   assets-src/letter/build_letter.py). */
.muslin-moon::before {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  top: -2%;
  height: min(110%, 1200px);
  background: url(../assets/theme/strings.webp) 0 0 / auto 640px repeat;
  opacity: .1;
  filter: blur(1.5px);
  transform-origin: 50% 0;
  transform: skewX(-7deg);
  -webkit-mask: linear-gradient(180deg, #000 25%, transparent 95%);
          mask: linear-gradient(180deg, #000 25%, transparent 95%);
  animation: mr-strings 13s ease-in-out infinite alternate;
}

@keyframes mr-strings {
  0% { transform: skewX(-7deg) translateX(0); }
  45% { transform: skewX(-5.2deg) translateX(.9%); }
  100% { transform: skewX(-8.4deg) translateX(-.6%); }
}

/* ------------------------------------------------------------ moon-pearl and midnight ink */

/* The names and every title. On the night: moon-pearl, pearly white with a faint mother-of-pearl
   sheen, a soft moonlit glow and a darker edge so it reads on the sky. On the muslin: midnight
   ink, deep teal-blue with a silver highlight. A glint of moonlight runs across either: --glint
   from 118% (just off its left, where it rests) to -30% (just off its right); .glints runs it now
   and then. Use on an element that is as wide as its text (inline-block, or fit-content). */
@property --glint {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 118%;
}

.pearl {
  background:
    linear-gradient(104deg, transparent 40%, rgba(255, 255, 255, .95) 46.5%, transparent 53%) var(--glint) 0 / 200% 100% no-repeat,
    linear-gradient(90deg, rgba(255, 232, 236, .22), rgba(222, 246, 242, .24) 35%, rgba(230, 232, 255, .22) 65%, rgba(255, 240, 226, .2)),
    linear-gradient(180deg, #ffffff 0%, #f6f3eb 42%, #e2e9ec 72%, #c8d4dc 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 9px rgba(175, 208, 235, .55)) drop-shadow(0 1.5px 1.5px rgba(4, 18, 32, .75));
}

.ink {
  background:
    linear-gradient(104deg, transparent 42%, rgba(214, 230, 240, .6) 47%, transparent 52%) var(--glint) 0 / 200% 100% no-repeat,
    linear-gradient(180deg, #2c5676, #173a52 48%, #0e283b);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8)) drop-shadow(0 1px 1.2px rgba(10, 30, 45, .35));
}

.glints { animation: mr-glint 11s ease-in-out 4s infinite; }

@keyframes mr-glint {
  0% { --glint: 118%; }
  16%, 100% { --glint: -30%; }
}

@media (prefers-reduced-motion: reduce) {
  .seam i,
  .glints,
  .muslin-moon::before { animation: none; }
}