/* =========================================================
   "Muhabbat reysi" — boarding-pass wedding invitation
   Tabrikon.uz
   ========================================================= */

:root {
  --navy: #0f1d30;
  --navy-2: #172840;
  --navy-3: #22364f;
  --ivory: #f3eee4;
  --ivory-2: #ebe4d6;
  --cream: #ddd0b6;
  --taupe: #a49b90;
  --ink: #1b1f27;
  --muted: #6c675f;
  --line: rgba(27, 31, 39, .28);
  --line-light: rgba(243, 238, 228, .28);
  --red: #a3313a;

  --f-caps: 'Marcellus', 'Cormorant Garamond', serif;
  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-sans: 'Montserrat', system-ui, sans-serif;
  --f-script: 'Pinyon Script', cursive;

  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --app-w: 480px;

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

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f-sans);
  color: var(--ink);
  background: #d7d5d0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}
body.is-locked { overflow: hidden; height: 100vh; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ol, ul { list-style: none; }

.ico { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: middle; }
.script { font-family: var(--f-script); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ---------- shared bits ---------- */
.label {
  font-family: var(--f-sans);
  font-size: .64rem; font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--muted);
}
.label.center { text-align: center; }
.label.tight { padding: 10px 0; }
.label.light { color: rgba(243, 238, 228, .7); }

.dash { border-top: 1.5px dashed var(--line); margin: 12px 0; }

.divider { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.divider span { flex: 1; height: 1px; background: currentColor; opacity: .45; }
.divider .ico { font-size: 1rem; }

.h-serif {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: clamp(1.45rem, 6vw, 1.75rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
}
.h-serif.light { color: var(--ivory); }

.lead {
  font-family: var(--f-serif);
  font-size: 1.08rem;
  line-height: 1.6;
  text-align: center;
  color: var(--muted);
  max-width: 360px;
  margin: 14px auto 0;
}
.lead.light { color: rgba(243, 238, 228, .82); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px;
  font-family: var(--f-sans);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  border-radius: 4px;
  transition: transform .35s var(--ease), background .35s, color .35s, box-shadow .35s;
  position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-navy { background: var(--navy); color: var(--ivory); box-shadow: 0 8px 20px -10px rgba(15,29,48,.7); }
.btn-line { border: 1px solid var(--navy); color: var(--navy); }
.btn-ghost { border: 1px solid var(--line-light); color: var(--ivory); }
.btn-ghost:hover { background: rgba(243,238,228,.08); }
.btn.wide { width: 100%; }

/* =========================================================
   INTRO
   ========================================================= */
.intro {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse at 50% 120%, #2b4466 0%, transparent 60%),
    radial-gradient(ellipse at 20% -10%, #24395a 0%, transparent 55%),
    var(--navy);
  color: var(--ivory);
  overflow: hidden;
  transition: opacity .9s ease .9s, visibility 0s linear 1.8s;
}
.intro.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }

.intro-sky .cloud {
  position: absolute; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(243,238,228,.16), transparent 70%);
  filter: blur(6px);
  animation: drift linear infinite;
}
.cloud.c1 { width: 340px; height: 90px; top: 12%; left: -360px; animation-duration: 38s; }
.cloud.c2 { width: 260px; height: 70px; top: 32%; left: -280px; animation-duration: 30s; animation-delay: -14s; }
.cloud.c3 { width: 420px; height: 110px; top: 68%; left: -440px; animation-duration: 46s; animation-delay: -8s; }
.cloud.c4 { width: 200px; height: 60px; top: 84%; left: -220px; animation-duration: 26s; animation-delay: -20s; }
@keyframes drift { to { transform: translateX(calc(100vw + 480px)); } }

.intro-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 18px;
  width: 100%;
}
.intro-kicker {
  font-family: var(--f-script);
  font-size: 2.1rem;
  color: var(--cream);
  margin-bottom: 18px;
  opacity: 0; transform: translateY(10px);
  animation: in-up .9s var(--ease) .2s forwards;
}

.pass {
  display: flex;
  width: min(360px, 100%);
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.45));
  opacity: 0; transform: translateY(40px) rotate(-3deg);
  animation: pass-in 1.1s var(--ease) .35s forwards;
}
@keyframes pass-in { to { opacity: 1; transform: none; } }
.pass > div {
  background: var(--ivory) var(--paper);
  color: var(--ink);
}
.pass-main {
  flex: 1;
  padding: 18px 18px 16px;
  border-radius: 12px 0 0 12px;
  -webkit-mask: radial-gradient(circle 9px at 100% 0, #0000 98%, #000) top right / 100% 51% no-repeat,
                radial-gradient(circle 9px at 100% 100%, #0000 98%, #000) bottom right / 100% 51% no-repeat;
          mask: radial-gradient(circle 9px at 100% 0, #0000 98%, #000) top right / 100% 51% no-repeat,
                radial-gradient(circle 9px at 100% 100%, #0000 98%, #000) bottom right / 100% 51% no-repeat;
}
.pass-stub {
  width: 84px;
  padding: 18px 10px 14px;
  border-radius: 0 12px 12px 0;
  border-left: 2px dashed var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
  text-align: center;
  transform-origin: 0% 100%;
  -webkit-mask: radial-gradient(circle 9px at 0 0, #0000 98%, #000) top left / 100% 51% no-repeat,
                radial-gradient(circle 9px at 0 100%, #0000 98%, #000) bottom left / 100% 51% no-repeat;
          mask: radial-gradient(circle 9px at 0 0, #0000 98%, #000) top left / 100% 51% no-repeat,
                radial-gradient(circle 9px at 0 100%, #0000 98%, #000) bottom left / 100% 51% no-repeat;
}
.pass-stub small { font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pass-stub b { font-family: var(--f-caps); font-size: 1.1rem; font-weight: 400; }
.pass-barcode {
  width: 100%; height: 86px;
  display: flex; gap: 2px; align-items: stretch; justify-content: center;
  margin-bottom: 10px;
}
.pass-barcode i, .barcode i { display: block; background: var(--ink); }
.pass-barcode { flex-direction: column; }
.pass-barcode i { width: 100%; }

.pass-top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .55rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted);
}
.pass-top .ico { font-size: .9rem; color: var(--ink); }
.pass-route {
  display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 10px;
  margin: 16px 0 10px;
}
.pass-route small { display: block; font-size: .5rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.pass-route strong { font-family: var(--f-caps); font-weight: 400; font-size: 1.35rem; letter-spacing: .04em; }
.pass-route .right { text-align: right; }
.pass-route-line { display: flex; align-items: center; gap: 4px; padding-bottom: 8px; color: var(--ink); }
.pass-route-line span { flex: 1; border-top: 1.5px dashed var(--line); }
.pass-route-line .ico { font-size: .95rem; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }

.pass-names {
  font-family: var(--f-caps); font-size: 1rem; letter-spacing: .14em; text-transform: uppercase;
  text-align: center; padding: 8px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pass-names em { font-family: var(--f-script); font-style: normal; text-transform: none; font-size: 1.3rem; letter-spacing: 0; padding: 0 4px; }
.pass-meta { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 10px; }
.pass-meta small { display: block; font-size: .5rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.pass-meta b { font-family: var(--f-caps); font-weight: 400; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.pass-meta div:last-child { text-align: right; }

.intro-btn {
  margin-top: 28px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px;
  background: var(--ivory);
  color: var(--navy);
  font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  border-radius: 50px;
  box-shadow: 0 0 0 0 rgba(243,238,228,.45);
  opacity: 0;
  animation: in-up .9s var(--ease) .9s forwards, ring 2.4s ease-out 2s infinite;
  transition: transform .3s var(--ease);
}
.intro-btn:hover { transform: scale(1.04); }
.intro-btn .ico { font-size: 1rem; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(243,238,228,.45); } 100% { box-shadow: 0 0 0 18px rgba(243,238,228,0); } }
.intro-hint {
  margin-top: 12px;
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(243,238,228,.55);
  opacity: 0; animation: in-up .9s var(--ease) 1.1s forwards;
}
@keyframes in-up { to { opacity: 1; transform: none; } }

.intro-plane {
  position: absolute; z-index: 3;
  width: 64px; height: 64px;
  left: -90px; top: 70%;
  color: var(--ivory);
  opacity: 0;
}

/* boarding sequence */
.intro.is-boarding .intro-kicker,
.intro.is-boarding .intro-btn,
.intro.is-boarding .intro-hint { animation: none; opacity: 0; transition: opacity .3s; }
.intro.is-boarding .pass-stub { animation: tear 1.1s cubic-bezier(.5,0,.75,0) forwards; }
.intro.is-boarding .pass-main { animation: lift 1.4s var(--ease) .45s forwards; }
.intro.is-boarding .intro-plane { animation: takeoff 1.7s cubic-bezier(.45,.05,.4,1) .25s forwards; }
@keyframes tear {
  0% { transform: none; }
  18% { transform: rotate(-4deg) translateX(2px); }
  100% { transform: translate(60px, 110vh) rotate(38deg); opacity: .6; }
}
@keyframes lift {
  0% { transform: none; }
  100% { transform: translateY(-40vh) scale(.6) rotate(-6deg); opacity: 0; }
}
@keyframes takeoff {
  0% { opacity: 0; transform: translate(0, 0) rotate(-14deg) scale(.6); }
  15% { opacity: 1; }
  100% { opacity: 1; transform: translate(calc(100vw + 180px), -70vh) rotate(-24deg) scale(1.4); }
}

/* =========================================================
   LAYOUT
   ========================================================= */
.layout { min-height: 100vh; }
.side { display: none; }

.app {
  position: relative;
  width: 100%;
  max-width: var(--app-w);
  margin: 0 auto;
  background: var(--navy);
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(15,29,48,.55);
}

.sec { position: relative; padding: 34px 20px; }
.sec-navy { background: var(--navy); color: var(--ivory); }
.sec-ivory { background: var(--ivory) var(--paper); color: var(--ink); --notch: var(--ivory); }
.sec-hero { padding-top: 26px; }

/* =========================================================
   TICKET
   ========================================================= */
.ticket {
  --notch: var(--navy);
  position: relative;
  background: var(--ivory) var(--paper);
  color: var(--ink);
  padding: 30px 24px;
  -webkit-mask:
    radial-gradient(circle 5px at 50% 0, #0000 97%, #000) top / 15px 51% repeat-x,
    radial-gradient(circle 5px at 50% 100%, #0000 97%, #000) bottom / 15px 51% repeat-x;
          mask:
    radial-gradient(circle 5px at 50% 0, #0000 97%, #000) top / 15px 51% repeat-x,
    radial-gradient(circle 5px at 50% 100%, #0000 97%, #000) bottom / 15px 51% repeat-x;
}
.ticket::before { /* inner frame */
  content: ''; position: absolute; inset: 12px 10px;
  border: 1px solid rgba(27,31,39,.08);
  pointer-events: none;
}
.tear {
  position: relative;
  border-top: 1.5px dashed var(--line);
  margin: 20px -24px;
}
.tear::before, .tear::after {
  content: ''; position: absolute; top: -12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--notch);
}
.tear::before { left: -11px; }
.tear::after { right: -11px; }

/* hero ticket */
.ticket-hero { padding: 30px 24px 26px 36px; text-align: center; }
.vertical-label {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: .55rem; font-weight: 600; letter-spacing: .4em; text-transform: uppercase;
  color: var(--muted);
}
.vertical-label span { display: inline-block; transform: rotate(90deg); margin-top: 6px; }
.ico-plane-top { font-size: 1.15rem; color: var(--ink); transform: rotate(-90deg); margin: 2px auto 0; display: block; }

.globe { position: relative; width: 112px; height: 112px; margin: 10px auto 6px; }
.globe-svg { width: 100%; height: 100%; overflow: visible; }
.g-fill { fill: rgba(27,31,39,.035); }
.g-lat ellipse, .g-lat line, #meridians ellipse, .g-ring { fill: none; stroke: var(--ink); stroke-width: .8; opacity: .55; }
.g-ring { stroke-width: 1.3; opacity: .85; }
.globe-orbit {
  position: absolute; inset: -14px;
  offset-path: none;
  animation: orbit 9s linear infinite;
}
.globe-orbit .ico {
  position: absolute; top: 0; left: 50%;
  width: 16px; height: 16px; margin-left: -8px;
  color: var(--ink);
}
@keyframes orbit { to { transform: rotate(360deg); } }

.names {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: clamp(2.2rem, 11vw, 2.85rem);
  line-height: 1.05;
  letter-spacing: .05em;
  margin: 6px 0 18px;
  color: var(--ink);
}
.names .name { display: block; overflow: hidden; padding: .04em 0; }
.names .name .ch {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .9s var(--ease);
}
.names.is-in .name .ch { transform: none; }
.names .and {
  display: block;
  font-size: .62em;
  line-height: 1;
  margin: -.05em 0 -.02em;
  color: var(--ink);
}

.flight-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  text-align: left;
}
.flight-grid div { padding: 9px 10px; min-width: 0; }
.flight-grid div:nth-child(odd) { border-right: 1px solid var(--line); }
.flight-grid div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.flight-grid small, .dest-grid small, .field small {
  display: block;
  font-size: .5rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.flight-grid b, .dest-grid b {
  display: block;
  font-family: var(--f-sans); font-weight: 500;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* split-flap characters */
.flap-ch { display: inline-block; min-width: .2em; }
.flap-ch.spin { animation: flap .09s linear; }
@keyframes flap { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }

.hero-foot {
  display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto;
  align-items: center; gap: 0 4px;
  margin: 18px 0 10px;
  position: relative;
}
.stamp { grid-row: 1 / 3; width: 92px; height: 92px; color: #26313f; }
.stamp svg, .mini-stamp svg { width: 100%; height: 100%; overflow: visible; }
.s-ring { fill: none; stroke: currentColor; stroke-width: 2.2; }
.s-ring.thin { stroke-width: 1.2; }
.s-text { font-family: var(--f-sans); font-size: 10px; font-weight: 600; letter-spacing: 2px; fill: currentColor; }
.s-text.sm { font-size: 9px; }
.s-plane { color: currentColor; }
.waves { width: 100%; height: 40px; overflow: visible; }
.waves path { fill: none; stroke: #26313f; stroke-width: 1.2; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.4s var(--ease); }
.waves.is-in path { stroke-dashoffset: 0; }
.waves.is-in path:nth-child(2) { transition-delay: .15s; }
.waves.is-in path:nth-child(3) { transition-delay: .3s; }
.signature {
  font-size: 1.9rem; line-height: 1;
  text-align: right; padding-right: 4px;
  color: var(--ink);
}

/* stamp thump */
[data-reveal="stamp"] { opacity: 0; transform: scale(2.4) rotate(-38deg); }
[data-reveal="stamp"].is-in { animation: thump .7s var(--ease-back) forwards; }
@keyframes thump {
  0% { opacity: 0; transform: scale(2.4) rotate(-38deg); }
  60% { opacity: .9; transform: scale(.94) rotate(-10deg); }
  80% { transform: scale(1.03) rotate(-13deg); }
  100% { opacity: .82; transform: scale(1) rotate(-12deg); }
}

/* =========================================================
   LETTER + PHOTO
   ========================================================= */
.sec-letter { padding-top: 26px; text-align: center; }

.photo {
  position: relative;
  margin: 26px 0 0;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--navy-2);
}
.photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.12);
  transition: transform 2.4s var(--ease), filter 1.2s;
}
.photo.is-in img { transform: scale(1.02); }
.photo:hover img { filter: grayscale(.2); }
.photo.has-img .photo-ph { display: none; }
.photo-ph { position: absolute; inset: 0; overflow: hidden; }

.ph-sky { background: linear-gradient(180deg, #d9d6cf 0%, #b9b6ae 55%, #8f8c86 100%); }
.ph-sky::after { /* runway */
  content: ''; position: absolute; left: -10%; right: -10%; bottom: 0; height: 30%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 26px, transparent 26px 58px) center 55% / 100% 3px no-repeat,
    linear-gradient(180deg, #6e6b66, #4a4844);
  transform: perspective(240px) rotateX(46deg);
  transform-origin: bottom;
}
.ph-cloud { position: absolute; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.75), transparent 70%); filter: blur(4px); }
.ph-cloud.a { width: 180px; height: 50px; top: 14%; left: -40px; animation: drift-sm 22s linear infinite; }
.ph-cloud.b { width: 140px; height: 40px; top: 32%; left: -60px; animation: drift-sm 30s linear infinite -12s; }
@keyframes drift-sm { to { transform: translateX(520px); } }
.ph-plane {
  position: absolute; width: 74px; height: 74px; color: #2c2e33;
  left: 8%; top: 40%;
  animation: glide 7s ease-in-out infinite;
}
@keyframes glide {
  0% { transform: translate(0, 10px) rotate(-8deg); }
  50% { transform: translate(150px, -24px) rotate(-14deg); }
  100% { transform: translate(0, 10px) rotate(-8deg); }
}
.ph-caption {
  position: absolute; right: 18px; bottom: 34%;
  font-size: 2rem; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.ph-venue { background: linear-gradient(180deg, #e7e2d8, #cfc8bb); display: grid; place-items: center; }
.ph-building { width: 84%; color: #3a3d44; }
.ph-building path, .ph-building circle { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2.6s var(--ease) .2s; }
.photo.is-in .ph-building path, .photo.is-in .ph-building circle { stroke-dashoffset: 0; }

/* flight paths */
.flight-path { position: relative; margin: 4px -8px 0; color: var(--ivory); }
.flight-path svg { display: block; width: 100%; height: auto; overflow: visible; }
.fp-dash { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 5 6; opacity: .75; vector-effect: non-scaling-stroke; }
.fp-mask { fill: none; stroke: #fff; stroke-width: 10; }
.fp-plane { color: currentColor; opacity: 0; transition: opacity .3s; }
.flight-path.is-flying .fp-plane { opacity: 1; }
.fp-2 { margin-top: 10px; }

/* =========================================================
   CALENDAR + COUNTDOWN
   ========================================================= */
.sec-wait { text-align: center; padding-top: 18px; }
.card {
  background: var(--ivory) var(--paper);
  color: var(--ink);
  border-radius: 18px;
  padding: 22px 20px 20px;
  margin-top: 24px;
}
.cal-title { font-family: var(--f-caps); font-size: 1.15rem; letter-spacing: .14em; margin-bottom: 12px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; }
.cal-head span { font-size: .62rem; font-weight: 600; letter-spacing: .08em; color: var(--muted); padding-bottom: 6px; }
.cal-days span {
  position: relative;
  font-family: var(--f-sans); font-size: .82rem;
  height: 32px; display: grid; place-items: center;
  opacity: 0; transform: translateY(8px) scale(.8);
}
.calendar.is-in .cal-days span { animation: day-in .5s var(--ease-back) forwards; animation-delay: calc(var(--i) * 22ms + .15s); }
@keyframes day-in { to { opacity: 1; transform: none; } }
.cal-days span.is-day { color: #fff; font-weight: 600; z-index: 1; }
.cal-days span.is-day svg {
  position: absolute; left: 50%; top: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  z-index: -1; overflow: visible;
}
.cal-days span.is-day svg path {
  fill: var(--red); fill-opacity: 0;
  stroke: var(--red); stroke-width: 1.4;
  stroke-dasharray: 80; stroke-dashoffset: 80;
}
.calendar.is-in .cal-days span.is-day svg path {
  animation: heart-draw 1.2s var(--ease) 1.1s forwards, heart-fill .5s ease 2.1s forwards;
}
.calendar.is-in .cal-days span.is-day svg { animation: beat 1.4s ease-in-out 2.6s infinite; }
@keyframes heart-draw { to { stroke-dashoffset: 0; } }
@keyframes heart-fill { to { fill-opacity: 1; } }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }

.cal-date { font-family: var(--f-caps); font-size: 1.7rem; letter-spacing: .08em; margin-top: 2px; }
.cal-heart { color: var(--ink); font-size: .9rem; margin-top: 4px; animation: beat 1.6s ease-in-out infinite; }

.countdown {
  display: flex; justify-content: center; align-items: flex-start; gap: 6px;
  margin: 26px 0 22px;
}
.countdown div { min-width: 56px; }
.countdown b {
  display: block;
  font-family: var(--f-caps); font-weight: 400;
  font-size: 1.9rem; line-height: 1.1;
  color: var(--ivory);
  perspective: 300px;
}
.countdown b.tick { animation: tick .45s var(--ease); }
@keyframes tick { 0% { transform: rotateX(80deg); opacity: .2; } 100% { transform: none; opacity: 1; } }
.countdown small { font-size: .55rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(243,238,228,.6); }
.countdown i { font-style: normal; font-family: var(--f-caps); font-size: 1.5rem; color: rgba(243,238,228,.35); line-height: 1.3; }

/* =========================================================
   DESTINATION STUB
   ========================================================= */
.sec-dest { padding-top: 10px; }
.ticket-dest { padding: 26px 22px 22px; }
.dest-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dest-main { min-width: 0; }
.dest-venue { font-family: var(--f-caps); font-size: 1.45rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.15; margin-top: 4px; }
.dest-city { font-size: .66rem; letter-spacing: .3em; color: var(--muted); margin-top: 4px; }
.mini-stamp { width: 74px; height: 74px; flex-shrink: 0; color: #26313f; }
.mini-stamp.spin svg { animation: spin 22s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.dest-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px 14px; }
.barcode {
  display: flex; align-items: stretch; gap: 2px;
  height: 44px; margin-top: 18px;
}
.barcode i { flex: none; transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); }
.ticket-dest.is-in .barcode i { transform: scaleY(1); transition-delay: calc(var(--i) * 12ms + .3s); }

/* =========================================================
   VENUE
   ========================================================= */
.sec-venue { padding-top: 10px; }
.ticket-venue { text-align: center; padding: 30px 22px 26px; }
.venue-head { position: relative; }
.venue-head { padding: 0 54px; }
.venue-head .mini-stamp { position: absolute; right: -10px; top: -18px; width: 56px; height: 56px; opacity: .8; }
.venue-head .h-serif { font-size: clamp(1.5rem, 7vw, 1.9rem); }
.ticket-venue .divider { margin: 10px 30px 14px; }
.venue-name { font-family: var(--f-serif); font-size: 1.25rem; font-weight: 600; letter-spacing: .03em; }
.venue-addr { font-size: .74rem; line-height: 1.6; letter-spacing: .04em; color: var(--muted); margin: 4px auto 0; max-width: 300px; }
.venue-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.photo-venue { margin-top: 22px; border-radius: 14px; }

/* =========================================================
   TIMELINE
   ========================================================= */
.sec-timeline { padding-top: 40px; }
.tl-corner { position: absolute; right: 26px; top: 34px; font-size: 1.4rem; color: var(--ivory); transform: rotate(-20deg); }
.timeline { position: relative; margin: 26px 8px 0 26px; }
.tl-track { position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: rgba(243,238,228,.2); }
.tl-fill { position: absolute; inset: 0; background: var(--ivory); transform-origin: top; transform: scaleY(0); }
.timeline li {
  position: relative;
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 12px 0 12px 26px;
  font-family: var(--f-serif); font-size: 1.12rem;
  color: rgba(243,238,228,.45);
  transition: color .6s, transform .6s var(--ease);
  transform: translateX(-6px);
}
.timeline li::before {
  content: ''; position: absolute; left: -5px; top: 50%;
  width: 11px; height: 11px; margin-top: -5px;
  border: 1.5px solid rgba(243,238,228,.4);
  border-radius: 50%;
  background: var(--navy);
  transition: border-color .4s, box-shadow .4s, background .4s;
}
.timeline li.on { color: var(--ivory); transform: none; }
.timeline li.on::before { border-color: var(--ivory); background: var(--ivory); box-shadow: 0 0 0 5px rgba(243,238,228,.12); }
.timeline li time { font-family: var(--f-caps); font-size: 1rem; letter-spacing: .06em; }

/* =========================================================
   DRESS CODE
   ========================================================= */
.sec-dress { text-align: center; padding: 40px 20px 36px; }
.sec-dress .lead { color: var(--muted); }
.swatches { display: flex; justify-content: center; gap: 10px; margin: 22px 0 6px; flex-wrap: wrap; }
.swatches li {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: .5rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  width: 56px;
  opacity: 0; transform: translateY(14px);
}
.swatches.is-in li { animation: day-in .7s var(--ease-back) forwards; animation-delay: calc(var(--i) * 110ms); }
.swatches span {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 6px 14px -8px rgba(0,0,0,.4);
  transition: transform .4s var(--ease-back);
}
.swatches li:hover span { transform: translateY(-4px) scale(1.08); }
.plane-divider { margin: 26px 10px; }
.plane-divider .ico { font-size: 1.1rem; }
.plane-divider.is-in .ico { animation: zip 1.6s var(--ease); }
@keyframes zip { 0% { transform: translateX(-140px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.dress-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dress-card {
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(27,31,39,.1);
  border-radius: 14px;
  padding: 18px 12px;
}
.dress-ico { width: 40px; height: 40px; color: var(--ink); margin-bottom: 6px; }
.dress-card h3 { font-family: var(--f-caps); font-weight: 400; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; }
.dress-card p { font-family: var(--f-serif); font-size: .98rem; line-height: 1.45; color: var(--muted); margin-top: 6px; }

/* =========================================================
   RSVP
   ========================================================= */
.sec-rsvp { padding-top: 40px; }
.ticket-rsvp { text-align: center; padding: 30px 22px 26px; }
.ticket-rsvp .h-serif { margin-top: 6px; }
.rsvp-note { font-family: var(--f-serif); font-size: 1.02rem; color: var(--muted); margin-top: 8px; }
.rsvp { display: grid; gap: 14px; text-align: left; }
.field input, .field select {
  width: 100%;
  padding: 11px 2px;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--f-serif); font-size: 1.15rem;
  outline: none;
  transition: border-color .3s;
  border-radius: 0;
}
.field input:focus, .field select:focus { border-color: var(--ink); }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chip {
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease-back);
}
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--navy); color: var(--ivory); border-color: var(--navy); transform: scale(1.03); }
.rsvp-msg {
  min-height: 1.4em;
  font-family: var(--f-serif); font-size: 1.05rem; text-align: center; color: var(--ink);
}
.rsvp-msg.show { animation: in-up .6s var(--ease) both; }
.rsvp-msg { opacity: 1; }

/* =========================================================
   FINAL
   ========================================================= */
.sec-final { text-align: center; padding: 50px 20px 46px; overflow: hidden; }
.final-script { font-size: 3rem; line-height: 1.1; color: var(--cream); }
.final-names { font-family: var(--f-caps); font-size: 1.5rem; letter-spacing: .16em; margin: 10px 0 6px; }
.final-plane { position: relative; height: 60px; margin-top: 18px; color: var(--ivory); }
.final-plane .ico { position: absolute; left: -40px; top: 20px; font-size: 1.6rem; animation: cross 9s linear infinite; }
@keyframes cross { 0% { transform: translateX(0) translateY(10px) rotate(-6deg); } 100% { transform: translateX(560px) translateY(-30px) rotate(-12deg); } }
.credit { font-size: .55rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(243,238,228,.35); margin-top: 10px; }

/* =========================================================
   MUSIC + TOAST
   ========================================================= */
.music {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ivory); color: var(--navy);
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.45);
  display: grid; place-items: center;
}
.music[hidden] { display: none; }
.music .bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.music .bars i { width: 3px; height: 4px; background: currentColor; border-radius: 2px; }
.music.playing .bars i { animation: eq .9s ease-in-out infinite; }
.music.playing .bars i:nth-child(2) { animation-delay: -.3s; }
.music.playing .bars i:nth-child(3) { animation-delay: -.6s; }
.music.playing .bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60;
  transform: translate(-50%, 20px);
  background: var(--ivory); color: var(--navy);
  padding: 12px 18px; border-radius: 30px;
  font-size: .78rem; font-weight: 500;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.4);
  opacity: 0; pointer-events: none;
  transition: opacity .35s, transform .35s var(--ease);
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================
   REVEAL SYSTEM
   ========================================================= */
[data-reveal] { transition: opacity 1s var(--ease), transform 1.1s var(--ease), clip-path 1.4s var(--ease); }
[data-reveal="rise"] { opacity: 0; transform: translateY(36px); }
[data-reveal="fade"] { opacity: 0; }
[data-reveal="zoom"] { opacity: 0; transform: scale(.6) rotate(-30deg); }
[data-reveal="slide"] { opacity: 0; transform: translateX(-60px) rotate(-2deg); }
[data-reveal="fly"] { opacity: 0; }
[data-reveal="photo"] { clip-path: inset(18% 18% 18% 18% round 18px); opacity: .3; }
[data-reveal="draw"], [data-reveal="write"] { clip-path: inset(0 100% 0 0); padding: 0 .25em; }
[data-reveal="draw-lines"] { opacity: 1; }
.is-in[data-reveal="rise"], .is-in[data-reveal="fade"], .is-in[data-reveal="zoom"], .is-in[data-reveal="slide"] { opacity: 1; transform: none; }
.is-in[data-reveal="photo"] { clip-path: inset(0 0 0 0 round 18px); opacity: 1; }
.is-in[data-reveal="draw"], .is-in[data-reveal="write"] { clip-path: inset(0 0 0 0); transition-duration: 1.8s; transition-delay: .5s; }
.is-in[data-reveal="fly"] { animation: fly-in 1.4s var(--ease) forwards; }
.ico-plane-top.is-in { animation: fly-up 1.4s var(--ease) forwards; }
@keyframes fly-in { 0% { opacity: 0; transform: translate(-60px, 30px) rotate(-20deg); } 100% { opacity: 1; transform: rotate(-20deg); } }
@keyframes fly-up { 0% { opacity: 0; transform: translateY(30px) rotate(-90deg); } 100% { opacity: 1; transform: rotate(-90deg); } }
[data-reveal="stagger"] { opacity: 1; }

/* =========================================================
   DESKTOP
   ========================================================= */
@media (min-width: 560px) {
  .app { margin: 40px auto; border-radius: 6px; }
  body { background: radial-gradient(ellipse at 50% 0%, #ecebe8, #c9c7c2 70%); }
}

@media (min-width: 1040px) {
  .layout {
    display: grid;
    grid-template-columns: 1fr var(--app-w);
    gap: 60px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 40px;
  }
  .app { margin: 48px 0; }
  .side {
    display: block;
    position: sticky; top: 0;
    height: 100vh;
  }
  .side-inner {
    position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: var(--ink);
  }
  .side-brand { font-family: var(--f-script); font-size: 2rem; text-align: right; padding-right: 8%; margin-bottom: 4px; }
  .side-title { font-weight: 400; line-height: .95; }
  .side-title .script { display: block; font-size: 7.5rem; line-height: 1; }
  .side-title .caps { display: block; font-family: var(--f-caps); font-size: 3.3rem; letter-spacing: .06em; margin-top: -.15em; }
  .side .divider { max-width: 360px; margin: 20px auto 14px; }
  .side-sub { font-size: .72rem; letter-spacing: .4em; text-transform: uppercase; color: var(--muted); }
  .side-runway {
    position: absolute; left: -20%; right: -20%; bottom: 0; height: 30%;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 60px, transparent 60px 140px) center 45% / 100% 4px no-repeat,
                linear-gradient(180deg, transparent, rgba(80,78,74,.22));
    transform: perspective(500px) rotateX(55deg);
    transform-origin: bottom;
    animation: runway 3s linear infinite;
  }
  @keyframes runway { to { background-position: 140px 45%, 0 0; } }
  .side-plane {
    position: absolute; width: 260px; height: 260px; right: -40px; top: 8%;
    color: rgba(27,31,39,.07);
    transform: rotate(-18deg);
    animation: float 8s ease-in-out infinite;
  }
  @keyframes float { 50% { transform: rotate(-14deg) translateY(-18px); } }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */
@media (max-width: 360px) {
  .sec { padding-left: 14px; padding-right: 14px; }
  .ticket-hero { padding-left: 30px; padding-right: 18px; }
  .flight-grid b, .dest-grid b { font-size: .64rem; }
  .countdown div { min-width: 46px; }
  .countdown b { font-size: 1.55rem; }
  .dress-cards { grid-template-columns: 1fr; }
  .hero-foot { grid-template-columns: 78px 1fr; }
  .stamp { width: 78px; height: 78px; }
  .signature { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}