@import "tailwindcss";

/* Bangla webfont, self-hosted (task 9.1).
   Self-hosted rather than pulled from Google Fonts: the production CSP has no external
   font origin, an outbound font request tells a third party which guests opened their
   invitation and when, and a font on someone else's CDN is a dependency for the one page
   that has to work on the day.

   `unicode-range` is what makes this cheap. The file is only fetched when Bengali text is
   actually on the page, so an English-only invitation never downloads it. The range covers
   the Bengali block plus the two joiners and the dotted circle Bangla conjuncts rely on —
   without U+200C/U+200D the rendering is subtly wrong in exactly the words that need them.

   `swap`, not `block`: the invitation text is server-rendered and must be readable
   immediately (PRD §9.2). A reflow when the font arrives is a smaller cost than a blank
   greeting while it loads. */
@font-face {
  font-family: "Noto Sans Bengali Subset";
  src: url("/fonts/noto-sans-bengali-subset.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0980-09FF, U+200C-200D, U+25CC;
}

@theme {
  /* The Bangla face is first, but it only ever claims the codepoints in its unicode-range,
     so Latin text still renders in the system UI font. Listing it first is what lets it win
     for Bengali without touching anything else. */
  --font-sans:
    "Noto Sans Bengali Subset", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* The card lives in a shadow root, which blocks *selectors* but not inheritance. The card's
   own reset sets `font-family: inherit` on :host, so this is what actually crosses the
   boundary — a card with Bangla text on it gets the same subset the page uses, and the
   design team never has to ship or reference a font of their own. */
body {
  font-family: var(--font-sans);
}

:root {
  /* Base font size stays >= 16px: older relatives will be reading this (PRD §9.4). */
  font-size: 16px;
}

/* Envelope reveal (task 2.5, PRD §9.1).
   Every animated property here is `transform` or `opacity`, so the whole sequence runs on
   the compositor. That is the difference between a smooth reveal and a stutter on the
   low-end Android half the guest list is holding (PRD §9.3). */
@keyframes envelope-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes envelope-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes envelope-flap {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(-172deg);
  }
}

@keyframes envelope-card {
  from {
    transform: translateY(12%) scale(0.94);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  to {
    transform: translateY(-46%) scale(1);
    opacity: 1;
  }
}

/* Animations must degrade to fades, never disappear (spec invitation-page). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}