/* ═══════════════════════════════════════════════════════════
   MARCELLINUS & EVELYN · Floating Letters v2
   Background: Floral watercolor
   Cards: Floral frame (Image 3)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Paper/light theme (for cards on light background) */
  --paper:      #fdfbf9;
  --paper-dim: rgba(0,0,0,.8);
  --paper-dark: #000;
  --paper-line: rgba(0,0,0,.2);
  --paper-mid: rgba(0,0,0,.65);

  /* Accent colors */
  --lilac:      #9070c0;
  --lilac-l:    #c0a0e0;
  --rose:       #b87898;
  --rose-light: #d8a8c0;
  --gold:       #c0a050;
  --gold-light: #e0d090;

  /* Fonts */
  --serif:  'Cormorant Garamond', Georgia, serif;
  --script: 'Great Vibes', cursive;
  --sans:   'Jost', 'Helvetica Neue', Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#e8daf0}
img{display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
input,textarea,select{font-family:var(--serif)}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:rgba(144,112,192,.25)}

/* ── Keyframes ─────────────────────────────────────── */
@keyframes float    {0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse    {0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes blink    {0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes card-glow{0%,100%{box-shadow:0 8px 32px rgba(140,100,200,.18),0 24px 60px rgba(100,60,160,.12)}50%{box-shadow:0 8px 32px rgba(140,100,200,.28),0 24px 60px rgba(100,60,160,.2),0 0 0 2px rgba(160,120,220,.25)}}
@keyframes seal-pulse{0%,100%{box-shadow:0 4px 20px rgba(140,80,10,.5),0 0 0 0 rgba(200,168,90,0)}50%{box-shadow:0 4px 20px rgba(140,80,10,.6),0 0 0 12px rgba(200,168,90,.25),0 0 0 26px rgba(200,168,90,.1),0 0 0 40px rgba(200,168,90,.04)}}
@keyframes seal-crack{0%{transform:translate(-50%,-50%) scale(1)}40%{transform:translate(-50%,-50%) scale(1.1) rotate(2deg)}100%{transform:translate(-50%,-50%) scale(0) rotate(-20deg);opacity:0}}
@keyframes flap-open{
  0%  { clip-path:polygon(0% 0%,100% 0%,50% 100%); filter:brightness(1.12); }
  30% { clip-path:polygon(0% 0%,100% 0%,50% 60%);  filter:brightness(1.3) drop-shadow(0 -4px 8px rgba(100,60,160,.3)); }
  70% { clip-path:polygon(0% 0%,100% 0%,50% 20%);  filter:brightness(1.4) drop-shadow(0 -6px 12px rgba(100,60,160,.4)); }
  100%{ clip-path:polygon(0% 0%,100% 0%,50% 0%);   opacity:.1; }
}
@keyframes letter-rise{0%{transform:translateY(44%) scale(.95);opacity:0}40%{opacity:1}100%{transform:translateY(-30%);opacity:1}}
@keyframes scene-exit{to{opacity:0;transform:scale(1.06)}}
@keyframes inv-enter{from{opacity:0}to{opacity:1}}
@keyframes tw-cur{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes confetti{0%{transform:translateY(-10px) rotate(0);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}
@keyframes ev-drop{from{max-height:0;opacity:0}to{max-height:340px;opacity:1}}
@keyframes ww-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes active-pop{0%{transform:translate(-50%,-50%) scale(.97)}60%{transform:translate(-50%,-50%) scale(1.015)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes float-idle{0%,100%{transform:var(--idle-t) translateY(0px)}50%{transform:var(--idle-t) translateY(-5px)}}

/* ═══════════════════════════════════════════════════════════
   ENVELOPE SCENE
═══════════════════════════════════════════════════════════ */
#env-scene{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:url('assets/bg-scene.png') center/cover;
}
#env-scene.closing{animation:scene-exit .8s ease forwards}
#env-scene.gone{display:none}

/* Garden bokeh */
.env-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bk{position:absolute;border-radius:50%;filter:blur(60px)}
.bk1{width:300px;height:300px;background:rgba(200,170,230,.3);top:-5%;left:-5%;animation:float 10s ease-in-out infinite}
.bk2{width:250px;height:250px;background:rgba(180,160,220,.2);bottom:5%;right:-4%;animation:float 12s ease-in-out infinite 3s}
.bk3{width:200px;height:200px;background:rgba(220,180,200,.25);top:30%;right:8%;animation:float 8s ease-in-out infinite 1s}
.bk4{width:350px;height:350px;background:rgba(190,170,220,.18);bottom:-12%;left:15%;animation:float 14s ease-in-out infinite 5s}

/* Subtle overlay to ensure readability */
#env-scene::before{
  content:'';position:absolute;inset:0;
  background:rgba(240,225,255,.12);
  pointer-events:none;
}

.env-wrap{display:flex;flex-direction:column;align-items:center;gap:22px;cursor:pointer;position:relative;z-index:10}

/* ── Envelope ──────────────────────────────────────── */
.envelope{
  position:relative;
  width:clamp(260px,78vw,370px);
  height:clamp(182px,55vw,258px);
  /* Image 4 as envelope face */
  background:url('assets/bg-envelope.png') center/cover;
  box-shadow:
    0 2px 0 rgba(180,140,200,.5),
    0 6px 24px rgba(120,80,160,.35),
    0 20px 60px rgba(80,50,120,.3),
    0 50px 100px rgba(0,0,0,.2);
  border-radius:2px;
  transition:transform .3s,box-shadow .3s;
  overflow:hidden;
}
.env-wrap:hover .envelope{
  transform:translateY(-5px) scale(1.01);
  box-shadow:0 2px 0 rgba(180,140,200,.5),0 8px 30px rgba(120,80,160,.45),0 28px 80px rgba(80,50,120,.35),0 60px 120px rgba(0,0,0,.22);
}

/* Fold shadow overlays (subtle, over the image) */
.env-fold-l{position:absolute;top:0;left:0;width:0;height:0;
  border-left:calc(clamp(260px,78vw,370px)/2) solid rgba(120,80,160,.1);
  border-top:calc(clamp(182px,55vw,258px)/2) solid transparent;z-index:2}
.env-fold-r{position:absolute;top:0;right:0;width:0;height:0;
  border-right:calc(clamp(260px,78vw,370px)/2) solid rgba(100,60,140,.08);
  border-top:calc(clamp(182px,55vw,258px)/2) solid transparent;z-index:2}
.env-fold-b{position:absolute;bottom:0;left:0;right:0;height:0;width:0;margin:0 auto;
  border-left:calc(clamp(260px,78vw,370px)/2) solid transparent;
  border-right:calc(clamp(260px,78vw,370px)/2) solid transparent;
  border-bottom:calc(clamp(182px,55vw,258px)/2) solid rgba(130,90,170,.06);z-index:2}

/* M & E face text */
/* ── Envelope face: M&E script (above seal) ── */
.env-script-wrap{
  position:absolute;
  top:46%;left:0;right:0;
  transform:translateY(-100%);   /* sits just above the 46% line */
  z-index:12;
  text-align:center;
  pointer-events:none;
  padding:0 8px;
}
/* ── Names + date (below seal) ── */
.env-names-wrap{
  position:absolute;
  top:72%;left:4%;right:4%;bottom:5%;
  z-index:12;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;
}
.env-script{
  font-family:var(--script);
  font-size:clamp(28px,6vw,52px);
  color:rgba(70,30,100,.75);
  text-shadow:0 1px 4px rgba(255,255,255,.8),0 2px 8px rgba(130,80,180,.2);
  line-height:1;margin-bottom:3px;
}
.env-script em{color:rgba(140,70,110,.7);font-style:normal}
.env-script-sub{
  font-family:var(--serif);font-style:italic;font-size:clamp(10px,2vw,14px);
  color:rgba(80,40,110,.55);letter-spacing:2px;margin-bottom:2px;
  text-shadow:0 1px 3px rgba(255,255,255,.7);
}
.env-script-date{
  font-family:var(--sans);font-size:8px;letter-spacing:4px;
  color:rgba(80,40,110,.4);text-transform:uppercase;
  text-shadow:0 1px 3px rgba(255,255,255,.6);
}

/* Flap (uses same image, top portion) */
.env-flap{
  position:absolute;top:0;left:0;right:0;
  height:calc(clamp(182px,55vw,258px)/2);
  background:url('assets/bg-envelope.png') center top/cover;
  clip-path:polygon(0% 0%,100% 0%,50% 100%);
  z-index:9;
  /* White overlay so flap stands out from envelope body */
  box-shadow:inset 0 -3px 12px rgba(0,0,0,.18);
  filter:brightness(1.12) contrast(1.05);
}
/* Fold crease line on flap edge */
.env-flap::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(120,80,180,.35) 20%,rgba(120,80,180,.5) 50%,rgba(120,80,180,.35) 80%,transparent);
}
.env-flap.opening{animation:flap-open .9s cubic-bezier(.25,.46,.45,.94) forwards}

/* Letter that rises from inside */
.env-letter{
  position:absolute;bottom:8%;left:8%;right:8%;height:75%;
  background:linear-gradient(135deg,#fdfbf9,#f5f0fa);
  box-shadow:0 -2px 12px rgba(100,60,140,.15);
  z-index:3;transform:translateY(44%) scale(.95);opacity:0;
  display:flex;align-items:center;justify-content:center;
}
.env-letter.rising{animation:letter-rise 1s .6s cubic-bezier(.22,1,.36,1) both}
.env-letter-inner{text-align:center;padding:10px}
.el-floret{font-size:12px;color:rgba(160,120,200,.6);margin-bottom:3px}
.el-script-sm{font-family:var(--script);font-size:clamp(16px,3.5vw,24px);color:rgba(80,40,110,.7);letter-spacing:2px}
.el-date{font-family:var(--sans);font-size:8px;letter-spacing:3px;color:rgba(80,40,110,.4);margin-top:3px}

/* Wax Seal */
.wax-seal{position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);z-index:10;cursor:pointer}
.ws-ring{display:none}  /* rings removed so they don't cover text */
.ws-ring1,.ws-ring2{display:none}
.ws-face{
  width:74px;height:74px;border-radius:50%;position:relative;z-index:2;
  background:radial-gradient(circle at 38% 32%,#f4d870,#d4a830 35%,#b08020 65%,#8a5c10);
  box-shadow:0 4px 20px rgba(140,80,10,.5),0 2px 6px rgba(0,0,0,.35),inset 0 -3px 10px rgba(80,40,0,.3),inset 0 3px 7px rgba(255,220,120,.3);
  display:flex;align-items:center;justify-content:center;
  animation:seal-pulse 1.8s ease-in-out infinite;
}
.ws-initials{font-size:22px;color:rgba(50,20,5,.65);text-shadow:0 1px 2px rgba(255,200,80,.3)}
.ws-face.cracking{animation:seal-crack .6s ease forwards}

/* Hint */
.env-hint{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:5px;text-transform:uppercase;color:rgba(60,20,90,.75);text-shadow:0 1px 4px rgba(255,255,255,.8);animation:blink 1.8s step-end infinite;transition:opacity .4s}

/* ═══════════════════════════════════════════════════════════
   LETTER SCENE
═══════════════════════════════════════════════════════════ */
#letter-scene{
  position:fixed;inset:0;z-index:50;
  display:none;
  /* Image 1: watercolor floral background */
  background:url('assets/bg-scene.png') center/cover;
}
#letter-scene::before{
  content:'';position:absolute;inset:0;
  background:rgba(240,230,250,.12); /* very slight lightening overlay */
  pointer-events:none;
}
#letter-scene.visible{display:block;animation:inv-enter .9s ease both}
#petal-canvas{position:fixed;inset:0;z-index:500;pointer-events:none}

/* ── NAVIGATION ARROWS ─────────────────────────────── */
.scene-arrow{
  position:fixed;top:50%;transform:translateY(-50%);
  z-index:200;background:rgba(255,255,255,.35);
  backdrop-filter:blur(6px);border:1px solid rgba(140,100,200,.25);
  color:rgba(70,40,110,.7);cursor:pointer;
  display:flex;align-items:center;gap:6px;
  padding:14px 12px;transition:all .35s ease;
  font-family:var(--serif);font-style:italic;font-size:11px;
}
.scene-arrow svg{width:18px;height:18px;flex-shrink:0;transition:all .35s}
.scene-arrow:hover{color:rgba(80,40,130,.95);background:rgba(255,255,255,.55);border-color:rgba(140,100,200,.45)}
.arrow-l{left:0;flex-direction:row;border-radius:0 8px 8px 0;border-left:none}
.arrow-r{right:0;flex-direction:row-reverse;border-radius:8px 0 0 8px;border-right:none;text-align:right}
#arr-l-label,#arr-r-label{font-size:10px;letter-spacing:1px;max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){#arr-l-label,#arr-r-label{display:none}}

/* ── Chapter badge ─────────────────────────────────── */
#chapter-badge{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
  z-index:200;display:flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:10px;letter-spacing:2px;
  color:rgba(70,40,110,.8);
  background:rgba(255,255,255,.55);backdrop-filter:blur(8px);
  border:1px solid rgba(140,100,200,.2);
  padding:6px 18px;border-radius:20px;pointer-events:none;
}
#ch-num{color:var(--lilac);font-weight:400}
.ch-sep,.ch-of{opacity:.4}
#ch-name{font-style:italic;font-family:var(--serif);color:rgba(70,40,110,.7)}

/* ═══════════════════════════════════════════════════════════
   LETTER CARDS — floating, highlight active, dim inactive
═══════════════════════════════════════════════════════════ */
.lc{
  position:absolute;
  top:50%;left:50%;
  width:clamp(240px,64vw,460px);
  height:clamp(320px,64vh,620px);
  /* CSS transition for smooth floating movement */
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s ease;
  border-radius:3px;
  overflow:hidden;
}

/* ── ACTIVE CARD: highlighted, sharp, centered ─────── */
.lc.is-active{
  z-index:100;
  overflow-y:auto;
  cursor:default;
  overflow-y:auto;
  will-change:transform;
  overflow-x:hidden;
  /* Beautiful highlight — appears "lifted" */
  box-shadow:
    0 0 0 2px rgba(160,120,220,.3),
    0 8px 32px rgba(120,80,180,.22),
    0 24px 72px rgba(80,50,140,.18),
    0 48px 120px rgba(0,0,0,.18);
  animation:card-glow 4s ease-in-out infinite;
}
.lc.is-active .lc-scroll{pointer-events:all}
/* Entry animation when card becomes active */
.lc.is-active:not(.was-active){
  animation:active-pop .5s cubic-bezier(.22,1,.36,1) both, card-glow 4s 0.5s ease-in-out infinite;
}

/* ── INACTIVE CARDS: visible but clearly subordinate ── */
.lc:not(.is-active){
  z-index:10;
  cursor:pointer;
  overflow:hidden;
  filter:brightness(.72) saturate(.65);
  content-visibility:auto;
  contain-intrinsic-size:460px 620px;
  box-shadow:0 4px 16px rgba(100,70,140,.15),0 12px 40px rgba(0,0,0,.12);
}
.lc:not(.is-active) .lc-scroll{pointer-events:none}
.lc:not(.is-active) *{pointer-events:none!important}

/* Hover: gently reveal = brighten slightly */
.lc:not(.is-active):hover{
  filter:brightness(.88) saturate(.80) !important;
  opacity:0.82 !important;
  box-shadow:0 4px 20px rgba(120,80,180,.25),0 14px 50px rgba(0,0,0,.16) !important;
  cursor:pointer;
}

/* ── PAPER card: Image 3 (portrait floral frame) ────── */
.lc-paper{
  background:url('assets/bg-letter.png') center/cover;
}
/* Boost readability of all text inside paper cards */
.lc-paper .lc-scroll *{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* Split (groom/bride) uses same bg on info side */
.lc-split{
  background:url('assets/bg-letter.png') center/cover;
  display:flex;
}

/* ── Photo card (story pages) ──────────────────────── */
.lc-photo{background:#1a0820}
.lp-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-color:transparent;transition:transform 10s ease}
.lc.is-active .lp-bg{transform:scale(1.04)}
.lp-dim{filter:brightness(.6) saturate(1.05)}
.lp-venue{filter:brightness(.42)}
.lp-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:20px;color:rgba(80,40,110,.6);text-align:center;font-family:var(--sans);background:url('assets/bg-letter.png') center/cover}
.lp-empty small{font-size:9px;letter-spacing:2px;opacity:.6}

/* Photo cards using <img> instead of background-image */
.lp-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
.lp-img.lp-dim{filter:brightness(.6) saturate(1.05)}
.lp-img.lp-venue{filter:brightness(.42)}
.lp-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,8,36,.95) 0%,rgba(20,8,36,.2) 48%,transparent 72%)}
.lp-veil-heavy{background:linear-gradient(to top,rgba(0,0,0,.97) 0%,rgba(0,0,0,.35) 38%,transparent 55%)}

/* ── Scroll container ──────────────────────────────── */
.lc-scroll{
  position:relative;z-index:2;
  height:100%;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;
  /* Extra top padding to clear the flower border of bg-letter.png */
  padding:clamp(50px,7vh,80px) clamp(24px,5vw,52px) clamp(24px,4vh,44px);
  scrollbar-width:none;
}
.lc-scroll::-webkit-scrollbar{display:none}
.lc-photo .lc-scroll{
  justify-content:flex-end;
  padding:clamp(16px,2vh,24px) clamp(20px,3vw,32px) clamp(24px,3vh,36px);
  overflow-y:auto;
  scrollbar-width:none;
}

/* ── Flower assets (user PNG files) ────────────────── */
/* These are for any extra flowers the user drops in per-card */
.fl{position:absolute;pointer-events:none;z-index:5;user-select:none;opacity:.75}
.fl-tl{top:-12px;left:-12px;width:clamp(80px,16vw,160px);transform:rotate(-5deg)}
.fl-tr{top:-12px;right:-12px;width:clamp(75px,14vw,150px);transform:rotate(5deg) scaleX(-1)}
.fl-bl{bottom:40px;left:-12px;width:clamp(70px,13vw,140px);transform:rotate(7deg) scaleX(-1)}
.fl-br{bottom:40px;right:-12px;width:clamp(70px,13vw,140px);transform:rotate(-7deg)}
.fl-tl-sm{top:-6px;left:-6px;width:clamp(50px,10vw,100px);transform:rotate(-7deg);opacity:.55}
.fl-tr-sm{top:-6px;right:-6px;width:clamp(48px,9vw,96px);transform:rotate(7deg) scaleX(-1);opacity:.55}
.fl-bl-sm{bottom:46px;left:-6px;width:clamp(44px,8vw,88px);transform:rotate(9deg);opacity:.5}
.fl-br-sm{bottom:46px;right:-6px;width:clamp(44px,8vw,88px);transform:rotate(-9deg) scaleX(-1);opacity:.5}

/* ═══════════════════════════════════════════════════════════
   LETTER TYPOGRAPHY  (dark purple on light bg)
═══════════════════════════════════════════════════════════ */
.letter-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.lh-line{flex:1;height:1px;background:var(--paper-line)}
.lh-cross{font-size:13px;color:#000;flex-shrink:0;font-family:var(--serif);font-weight:700}

.ltr-sal{font-family:var(--serif);font-style:italic;font-size:clamp(12px,1.8vw,15px);color:#000;font-weight:600;text-shadow:0 1px 6px rgba(255,255,255,.8);text-align:center;margin-bottom:8px;letter-spacing:.5px}
.ltr-h2{font-family:var(--serif);font-weight:800;text-shadow:0 1px 8px rgba(255,255,255,.6);font-size:clamp(20px,3.5vw,36px);letter-spacing:2px;color:var(--paper-dark);margin-bottom:4px;text-align:center}

.ltr-names{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:14px;text-align:center}
.ln-g{
  font-family:var(--serif);font-weight:500;font-size:clamp(16px,3.5vw,38px);letter-spacing:2px;
  color:#000;
  -webkit-text-fill-color:#000;
  font-weight:800;
  text-shadow:0 1px 6px rgba(255,255,255,.7);
  line-height:1.1;
}
.ln-amp{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(13px,2.5vw,26px);color:var(--rose);animation:float 3.5s ease-in-out infinite;display:block}
.ln-b{
  font-family:var(--serif);font-weight:500;font-size:clamp(16px,3.5vw,38px);letter-spacing:2px;
  color:#000;
  -webkit-text-fill-color:#000;
  font-weight:800;
  text-shadow:0 1px 6px rgba(255,255,255,.7);
  line-height:1.1;
}
.ltr-body{font-family:var(--serif);font-style:italic;font-size:clamp(11px,1.8vw,14px);color:#000;font-weight:600;text-shadow:0 1px 5px rgba(255,255,255,.8);text-align:center;line-height:1.8;margin-bottom:14px}

.ltr-date-block{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ldb-line{flex:1;height:1px;background:var(--paper-line)}
.ldb-mid{text-align:center;flex-shrink:0}
.ldb-day{font-family:var(--sans);font-size:8px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:#000;margin-bottom:3px}
.ldb-num{font-family:var(--serif);font-size:clamp(24px,4.5vw,48px);font-weight:300;color:var(--paper-dark);line-height:1}
.ldb-mo{font-family:var(--serif);font-size:clamp(10px,1.6vw,13px);font-weight:600;color:#000;margin-top:2px}
.ltr-venue{font-family:var(--serif);font-style:italic;font-size:clamp(10px,1.6vw,13px);color:#000;font-weight:600;text-shadow:0 1px 5px rgba(255,255,255,.8);text-align:center;margin-bottom:14px}

.ltr-cd{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px}
.lcd-it{text-align:center}
.lcd-it span{font-family:var(--serif);font-size:clamp(18px,2.8vw,30px);font-weight:300;color:var(--paper-dark);display:block;line-height:1;font-variant-numeric:tabular-nums}
.lcd-it small{font-family:var(--sans);font-size:7px;letter-spacing:2px;text-transform:uppercase;color:#000;font-weight:700}
.lcd-dot{font-size:16px;color:var(--paper-line);padding-bottom:14px}
.lcd-dot.blink{animation:blink 1.8s step-end infinite}

.ltr-verse{background:rgba(10,5,20,.04);border-left:2px solid rgba(10,5,20,.18);padding:10px 14px;margin:0 0 12px;font-family:var(--serif);font-style:italic;font-size:clamp(10px,1.6vw,12px);font-weight:600;color:rgba(0,0,0,.85);line-height:1.85}
.ltr-verse cite{display:block;margin-top:6px;font-family:var(--sans);font-size:7px;font-style:normal;letter-spacing:3px;text-transform:uppercase;color:rgba(0,0,0,.45)}

.ltr-foot{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:4px}
.lf-line{width:70px;height:1px;background:rgba(10,5,20,.2)}
.lf-hash{font-family:var(--sans);font-size:8px;letter-spacing:3px;font-weight:700;color:rgba(0,0,0,.6)}
.ltr-link{font-family:var(--serif);font-style:italic;font-size:13px;color:rgba(0,0,0,.75);background:none;border:none;border-bottom:1px solid var(--paper-line);padding-bottom:1px;cursor:pointer;transition:all .3s}
.ltr-link:hover{color:var(--paper-dark);border-color:var(--paper-dark)}

/* ── Groom / Bride ─────────────────────────────────── */
.split-photo{flex:0 0 40%;position:relative;overflow:hidden}
.split-photo img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block}
.sp-empty{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:32px;color:rgba(80,40,110,.35);background:rgba(240,230,250,.6)}
.sp-empty span{font-size:9px;letter-spacing:2px;font-family:var(--sans)}
.sp-veil{position:absolute;inset:0;background:linear-gradient(to right,transparent 65%,rgba(245,238,252,.95) 100%)}
.sp-veil-r{background:linear-gradient(to left,transparent 65%,rgba(245,238,252,.95) 100%)}
.split-info{flex:1;overflow:hidden;background:transparent}
.split-info-rev{order:-1}

.si-label{font-family:var(--sans);font-size:8px;font-weight:400;letter-spacing:4px;text-transform:uppercase;color:rgba(120,80,180,.6);margin-bottom:5px}
.si-name{font-family:var(--serif);font-size:clamp(14px,2.3vw,22px);font-weight:800;text-shadow:0 1px 5px rgba(255,255,255,.6);letter-spacing:1px;margin-bottom:4px;min-height:28px}
.si-name::after{content:'▌';animation:tw-cur 1s step-end infinite;font-style:normal;font-size:12px;opacity:.4}
.si-name.typed::after{display:none}
.si-lilac{color:#000;-webkit-text-fill-color:#000;font-weight:800;text-shadow:0 1px 5px rgba(255,255,255,.7)}
.si-rose{color:#000;-webkit-text-fill-color:#000;font-weight:800;text-shadow:0 1px 5px rgba(255,255,255,.7)}
.si-family{font-family:var(--serif);font-style:italic;font-size:11px;font-weight:600;color:#000;margin-bottom:9px}
.si-rule{height:1px;background:linear-gradient(90deg,rgba(140,100,200,.3),transparent);margin:9px 0}
.si-rule-rose{background:linear-gradient(90deg,rgba(180,100,140,.25),transparent)}
.si-stats{display:flex;flex-direction:column;gap:7px;margin-bottom:4px}
.ss{display:flex;align-items:center;gap:8px}
.ss span{font-family:var(--sans);font-size:7px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#000;min-width:48px}
.ssb{flex:1;height:2px;background:rgba(80,40,120,.1);border-radius:1px;overflow:hidden}
.ssf{height:100%;width:0;border-radius:1px;transition:width 1.6s cubic-bezier(.22,1,.36,1)}
.ssf-rose {background:linear-gradient(to right,rgba(180,100,140,.3),var(--rose-light))}
.ssf-lilac{background:linear-gradient(to right,rgba(140,100,200,.3),var(--lilac))}
.ssf-dim  {background:linear-gradient(to right,rgba(80,40,120,.1),rgba(80,40,120,.45))}
.ssf-gold {background:linear-gradient(to right,rgba(180,140,60,.3),var(--gold))}
.si-bio{font-family:var(--serif);font-style:italic;font-size:11px;font-weight:600;line-height:1.85;color:rgba(0,0,0,.82);padding:9px 0 9px 12px;border-left:1px solid rgba(120,80,180,.2);min-height:48px}
.si-bio::after{content:'▌';animation:tw-cur 1s step-end infinite;font-style:normal;opacity:.3}
.si-bio.typed::after{display:none}
.si-bio-rose{border-left-color:rgba(180,100,140,.18)}

/* ── Photo cards overlay ────────────────────────────── */
.lp-poem,.lp-story,.venue-plate{position:relative;z-index:2}
.lp-poem{display:flex;align-items:flex-start;gap:10px}
.lpf{font-size:14px;color:rgba(200,160,230,.5);flex-shrink:0;margin-top:2px}
.lpp-text{font-family:var(--serif);font-style:italic;font-size:clamp(13px,2vw,17px);color:rgba(240,224,255,.9);line-height:1.78;flex:1}
.lpp-text::after,.ls-body::after{content:'▌';animation:tw-cur 1s step-end infinite;font-style:normal;font-size:10px;opacity:.4}
.lpp-text.typed::after,.ls-body.typed::after{display:none}
.lpp-credit{font-family:var(--sans);font-size:9px;letter-spacing:3px;color:rgba(200,180,230,.35);margin-top:7px}
.ls-ch{font-family:var(--sans);font-size:8px;font-weight:300;letter-spacing:5px;text-transform:uppercase;color:var(--lilac-l);margin-bottom:5px}
.ls-title{font-family:var(--serif);font-size:clamp(15px,2.5vw,22px);font-weight:300;color:rgba(220,200,255,.95);letter-spacing:1px;margin-bottom:9px}
.ls-body{font-family:var(--serif);font-style:italic;font-size:clamp(11px,1.7vw,13px);color:rgba(220,205,245,.85);line-height:1.85}
.vp-label{font-family:var(--sans);font-size:8px;font-weight:300;letter-spacing:4px;text-transform:uppercase;color:rgba(180,160,230,.5);margin-bottom:5px}
.vp-name{font-family:var(--serif);font-size:clamp(15px,2.5vw,22px);font-weight:300;color:rgba(225,210,245,.9);letter-spacing:1px;margin-bottom:9px}
.vp-rows{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.vp-r{font-family:var(--sans);font-size:10px;font-weight:300;color:rgba(200,185,230,.65);display:flex;gap:7px;align-items:flex-start;line-height:1.5}

/* ── Events ────────────────────────────────────────── */
.ev-two{display:grid;grid-template-columns:1fr auto 1fr;gap:0;margin-bottom:10px}
.evb{padding:14px 12px;border:1px solid rgba(120,80,180,.2);cursor:pointer;transition:all .3s;background:rgba(255,255,255,.35);backdrop-filter:blur(2px)}
.evb:hover{background:rgba(255,255,255,.5);border-color:rgba(120,80,180,.35)}
.evb-rose:hover{border-color:rgba(180,100,140,.3);background:rgba(255,248,252,.5)}
.evb-n{font-family:monospace;font-size:7px;letter-spacing:3px;color:var(--paper-dim);margin-bottom:5px}
.evb-icon{font-size:20px;margin-bottom:5px}
.evb-type{font-family:var(--sans);font-size:7px;letter-spacing:3px;text-transform:uppercase;color:var(--paper-dim);margin-bottom:3px}
.evb-title{font-family:var(--serif);font-size:clamp(12px,2vw,17px);font-weight:300;color:rgba(100,60,160,.8);margin-bottom:3px;letter-spacing:1px}
.evb-when{font-family:var(--sans);font-size:9px;font-weight:300;color:var(--paper-dim)}
.evb-detail{overflow:hidden;max-height:0;opacity:0;transition:max-height .4s ease,opacity .3s;padding:0}
.evb-detail.open{max-height:300px;opacity:1;padding:9px 0 0}
.ebd-r{display:flex;gap:7px;margin-bottom:5px}
.ebd-r b{font-family:var(--sans);font-size:7px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:var(--paper-dim);min-width:42px;flex-shrink:0;margin-top:2px}
.ebd-r span{font-family:var(--serif);font-size:11px;color:rgba(60,28,80,.68);line-height:1.5}
.ebd-map{display:inline-block;margin-top:7px;font-family:var(--serif);font-style:italic;font-size:11px;color:rgba(120,80,180,.7);border-bottom:1px solid rgba(120,80,180,.2);padding-bottom:1px;transition:all .3s}
.ebd-map:hover{color:rgba(120,80,180,.95);border-color:rgba(120,80,180,.5)}
.ebd-map-rose{color:rgba(180,90,120,.7);border-color:rgba(180,90,120,.2)}
.ebd-map-rose:hover{color:rgba(180,90,120,.95)}
.evb-tap{font-family:var(--serif);font-style:italic;font-size:8px;color:rgba(120,80,180,.25);text-align:center;margin-top:7px;transition:opacity .3s}
.evb.open .evb-tap{opacity:0}
.ev-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 8px;gap:5px}
.evm-line{width:1px;flex:1;background:rgba(120,80,180,.15)}
.evm-heart{font-size:11px;color:var(--rose);animation:pulse 2.5s ease-in-out infinite}
.evm-cross{font-size:8px;color:rgba(180,140,80,.4)}

/* ── Gallery ────────────────────────────────────────── */
.gal-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:190px 190px;grid-auto-rows:190px;gap:3px;margin-bottom:10px}
.gi{background-size:cover;background-position:center 40%;background-color:#e8e4f0;border:1px solid rgba(120,80,180,.15);position:relative;overflow:hidden;cursor:pointer;transition:transform .3s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background-color:rgba(220,210,240,.5);background-image:repeating-linear-gradient(45deg,rgba(220,210,240,.4),rgba(220,210,240,.4) 10px,rgba(200,190,230,.4) 10px,rgba(200,190,230,.4) 20px);border:1px solid rgba(120,80,180,.15);position:relative;overflow:hidden;cursor:pointer;transition:transform .3s}
.gi:hover{transform:scale(1.03);z-index:2}
.gi-tall{grid-row:span 2}
.gi-wide{grid-column:span 2}
.gi-e{display:none}
.gi-e small{font-size:7px;letter-spacing:1px}
.gi-ov{position:absolute;inset:0;background:rgba(120,80,200,.45);opacity:0;transition:opacity .3s;display:flex;align-items:center;justify-content:center}
.gi:hover .gi-ov{opacity:1}
.lb{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;touch-action:manipulation}
.lb.open{display:flex}
.lb-bg{position:absolute;inset:0;background:rgba(0,0,0,.95)}
.lb img{max-width:90%;max-height:90%;object-fit:contain;position:relative;z-index:1}
.lb-x,.lb-l,.lb-r{position:absolute;z-index:2;background:rgba(30,10,50,.85);border:1px solid rgba(160,120,220,.3);color:rgba(160,120,220,.8);font-size:18px;width:40px;height:40px;transition:all .3s;cursor:pointer}
.lb-x{top:14px;right:14px;font-size:22px}
.lb-l{left:12px;top:50%;transform:translateY(-50%)}
.lb-r{right:12px;top:50%;transform:translateY(-50%)}
.lb-x:hover,.lb-l:hover,.lb-r:hover{background:rgba(120,80,200,.3)}

/* ── Forms (on paper/light bg) ──────────────────────── */
form{display:flex;flex-direction:column;gap:0;margin-bottom:14px}
.fg-r{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fg{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.fg label{font-family:var(--sans);font-size:8px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(0,0,0,.75)}
.fg input,.fg textarea,.fg select{background:rgba(255,255,255,.45);border:none;border-bottom:1px solid rgba(10,5,20,.18);color:#000;padding:8px 4px;outline:none;font-size:12px;transition:border-color .3s;font-family:var(--serif);font-style:italic;resize:vertical}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(80,40,120,.28);font-style:italic}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-bottom-color:rgba(120,80,200,.5);background:rgba(255,255,255,.6)}
.fg select{font-style:normal;font-family:var(--sans);font-size:11px}
.fg select option{background:#faf5ff}
.fg-btns{display:flex;gap:14px;align-items:center;margin-bottom:5px}
.fg-st{font-family:var(--serif);font-style:italic;font-size:10px;text-align:center;min-height:14px;margin-top:3px;color:rgba(80,40,110,.6)}
.fg-st.ok{color:rgba(60,140,80,.8)}.fg-st.err{color:rgba(160,50,80,.8)}
.form-btn{font-family:var(--serif);font-style:italic;font-size:12px;padding:8px 20px;background:rgba(120,80,200,.1);border:1px solid rgba(120,80,200,.3);color:rgba(100,60,170,.85);cursor:pointer;transition:all .3s;backdrop-filter:blur(2px)}
.form-btn:hover{background:rgba(120,80,200,.2);border-color:rgba(120,80,200,.5);color:rgba(80,40,150,.95)}
.form-btn-rose{border-color:rgba(180,90,130,.25);color:rgba(160,70,110,.8);background:rgba(180,90,130,.08)}
.form-btn-rose:hover{background:rgba(180,90,130,.18);border-color:rgba(180,90,130,.45)}
.att-choices{display:flex;flex-direction:column;gap:5px}
.ac{cursor:pointer;display:block}
.ac input{display:none}
.ac-btn{display:block;padding:9px 12px;border:1px solid rgba(120,80,180,.18);font-family:var(--serif);font-size:11px;color:var(--paper-dim);transition:all .3s;background:rgba(255,255,255,.3);backdrop-filter:blur(2px)}
.ac:has(input:checked) .ac-yes{border-color:rgba(120,80,200,.45);color:rgba(100,60,170,.9);background:rgba(120,80,200,.1)}
.ac:has(input:checked) .ac-no{border-color:rgba(180,80,120,.35);color:rgba(160,60,100,.85);background:rgba(180,80,120,.07)}
.wish-wall{margin-top:12px}
.ww-hdr{font-family:var(--sans);font-size:8px;letter-spacing:3px;text-transform:uppercase;color:var(--paper-dim);margin-bottom:9px}
#ww-n{font-size:12px;color:var(--lilac)}
.ww-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:7px}
.ww-card{background:rgba(255,255,255,.5);border:1px solid rgba(120,80,180,.15);backdrop-filter:blur(4px);padding:10px;position:relative;animation:ww-in .4s ease both}
.ww-card::before{content:'"';position:absolute;top:4px;left:7px;font-size:22px;color:rgba(120,80,180,.1);font-family:Georgia,serif;line-height:1}
.ww-name{font-family:var(--sans);font-size:8px;letter-spacing:1px;color:rgba(0,0,0,.85);margin-bottom:2px}
.ww-rel{font-family:var(--sans);font-size:7px;color:var(--paper-dim);margin-bottom:6px}
.ww-msg{font-family:var(--serif);font-style:italic;font-size:10px;color:rgba(0,0,0,.75);line-height:1.6}
.ww-ld,.ww-em{grid-column:1/-1;text-align:center;padding:16px;font-family:var(--serif);font-style:italic;color:var(--paper-dim);font-size:12px}

/* ── Fin page ───────────────────────────────────────── */
.fin-photo{width:100%;max-width:220px;margin:0 auto;aspect-ratio:3/4;overflow:hidden;border:1px solid rgba(120,80,180,.2);position:relative;flex-shrink:0}
.fin-photo img{width:100%;height:100%;object-fit:cover}
.fin-empty{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:32px;background:rgba(220,200,240,.3);color:rgba(80,40,120,.3)}
.fin-empty span{font-size:8px;letter-spacing:2px;font-family:var(--sans)}

/* ── Confetti ───────────────────────────────────────── */
#confetti-wrap{position:fixed;inset:0;pointer-events:none;z-index:600;overflow:hidden}
.cfp{position:absolute;top:-10px;left:var(--x);width:var(--s);height:var(--s);background:var(--c);border-radius:var(--r);animation:confetti var(--d) var(--dl) ease forwards;opacity:0}

/* ── Responsive ─────────────────────────────────────── */
@media(max-width:580px){
  .lc{width:82vw;height:74vh;max-height:600px}
  .lc-split{flex-direction:column}
  /* Side by side on mobile */
  .lc-split{flex-direction:row}
  .lc-split .split-photo{order:unset;flex:0 0 50%}
  .lc-split .split-info{order:unset;padding:clamp(16px,3vw,24px) clamp(10px,2vw,18px)}
  .lc-split .split-info-rev{order:-1}
  .split-photo img{object-position:center center}
  .sp-veil{background:linear-gradient(to right,transparent 60%,rgba(245,238,252,.95) 100%)}
  .sp-veil-r{background:linear-gradient(to left,transparent 60%,rgba(245,238,252,.95) 100%)}
  .ev-two{grid-template-columns:1fr}
  .ev-mid{flex-direction:row;gap:8px;padding:0}
  .evm-line{flex:1;width:auto;height:1px}
  .gal-grid{grid-template-columns:1fr 1fr;grid-template-rows:150px 150px 150px;gap:2px}
  .gi-tall{grid-row:span 1}
  .gi-wide{grid-column:span 1}
  .fg-r{grid-template-columns:1fr}
  .ww-grid{grid-template-columns:1fr}
}

/* ── Wedding Gift ─────────────────────────────── */
.gift-wrap{margin-top:16px;padding-top:12px}
.gift-divider{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.gift-divider span{font-family:var(--sans);font-size:8px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(0,0,0,.55);white-space:nowrap}
.gift-msg{font-family:var(--serif);font-style:italic;font-size:11px;color:rgba(0,0,0,.55);text-align:center;margin-bottom:12px;line-height:1.6}
.gift-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gift-card{border:1px solid rgba(0,0,0,.12);padding:12px 10px;text-align:center;background:rgba(255,255,255,.45);backdrop-filter:blur(4px)}
.gft-icon{font-size:22px;margin-bottom:4px}
.gft-bank{font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(0,0,0,.6);margin-bottom:6px}
.gft-num{font-family:'Courier New',monospace;font-size:14px;font-weight:700;color:#000;letter-spacing:1px;margin-bottom:3px;cursor:pointer}
.gft-sol{font-size:10px;letter-spacing:.5px;word-break:break-all}
.gft-name{font-family:var(--serif);font-style:italic;font-size:10px;color:rgba(0,0,0,.5);margin-bottom:8px}
.gft-copy{font-family:var(--sans);font-size:8px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:5px 10px;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.15);color:rgba(0,0,0,.6);cursor:pointer;transition:all .2s;width:100%}
.gft-copy:hover{background:rgba(0,0,0,.1);color:#000}
.gft-copy-sol{border-color:rgba(153,69,255,.3);color:rgba(153,69,255,.8);background:rgba(153,69,255,.06)}
.gft-copy-sol:hover{background:rgba(153,69,255,.14);color:#9945ff}
.gft-copy.copied{background:rgba(60,160,60,.1);border-color:rgba(60,160,60,.3);color:rgba(40,120,40,.8)}

/* ── Venue card with embedded map ──────────────────── */
.lc-venue-card{background:#1a0820;display:flex;flex-direction:column}
.venue-map-wrap{flex:1;min-height:0;overflow:hidden;position:relative}
.venue-map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.venue-info-bar{flex:0 0 auto;background:rgba(10,5,20,.92);padding:12px 18px;backdrop-filter:blur(8px)}
.venue-info-bar .vp-label{font-family:var(--sans);font-size:8px;font-weight:300;letter-spacing:4px;text-transform:uppercase;color:rgba(180,160,220,.45);margin-bottom:4px}
.venue-info-bar .vp-name{font-family:var(--serif);font-size:clamp(14px,2.5vw,20px);font-weight:400;color:rgba(225,210,245,.9);letter-spacing:1px;margin-bottom:8px}
.venue-info-bar .vp-rows{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.venue-info-bar .vp-r{font-family:var(--sans);font-size:10px;font-weight:300;color:rgba(200,185,220,.6);line-height:1.5}
.venue-info-bar .ltr-link{color:rgba(180,140,220,.7);border-bottom-color:rgba(180,140,220,.3)}

/* Together card — black text (bright background) */
#tw-together{
  color:#000;
  text-shadow:0 1px 8px rgba(255,255,255,.8),0 0 20px rgba(255,255,255,.5);
  font-weight:600;
}
#tw-together.typed{color:#000}
.lpp-credit{color:rgba(0,0,0,.55);text-shadow:0 1px 4px rgba(255,255,255,.6)}

/* ── Music toggle button ────────────────────────────── */
#music-btn{
  position:fixed;bottom:52px;right:14px;
  z-index:300;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(160,120,200,.3);
  font-size:16px;color:rgba(70,30,110,.7);
  cursor:pointer;transition:all .3s;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(120,80,180,.2);
}
#music-btn:hover{
  background:rgba(255,255,255,.65);
  border-color:rgba(160,120,200,.5);
  color:rgba(70,30,110,.95);
}
#music-btn.muted #music-icon{opacity:.35;text-decoration:line-through}
@keyframes music-pulse{
  0%,100%{box-shadow:0 2px 12px rgba(120,80,180,.2)}
  50%{box-shadow:0 2px 18px rgba(120,80,180,.45),0 0 0 4px rgba(160,120,220,.15)}
}
#music-btn.playing{animation:music-pulse 2s ease-in-out infinite}

/* ═══════════════════════════════════════════════════
   MOBILE ULTRA-LIGHT MODE
   Only active + 2 neighbour cards rendered
   No transitions, no shadows, no heavy effects
═══════════════════════════════════════════════════ */
@media(max-width:600px){
  /* Zero transitions on mobile — instant switch */
  .lc{ transition:none!important; }

  /* No box shadows — huge GPU saving */
  .lc,.lc.is-active{ box-shadow:none!important; animation:none!important; }

  /* No hover glow */
  .lc:not(.is-active):hover{ filter:brightness(.72) saturate(.65)!important; }

  /* Split info: own scroll so text doesn't overflow card */
  .split-info{ overflow-y:auto; -webkit-overflow-scrolling:touch; max-height:100%; }
  .split-info::-webkit-scrollbar{ display:none }

  /* Smaller bio font on mobile */
  .si-bio{ font-size:10px!important; line-height:1.7!important; }
  .si-name{ font-size:clamp(13px,3.5vw,18px)!important; }
  .si-family{ font-size:10px!important; }

  /* Together text: readable at top with overlay */
  #tw-together{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    text-shadow:0 1px 8px rgba(0,0,0,.7),0 2px 16px rgba(0,0,0,.5)!important;
    font-size:clamp(13px,3.5vw,17px)!important;
  }
}

/* Top veil for Together card (text at top, needs dark overlay) */
.lp-veil-top{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.52) 0%,transparent 45%);
  z-index:1;pointer-events:none;
}