/* Shared: tokens, and the wrapping (two painted sheets, a silk ribbon, two doves). */

:root {
  --paper: #fbf7ee;
  --paper-2: #f3ecdc;
  --paper-3: #e9dfc8;
  --ink: #24271b;
  --ink-soft: #55574a;
  --olive: #4f5631;
  --olive-2: #666d3d;
  --sage: #a2a879;
  --wisteria: #7a679f;
  --wisteria-soft: #c6b8dc;
  --water: #6d8580;
  --rule: color-mix(in oklab, var(--ink) 16%, transparent);

  --font-display: "Boska", "Cormorant Garamond", Georgia, serif;
  --font-body: "Gambetta", Georgia, serif;

  --gutter: clamp(1.25rem, 3.4vw, 3.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-hop: cubic-bezier(0.76, 0, 0.24, 1);
  --waterline: 63%;

  --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
@media (hover: hover) and (pointer: fine) { html { scrollbar-gutter: stable; } }
html.gate-on { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--wisteria); outline-offset: 3px; }
::selection { background: var(--wisteria-soft); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3 { text-wrap: balance; font-weight: 300; }
p, li, dd { text-wrap: pretty; }

/* ==========================================================================
   The wrapping: two painted sheets, a silk ribbon, two doves (gate.js)
   ========================================================================== */
.gate { position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.gate__sheet { position: absolute; top: 0; bottom: 0; background: var(--paper-2); transition: transform 1.5s cubic-bezier(0.7, 0, 0.25, 1); will-change: transform; }
.gate__sheet canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.gate__sheet--l { left: 0; width: calc(50% + 34px); background: transparent; z-index: 1; }
.gate__sheet--r { right: 0; width: 50%; }
/* the corner flowers ride on their sheet; their two inner edges are already faded to nothing in the files */
.gate__flower { position: absolute; width: clamp(104px, 28vmin, 300px); height: auto; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.gate__flower--tl { top: 0; left: 0; }
.gate__flower--bl { bottom: 0; left: 0; }
.gate__flower--tr { top: 0; right: 0; }
.gate__flower--br { bottom: 0; right: 0; }
.gate.is-open .gate__sheet--l { transform: translateX(-106%) rotate(-2.5deg); }
.gate.is-open .gate__sheet--r { transform: translateX(106%) rotate(2.5deg); }
.gate.is-open { pointer-events: none; }
.gate.is-gone { opacity: 0; transition: opacity 0.4s ease; }
.gate__silk { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.gate__ribbon { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
/* wings pivot at the shoulder: a quick downstroke (the wing folds through flat and shows below the body), a slower recovery */
.gate__ribbon .dove__wing, .gate__ribbon .dove__far { transform-box: fill-box; transform-origin: 85% 100%; animation: flap 0.46s infinite; }
.gate__ribbon .dove__far { animation-delay: -0.06s; }
.gate.is-open .dove__wing, .gate.is-open .dove__far { animation-duration: 0.3s; }
/* motion switched off by the guest: wings at rest, and the label and hint there from the start */
html[data-motion="off"] .gate__ribbon :is(.dove__wing, .dove__far) { animation: none; }
html[data-motion="off"] :is(.gate__title, .gate__hint) { animation: none; opacity: 1; }
@keyframes flap {
  0% { transform: rotate(-8deg) scaleY(1); animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.6); }
  42% { transform: rotate(6deg) scaleY(-0.55); animation-timing-function: cubic-bezier(0.25, 0.4, 0.5, 1); }
  100% { transform: rotate(-8deg) scaleY(1); }
}

/* the title is a paper label laid on top of both sheets, so the centre seam never runs through the words */
.gate__title {
  --label-ink: #3a3f24; /* small italic lines: 9:1 on the label */
  position: absolute; left: 50%; top: max(9vh, 4rem); translate: -50% 0; z-index: 4;
  display: grid; justify-items: center; gap: 0.35rem; text-align: center;
  width: max-content; max-width: min(calc(100vw - 2.5rem), 34rem);
  padding: clamp(0.9rem, 2.4vw, 1.4rem) clamp(1.25rem, 4vw, 2.5rem);
  background: #fcf9f1; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(79, 86, 49, 0.14), inset 0 0 0 5px #fcf9f1, inset 0 0 0 6px rgba(79, 86, 49, 0.18),
    0 1px 2px rgba(40, 36, 20, 0.14), 0 10px 26px -12px rgba(40, 36, 20, 0.4);
  opacity: 0; animation: hint-in 1s ease 0.6s forwards;
}
.gate__for, .gate__from { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--label-ink); }
.gate__names {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(2.3rem, 6vw, 4.75rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--ink);
  max-width: 14ch; text-wrap: balance; overflow-wrap: anywhere;
}
.gate__hint {
  position: absolute; left: 50%; bottom: max(9vh, 3rem); translate: -50% 0; z-index: 4;
  padding: 0.35rem 0.9rem; border-radius: 999px; background: color-mix(in oklab, #fcf9f1 80%, transparent);
  font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.2rem; white-space: nowrap; color: #3a3f24;
  opacity: 0; animation: hint-in 0.8s ease 1.8s forwards;
}
/* "tap" on touch screens, "click" with a mouse or trackpad */
.gate__hint-fine { display: none; }
@media (hover: hover) and (pointer: fine) {
  .gate__hint-touch { display: none; }
  .gate__hint-fine { display: inline; }
}
@media (max-width: 600px) {
  .gate__for, .gate__from { font-size: 1.15rem; }
  .gate__hint { font-size: 1.25rem; }
}
/* the label and the hint leave as soon as the ribbon is touched, before the sheets part */
.gate.is-untying .gate__hint, .gate.is-untying .gate__title { animation: none; opacity: 0; transition: opacity 0.35s ease; }
.gate.is-untying .gate__title { transform: translateY(-10px); transition: opacity 0.35s ease, transform 0.5s var(--ease-out); }
@keyframes hint-in { to { opacity: 1; } }

/* an invisible button over the painted bow: focusable, opens on Enter or Space */
.gate__bow {
  position: absolute; z-index: 4; padding: 0; border: 0; border-radius: 999px; background: transparent;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.gate__bow:focus { outline: none; }
.gate__bow:focus-visible { outline: 2px solid var(--wisteria); outline-offset: 4px; box-shadow: 0 0 0 7px rgba(252, 249, 241, 0.75); }

/* ==========================================================================
   The hero: the glade above, a still pond below, the name on the waterline
   ========================================================================== */

@media (max-width: 1000px) {
  :root { --waterline: 60%; }
  
  
  
  
}

/* ==========================================================================
   Falling leaves and wisteria petals (one fixed canvas, see base.js)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .gate__sheet { transition: none; }
  .gate__title, .gate__hint { animation: none; opacity: 1; }
  .gate.is-untying .gate__title { transform: none; }
  
}