/* DASMA VIP — stationery themes (theme.Envelope, body.st). Loaded after invite.css, only for these
   themes: the invitation opens as a filmed envelope with a wax seal, a card rises out of it and
   becomes the page, and the page is printed on the same embossed cream paper in gold ink.
   The envelope's artwork lives in /static/themes/<envelope>/, the shared paper in
   /static/themes/stationery/. Geometry below is in the film's own frame (1080x1920), as percentages. */

.st {
  --gold-deep: #7d5f2c;
  --gold: #a9853f;
  --gold-soft: color-mix(in srgb, #a9853f 45%, transparent);
  --foil: linear-gradient(100deg, #6a4d1d 0%, #94702f 20%, #c9a45e 36%, #9a7634 50%, #6e5120 66%, #a88340 84%, #6f5220 100%);
  --caps: 'Cinzel', var(--display);
  --paper: url('/static/themes/stationery/paper-tile.webp');
  /* embossed flower sprays lifted from the envelope, as light/shadow overlays for any cream: a is a
     bottom-left spray, b a bottom-right one, both lit from the top-left. Turned (never mirrored
     upside down) so the relief stays raised. */
  --corner: url('/static/themes/stationery/emboss-corner-a.webp');
  --corner-b: url('/static/themes/stationery/emboss-corner-b.webp');
  --grain: 176px;
}
.st-bordo { --seal: url('/static/themes/bordo/seal.webp'); }
.st-smerald { --seal: url('/static/themes/smerald/seal.webp'); }
.st-blu { --seal: url('/static/themes/blu/seal.webp'); }

/* ---------- the envelope ---------- */
/* The stage keeps the film's 9:16 frame and is sized to fill a phone without cutting the envelope
   (at most 8% wider than the screen, and never taller than the envelope can afford on a wide
   screen). Around it, a blurred copy of the first frame continues the wall's light. */
.intro-env { --sw: min(max(100vw, 56.25vh), 108vw, 74vh); padding: 0; overflow: hidden; display: block; background: #cdbba9; color: #6b5543; }
@supports (height: 100dvh) { .intro-env { --sw: min(max(100vw, 56.25dvh), 108vw, 74dvh); } }
html:not(.js-ready) .intro-env { display: none; }
.intro-env::before { display: none; }
.env-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.env-stage { position: absolute; left: 50%; top: 50%; width: var(--sw); height: calc(var(--sw) * 16 / 9); transform: translate(-50%, -50%); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.env-media { position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent), linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent), linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect; }
@media (min-aspect-ratio: 2/3) {
  .env-media { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent), linear-gradient(to right, transparent, #000 6.5%, #000 93.5%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent), linear-gradient(to right, transparent, #000 6.5%, #000 93.5%, transparent); }
}
.env-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
/* the film shows itself only once it really plays: its first frame is the poster underneath */
.env-video { opacity: 0; }
html.env-film .env-video { opacity: 1; }
.env-end { opacity: 0; }
html.env-still .env-end { opacity: 1; transition: opacity .45s ease; }

/* The couple's monogram pressed into the wax, in gold. It lifts off as the flap starts to move. */
.env-seal { position: absolute; left: 50.1%; top: 55.1%; width: 21.2%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; padding: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.env-seal:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; box-shadow: 0 0 0 3px rgba(255, 250, 240, .85); }
.env-mono { font-family: var(--display); font-weight: 600; font-size: calc(var(--sw) * .062); line-height: 1; letter-spacing: .02em; white-space: nowrap;
  background: linear-gradient(160deg, #f6e6b9 0%, #d3ad62 40%, #9c7632 70%, #d9b86f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(40, 0, 0, .55)) drop-shadow(0 -.5px 0 rgba(255, 240, 200, .25)); }
.env-mono i { font-style: italic; font-weight: 500; font-size: .72em; margin: 0 .06em; }
/* a soft ring breathes around the seal: this is where to touch */
.env-seal::before { content: ""; position: absolute; inset: -9%; border-radius: 50%; border: 1px solid rgba(255, 236, 196, .75); opacity: 0; animation: envBreathe 2.8s ease-out 2.2s infinite; pointer-events: none; }
@keyframes envBreathe { 0% { transform: scale(.92); opacity: .85; } 100% { transform: scale(1.32); opacity: 0; } }

/* written on the flap: who the invitation is for (a personal link) or the couple's names */
.env-address { position: absolute; left: 50%; bottom: 55.5%; width: 66%; transform: translateX(-50%); text-align: center; pointer-events: none; mix-blend-mode: multiply; color: #5e4836; }
.env-for { display: block; font-family: var(--caps); font-size: calc(var(--sw) * .024); letter-spacing: .28em; text-transform: uppercase; opacity: .72; margin-bottom: .5em; }
.env-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-family: var(--script, var(--display)); font-size: calc(var(--sw) * .088); line-height: 1.3; opacity: .92; overflow-wrap: break-word; }
.env-long .env-name, .env-long-for .env-name { font-size: calc(var(--sw) * .066); }
.env-xlong-for .env-name { font-size: calc(var(--sw) * .052); }
.env-hint { position: absolute; left: 50%; top: 65.4%; transform: translateX(-50%); width: 84%; text-align: center; pointer-events: none; font-family: var(--caps); font-size: max(12px, calc(var(--sw) * .025)); letter-spacing: .24em; text-transform: uppercase; color: #5a4533; mix-blend-mode: multiply; animation: envHint 1.2s ease .8s backwards, envPulse 2.8s ease-in-out 2s infinite; }
@keyframes envHint { from { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes envPulse { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
/* the entrance: the words on the paper arrive after the envelope has settled on the screen */
.env-address, .env-seal .env-mono { animation: envInkIn 1.4s ease .35s backwards; }
@keyframes envInkIn { from { opacity: 0; } }

/* the tap: the seal is pressed, the ink and the monogram lift away before the flap moves */
html.env-play .env-seal { pointer-events: none; }
html.env-play .env-seal::before { animation: none; opacity: 0; }
html.env-play .env-mono { animation: envPress .5s ease-in forwards; }
@keyframes envPress { 0% { transform: none; opacity: 1; } 30% { transform: scale(.94); opacity: 1; } 100% { transform: scale(.94); opacity: 0; } }
html.env-play .env-address, html.env-play .env-hint { animation: none; opacity: 0; transition: opacity .35s ease; }
html.env-play .env-stage { cursor: default; }

/* The card that comes out. It sits exactly where the film's blank card is, and is clipped to the
   envelope's mouth (everything above the envelope, plus the opening between the side flaps and the
   pocket), so while it rises its lower part stays inside the envelope. */
.env-window { position: absolute; inset: 0; pointer-events: none;
  clip-path: polygon(-400% -300%, 500% -300%, 500% 35.4%, 89.8% 35.5%, 86.1% 36.5%, 84.3% 38.3%, 83.3% 40.1%, 82.4% 41.25%, 57.4% 55.9%, 56.5% 56.8%, 43.5% 56.8%, 42.6% 56.1%, 18.5% 41.9%, 17.6% 41.4%, 16.7% 40.4%, 15.7% 38.3%, 14.8% 37.3%, 13% 36.3%, 10.2% 35.6%, -400% 35.4%); }
.env-card { position: absolute; left: 18%; top: 36.25%; width: 64.4%; height: 42.7%; opacity: 0; will-change: transform, opacity;
  background: var(--paper) repeat, linear-gradient(100deg, #efe9e0, #ebe3d7 60%, #e8dfd2); background-size: calc(var(--sw) * .36) auto, auto;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .55) inset, 0 14px 28px -20px rgba(70, 58, 44, .3);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 9%; text-align: center; color: var(--gold-deep); }
.env-card-kicker { font-family: var(--caps); font-size: calc(var(--sw) * .024); letter-spacing: .3em; text-transform: uppercase; color: #7d6754; }
.env-card-names { margin-top: .35em; font-family: var(--script, var(--display)); font-size: calc(var(--sw) * .1); line-height: 1.28; padding: .05em .2em; color: #8a6a2f;
  background: linear-gradient(100deg, #6c4f1f 0%, #9a7433 30%, #c9a45e 46%, #93702f 62%, #6f5220 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.env-card-names i { display: block; font-family: var(--display); font-style: italic; font-size: .42em; line-height: 1.2; }
.env-long .env-card-names { font-size: calc(var(--sw) * .074); }
.env-card-date { margin-top: .7em; font-family: var(--caps); font-size: calc(var(--sw) * .022); letter-spacing: .2em; text-transform: uppercase; color: #7d6754; }
html.env-rise .env-card > * { animation: envInkIn .9s ease backwards; }
html.env-rise .env-card-kicker { animation-delay: .35s; }
html.env-rise .env-card-names { animation-delay: .5s; }
html.env-rise .env-card-date { animation-delay: .75s; }

/* the zoom: the envelope sinks away and the mouth opens wide, the card grows to the whole screen
   and its words give way to the page's own */
.env-window { transition: clip-path .5s cubic-bezier(.5, 0, .75, 0); }
html.env-zoom .env-window { clip-path: polygon(-400% -300%, 500% -300%, 500% 400%, 89.8% 400%, 86.1% 400%, 84.3% 400%, 83.3% 400%, 82.4% 400%, 57.4% 400%, 56.5% 400%, 43.5% 400%, 42.6% 400%, 18.5% 400%, 17.6% 400%, 16.7% 400%, 15.7% 400%, 14.8% 400%, 13% 400%, 10.2% 400%, -400% 400%); }
html.env-zoom .env-media { opacity: 0; transform: translateY(4%) scale(.97); transition: opacity .6s ease .05s, transform 1s cubic-bezier(.5, 0, .3, 1); }
html.env-zoom .env-card > * { opacity: 0; transition: opacity .32s ease .38s; }

/* The veil lifts straight away (the card already fills the screen), a little faster than the seal's. */
html.intro-open .intro-env { transition: opacity .75s var(--ease-draw), visibility 0s linear .75s; }
/* Failsafe: whatever happens to the script after the tap, the veil is gone 9.5 s later and the page
   scrolls again. !important beats the reduced-motion kill switch: this is not decoration. */
html.env-play:not(.intro-open) .intro-env { animation: introFailsafe 0s linear 9.5s forwards !important; }
html.env-play.intro-lock:not(.intro-open) { animation: envUnlock 0s linear 9.5s forwards !important; }
@keyframes envUnlock { to { overflow: visible; } }

/* ---------- the page: embossed paper, gold ink ---------- */
body.st { background: var(--paper) repeat, var(--bg); background-size: var(--grain) auto, auto; font-size: 18.5px; font-weight: 500; line-height: 1.55; }
.st h1, .st h2, .st h3 { font-weight: 500; }

/* The hero is the card that came out of the envelope: framed with a hairline of gold, embossed
   flowers in two corners. */
.st .inv:not(.layout-photo) .hero { margin-top: 14px; padding: clamp(40px, 10vw, 76px) clamp(18px, 6vw, 48px) clamp(44px, 10vw, 70px);
  background: var(--paper) repeat, var(--surface); background-size: var(--grain) auto, auto; border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 34px 60px -40px rgba(70, 48, 26, .5), 0 3px 8px -4px rgba(70, 48, 26, .14);
  outline: 1px solid var(--gold-soft); outline-offset: -11px; }
/* the sprays are pressed into the paper, so they sit under the words (isolation keeps them above the card) */
.st .inv:not(.layout-photo) .hero { isolation: isolate; }
.st .inv:not(.layout-photo) .hero::before, .st .inv:not(.layout-photo) .hero::after { content: ""; position: absolute; z-index: -1; width: clamp(108px, 36vw, 170px); height: clamp(108px, 36vw, 170px); pointer-events: none; }
/* one spray on a diagonal, turned for the top corner: lit from the top-left, like the envelope in the film */
.st .inv:not(.layout-photo) .hero::before { right: 2px; top: 2px; background: var(--corner) no-repeat left bottom / contain; transform: scaleX(-1) rotate(90deg); }
.st .inv:not(.layout-photo) .hero::after { left: 2px; bottom: 2px; background: var(--corner) no-repeat left bottom / contain; }
.st .inv-lang a { font-family: var(--caps); font-size: .64rem; letter-spacing: .2em; border-color: var(--gold-soft); color: var(--muted); background: color-mix(in srgb, var(--surface) 70%, transparent); }

.st .inv:not(.layout-photo) .hero .invite { font-family: var(--caps); font-size: .68rem; letter-spacing: .32em; color: var(--muted); }
.st .hero-cover-text .invite { font-family: var(--caps); font-size: .68rem; letter-spacing: .3em; }
.st .names { color: var(--gold); padding: .06em .12em; }
.st .names.script { font-size: clamp(3.1rem, 13.5vw, 5.6rem); line-height: 1.22; }
.st .names .amp { font-family: var(--display); font-style: italic; color: var(--gold); }
.st .names { overflow-wrap: break-word; }
.st .layout-editorial .names.script { font-size: clamp(2.3rem, 9.6vw, 4.1rem); }
.st .layout-editorial .names .amp { display: inline-block; }
.st .inv:not(.layout-photo).layout-editorial .hero-photo { width: min(420px, 100%); }
.st .tagline { font-size: 1.3rem; color: var(--muted); }
/* gold foil: the gradient is painted on the heading, or, while invite-motion.js has the names
   wrapped for their entrance, on each moving piece (a clipped background does not follow a child
   that moves on its own layer) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .st .names:not(:has(.ln, .nm)), .st .sec-title, .st .rsvp-box h2, .st .celebrate h2 { background: var(--foil); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
  .st .names:has(.ln, .nm) .ln-i, .st .names:has(.ln, .nm) .nm, .st .names:has(.ln, .nm) .amp { background: var(--foil); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
  /* the foil catches the light twice, then rests (a repaint every frame is not worth it for longer) */
  @media (prefers-reduced-motion: no-preference) {
    .st .names, .st .names .ln-i, .st .names .nm, .st .sec-title { animation: foil 9s ease-in-out 2; }
  }
}
@keyframes foil { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* the monogram is the seal itself */
.st .monogram { width: 96px; height: 96px; border: 0; background: var(--seal) center / contain no-repeat; font-family: var(--display); font-size: 1.55rem; font-weight: 600; letter-spacing: .04em; color: #efd9a2; text-shadow: 0 1px 1px rgba(20, 0, 0, .55); filter: drop-shadow(0 8px 10px rgba(60, 20, 10, .18)); }
.st .monogram::after { display: none; }
/* under the photograph the seal is pressed onto the print's lower edge, and the names come up with it */
.st .hero-photo + .monogram { position: relative; z-index: 1; margin-top: -60px; margin-bottom: 22px; }
.st .hero-photo { margin-bottom: 0; }
.st .hero-photo + .ornament-floral, .st .hero-photo + .ornament-line { margin-top: 28px; }
.st .ornament-line { background: var(--gold); }
.st .ornament-line::before, .st .ornament-line::after { background: var(--gold); }
.st .ornament-floral { color: var(--gold); }

.st .date-block .day { color: var(--gold-deep); font-weight: 500; }
.st .date-block .month, .st .date-block .weekday, .st .weekday-line { font-family: var(--caps); font-size: .68rem; letter-spacing: .26em; }
.st .date-block .sep { background: var(--gold-soft); }
.st .bigdate .d { color: var(--gold-deep); }
.st .bigdate .my b { font-family: var(--caps); color: var(--gold-deep); }
.st .countdown div { background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--gold-soft); border-radius: 2px; }
.st .countdown b { color: var(--gold-deep); font-weight: 500; }
.st .countdown div > span { font-family: var(--caps); font-size: .56rem; letter-spacing: .18em; }
.st .countdown-msg { color: var(--gold-deep); }

/* photo layout: the couple's picture framed like a print laid on the paper */
.st .hero-photo { border: 7px solid var(--surface); box-shadow: 0 0 0 1px var(--gold-soft), 0 26px 50px -30px rgba(60, 40, 20, .5); }
.st .hero-cover { border-radius: 0 0 6px 6px; }
.st .layout-photo .hero-cover-text .names { color: #fff; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .st .layout-photo .hero-cover-text .names:not(:has(.ln, .nm)),
  .st .layout-photo .hero-cover-text .names:has(.ln, .nm) :is(.ln-i, .nm, .amp) { background: linear-gradient(100deg, #fff6df, #f1dca6 40%, #fff3d6 60%, #e9cf93); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}

/* ---------- sections ---------- */
.st .inv .sec { border-top: 0; margin-top: 0; }
.st .inv .sec::before, .st .inv.layout-minimal .sec + .sec::before { content: ""; display: block; width: 190px; height: 18px; margin: 0 auto 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 18'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='.8'%3E%3Cpath d='M4 9h72M114 9h72'/%3E%3Cpath d='M95 2.5l6.5 6.5-6.5 6.5-6.5-6.5z'/%3E%3Cpath d='M95 6l3 3-3 3-3-3z' fill='%23a9853f'/%3E%3C/g%3E%3Cg fill='%23a9853f'%3E%3Ccircle cx='81' cy='9' r='1.3'/%3E%3Ccircle cx='109' cy='9' r='1.3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.st .sec-title { font-family: var(--script, var(--display)); font-size: clamp(2.45rem, 9.8vw, 3.15rem); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.35; margin-bottom: 24px; padding: .08em .25em; color: var(--gold); }
.st .text { font-style: italic; font-size: clamp(1.3rem, 3.2vw, 1.5rem); line-height: 1.5; }
.st .family .lbl, .st .place .lbl, .st .ev-date span, .st .rsvp-box .deadline, .st .personal { font-family: var(--caps); font-size: .64rem; letter-spacing: .22em; font-weight: 500; }
.st .rsvp-box .deadline { font-size: .74rem; letter-spacing: .16em; }
.st .family .val { font-size: 1.45rem; }
.st .dress { font-style: italic; }
.st .note { font-size: 1.08rem; }

/* cards are smaller sheets of the same paper */
.st .place, .st .event, .st .rsvp-box, .st .wish, .st .map { border: 1px solid color-mix(in srgb, var(--accent2) 80%, #fff); border-radius: 4px; background: var(--paper) repeat, var(--surface); background-size: var(--grain) auto, auto; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 20px 40px -32px rgba(70, 48, 26, .45), 0 2px 5px -3px rgba(70, 48, 26, .12); }
.st .place { position: relative; outline: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); outline-offset: -7px; }
.st .place h3 { font-size: 1.65rem; font-weight: 600; }
.st .place .time, .st .ev-date b { color: var(--gold-deep); font-weight: 500; }
.st .ev-date { border-color: var(--gold-soft); }
.st .wish p { font-size: 1.25rem; }

.st .btn { font-family: var(--caps); font-weight: 500; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; border-radius: 2px; padding: 12px 20px; }
.st .btn-solid { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.st .btn-solid:hover { filter: brightness(1.08); }
.st .btn svg { width: 15px; height: 15px; }

/* schedule rail and dots in gold */
.st .schedule li::before { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 14%, transparent); }
.st .schedule li:not(:last-child)::after { background: linear-gradient(var(--gold), var(--gold)) top / 100% calc(var(--seg, 1) * 100%) no-repeat color-mix(in srgb, var(--gold) 22%, transparent); }
.st .schedule .t { color: var(--gold-deep); font-style: italic; font-size: 1.45rem; }
.st .schedule .d { font-size: 1.12rem; }

/* photographs are prints with a white border */
.st .shot { border: 7px solid var(--surface); border-radius: 2px; box-shadow: 0 16px 32px -20px rgba(60, 40, 20, .5); }

/* RSVP: the reply card, sealed with the wax seal */
.st .rsvp-box { position: relative; outline: 1px solid var(--gold-soft); outline-offset: -10px; padding-top: clamp(62px, 14vw, 78px); }
.st .rsvp-box::before { content: ""; position: absolute; left: 50%; top: -30px; width: 66px; height: 66px; transform: translateX(-50%); background: var(--seal) center / contain no-repeat; filter: drop-shadow(0 6px 8px rgba(60, 20, 10, .2)); }
.st .rsvp-box { isolation: isolate; }
.st .rsvp-box::after { content: ""; position: absolute; z-index: -1; right: 1px; bottom: 1px; width: clamp(84px, 26vw, 120px); height: clamp(84px, 26vw, 120px); background: var(--corner-b) no-repeat right bottom / contain; pointer-events: none; }
.st .rsvp-box h2 { font-family: var(--script, var(--display)); font-weight: 400; font-size: clamp(2.3rem, 9vw, 2.9rem); line-height: 1.35; padding: .05em .2em; color: var(--gold); }
.st .f label { font-family: var(--caps); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.st .in { border-radius: 3px; background-color: color-mix(in srgb, var(--surface) 70%, var(--bg)); font-size: 17px; }
.st .seg span { font-family: var(--caps); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; border-radius: 3px; }
.st .check { border-radius: 3px; }
.st details.more summary { font-family: var(--caps); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.st .celebrate .check { background: var(--accent); }

.st .inv-footer { border-top-color: var(--gold-soft); font-family: var(--caps); font-size: .6rem; letter-spacing: .2em; }
.st .actbar a { font-family: var(--caps); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
@media (max-width: 380px) { .st .actbar a { letter-spacing: .04em; padding-inline: 10px; } }

/* gold dust over the page (invite-stationery.js draws it; decoration only) */
.st-dust { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }