/* ============================================================
   The Birosiks — Wedding Site
   Palette: wine #46679B · ivory #F8F6EF · gold #5F84B2 · ink #3A4A61
   Type: Cormorant Garamond (display) · Lora (body)
   ============================================================ */
:root{
  --wine:#46679B; --wine-deep:#3D5A85; --ivory:#F8F6EF; --paper:#FFFFFF;
  --gold:#5F84B2; --gold-soft:#A9BFDD; --ink:#3A4A61; --muted:#7E8CA0;
  --rose:#DCE9F5; --shadow:0 18px 50px rgba(74,118,168,.18);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Lora',Georgia,serif;background:var(--ivory);color:var(--ink);
  line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h1,h2,h3,.display{font-family:'Cormorant Garamond',Georgia,serif}
.script{font-family:'Pinyon Script',cursive;font-weight:400}
a{color:var(--wine)}
::selection{background:var(--wine);color:var(--ivory)}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.12s}.rv-d2{transition-delay:.24s}.rv-d3{transition-delay:.36s}

/* ============================================================ MASTHEAD */
.masthead{position:relative;min-height:100svh;display:flex;align-items:center;
  justify-content:center;text-align:center;color:var(--ivory);isolation:isolate}
.masthead-media{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(1200px 700px at 50% 20%, #6D8FBB 0%, transparent 60%),
  linear-gradient(165deg,#3D5A85 0%, #46679B 45%, #2A4165 100%)}
.masthead-media img{width:100%;height:100%;object-fit:cover;opacity:.55}
.masthead-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(35,64,94,.25) 0%,rgba(35,64,94,.55) 70%,rgba(35,64,94,.9) 100%)}
.mast-inner{padding:6rem 1.5rem 8rem;max-width:900px}
.mast-eyebrow{font-family:'Lora',serif;letter-spacing:.42em;text-transform:uppercase;
  font-size:.78rem;color:var(--gold-soft);margin-bottom:1.4rem}
.mast-name{font-size:clamp(3.2rem,9.5vw,7.5rem);font-weight:700;line-height:1.02;
  letter-spacing:.01em;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.mast-amp{display:block;font-family:'Pinyon Script',cursive;font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.6rem);color:var(--gold-soft);margin:.4rem 0}
.mast-rule{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
  margin:2rem auto 1.6rem;position:relative}
.mast-rule::after{content:'✦';position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  color:var(--gold-soft);font-size:.7rem;background:transparent}
.mast-date{font-family:'Cormorant Garamond',serif;font-size:clamp(1.3rem,3vw,1.9rem);
  font-weight:600;letter-spacing:.12em}
.mast-place{margin-top:.7rem;font-size:clamp(.95rem,2vw,1.08rem);color:#E4EEF7;letter-spacing:.04em}
.mast-place a{color:var(--gold-soft);text-decoration:none;border-bottom:1px solid rgba(168,198,228,.4)}
.scroll-cue{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
  color:var(--gold-soft);font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;opacity:.85}
.scroll-cue::after{content:'';display:block;width:1px;height:44px;margin:.7rem auto 0;
  background:linear-gradient(180deg,var(--gold-soft),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* gold arch line-work */
.mast-arch{position:absolute;inset:auto 0 0 0;top:0;z-index:-1;pointer-events:none;opacity:.5}
.mast-arch svg{width:min(92vw,760px);height:auto;position:absolute;left:50%;top:50%;
  transform:translate(-50%,-52%)}

/* ============================================================ SECTIONS */
.section{padding:7rem 1.5rem}
.section-head{text-align:center;max-width:720px;margin:0 auto 3.5rem}
.sec-eyebrow{letter-spacing:.4em;text-transform:uppercase;font-size:.72rem;color:var(--gold);margin-bottom:1rem}
.sec-title{font-size:clamp(2.4rem,5.5vw,3.8rem);font-weight:600;color:var(--wine);line-height:1.1}
.sec-title .script{font-size:1.15em;color:var(--gold)}
.sec-sub{margin-top:1.1rem;color:var(--muted);font-size:1.02rem}

/* ============================================================ JOURNEY SLIDER */
.journey{background:var(--paper);position:relative;overflow:hidden;padding-bottom:5rem}
.journey::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent)}
.rail-wrap{position:relative;max-width:none}
.rail{display:flex;gap:2rem;overflow-x:auto;padding:1rem 8vw 2.5rem;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.card{flex:0 0 min(86vw,420px);scroll-snap-align:center;background:#fff;
  border:1px solid #D9E6F3;border-radius:14px;overflow:hidden;box-shadow:0 10px 34px rgba(74,118,168,.08);
  transform:translateZ(0);transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.card-media{position:relative;aspect-ratio:4/3;background:var(--rose);overflow:hidden}
.card-media img,.card-media video{width:100%;height:100%;object-fit:cover}
.card-media .vid-badge{position:absolute;top:.8rem;right:.8rem;background:rgba(74,118,168,.82);
  color:var(--ivory);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.35rem .7rem;border-radius:100px}
.card-body{padding:1.4rem 1.5rem 1.6rem}
.card-date{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:.35rem}
.card-loc{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--muted);
  font-size:.95rem;margin-bottom:.7rem}
.card-title{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:700;
  color:var(--wine);line-height:1.15;margin-bottom:.55rem}
.card-text{font-size:.94rem;color:#46586E;line-height:1.65}
.rail-nav{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:1.2rem}
.rail-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--gold);
  background:transparent;color:var(--wine);font-size:1.25rem;cursor:pointer;
  transition:all .3s var(--ease);display:grid;place-items:center}
.rail-btn:hover{background:var(--wine);border-color:var(--wine);color:var(--ivory)}
.rail-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rail-progress{flex:0 1 260px;height:2px;background:#CDDFEF;border-radius:2px;overflow:hidden}
.rail-progress b{display:block;height:100%;width:0;background:var(--gold);transition:width .25s linear}
.rail-count{font-family:'Cormorant Garamond',serif;font-size:1rem;color:var(--muted);
  min-width:4.5rem;text-align:center}

/* ============================================================ TIMELINE */
.timeline-sec{background:var(--wine-deep);color:var(--ivory);position:relative;overflow:hidden}
.timeline-sec .sec-title{color:var(--ivory)}
.timeline-sec .sec-eyebrow{color:var(--gold-soft)}
.timeline-sec .sec-sub{color:#BCD2E8}
.countdown{display:flex;justify-content:center;gap:clamp(.8rem,3vw,2.2rem);
  flex-wrap:wrap;margin:0 auto 4rem;max-width:760px}
.cd-cell{text-align:center;min-width:90px;padding:1.3rem 1rem;border:1px solid rgba(168,198,228,.35);
  border-radius:10px;background:rgba(255,255,255,.03);backdrop-filter:blur(2px)}
.cd-num{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,6vw,3.4rem);
  font-weight:700;color:var(--gold-soft);line-height:1;font-variant-numeric:tabular-nums}
.cd-lab{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:#A9C2DD;margin-top:.5rem}
.cd-caption{text-align:center;color:#BCD2E8;font-style:italic;font-family:'Cormorant Garamond',serif;
  font-size:1.15rem;margin:-2.4rem auto 4rem;max-width:640px}
.tl{max-width:860px;margin:0 auto;position:relative;padding-left:0}
.tl::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(168,198,228,.55) 8%,rgba(168,198,228,.55) 92%,transparent)}
.tl-item{position:relative;width:50%;padding:0 3rem 3.4rem 0;text-align:right}
.tl-item:nth-child(even){margin-left:50%;padding:0 0 3.4rem 3rem;text-align:left}
.tl-item::before{content:'';position:absolute;top:.45rem;right:-5px;width:10px;height:10px;
  border-radius:50%;background:var(--gold-soft);box-shadow:0 0 0 5px rgba(168,198,228,.18)}
.tl-item:nth-child(even)::before{right:auto;left:-5px}
.tl-date{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft)}
.tl-title{font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:700;margin:.3rem 0 .35rem}
.tl-text{font-size:.92rem;color:#D7E5F2;line-height:1.6}
.tl-days{display:inline-block;margin-top:.5rem;font-size:.72rem;letter-spacing:.14em;
  color:#8FB0D2;border:1px solid rgba(168,198,228,.3);border-radius:100px;padding:.2rem .7rem}
@media(max-width:640px){
  .tl::before{left:10px}
  .tl-item,.tl-item:nth-child(even){width:100%;margin-left:0;padding:0 0 2.6rem 2.4rem;text-align:left}
  .tl-item::before,.tl-item:nth-child(even)::before{left:5px;right:auto}
}

/* ============================================================ SCHEDULE */
.schedule{background:var(--ivory)}
.sched-grid{max-width:820px;margin:0 auto;display:grid;gap:1.1rem}
.sched-row{display:grid;grid-template-columns:130px 1fr;gap:1.6rem;align-items:baseline;
  background:#fff;border:1px solid #D9E6F3;border-radius:12px;padding:1.5rem 1.8rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.sched-row:hover{transform:translateX(6px);box-shadow:0 10px 30px rgba(74,118,168,.08)}
.sched-time{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:700;color:var(--wine)}
.sched-title{font-weight:600;font-size:1.05rem;margin-bottom:.25rem}
.sched-note{font-size:.9rem;color:var(--muted)}
@media(max-width:560px){.sched-row{grid-template-columns:1fr;gap:.4rem}}

/* ============================================================ RSVP */
.rsvp{background:linear-gradient(180deg,var(--ivory) 0%,var(--rose) 140%);position:relative}
.rsvp-card{max-width:560px;margin:0 auto;background:#fff;border:1px solid #D7E5F2;
  border-radius:16px;padding:2.8rem 2.6rem;box-shadow:var(--shadow)}
.rsvp label{display:block;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin:1.3rem 0 .45rem}
.rsvp input[type=text],.rsvp textarea,.rsvp select{width:100%;padding:.85rem 1rem;
  border:1px solid #C9DCEE;border-radius:8px;font-family:'Lora',serif;font-size:1rem;
  background:var(--paper);color:var(--ink);transition:border-color .25s}
.rsvp input:focus,.rsvp textarea:focus,.rsvp select:focus{outline:none;border-color:var(--gold)}
.rsvp .code-input{text-transform:uppercase;letter-spacing:.3em;font-family:'Cormorant Garamond',serif;
  font-size:1.3rem;text-align:center;font-weight:700}
.btn{display:inline-block;background:var(--wine);color:var(--ivory);border:none;cursor:pointer;
  font-family:'Lora',serif;font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;
  padding:1rem 2.4rem;border-radius:100px;transition:all .3s var(--ease)}
.btn:hover{background:var(--wine-deep);transform:translateY(-2px);box-shadow:0 10px 24px rgba(74,118,168,.3)}
.btn:disabled{opacity:.5;cursor:wait;transform:none}
.btn-gold{background:var(--gold)}
.btn-gold:hover{background:#557FAC}
.choice-row{display:flex;gap:.8rem;margin-top:.2rem}
.choice{flex:1;text-align:center;padding:.95rem;border:1px solid #C9DCEE;border-radius:10px;
  cursor:pointer;font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:600;
  color:var(--muted);transition:all .25s var(--ease);user-select:none}
.choice.on{border-color:var(--wine);color:var(--wine);background:#EDF4FB;box-shadow:inset 0 0 0 1px var(--wine)}
.rsvp-status{margin-top:1.4rem;padding:1rem 1.2rem;border-radius:10px;font-size:.92rem;display:none}
.rsvp-status.ok{display:block;background:#EEF6EC;border:1px solid #BBD9B4;color:#2E5A28}
.rsvp-status.err{display:block;background:#FBEFEA;border:1px solid #E4B9A9;color:#8A3B22}
.rsvp-found{display:none;margin-top:1.6rem;padding-top:1.6rem;border-top:1px dashed #C9DCEE}
.rsvp-hello{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:700;color:var(--wine)}
.rsvp-alt{text-align:center;margin-top:2rem;font-size:.88rem;color:var(--muted)}

/* ============================================================ FOOTER */
footer{background:var(--wine-deep);color:#A9C2DD;text-align:center;padding:3.5rem 1.5rem;font-size:.85rem}
footer .script{color:var(--gold-soft);font-size:1.9rem;display:block;margin-bottom:.8rem}

/* ============================================================ DOVES */
.dove-stage{position:fixed;right:0;bottom:0;width:min(46vw,440px);height:min(50vh,420px);
  pointer-events:none;z-index:60;overflow:visible}
.dove{position:absolute;bottom:-60px;right:8%;width:54px;height:40px;opacity:0;
  will-change:transform,opacity}
.dove svg{width:100%;height:100%;overflow:visible}
.dove .wingL,.dove .wingR{transform-origin:32px 22px;animation:flap .5s ease-in-out infinite alternate}
.dove .wingR{animation-delay:.06s}
@keyframes flap{from{transform:rotate(-26deg)}to{transform:rotate(30deg)}}
.dove.fly{animation:fly var(--dur,7s) cubic-bezier(.3,.5,.5,1) forwards;
  animation-delay:var(--delay,0s)}
@keyframes fly{
  0%{opacity:0;transform:translate(0,0) scale(var(--sc,1)) rotate(-4deg)}
  8%{opacity:.95}
  60%{opacity:.95}
  100%{opacity:0;transform:translate(var(--dx,-70vw),var(--dy,-80vh)) scale(calc(var(--sc,1)*.55)) rotate(-12deg)}
}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .dove-stage{display:none}
  .scroll-cue::after{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- text-only milestone cards ---------- */
.card-media-txt{display:grid;place-items:center;background:
  radial-gradient(340px 220px at 50% 30%, #6D8FBB 0%, transparent 70%),
  linear-gradient(160deg,#3D5A85,#46679B)}
.txt-mono{font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:600;
  color:var(--gold-soft);letter-spacing:.1em;border:1px solid rgba(168,198,228,.45);
  border-radius:50%;width:150px;height:150px;display:grid;place-items:center}
.txt-mono i{font-family:'Pinyon Script',cursive;font-style:normal;font-size:.55em;margin:0 .1em}

/* ---------- registry ---------- */
.registry{background:var(--paper);position:relative}
.registry::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent)}
.registry-card{max-width:640px;margin:0 auto;text-align:center;background:#fff;
  border:1px solid var(--gold-soft);border-radius:16px;padding:3rem 2.6rem;
  box-shadow:0 14px 44px rgba(74,118,168,.1);position:relative}
.registry-card::before,.registry-card::after{content:'';position:absolute;inset:8px;
  border:1px solid #D9E6F3;border-radius:12px;pointer-events:none}
.registry-orn{color:var(--gold);font-size:1rem;margin-bottom:1.4rem}
.registry-lead{font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:600;
  color:var(--wine);line-height:1.35;margin-bottom:1.2rem}
.registry-body{color:#46586E;font-size:1rem;line-height:1.75;margin-bottom:1.2rem}
.registry-body strong{color:var(--wine)}
.registry-note{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--muted);font-size:1.05rem}

/* full-name masthead sizing — longer lines, smaller ceiling, graceful wrap */
.mast-name-full{font-size:clamp(2.4rem,6.5vw,5rem);line-height:1.08;text-wrap:balance}

/* ============================================================
   PORCELAIN THREAD — the journey (bed-sheet blue & white)
   ============================================================ */
.journey{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%237593BE' stroke-width='1.1' stroke-linecap='round' opacity='.34'%3E%3Cg transform='translate(38 44)'%3E%3Ccircle r='3.4' fill='%23A9BFDD' stroke='none'/%3E%3Ccircle r='6.5'/%3E%3Cpath d='M0 7c0 7-1 11-2 15M-2 14c-4-1-6-3-7-6M-1 18c3 0 5-2 6-4'/%3E%3C/g%3E%3Cg transform='translate(168 92) rotate(24)'%3E%3Ccircle r='2.7' fill='%2346679B' stroke='none'/%3E%3Ccircle r='5.2'/%3E%3Cpath d='M0 6c0 6-1 9-2 12'/%3E%3C/g%3E%3Cg transform='translate(96 178) rotate(-18)'%3E%3Ccircle r='3.1' fill='%23A9BFDD' stroke='none'/%3E%3Ccircle r='6'/%3E%3Cpath d='M0 7c0 6 0 9-1 13M-2 13c-3-1-5-3-6-5'/%3E%3C/g%3E%3Cg transform='translate(214 210) rotate(40)'%3E%3Ccircle r='2.4' fill='%2346679B' stroke='none'/%3E%3Cpath d='M0 4c0 5-1 8-2 11'/%3E%3C/g%3E%3Cg transform='translate(226 22) rotate(-30)'%3E%3Cpath d='M0 0c0 6-1 9-2 12M-2 6c-3-1-4-2-5-4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;background-size:260px}
.thread{max-width:900px;margin:0 auto;position:relative;padding:1rem 1rem 2rem}
.thread::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,#C7D6EA 5%,#C7D6EA 95%,transparent)}
.th-item{position:relative;width:50%;padding:0 2.8rem 3rem 0;text-align:right}
.th-item:nth-child(even){margin-left:50%;padding:0 0 3rem 2.8rem;text-align:left}
.th-item::before{content:'';position:absolute;top:.55rem;right:-6px;width:12px;height:12px;
  border-radius:50%;background:#fff;border:2px solid var(--gold);box-shadow:0 0 0 4px #EAF1F9;z-index:1}
.th-item:nth-child(even)::before{right:auto;left:-6px}
.th-media{margin-bottom:.9rem}
.th-frame{position:relative;display:inline-block;background:#fff;border:7px solid #fff;
  outline:1px solid #CFDDEE;border-radius:10px;overflow:hidden;
  box-shadow:0 12px 30px rgba(70,103,155,.16);transform:rotate(-1.1deg);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.th-item:nth-child(even) .th-frame{transform:rotate(1.1deg)}
.th-item:hover .th-frame{transform:rotate(0) scale(1.02);box-shadow:0 18px 40px rgba(70,103,155,.24)}
.th-frame img,.th-frame video{display:block;border-radius:4px;background:#EAF1F9}
/* sizes are computed server-side to fit 300x340 (videos 300x380): natural aspect,
   definite pre-load box = zero layout shift, fits every phone >= 340px wide */
.th-frame video{background:#0d1a2b}
.th-frame .vid-badge{position:absolute;top:.6rem;right:.6rem;background:rgba(42,65,101,.85);
  color:#fff;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;padding:.3rem .6rem;border-radius:100px}
.th-frame-txt{transform:rotate(0)!important;background:linear-gradient(160deg,#EDF3FA,#fff);padding:1.6rem 2rem}
.th-mono{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:600;color:var(--wine);
  border:1px solid #C7D6EA;border-radius:50%;width:96px;height:96px;display:grid;place-items:center}
.th-mono i{font-family:'Pinyon Script',cursive;font-style:normal;font-size:.55em;margin:0 .12em;color:var(--gold)}
.th-date{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.th-title{font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:700;color:var(--wine);margin:.2rem 0 .35rem}
.th-text{font-size:.93rem;color:#51637C;line-height:1.65;max-width:400px;display:inline-block}
.th-days{display:inline-block;margin-top:.55rem;font-size:.68rem;letter-spacing:.14em;color:#8AA0BE;
  border:1px solid #CFDDEE;border-radius:100px;padding:.18rem .7rem;background:#fff}
@media(max-width:640px){
  .thread::before{left:12px}
  .th-item,.th-item:nth-child(even){width:100%;margin:0;padding:0 0 2.6rem 2.4rem;text-align:left}
  .th-item::before,.th-item:nth-child(even)::before{left:7px;right:auto}
  .th-text{max-width:none}
}

/* ---------- contextual micro-animations ---------- */
.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fx-p{position:absolute;will-change:top,transform,opacity;user-select:none;
  font-size:var(--fs,14px);color:var(--c,#7593BE);text-shadow:0 1px 2px rgba(255,255,255,.6)}
.fx-fall{top:-12%;left:var(--x,50%);animation:fxFall var(--dur,4.5s) linear var(--delay,0s) forwards}
@keyframes fxFall{
  0%{top:-12%;transform:translateX(0) rotate(0deg);opacity:0}
  10%{opacity:.95} 85%{opacity:.95}
  100%{top:106%;transform:translateX(var(--sway,14px)) rotate(var(--rot,160deg));opacity:0}}
.fx-rise{bottom:-12%;top:auto;left:var(--x,50%);animation:fxRise var(--dur,3.6s) ease-out var(--delay,0s) forwards}
@keyframes fxRise{
  0%{transform:translateY(0) scale(.7);opacity:0}
  15%{opacity:.9}
  100%{transform:translateY(-120px) translateX(var(--sway,8px)) scale(1.1);opacity:0}}
.fx-conf{width:6px;height:9px;background:var(--c);border-radius:1px;font-size:0}
@media(prefers-reduced-motion:reduce){.fx{display:none}}