/* Маргарита и Петър — full-screen luxury wedding upload site.
   Fluid type (fills wide screens), animated watercolor leaves, glass upload card. */

:root{
  --cream:#fbf8f3; --cream-2:#f4eee2; --cream-3:#efe7d6;
  --olive:#5f6845; --olive-d:#4a5234; --olive-soft:#7c855f;
  --gold:#c8a05a; --gold-d:#b1894a; --gold-soft:#d9bd8a; --gold-pale:#ecdcbb;
  --btn:#535c39; --btn-d:#3f4829;
  --ink:#5b5f48; --grey:#9a9684;
  --card:rgba(255,253,249,.78); --card-solid:#fffdf9; --line:#e7dec9;
  --serif:"Playfair Display","Cormorant Garamond",Georgia,serif;
  --body:"Cormorant Garamond","PT Serif",Georgia,serif;
  --shadow:0 30px 70px -30px rgba(74,82,52,.45);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;color:var(--olive);font-family:var(--body);font-size:clamp(17px,1.25vw,21px);
  line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;position:relative;min-height:100vh;
  background:
    radial-gradient(130% 90% at 50% -20%, #fffdf9 0%, rgba(255,253,249,0) 55%),
    radial-gradient(120% 120% at 100% 0%, rgba(217,189,138,.12), transparent 45%),
    radial-gradient(120% 120% at 0% 100%, rgba(124,133,95,.10), transparent 45%),
    linear-gradient(160deg, var(--cream) 0%, var(--cream-2) 55%, var(--cream-3) 100%);
  background-attachment:fixed;
}
img{display:block;max-width:100%;}
::selection{background:var(--gold-soft);color:#fff;}

/* ---------- decorative layer (fixed, frames the whole window) ---------- */
.decor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.leaf{position:absolute;will-change:transform;filter:drop-shadow(0 12px 22px rgba(74,82,52,.16));}
.leaf.tl{top:-12px;left:-14px;width:clamp(200px,25vw,470px);transform-origin:top left;animation:swayA 9s ease-in-out infinite;}
.leaf.tr{top:-14px;right:-16px;width:clamp(210px,27vw,520px);transform-origin:top right;animation:swayB 8s ease-in-out infinite;}
.leaf.bl{bottom:-12px;left:-10px;width:clamp(130px,16vw,320px);transform-origin:bottom left;animation:swayB 10s ease-in-out infinite;}
.leaf.br{bottom:-12px;right:-10px;width:clamp(130px,16vw,310px);transform-origin:bottom right;animation:swayA 8.6s ease-in-out infinite;}

@keyframes swayA{
  0%{transform:rotate(-1.6deg) scale(1);}
  50%{transform:rotate(2deg) scale(1.018) translateY(-3px);}
  100%{transform:rotate(-1.6deg) scale(1);}
}
@keyframes swayB{
  0%{transform:rotate(1.8deg) scale(1.01);}
  50%{transform:rotate(-1.8deg) scale(1) translateY(-2px);}
  100%{transform:rotate(1.8deg) scale(1.01);}
}

/* floating gold dust */
.dust{position:absolute;border-radius:50%;background:radial-gradient(circle,var(--gold-soft),rgba(200,160,90,.1));
  opacity:0;animation:float linear infinite;}
@keyframes float{
  0%{opacity:0;transform:translateY(20px) translateX(0) scale(.6);}
  10%{opacity:.7;}
  90%{opacity:.5;}
  100%{opacity:0;transform:translateY(-120px) translateX(var(--dx,10px)) scale(1);}
}

@media(prefers-reduced-motion:reduce){
  .leaf,.dust{animation:none!important;}
}

/* ---------- shell ---------- */
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,60px);text-align:center;}

.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;}}

/* gold rule with heart */
.rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:clamp(22px,4vw,40px) auto;max-width:440px;color:var(--gold);}
.rule::before,.rule::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);}
.rule svg{width:20px;height:20px;}
.rule.mini{max-width:130px;}

/* ---------- hero ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(80px,12vh,140px) 0 clamp(40px,8vh,90px);}
.hero > *{animation:heroIn 1.1s cubic-bezier(.2,.7,.2,1) both;}
.hero .monogram{animation-delay:.05s;}
.hero .we{animation-delay:.18s;}
.hero .names{animation-delay:.30s;}
.hero .invite{animation-delay:.46s;}
.hero .scroll-cue{animation-delay:.7s;}
@keyframes heroIn{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}

.monogram{font-family:var(--serif);color:var(--gold);font-weight:500;
  font-size:clamp(54px,7vw,112px);line-height:1;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:clamp(10px,1.4vw,22px);
  text-shadow:0 2px 20px rgba(200,160,90,.18);}
.monogram .bar{width:2px;height:clamp(42px,5.4vw,86px);background:linear-gradient(var(--gold),var(--gold-soft));opacity:.8;}

.we{font-family:var(--serif);letter-spacing:.5em;color:var(--olive);
  font-size:clamp(15px,1.5vw,20px);text-transform:uppercase;margin:clamp(14px,2vw,26px) 0 0;padding-left:.5em;}

.names{width:clamp(300px,52vw,720px);max-width:92%;height:auto;margin:clamp(8px,1.4vw,20px) auto clamp(14px,2vw,26px);}

.invite{font-family:var(--body);color:var(--olive);font-weight:500;
  font-size:clamp(18px,1.7vw,27px);line-height:1.6;max-width:42rem;margin:0 auto;}
.invite .accent{color:var(--gold-d);white-space:nowrap;}

.scroll-cue{margin-top:clamp(30px,5vh,60px);display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--olive-soft);font-family:var(--serif);letter-spacing:.22em;text-transform:uppercase;font-size:13px;
  text-decoration:none;cursor:pointer;transition:color .3s;}
.scroll-cue:hover{color:var(--gold-d);}
.scroll-cue .chev{width:30px;height:30px;border:1px solid var(--gold-soft);border-radius:50%;display:grid;place-items:center;
  animation:bob 2.4s ease-in-out infinite;}
.scroll-cue .chev svg{width:16px;height:16px;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* ---------- section heads ---------- */
.section{padding:clamp(40px,7vh,90px) 0;}
.eyebrow{display:inline-flex;align-items:center;gap:14px;justify-content:center;}
.eyebrow .sprig{width:38px;height:22px;color:var(--olive-soft);opacity:.85;}
.eyebrow .sprig.r{transform:scaleX(-1);}
.section-title{font-family:var(--serif);color:var(--olive);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:clamp(26px,3.6vw,46px);margin:0;}
.section-lead{font-family:var(--body);color:var(--ink);font-size:clamp(17px,1.5vw,23px);
  max-width:40rem;margin:14px auto 0;line-height:1.55;}

/* ---------- upload card (glass) ---------- */
.upload-wrap{position:relative;margin:clamp(30px,5vw,54px) auto 0;max-width:660px;}
.upload-wrap::before{content:"";position:absolute;inset:-30px;border-radius:40px;z-index:-1;
  background:radial-gradient(60% 60% at 50% 30%, rgba(200,160,90,.18), transparent 70%);filter:blur(8px);}
.upload-card{background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(217,189,138,.5);border-radius:30px;box-shadow:var(--shadow);
  padding:clamp(28px,4vw,52px) clamp(22px,4vw,52px);}
.dropzone{border:1.6px dashed var(--gold-soft);border-radius:22px;padding:clamp(26px,4vw,44px) clamp(18px,3vw,36px);
  transition:border-color .35s,background .35s,transform .35s;}
.dropzone.drag{border-color:var(--olive);background:rgba(95,104,69,.06);transform:scale(1.012);}
.cloud{width:clamp(54px,6vw,76px);height:auto;margin:0 auto 10px;color:var(--gold);animation:cloudbob 5s ease-in-out infinite;}
@keyframes cloudbob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.upload-title{font-family:var(--serif);color:var(--olive);font-weight:600;font-size:clamp(22px,2.6vw,34px);margin:6px 0 10px;}
.upload-sub{color:var(--gold-d);font-size:clamp(16px,1.5vw,21px);margin:0 0 clamp(18px,2.5vw,28px);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;
  background:linear-gradient(145deg,var(--btn),var(--btn-d));color:#fff;border:none;border-radius:16px;
  font-family:var(--serif);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  font-size:clamp(15px,1.5vw,19px);padding:clamp(13px,1.5vw,18px) clamp(28px,4vw,46px);
  box-shadow:0 18px 34px -16px rgba(63,72,41,.8);position:relative;overflow:hidden;
  transition:transform .25s,box-shadow .25s;}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .6s;}
.btn:hover{transform:translateY(-3px);box-shadow:0 26px 44px -18px rgba(63,72,41,.9);}
.btn:hover::after{left:130%;}
.btn svg{width:22px;height:22px;}
.upload-note{color:var(--ink);font-size:clamp(15px,1.4vw,19px);margin:clamp(18px,2.5vw,26px) 0 6px;}
.formats{color:var(--grey);font-size:clamp(12px,1vw,14px);letter-spacing:.01em;}
.formats b{color:var(--olive);font-weight:600;}
.queue{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;text-align:left;}
.queue:empty{display:none;}
.queue li{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;
  background:rgba(252,249,242,.85);border:1px solid var(--line);border-radius:14px;padding:8px 12px;
  font-size:15px;color:var(--ink);animation:popin .4s both;}
@keyframes popin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.queue .th{width:40px;height:40px;border-radius:10px;overflow:hidden;background:var(--cream-2);
  display:grid;place-items:center;color:var(--gold);}
.queue .th svg{width:20px;height:20px;}
.queue .th img{width:40px;height:40px;object-fit:cover;}
.queue .body{min-width:0;}
.queue .nm{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;}
.queue .pbar{display:block;height:5px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:5px;}
.queue .pbar > i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--olive));transition:width .25s;}
.queue .st{font-size:12px;letter-spacing:.03em;color:var(--olive);display:grid;place-items:center;min-width:30px;}
.queue .st svg{width:22px;height:22px;color:var(--olive);}
.queue li.err{border-color:#d9a0a0;}
.queue li.err .st{color:#b3554f;font-size:11px;}
.done{display:none;align-items:center;justify-content:center;gap:10px;margin:16px 0 0;padding:13px 18px;
  border-radius:14px;background:rgba(95,104,69,.1);color:var(--olive-d);font-family:var(--serif);letter-spacing:.02em;}
.done.on{display:flex;animation:popin .5s;}
.done svg{width:20px;height:20px;color:var(--gold);}

/* ---------- how-to (4 across) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);margin:clamp(30px,5vw,54px) auto 0;}
.step{background:var(--card);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(217,189,138,.4);border-radius:22px;padding:clamp(20px,2.2vw,30px) clamp(16px,1.8vw,24px);
  text-align:center;transition:transform .35s,box-shadow .35s;box-shadow:0 16px 36px -26px rgba(74,82,52,.5);}
.step:hover{transform:translateY(-6px);box-shadow:0 26px 46px -24px rgba(74,82,52,.55);}
.step .ic{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,#dcc08e,#c49a52);box-shadow:0 12px 24px -12px rgba(196,154,82,.9);}
.step .ic svg{width:30px;height:30px;}
.step h4{font-family:var(--serif);color:var(--olive-d);font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;font-size:clamp(14px,1.2vw,17px);margin:0 0 8px;}
.step p{color:var(--ink);font-size:clamp(14px,1.15vw,17px);line-height:1.45;margin:0;}

/* ---------- thanks + footer ---------- */
.thanks{padding:clamp(40px,7vh,90px) 0 clamp(20px,3vh,40px);}
.thanks .script{width:clamp(220px,30vw,380px);margin:0 auto clamp(10px,1.5vw,18px);color:var(--olive);}
.thanks .msg{font-family:var(--body);color:var(--ink);font-size:clamp(17px,1.5vw,22px);max-width:30rem;margin:0 auto;}
.foot{margin-top:clamp(30px,5vh,60px);}
.foot-names{font-family:var(--serif);color:var(--olive);letter-spacing:.1em;font-size:clamp(17px,1.6vw,23px);}
.foot-names .sep{color:var(--gold);margin:0 12px;}
.foot-note{color:var(--grey);font-size:13px;letter-spacing:.04em;margin-top:10px;}
.foot-note a{color:var(--gold-d);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s;}
.foot-note a:hover{border-color:var(--gold-soft);}

@media(max-width:760px){
  .steps{grid-template-columns:1fr 1fr;}
}
@media(max-width:460px){
  .steps{grid-template-columns:1fr;}
  .invite .accent{white-space:normal;}
}