/* Cormorant Garamond (SIL Open Font License), served from this site so phones never call Google */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin-italic.woff2) format('woff2');
}

:root {
  --wall: #efe6da;
  --wall-edge: #e2d4c2;
  --ink: #2a211b;
  --ink-soft: #6b5a4e;
  --gold: #f1d593;
  --u: .65px;          /* one unit of the window (it is 600 units wide), set from JS */
  --t: 1;              /* lettering scale, set from JS to fit the arch */
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  overflow: hidden;
  background: var(--wall);
}
body {
  color: var(--ink);
  background: radial-gradient(120% 85% at 50% 38%, #f7f0e7 0%, var(--wall) 55%, var(--wall-edge) 100%);
  font-family: 'Cormorant Garamond', Georgia, serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Wide screens: coloured light the window throws onto the wall */
.spill {
  position: fixed; inset: -10%;
  background:
    radial-gradient(32% 26% at 22% 64%, rgba(43, 179, 163, .20), transparent 70%),
    radial-gradient(30% 24% at 80% 34%, rgba(233, 162, 59, .20), transparent 70%),
    radial-gradient(26% 22% at 72% 82%, rgba(195, 40, 60, .10), transparent 70%),
    radial-gradient(28% 22% at 28% 22%, rgba(42, 79, 168, .10), transparent 70%);
  animation: drift 16s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}
/* Night that lifts as the glass lights up */
.dusk {
  position: fixed; inset: 0;
  background: #120e0b;
  pointer-events: none;
}

/* The window fills the screen (on wide screens: full height, centred) */
.stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.sign {
  position: relative;
  margin: 0;
  width: min(100vw, 75svh);
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #15110e;
  box-shadow: 0 0 70px rgba(40, 26, 12, .45);
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.sign > svg, .sign > canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
#tex { mix-blend-mode: overlay; opacity: .92; pointer-events: none; }
/* Sparkles in the hammered panes: two lights that fade into each other */
.spec { pointer-events: none; opacity: 0; }

/* Gilded lines on the flowers: dark edges with a gold core */
.ge, .u-e, .w-e { fill: none; stroke: #1f1409; stroke-linejoin: round; stroke-linecap: round; }
.gc, .u-g, .w-g { fill: none; stroke: #c99f48; stroke-linejoin: round; stroke-linecap: round; }
.ge { stroke-width: 2.3; }
.gc { stroke-width: .9; }
.w-e { stroke-width: 2.6; }
.w-g { stroke-width: 1.1; stroke: #dcb55a; }
.u-s { fill: none; stroke: #3d8a45; stroke-linecap: round; stroke-linejoin: round; }
.dt { fill: none; stroke: #b48a3a; stroke-width: .8; stroke-linecap: round; }
.bd { stroke: #1f1409; stroke-width: .9; }

/* Light glancing off the glass surface */
.sign::after {
  content: '';
  position: absolute; top: -10%; bottom: -10%; left: 0;
  width: 50%;
  background: linear-gradient(100deg,
    rgba(255, 250, 235, 0) 0%,
    rgba(255, 250, 235, .08) 38%,
    rgba(255, 255, 255, .2) 50%,
    rgba(255, 250, 235, .08) 62%,
    rgba(255, 250, 235, 0) 100%);
  transform: translateX(-140%) skewX(-14deg);
  pointer-events: none;
}

/* Lettering on the opal arch; position and --t set from JS */
#words {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  pointer-events: none;
}
#words p { margin: 0; text-shadow: 0 1px 0 rgba(255, 252, 244, .6); }
.w-pre {
  font-style: italic; font-weight: 500;
  font-size: calc(var(--u) * var(--t) * 28);
  color: var(--ink-soft);
  margin-bottom: calc(var(--u) * var(--t) * 14) !important;
}
/* Names: same face as the date, in capitals */
.w-name {
  font-weight: 600;
  font-size: calc(var(--u) * var(--t) * 50);
  line-height: 1.08;
  letter-spacing: .14em; padding-left: .14em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: var(--ink);
}
.w-amp {
  font-style: italic; font-weight: 500;
  font-size: calc(var(--u) * var(--t) * 34);
  line-height: 1.1;
  color: var(--ink-soft);
}
.w-date {
  font-weight: 600;
  font-size: calc(var(--u) * var(--t) * 19);
  letter-spacing: .3em; padding-left: .3em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: var(--ink-soft);
  margin-top: calc(var(--u) * var(--t) * 28) !important;
}
.w-note {
  font-style: italic; font-weight: 500;
  font-size: max(15px, calc(var(--u) * var(--t) * 22));
  color: var(--ink-soft);
  margin-top: calc(var(--u) * var(--t) * 10) !important;
}
.w-actions {
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * var(--t) * 4);
  margin-top: calc(var(--u) * var(--t) * 30);
}
#words a, #words button { pointer-events: auto; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6em;
  min-height: max(46px, calc(var(--u) * var(--t) * 66));
  padding: 0 1.1em;
  border-radius: 999px;
  background: linear-gradient(180deg, #2e241d, #1d1712);
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
  font-size: max(16px, calc(var(--u) * var(--t) * 24));
  letter-spacing: .02em;
  box-shadow:
    inset 0 0 0 1px rgba(241, 213, 147, .45),
    inset 0 1px 0 rgba(255, 240, 200, .18),
    0 10px 22px -10px rgba(36, 28, 22, .75);
  transition: transform .15s ease;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 1.3em; height: 1.3em; flex: none; }
.more {
  border: 0; background: none; padding: 8px 10px;
  font: inherit; font-style: italic; font-weight: 500;
  font-size: max(15px, calc(var(--u) * var(--t) * 20));
  color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  cursor: pointer;
}
.hint { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); max-width: 26ch; }

/* Lettering reveal: lines rise in, the names settle from wide tracking */
#words > * { opacity: 0; }
#words.show > * { animation: rise 1.3s var(--d, 0s) cubic-bezier(.2, .7, .2, 1) forwards; }
#words.show > .w-name { animation: track 1.7s var(--d) cubic-bezier(.2, .7, .2, 1) forwards; }

/* Start screen: tap to open (needed for sound on phones) */
.gate {
  position: fixed; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  margin: 0; padding: 0; border: 0;
  background: radial-gradient(70% 55% at 50% 50%, rgba(18, 14, 11, .5), rgba(18, 14, 11, .88));
  color: var(--gold);
  font: inherit;
  cursor: pointer;
  transition: opacity .7s ease;
}
.gate[hidden] { display: none; }
.gate.gone { opacity: 0; pointer-events: none; }
.gate-gem {
  width: 20px; height: 20px;
  margin-bottom: 10px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #fff5d2 0%, #ecbd57 40%, #a26d1c 75%, #6a4510 100%);
  box-shadow: 0 0 0 1.5px #1f1409, 0 0 0 2.5px rgba(241, 213, 147, .55), 0 0 24px 6px rgba(241, 190, 90, .3);
  animation: gem 2.8s ease-in-out infinite;
}
.gate-label {
  font-weight: 600; font-size: 15px;
  letter-spacing: .32em; padding-left: .32em;
  text-transform: uppercase;
}
.gate-sound {
  display: inline-flex; align-items: center; gap: 6px;
  font-style: italic; font-weight: 500; font-size: 16px;
  color: rgba(241, 213, 147, .62);
}
.gate-sound svg { width: 18px; height: 18px; }
@keyframes gem {
  50% { box-shadow: 0 0 0 1.5px #1f1409, 0 0 0 2.5px rgba(241, 213, 147, .7), 0 0 36px 12px rgba(241, 190, 90, .45); }
}

/* Calendar choice sheet */
.sheet { position: fixed; inset: 0; z-index: 10; }
.sheet[hidden] { display: none; }
.sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(18, 14, 11, .45);
  opacity: 0; transition: opacity .25s ease;
}
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0 auto; max-width: 480px;
  padding: 22px 16px max(16px, env(safe-area-inset-bottom));
  background: #f6efe5;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .2);
  display: flex; flex-direction: column; gap: 8px;
  transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet.open .sheet-panel { transform: none; }
.sheet-title {
  margin: 0 0 6px; text-align: center;
  font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(42, 33, 27, .6);
}
.opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 14px 18px;
  border: 0; border-radius: 14px;
  background: #fffaf3;
  box-shadow: inset 0 0 0 1px rgba(42, 33, 27, .1);
  color: var(--ink); text-decoration: none;
  font: inherit; font-size: 19px; font-weight: 600; text-align: left;
  cursor: pointer;
}
.opt small { font-size: 15px; font-weight: 500; color: rgba(42, 33, 27, .55); }
.opt-cancel { justify-content: center; background: none; box-shadow: none; color: rgba(42, 33, 27, .65); }

/* Intro (runs once body gets .play) */
.play .dusk { animation: lift 1.2s cubic-bezier(.4, 0, .2, 1) forwards; }
.play .sign::after { animation: sheen 9s 9s cubic-bezier(.45, .05, .35, 1) infinite; }
.play #spec-a { animation: twinkle 6s 1.8s ease-in-out infinite alternate both; }
.play #spec-b { animation: twinkle 6s 4.8s ease-in-out infinite alternate both; }
@keyframes lift { to { opacity: 0; visibility: hidden; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes track {
  from { opacity: 0; letter-spacing: .42em; filter: blur(3px); }
  to   { opacity: 1; letter-spacing: .14em; filter: blur(0); }
}
@keyframes sheen {
  0%        { transform: translateX(-140%) skewX(-14deg); }
  26%, 100% { transform: translateX(320%) skewX(-14deg); }
}
@keyframes twinkle {
  from { opacity: .08; }
  to   { opacity: .95; }
}

/* Reduced motion / #final: everything in its final state */
.still .dusk { display: none; }
.still #words > * { opacity: 1; animation: none; }
.still .spill, .still .sign::after { animation: none; }
.still .spec { opacity: .55; }