/* style.css: every style for the baptism invitation (index.html). Mobile-first;
   769px+ shows the desktop notice instead of the page. Class names are shared
   with script.js (is-locked, is-loading, is-intro, is-in, is-visible). Painted
   pigment lives on <canvas class="paint"> layers drawn by paint.js. */

/* ===== FONTS =====
   Vardi: calligraphic Georgian display (name, titles, times). Irubaqidze: body.
   `block` is only safe because the loader covers the block period. */
@font-face {
  font-family: 'Vardi';
  src: url('fonts/vardi.woff2') format('woff2');
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: 'Irubaqidze';
  src: url('fonts/irubaqidze.woff2') format('woff2');
  font-weight: 400;
  font-display: block;
}

/* ===== TOKENS =====
   Pulled from the hero video: marble (pearl), pool water (lagoon, aqua),
   bougainvillea (accent). The accent is the only saturated UI colour. */
:root {
  --vh: 1vh;
  --pearl: #f6f5f2;
  --ink: #0f3d44;
  --ink-soft: #46676c;
  --aqua: #3fa2a8;
  --accent: #a8327e;
  --gold: #b88f33;
  --white: #fdfdfb;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Rounded top lip of every sheet; used as both radius and negative overlap. */
  --lip: 30px;
  --display: 'Vardi', 'Irubaqidze', serif;
  --body: 'Irubaqidze', 'Noto Serif Georgian', serif;
}

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

html, body { overscroll-behavior-y: none; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.8s ease;
}
html.can-scroll { scrollbar-color: rgba(15, 61, 68, 0.35) var(--pearl); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background-color: var(--pearl); }
::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 6px; transition: background-color 0.8s ease; }
html.can-scroll ::-webkit-scrollbar-thumb { background-color: rgba(15, 61, 68, 0.35); }

body {
  margin: 0;
  background-color: var(--pearl);
  background-image: url('paper.jpg');
  background-size: 512px 512px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

p, h1, h2, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* Intro lock: JS traps the gesture (script.js). Never position:fixed or
   overflow:hidden here; Chrome iOS from a chat app freezes a short viewport. */
html.is-locked, body.is-locked { overscroll-behavior: none; touch-action: none; }

/* ===== LOADER ===== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pearl);
  transition: opacity 0.7s ease;
}
.loader.is-done { opacity: 0; pointer-events: none; }
.loader.is-gone { display: none; }
.loader__ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(15, 61, 68, 0.12);
  border-top-color: var(--aqua);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background-color: #2d6f74;
}
.vh-lock .hero { min-height: calc(var(--vh) * 100); }

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* A soft base under the painted mist so the name stays legible on any frame. */
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(246, 245, 242, 0.5) 0%, rgba(246, 245, 242, 0.18) 34%, rgba(246, 245, 242, 0) 48%,
    rgba(10, 48, 56, 0) 70%, rgba(10, 48, 56, 0.35) 100%);
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero.is-intro .hero__veil { opacity: 1; }

.hero__mist {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 2.5%;
  padding: 0 22px;
  text-align: center;
}
/* Eyebrow and date sit on the thinnest part of the mist, over a busy frame, so
   they get full ink and a paper-coloured halo (the watercolor style's own way
   of keeping a hand note legible over a painting) instead of a box. */
.hero__eyebrow,
.hero__date {
  text-shadow: 0 0 2px rgba(246, 245, 242, 0.95), 0 0 8px rgba(246, 245, 242, 0.9), 0 0 18px rgba(246, 245, 242, 0.8);
}
.hero__eyebrow {
  font-size: 17px;
  letter-spacing: 0.14em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.1s var(--ease) 0.7s, transform 1.1s var(--ease) 0.7s;
}
.hero__name { margin: 4px auto 0; width: 90%; max-width: 400px; line-height: 0; font-weight: 400; }
.hero__name-svg { width: 100%; height: auto; overflow: visible; }
.hero__name-svg path { vector-effect: non-scaling-stroke; }
.hero__date {
  margin-top: 8px;
  font-size: 20px;
  letter-spacing: 0.03em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.1s var(--ease) 3.4s, transform 1.1s var(--ease) 3.4s;
}
.hero.is-intro .hero__eyebrow,
.hero.is-intro .hero__date { opacity: 1; transform: none; }

.hero__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--lip) + 3.5%);   /* clear of the first sheet's lip */
  padding: 0 22px env(safe-area-inset-bottom);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.2s var(--ease) 2.2s, transform 1.2s var(--ease) 2.2s;
}
.hero.is-intro .hero__bottom { opacity: 1; transform: none; }

.count { display: flex; justify-content: center; gap: 20px; color: var(--white); text-shadow: 0 1px 3px rgba(8, 40, 46, 0.45), 0 2px 18px rgba(8, 40, 46, 0.6); }
.count__cell { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.count__num { font-family: var(--display); font-size: 50px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.count__lbl { font-size: 14px; letter-spacing: 0.06em; }

/* Low Power Mode tap cover. An opaque still of the video's first frame, so the
   guest never sees the stalled <video> (iOS draws its own play glyph on it). The
   poster is that same frame and the crop matches the video's object-fit, so the
   swap to the playing video under it is invisible; the tap starts the video and
   the intro together. */
.intro-tap {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 22%;
  background-color: #2d6f74;
  background-image: url('hero-poster.jpg');
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  cursor: pointer;
}
.intro-tap.is-visible { opacity: 1; pointer-events: auto; }
/* Backup for the same case: never show WebKit's own start-playback button. */
.hero__video::-webkit-media-controls-start-playback-button { display: none; -webkit-appearance: none; }
.hero__video::-webkit-media-controls { display: none; }
.intro-tap__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background-color: rgba(246, 245, 242, 0.92);
  color: var(--ink);
  font-size: 16px;
  box-shadow: 0 10px 34px rgba(15, 61, 68, 0.22);
}
.intro-tap__pill .icon { font-size: 22px; color: var(--accent); }
.intro-tap__pill::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 1px solid rgba(246, 245, 242, 0.9);
  animation: tap-ring 2.2s var(--ease) infinite;
}
@keyframes tap-ring {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.35, 1.7); opacity: 0; }
}

/* ===== SECTIONS ===== */
/* ===== SHEETS =====
   Every block below the hero is a sheet of paper laid over the one before it
   (same build as the ucha-megi site): a rounded top lip, an upward shadow and a
   negative margin so it rides over its neighbour. DOM order is paint order, later
   on top, which is exactly what the overlap needs. Sheets are opaque; separation
   comes from the lip, the shadow and a step in paper tone. The tone is a colour
   multiplied into the shared paper texture, so every sheet keeps its grain.
   z-index also makes each sheet a stacking context, so the multiply-blended
   .paint canvas inside blends with this sheet's own paper and nothing else. */
.section,
.footer {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--lip) * -1);
  border-top-left-radius: var(--lip);
  border-top-right-radius: var(--lip);
  background-color: var(--sheet-tone, #ffffff);
  background-image: url('paper.jpg');
  background-size: 512px 512px;
  background-blend-mode: multiply;
  box-shadow: 0 -14px 32px rgba(15, 61, 68, 0.14);
}
/* Catches the light along the lip so the fold still reads where two sheets
   are nearly the same tone. */
.section::before,
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 11%;
  right: 11%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.85);
  z-index: 1;
}
/* Tones step through colours of the video: marble, pool water, bougainvillea. */
.schedule { --sheet-tone: #eef6f5; }
.dress    { --sheet-tone: #fbf1f6; }
.confirm  { --sheet-tone: #edf4f4; }
.footer   { --sheet-tone: #e3eeee; }

.section { padding: 92px 24px; }
.section__inner { position: relative; z-index: 1; }

/* Pigment layers multiply into the paper like real watercolor. */
.paint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* clips strokes (the hanging sprigs) to the sheet's rounded lip */
  border-radius: var(--lip) var(--lip) 0 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.3;
  color: var(--ink);
}
.eyebrow { font-size: 15px; letter-spacing: 0.12em; color: var(--ink-soft); }

/* Vardi leans like an italic: its swashes run ~0.3em past the last letter's
   advance and ~0.1em before the first, so a box sized to the advances (a
   fit-content word, an inline-block) crops them. Every Vardi box gets that room
   as padding, so the ink always sits inside its own box. */
.title, .slot__time, .place__name, .dress__word, .party__big .w, .footer__name, .count__num {
  padding-left: 0.12em;
  padding-right: 0.34em;
}

/* Scroll reveal: script.js adds .is-in once, via IntersectionObserver. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Welcome: text kept to the left so the sprig owns the top-right corner. */
.welcome { padding-top: 128px; }
.welcome .title { max-width: 250px; }
.welcome__text { margin-top: 20px; max-width: 290px; font-size: 19px; line-height: 1.75; }

/* Schedule */
.schedule .title { text-align: center; }
.slot { position: relative; margin-top: 54px; max-width: 72%; }
.slot--right { margin-left: auto; text-align: right; }
.slot__time { font-family: var(--display); font-size: 62px; line-height: 1.15; }
.slot__name { margin-top: 2px; font-size: 19px; color: var(--ink-soft); font-weight: 900; }

/* Place */
.place { text-align: center; }
.place__name { font-family: var(--display); font-size: 104px; line-height: 1.2; color: var(--ink); }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  background-color: var(--ink);
  color: var(--pearl);
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(15, 61, 68, 0.2);
  transition: opacity 1.1s var(--ease) var(--d, 0s), transform 0.25s var(--ease);
}
.btn .icon { font-size: 19px; }
.btn:active { transform: scale(0.97); }
.parking {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 64px;
  padding: 30px 14px;
  text-align: left;
}
.parking__icon { font-size: 44px; color: var(--accent); }
.parking__text { font-size: 21px; line-height: 1.55; color: var(--ink); }

/* Dress code */
.dress .title { text-align: right; }
.glitter { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.dress__words { margin-top: 30px; }
.dress__word {
  display: block;
  width: fit-content;
  font-family: var(--display);
  font-size: 42px;
  line-height: 1.45;
  color: var(--ink);
}
.dress__word + .dress__word { margin-top: 20px; }
.dress__word:nth-child(2) { margin-left: auto; margin-right: auto; }
.dress__word:nth-child(3) { margin-left: auto; }

/* Party: the words bounce in on .is-in, then keep a small dance step. */
.party { padding: 120px 24px; text-align: center; overflow: visible; cursor: pointer; user-select: none; -webkit-user-select: none; }
.party__petals {
  position: absolute;
  left: 0;
  right: 0;
  top: -140px;
  bottom: -140px;
  width: 100%;
  height: calc(100% + 280px);
  pointer-events: none;
  z-index: 3;
}
.party__big {
  margin-top: 18px;
  font-family: var(--display);
  font-size: 54px;
  line-height: 1.3;
  color: var(--ink);
}
.party__big .w {
  display: inline-block;
  margin: 0 -0.12em;              /* the lean padding doubles as the word gap */
  opacity: 0;
  transform: translateY(40px) rotate(-6deg) scale(0.85);
  transition: opacity 0.7s ease calc(var(--i) * 0.12s), transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.12s);
}
.party__big .w:nth-child(3) { color: var(--accent); }
.party__big.is-in .w { opacity: 1; transform: none; }
.party__big.is-dancing .w { animation: dance 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * -0.36s); }
@keyframes dance {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(-2deg); }
  75% { transform: translateY(2px) rotate(2deg); }
}

/* Confirmation */
.confirm { padding: 100px 32px; text-align: center; }
.confirm__icon { font-size: 40px; color: var(--accent); }
.confirm__text { margin: 16px auto 0; max-width: 24ch; font-size: 21px; line-height: 1.6; }

/* Footer */
.footer { padding: 150px 24px calc(40px + env(safe-area-inset-bottom)); text-align: center; }
.footer__name { position: relative; font-family: var(--display); font-size: 46px; line-height: 1.3; }
.footer__credit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 30px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink);
  opacity: 0.3;
  transition: opacity 0.3s ease;
}
.footer__credit:hover, .footer__credit:active { opacity: 0.6; }
.footer__logo { width: 18px; height: auto; }

/* ===== DESKTOP NOTICE ===== */
.desktop-notice {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background-color: var(--pearl);
  background-image: url('paper.jpg');
}
.desktop-notice p { font-size: 15px; line-height: 1.9; color: var(--ink); }
.desktop-notice__logo { width: 52px; height: auto; opacity: 0.8; margin-bottom: 18px; }
.desktop-notice__sub { margin-top: 6px; font-size: 13px; color: var(--ink-soft) !important; }

/* ===== BREAKPOINTS ===== */
@media (min-width: 481px) {
  .title { font-size: 50px; }
  .slot__time { font-size: 70px; }
  .dress__word { font-size: 50px; }
  .party__big { font-size: 62px; }
}

@media (min-width: 769px) {
  .desktop-notice { display: flex; }
  main, .loader { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .party__big .w { transition: none; opacity: 1; transform: none; }
  .party__big.is-dancing .w, .intro-tap__pill::after { animation: none; }
  .hero__eyebrow, .hero__date, .hero__bottom, .hero__veil { transition: none; }
}