/* ------------------------------------------------------------------
   Holly & Lucas — Engagement Drinks
   Palette and type are lifted straight from the printed invite:
   cream paper, navy ink, a handwritten display face and a typewriter serif.
   ------------------------------------------------------------------ */

:root {
  --paper: #fdfcef;
  --ink: #3f4c8f;
  --ink-soft: rgba(63, 76, 143, 0.55);
  --text: #2a2a2a;
  --display: "La Belle Aurore", "Bradley Hand", "Segoe Script", cursive;
  --serif: "Cutive", "Courier Prime", "Courier New", serif;
  --stroke: 2.4;
}

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

html {
  background: var(--paper);
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100svh;
  color: var(--text);
  font-family: var(--serif);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* a whisper of paper grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.invite {
  position: relative;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vh, 5rem) clamp(1.25rem, 5vw, 3rem) 2rem;
  text-align: center;
}

/* ---------- type ---------- */

.eyebrow {
  margin: 0;
  font-size: clamp(0.95rem, 2.4vw, 1.2rem);
  letter-spacing: 0.16em;
  line-height: 1.5;
}

.title {
  margin: 0.4rem 0 0.6rem;
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(3.4rem, 13vw, 6.6rem);
  line-height: 1.25;
  letter-spacing: 0.1em;
}

.title .word {
  display: block;
  position: relative;
  padding: 0.12em 0.1em;
}

.flourish {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -0.02em;
  height: 0.22em;
  overflow: visible;
}

.flourish path,
.ring path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* The circle is drawn around the "12" only: the box is one line-height of the
   digits, and the superscript is lifted out of the flow so it cannot stretch it
   (otherwise the ellipse drifts upward at some font sizes). */
.circled {
  position: relative;
  display: inline-block;
  padding: 0 0.1em;
  line-height: 1;
}

.circled sup {
  position: relative;
  top: -0.5em;
  vertical-align: baseline;
  line-height: 0;
}

.ring {
  position: absolute;
  left: -0.45em;
  right: -0.55em;
  top: -0.48em;
  bottom: -0.24em;
  width: auto;
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.countdown {
  margin-top: 0.9rem !important;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.countdown:empty { display: none; }

.details p {
  margin: 0;
  letter-spacing: 0.14em;
  line-height: 1.5;
}

.date {
  margin-top: clamp(1.5rem, 4vh, 2.5rem) !important;
  font-size: clamp(1.15rem, 3.6vw, 1.75rem);
}

.date sup {
  font-size: 0.55em;
  letter-spacing: 0.08em;
  vertical-align: 0.6em;
}

.venue {
  margin-top: 1.1rem !important;
  font-size: clamp(1rem, 2.8vw, 1.3rem);
}

.time {
  margin-top: 1.1rem !important;
  font-size: clamp(0.95rem, 2.6vw, 1.2rem);
}

/* ---------- buttons ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin-top: clamp(1.5rem, 4vh, 2.25rem);
}

.button {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.button:hover,
.button:focus-visible {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-1px);
  outline: none;
}

/* ---------- scene ---------- */

.scene {
  position: relative;
  width: min(100%, 36rem);
  aspect-ratio: 5 / 4;
  margin: clamp(1.5rem, 4vh, 3rem) auto 0;
}

.notes {
  position: absolute;
  left: 0;
  bottom: 24%;
  margin: 0;
  text-align: left;
  font-size: clamp(0.8rem, 2.2vw, 1.05rem);
  letter-spacing: 0.12em;
  line-height: 1.9;
}

.notes span { display: block; }

.glass-wrap {
  position: absolute;
  left: 38%;
  top: 4%;
  width: 24%;
}

.glass { display: block; width: 100%; height: auto; }

.bottle {
  position: absolute;
  right: 3%;
  bottom: 0;
  width: 28%;
  height: auto;
  transform-origin: 50% 100%;
  transform: rotate(16deg);
}

.ringbox {
  position: absolute;
  left: 56%;
  bottom: -2%;
  width: 22%;
  height: auto;
}

@media (max-width: 600px) {
  .details p { letter-spacing: 0.09em; }
  .date { font-size: 1.1rem; }
  /* the scene keeps its art; the note moves underneath it */
  .scene { aspect-ratio: 1 / 1; margin-bottom: 4.5rem; }
  .notes {
    left: 0;
    right: 0;
    top: 100%;
    bottom: auto;
    margin-top: 1.25rem;
    text-align: center;
  }
  .glass-wrap { left: 8%; top: 6%; width: 30%; }
  .ringbox { left: 38%; bottom: 2%; width: 26%; }
  .bottle { right: 12%; width: 30%; }
}

/* ---------- line-art ---------- */

/* droplets and sparkles may leave the drawing's box */
.drawing { overflow: visible; }

.drawing path,
.drawing circle {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drawing .thin { stroke-width: 1.2; opacity: 0.5; }

.drawing .fill {
  fill: var(--ink);
  stroke: none;
}

.drawing .on-fill {
  stroke: var(--paper);
  stroke-width: 2.2;
}

.drawing .spark { stroke-width: 2; }
.drawing .fine  { stroke-width: 1.5; }

/* ---------- fizz, clink and parallax ---------- */

.drawing .fz {
  fill: var(--ink);
  stroke: none;
  stroke-dasharray: none;
  opacity: 0;
  animation: none;
  transform-box: fill-box;
  transform-origin: center;
}

.bottle.pop .fz {
  animation: fizz 1.1s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
  animation-delay: var(--fd, 0s);
}

.fz:nth-child(1) { --fx: -34px; --fy: -70px; --fd: 0s; }
.fz:nth-child(2) { --fx: -14px; --fy: -92px; --fd: 0.05s; }
.fz:nth-child(3) { --fx:  10px; --fy: -98px; --fd: 0.02s; }
.fz:nth-child(4) { --fx:  30px; --fy: -78px; --fd: 0.08s; }
.fz:nth-child(5) { --fx:  48px; --fy: -52px; --fd: 0.04s; }
.fz:nth-child(6) { --fx: -48px; --fy: -44px; --fd: 0.1s; }
.fz:nth-child(7) { --fx:  -4px; --fy: -116px; --fd: 0.12s; }
.fz:nth-child(8) { --fx:  22px; --fy: -108px; --fd: 0.15s; }

.glass { transform-origin: 50% 92%; }
.glass.clink { animation: clink 0.6s ease-out; }

.glass-wrap, .bottle, .ringbox {
  transition: translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
  .glass-wrap { translate: calc(var(--px, 0) * 7px) calc(var(--py, 0) * 5px); }
  .bottle     { translate: calc(var(--px, 0) * 12px) calc(var(--py, 0) * 7px); }
  .ringbox    { translate: calc(var(--px, 0) * 4px) calc(var(--py, 0) * 3px); }
  .glass-wrap, .bottle { cursor: pointer; }
}

/* ---------- bubbles ---------- */

/* covers the inside of the bowl: from its base up to the liquid surface */
.bubbles {
  position: absolute;
  left: 34%;
  top: 15%;
  width: 32%;
  height: 23%;
  pointer-events: none;
  overflow: hidden;
}

.bubble {
  position: absolute;
  bottom: -10%;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border: 1px solid var(--ink);
  border-radius: 50%;
  opacity: 0;
  animation: rise var(--dur) linear var(--delay) infinite;
}

/* ==================================================================
   Animation timeline (seconds from page load)
   0.3  eyebrow fades up
   1.0  "Engagement" writes itself, then "Drinks" at 2.3
   3.3  date / venue / time, one after another
   3.2  coupe draws, 3.6 bottle, 4.2 ring box
   4.6  buttons, 5.0 dress code; bubbles start once the coupe is drawn
   ================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(0.6rem);
  animation: fade-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: var(--t, 0s);
}

.eyebrow.reveal { --t: 0.3s; }
.date.reveal    { --t: 3.3s; }
.venue.reveal   { --t: 3.7s; }
.time.reveal    { --t: 4.1s; }
.countdown.reveal { --t: 4.5s; }
.actions.reveal { --t: 4.8s; }
.notes.reveal   { --t: 5.2s; }

.flourish path,
.ring path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s ease-in-out forwards;
}

.flourish path { animation-delay: 3.5s; }
.ring path     { animation-delay: 4.3s; animation-duration: 1.1s; }

.title .word {
  clip-path: inset(-20% 100% -20% 0);
  animation: write var(--w) cubic-bezier(0.55, 0.05, 0.4, 0.95) forwards;
  animation-delay: var(--t);
}

.title .word:nth-child(1) { --t: 1s;   --w: 1.5s; }
.title .word:nth-child(2) { --t: 2.3s; --w: 1.1s; }

.drawing path,
.drawing circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.1s ease-in-out forwards;
  animation-delay: calc(var(--t) + var(--d, 0s));
}

.drawing .fill {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 0;
  animation: appear 0.6s ease forwards;
  animation-delay: calc(var(--t) + var(--d, 0s));
}

.glass   { --t: 3.2s; }
.bottle  { --t: 3.6s; }
.ringbox { --t: 4.2s; }

/* per-stroke offsets, in document order */
.glass > :nth-child(1) { --d: 0s; }
.glass > :nth-child(2) { --d: 0.4s; }
.glass > :nth-child(3) { --d: 0.9s; }
.glass > :nth-child(4) { --d: 1.1s; }
.glass > :nth-child(5) { --d: 1.2s; }
.glass > :nth-child(6) { --d: 1.3s; }
.glass > :nth-child(7) { --d: 1.8s; }
.glass > :nth-child(8) { --d: 1.6s; }

.bottle > :nth-child(1)  { --d: 0s; }
.bottle > :nth-child(2)  { --d: 0.2s; }
.bottle > :nth-child(3)  { --d: 0.3s; }
.bottle > :nth-child(4)  { --d: 0.5s; }
.bottle > :nth-child(5)  { --d: 0.8s; }
.bottle > :nth-child(6)  { --d: 1.2s; }
.bottle > :nth-child(7)  { --d: 1.5s; }
.bottle > :nth-child(8)  { --d: 1.9s; }
.bottle > :nth-child(9)  { --d: 2.3s; }
.bottle > :nth-child(10) { --d: 2.6s; }
.bottle > :nth-child(11) { --d: 1.4s; }
.bottle > :nth-child(12) { --d: 1.9s; }
.bottle > :nth-child(13) { --d: 2.5s; }

.ringbox > :nth-child(1) { --d: 0s; }
.ringbox > :nth-child(2) { --d: 0.4s; }
.ringbox > :nth-child(3) { --d: 0.8s; }
.ringbox > :nth-child(4) { --d: 1s; }
.ringbox > :nth-child(5) { --d: 1.3s; }
.ringbox > :nth-child(6)  { --d: 1.6s; }
.ringbox > :nth-child(7)  { --d: 2s; }
.ringbox > :nth-child(8)  { --d: 2.3s; }
.ringbox > :nth-child(9)  { --d: 2.6s; }
.ringbox > :nth-child(10) { --d: 3s; }

/* once drawn, the scene breathes */
.glass-wrap { animation: float 6s ease-in-out 6s infinite; }
.bottle     { animation: sway 7s ease-in-out 7s infinite; }
.ringbox .spark {
  transform-origin: 117px 89px;
  transform-box: view-box;
  animation: draw 1.1s ease-in-out forwards, twinkle 2.6s ease-in-out 7s infinite;
  animation-delay: calc(var(--t) + var(--d)), 7s;
}

@keyframes fade-up {
  to { opacity: 1; transform: none; }
}

@keyframes write {
  to { clip-path: inset(-20% -4% -20% 0); }
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

@keyframes appear {
  to { opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5%); }
}

@keyframes sway {
  0%, 100% { transform: rotate(16deg); }
  50%      { transform: rotate(13.5deg); }
}

@keyframes twinkle {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(0.4); opacity: 0.3; }
}

@keyframes fizz {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.4); }
  10%  { opacity: 0.9; }
  60%  { opacity: 0.8; }
  100% { opacity: 0;   transform: translate(var(--fx), var(--fy)) scale(1); }
}

@keyframes clink {
  0%   { transform: rotate(0); }
  25%  { transform: rotate(-5deg); }
  55%  { transform: rotate(3.5deg); }
  80%  { transform: rotate(-1.5deg); }
  100% { transform: rotate(0); }
}

@keyframes rise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  15%  { opacity: 0.9; }
  85%  { opacity: 0.7; }
  100% { transform: translateY(-900%) scale(1); opacity: 0; }
}

/* ---------- reduced motion: show the finished invite ---------- */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .title .word,
  .drawing path,
  .drawing circle,
  .drawing .fill,
  .glass-wrap,
  .bottle,
  .ringbox .spark,
  .flourish path,
  .ring path,
  .fz,
  .glass,
  .bubble {
    animation: none !important;
  }
  .reveal { opacity: 1; transform: none; }
  .title .word { clip-path: none; }
  .drawing path, .drawing circle, .flourish path, .ring path { stroke-dashoffset: 0; }
  .glass-wrap, .bottle, .ringbox { translate: none; transition: none; }
  .drawing .fill { opacity: 1; }
  .bubble { display: none; }
}