/* The page, the card column every section sits in, the seam between the courtyard and the
   plaster, and the cobalt glaze of every title. The palette is THEME.md, 8. */

:root {
  --cobalt: #1d3a82;
  --cobalt-deep: #0f2452;
  --firoza: #2f8f94;
  --saffron: #d9982e;
  --plaster: #efe3cc;
  --brick: #a4553a;
  --kick: #9a4b2e;          /* kickers: brick ink on light */
  --brass: #b0843a;
  --ink: #1b2a52;
  --table: #101d3c;

  /* the functions' colours (the events define them; the RSVP reuses them) */
  --mehndi: #d9982e;
  --nikah: #2f8f94;
  --baraat: #b0402a;
  --walima: #1d3a82;

  /* 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: 44px;
}

/* 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 a little larger. */
html.is-tablet,
html:not(.is-tablet) .card { --seam-h: 56px; }

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

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

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

html, body {
  margin: 0;
  /* Deep cobalt dusk, lit from the middle: the table the card lies on. */
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(46, 78, 150, .38), transparent 70%),
    radial-gradient(ellipse at 50% 50%, #1b2d5a 0%, #101d3c 62%, #08112a 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(--plaster);
  box-shadow: 0 0 60px rgba(2, 6, 20, .6);
}

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

/* A plaster section's edges (the letter, the events, the RSVP): the band of kashi tile between
   two courses of brick, straddling each join with the courtyard, above both. One file, cut at
   its exact repeat (assets-src/theme/build_theme.py). Now and then a glint of the morning sun
   runs along it. */
.seam-edged { position: relative; }

.seam-edged::before,
.seam-edged::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: var(--seam-h);
  background:
    linear-gradient(100deg, transparent 40%, rgba(255, 248, 225, .5) 50%, transparent 60%) -80% 0 / 40% 100% no-repeat,
    url(../assets/theme/seam.webp) 50% 50% / auto 100% repeat-x;
  filter: drop-shadow(0 2px 3px rgba(40, 22, 10, .35));
  pointer-events: none;
  animation: seam-glint 9s ease-in-out 2s infinite;
}

.seam-edged::before { top: calc(var(--seam-h) * -.5); }
.seam-edged::after { bottom: calc(var(--seam-h) * -.5); animation-delay: 6.5s; }

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

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

/* The letter, the events and the RSVP lie on the courtyard's own ivory lime plaster: its plain
   grain and hairline cracks, a tile that repeats with no join (assets-src/theme/build_theme.py).
   No painted vines on it: the letter's paper and the seams have them. A patch of morning sun
   through a carved jaali drifts slowly over it (.plaster-sun, first in the section), and the
   rest is in soft, cool shade. The section's own content goes above the sun: give its blocks
   position: relative. */
.plaster {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  background: url(../assets/theme/plaster.webp) 50% 0 / 540px auto repeat, var(--plaster);
  color: var(--ink);
}

/* The sun and the shade. No z-index here, so the light blends with the plaster itself: the
   warm lattice of light (soft-light, with a little screen for its glow), drifting. */
.plaster-sun {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(38, 58, 110, .09), rgba(38, 58, 110, .03) 30%, rgba(38, 58, 110, .03) 70%, rgba(38, 58, 110, .1));
}

.plaster-sun::before,
.plaster-sun::after {
  content: "";
  position: absolute;
  left: var(--sun-x, -10%);
  top: var(--sun-y, 2%);
  width: var(--sun-w, min(125cqi, 980px));
  aspect-ratio: 900 / 806;
  background: url(../assets/theme/jaali.webp) center / 100% 100% no-repeat;
  animation: km-sun 44s ease-in-out infinite alternate;
}

.plaster-sun::before { mix-blend-mode: soft-light; }
.plaster-sun::after { mix-blend-mode: screen; opacity: .42; }

@keyframes km-sun {
  from { transform: translate(-3%, 1.5%) rotate(-1deg); }
  to { transform: translate(5%, -1.5%) rotate(1deg); }
}

/* ------------------------------------------------------------ cobalt glaze */

/* The names and every title: glossy cobalt glaze, as on the tiles. A highlight from the sun at
   the upper left, a darker foot, and a glint of sun that runs across it: --glint from 118%
   (just off its left, where it rests) to -30% (just off its right). .glaze-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%;
}

.glaze {
  background:
    linear-gradient(104deg, transparent 41%, rgba(214, 232, 255, .62) 46.5%, transparent 52%) var(--glint) 0 / 200% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 36%, rgba(0, 0, 0, 0) 64%, rgba(2, 8, 30, .5)),
    linear-gradient(90deg, #1f418f, #152e6c 30%, #2346a0 56%, #122a64 82%, #1f418f);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 250, 235, .75)) drop-shadow(0 1.4px 1.2px rgba(8, 20, 55, .5));
}

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

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

@media (prefers-reduced-motion: reduce) {
  .seam-edged::before,
  .seam-edged::after,
  .plaster-sun::before,
  .plaster-sun::after,
  .glaze-glints { animation: none; }
}