/* Amal's Baptism: visual identity
   Ivory paper, light-blue water, muted-gold ornament. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --ivory: #FAF6EE;
  --paper: #FFFDF8;
  --ink: #22303C;
  --ink-soft: #4C5864;
  --blue: #A7C4DC;
  --blue-water: #86AACB;
  --blue-deep: #44698A;
  --gold: #B8975C;
  --gold-deep: #7D5F31;

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ivory);
  /* A soft pool of light behind the title, over a faint paper grain. */
  background-image:
    radial-gradient(ellipse 75% 55% at 50% 44%, rgba(167, 196, 220, .24), rgba(167, 196, 220, 0) 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .24 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

::selection { background: rgba(167, 196, 220, .5); color: var(--ink); }

/* ---------- Stage & frame ---------- */

.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(56px, calc(env(safe-area-inset-top) + 44px))
    max(36px, calc(env(safe-area-inset-right) + 28px))
    max(56px, calc(env(safe-area-inset-bottom) + 44px))
    max(36px, calc(env(safe-area-inset-left) + 28px));
}

.frame {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  left: max(12px, env(safe-area-inset-left));
  border: 1px solid rgba(184, 151, 92, .55);
  pointer-events: none;
  opacity: 0;
  animation: fade 1.6s var(--ease) .05s forwards;
}
.frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(184, 151, 92, .26);
}
.corner {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--ivory);
  border: 1px solid rgba(184, 151, 92, .8);
  transform: rotate(45deg);
}
.corner.tl { top: -5px; left: -5px; }
.corner.tr { top: -5px; right: -5px; }
.corner.bl { bottom: -5px; left: -5px; }
.corner.br { bottom: -5px; right: -5px; }

/* ---------- Water ripples ---------- */

.ripples {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: 150vmax;
  height: 150vmax;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}
.ripples circle {
  fill: none;
  stroke: var(--blue-water);
  stroke-width: 1;
  transform-origin: 0 0;
  transform: scale(.1);
  opacity: 0;
  animation: ripple 18s cubic-bezier(.2, .5, .4, 1) infinite;
}
.ripples circle:nth-child(2) { animation-delay: -6s; }
.ripples circle:nth-child(3) { animation-delay: -12s; }

/* ---------- Card ---------- */

.card {
  position: relative;
  width: 100%;
  max-width: 36rem;
  text-align: center;
}

.emblem {
  display: block;
  width: clamp(76px, min(22vw, 12vh), 116px);
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.emblem .halo {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
}
.emblem .halo-inner { stroke-opacity: .5; stroke-width: .8; }
.emblem .cross {
  fill: var(--gold);
  fill-opacity: 0;
  stroke: var(--gold);
  stroke-width: 1.15;
  stroke-linejoin: round;
}
.emblem .wave {
  fill: none;
  stroke: var(--blue-water);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.emblem .wave-2 { stroke-opacity: .65; }

.eyebrow {
  margin: clamp(22px, 5vw, 30px) 0 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(.75rem, 3.1vw, .84rem);
  line-height: 1.6;
  letter-spacing: .32em;
  /* Letter-spacing trails the last letter; pad the left so the line stays centred. */
  padding-left: .32em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--gold-deep);
}

.title {
  margin: clamp(10px, 2.5vw, 16px) 0 0;
  font-weight: 500;
  line-height: 1;
}
.title-name {
  display: block;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(4.4rem, min(21vw, 15.5vh), 9.25rem);
  line-height: .92;
  letter-spacing: -.01em;
  color: var(--ink);
}
.title-word {
  display: block;
  margin-top: .45em;
  font-weight: 500;
  font-size: clamp(1.15rem, 5vw, 1.95rem);
  letter-spacing: .4em;
  padding-left: .4em;
  text-transform: uppercase;
  color: var(--blue-deep);
}

.rule {
  display: block;
  width: clamp(150px, 44vw, 220px);
  height: auto;
  margin: clamp(22px, 5.5vw, 34px) auto clamp(18px, 4.5vw, 26px);
  overflow: visible;
}
.rule-line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  transform-box: fill-box;
  transform: scaleX(0);
  animation: grow 1.4s var(--ease) 1.05s forwards;
}
.rule-line.left { transform-origin: 100% 50%; }
.rule-line.right { transform-origin: 0 50%; }
.rule-dot, .rule-gem { fill: var(--gold); }
.rule-gem { fill-opacity: .2; stroke: var(--gold); stroke-width: 1; }

.lede {
  max-width: 23ch;
  margin: 0 auto;
  font-size: clamp(1.3rem, 5vw, 1.65rem);
  font-weight: 400;
  line-height: 1.42;
  color: var(--ink-soft);
  text-wrap: balance;
}

.signoff {
  margin: clamp(12px, 3vw, 18px) 0 0;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 5.2vw, 1.75rem);
  line-height: 1.3;
  color: var(--blue-deep);
}

.home-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(184, 151, 92, .7);
  text-underline-offset: .22em;
}
.home-link:hover { text-decoration-color: var(--gold-deep); }
.home-link:focus-visible {
  outline: 2px solid var(--blue-deep);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- Countdown ---------- */

.countdown[hidden] { display: none; }
.countdown { margin: 0 auto clamp(22px, 5.5vw, 32px); }
.countdown-label {
  margin: 0 0 clamp(10px, 2.5vw, 14px);
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(.7rem, 2.9vw, .78rem);
  letter-spacing: .28em;
  padding-left: .28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.countdown-units {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.countdown-units li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(64px, 18vw, 96px);
  padding: 2px clamp(6px, 2vw, 14px);
}
.countdown-units li + li { border-left: 1px solid rgba(184, 151, 92, .45); }
.countdown-num {
  font-weight: 500;
  font-size: clamp(2.1rem, 9.5vw, 3.1rem);
  line-height: 1.05;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.countdown-unit {
  margin-top: 4px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(.62rem, 2.6vw, .7rem);
  letter-spacing: .22em;
  padding-left: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.countdown.is-done .countdown-units { display: none; }
.countdown.is-done .countdown-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 6vw, 2rem);
  letter-spacing: 0;
  padding-left: 0;
  text-transform: none;
  color: var(--blue-deep);
}

/* ---------- Motion ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 1.3s var(--ease) forwards;
}
svg .reveal { transform: none; animation-name: fade; }
.d0 { animation-delay: .1s; }
.d1 { animation-delay: .55s; }
.d2 { animation-delay: .8s; }
.d3 { animation-delay: 1.05s; }
.d4 { animation-delay: 1.5s; }
.d5 { animation-delay: 1.6s; }
.d6 { animation-delay: 1.85s; }

.title-name.reveal { animation-name: rise-soft; animation-duration: 1.6s; }

.emblem .draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 2.4s var(--ease) .15s forwards;
}
.emblem .cross.draw {
  animation: draw 2.2s var(--ease) .35s forwards, fill-in 1.4s ease 1.6s forwards;
}
.emblem .wave.draw { animation-delay: 1s; animation-duration: 1.8s; }
.emblem .wave-2.draw { animation-delay: 1.25s; }

@keyframes fade { to { opacity: 1; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes rise-soft {
  from { opacity: 0; transform: translateY(18px); letter-spacing: .03em; }
  to { opacity: 1; transform: none; letter-spacing: -.01em; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fill-in { to { fill-opacity: .9; } }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes ripple {
  0% { transform: scale(.1); opacity: 0; }
  14% { opacity: .9; }
  100% { transform: scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .frame, .reveal { opacity: 1; transform: none; }
  .emblem .draw { stroke-dashoffset: 0; }
  .emblem .cross { fill-opacity: .9; }
  .rule-line { transform: none; }
  /* Still water: three resting rings instead of moving ones. */
  .ripples circle { opacity: .5; }
  .ripples circle:nth-child(1) { transform: scale(.28); }
  .ripples circle:nth-child(2) { transform: scale(.48); opacity: .35; }
  .ripples circle:nth-child(3) { transform: scale(.7); opacity: .2; }
}

/* ---------- Narrow phones: keep the small capitals on one line ---------- */

@media (max-width: 440px) {
  .eyebrow { letter-spacing: .2em; padding-left: .2em; }
  .countdown-label { letter-spacing: .2em; padding-left: .2em; }
  .countdown-unit { letter-spacing: .16em; padding-left: .16em; }
}

/* ---------- Short screens (landscape tablets, small laptops) ---------- */

@media (max-height: 860px) and (min-width: 720px) {
  .stage { padding-top: 44px; padding-bottom: 44px; }
  .eyebrow { margin-top: 18px; }
  .rule { margin-top: 20px; margin-bottom: 18px; }
  .countdown { margin-bottom: 20px; }
}

/* ---------- Larger screens ---------- */

@media (min-width: 720px) {
  .frame::before { inset: 7px; }
  .lede { max-width: 26ch; }
}

@media (min-width: 720px) and (min-height: 560px) {
  .frame {
    top: max(22px, env(safe-area-inset-top));
    right: max(22px, env(safe-area-inset-right));
    bottom: max(22px, env(safe-area-inset-bottom));
    left: max(22px, env(safe-area-inset-left));
  }
}