/* Canvas invitations: 420px artboard scaled to the page width, absolutely positioned elements. */
:root { --cvz: 1; }
body.cv-body.iv-body { --ph-a: color-mix(in srgb, var(--t) 28%, #f6f3ee); --ph-b: color-mix(in srgb, var(--t) 62%, #6d6a66); --ph-fg: #fff; --ph-hl: #2b2b2b; }
.cv-body .iv-page { max-width: 500px; background: #fff; }
.cv-body .iv-backdrop { background: color-mix(in srgb, var(--t) 12%, #f4f1ec); }
.cv-body .iv-backdrop::after { display: none; }
.cv { position: relative; width: 420px; zoom: var(--cvz); margin: 0 auto; }
.cv-sec { position: relative; width: 420px; overflow: hidden; background-size: cover; background-position: center; }
.cv-sec--ovy { overflow: clip visible; }
.cv-sec--ovy:first-child { overflow: hidden; }
.cv-el { position: absolute; box-sizing: border-box; }
.cv-i { position: relative; width: 100%; height: 100%; box-sizing: border-box; }
.cv-tx .cv-i { height: auto; overflow-wrap: break-word; }
.cv-tx .cv-i span { font-family: inherit; }
.cv-tx .cv-nw { display: flex; white-space: nowrap; }
.cv-tx .cv-nw > span { flex: none; }
.cv-curtain { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--t) 55%, #fff), color-mix(in srgb, var(--t) 30%, #fff) 50%, color-mix(in srgb, var(--t) 55%, #fff)); box-shadow: inset 0 0 60px rgba(0, 0, 0, .12); }
.cv-curtain::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 14px, rgba(0, 0, 0, .04) 14px 30px); }
.cv-el svg { display: block; overflow: visible; }
.cv a, .cv button { color: inherit; }

/* Live wording on the small ticket tucked inside the lc-06 envelope. */
.cv-ticket__paper {
	position: relative; width: 100%; height: 100%; display: flex;
	color: #8d2940; border: .5px solid #c8bbb2; border-radius: 8px;
	background: repeating-linear-gradient(90deg, #fffdf9 0, #fcf8f2 3px, #fffdf9 6px);
}
.cv-ticket__names {
	box-sizing: border-box; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; gap: 3px;
	padding: 6px 0; border-right: 1px dashed #ba7784; writing-mode: vertical-rl;
	font-family: 'EB Garamond', serif; font-size: 8px; line-height: 12px; text-transform: uppercase;
}
.cv-ticket__body { flex: 1; min-width: 0; padding: 8px 5px; text-align: center; }
.cv-ticket__title { font-family: 'Great Vibes', cursive; font-size: 17px; line-height: 24px; }
.cv-ticket__date { font-family: 'EB Garamond', serif; font-size: 21px; line-height: 28px; white-space: nowrap; }
.cv-ticket__subtitle { font-family: 'Great Vibes', cursive; font-size: 13px; line-height: 20px; }
/* Transparent areas of the foreground artwork must let ticket clicks through. */
.cv-ticket-front, .cv-ticket-front .cv-i { pointer-events: none; }
.cv-livecal { position: absolute; inset: 0; display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 0 !important; }
.cv-livecal > span { display: flex; align-items: center; justify-content: center; position: relative; }
.cv-livecal .is-day:after, .cv-calg__d.is-day:after { content: ''; position: absolute; inset: 2px; border: 1px solid currentColor; border-radius: 50%; pointer-events: none; }
.cv-calg { overflow: visible; }
.iv-editing .cv-ticket:hover, .iv-editing .cv-ticket:focus-within { z-index: 2; }
.iv-editing .cv-ticket:hover .cv-ticket__paper, .iv-editing .cv-ticket:focus-within .cv-ticket__paper { box-shadow: 0 3px 12px #8d294030; }

/* Paper and watercolor washes */
.cv-paper, .cv-tex--paper {
	background-image:
		radial-gradient(120% 70% at 10% 0%, rgba(255, 255, 255, .7), transparent 60%),
		radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--t) 10%, transparent), transparent 70%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cv-paper--fill { position: absolute; inset: 0; background-color: #fbf8f2; }
.cv-tex--cloud {
	background-image:
		radial-gradient(38% 22% at 18% 12%, color-mix(in srgb, var(--t) 55%, #fff), transparent 70%),
		radial-gradient(40% 25% at 82% 30%, color-mix(in srgb, var(--t) 45%, #fff), transparent 70%),
		radial-gradient(45% 24% at 30% 55%, color-mix(in srgb, var(--t) 38%, #fff), transparent 70%),
		radial-gradient(40% 22% at 75% 78%, color-mix(in srgb, var(--t) 50%, #fff), transparent 70%),
		radial-gradient(35% 20% at 20% 92%, color-mix(in srgb, var(--t) 40%, #fff), transparent 70%),
		linear-gradient(color-mix(in srgb, var(--t) 22%, #fff), color-mix(in srgb, var(--t) 30%, #fff)) !important;
}

/* Motif paints */
.cv-m-p { fill: color-mix(in srgb, var(--t) 62%, #fff); }
.cv-m-p2 { fill: color-mix(in srgb, var(--t) 34%, #fff); }
.cv-m-c { fill: color-mix(in srgb, var(--t) 70%, #6b4a1f); }
.cv-m-l { fill: color-mix(in srgb, #5d7f4c 72%, var(--t)); }
.cv-m-l2 { fill: color-mix(in srgb, #9bb58a 70%, var(--t)); }
.cv-m-s { fill: none; stroke: color-mix(in srgb, #6b8a57 70%, var(--t)); stroke-width: 1.6; stroke-linecap: round; }
.cv-m-b { fill: color-mix(in srgb, var(--t) 80%, #333); }
.cv-m-cl { fill: color-mix(in srgb, var(--t) 42%, #fff); }
.cv-m-cl2 { fill: color-mix(in srgb, var(--t) 70%, #fff); }
.cv-body { --env: color-mix(in srgb, var(--t) 30%, #fffaf2); --seal-c: color-mix(in srgb, var(--t) 80%, #7a1d1d); }
.cv-m-env { fill: var(--env); stroke: color-mix(in srgb, var(--env) 80%, #000); stroke-width: 1; }
.cv-m-env2 { fill: color-mix(in srgb, var(--env) 88%, #000); stroke: color-mix(in srgb, var(--env) 80%, #000); stroke-width: 1; }
.cv-m-envl { fill: none; stroke: color-mix(in srgb, var(--env) 78%, #000); stroke-width: 1; }
.cv-dc--cloud .cv-i { filter: saturate(1.1); }
.cv-dc--envelope .cv-i, .cv-dc--envfront .cv-i, .cv-dc--envback .cv-i { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .18)); }
.cv-seal { width: 100%; height: 100%; --seal: var(--seal-c); --seal-hi: color-mix(in srgb, var(--seal-c) 55%, #fff); --seal-lo: color-mix(in srgb, var(--seal-c) 70%, #200); }

.cv-tex--wash {
	background-image:
		radial-gradient(60% 40% at 15% 10%, rgba(255, 255, 255, .45), transparent 70%),
		radial-gradient(70% 45% at 90% 95%, rgba(0, 0, 0, .06), transparent 70%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cv-panel { position: absolute; inset: 0; border-radius: inherit; background-color: var(--t); background-image: radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, .22), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cv-wash { position: absolute; inset: 0; background: radial-gradient(55% 35% at 20% 18%, color-mix(in srgb, var(--t) 40%, transparent), transparent 70%), radial-gradient(60% 40% at 85% 80%, color-mix(in srgb, var(--t) 35%, transparent), transparent 70%); }
.cv-corner i { position: absolute; width: 42%; aspect-ratio: 1; }
.cv-corner i:first-child { left: -6%; top: -4%; transform: rotate(-20deg); }
.cv-corner i:last-child { right: -6%; bottom: -4%; transform: rotate(160deg); }
.cv-m-fr { fill: none; stroke: color-mix(in srgb, var(--t) 85%, #333); stroke-width: 1.4; }
.cv-m-fr2 { fill: none; stroke: color-mix(in srgb, var(--t) 60%, #fff); stroke-width: .8; }
.cv-frame-c { position: absolute; left: -6px; top: -6px; width: 64px; height: 64px; }
.cv-frame-c--br { left: auto; top: auto; right: -6px; bottom: -6px; transform: rotate(180deg); }
.cv-m-st { fill: none; stroke: var(--t); stroke-width: 1.6; }
.cv-m-sf { fill: var(--t); }
.cv-calg { position: relative; overflow: visible; }
.cv-calg__d { position: absolute; display: flex; align-items: center; justify-content: center; }

/* Photos */
.cv-photo { width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.cv-ph .cv-i { overflow: hidden; }
.cv-im { display: block; max-width: none; object-fit: fill; pointer-events: none; user-select: none; }
.cv-imw { overflow: hidden; }
.cv-photo { position: relative; }
.cv-photo--demo { background: none; }
.cv .cv-crop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; display: block; object-fit: cover; object-position: 0 0; pointer-events: none; user-select: none; }
.cv-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv .iv-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Buttons */
.cv-bt { display: block; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .2s; }
.cv-bt:active { transform: scale(.97); }
.cv-bt__in { display: flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; }
.cv-bt__ico { width: 16px; height: 16px; flex: none; }
.cv-bt__ico svg { fill: currentColor; }
.cv-bt__t { display: block; }

/* Calendar */
.cv-cal { background: #fff; }
.cv-cal .iv-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; width: 100%; max-width: none; height: 100%; margin: 0; padding: 0; gap: 0; font: 400 16px/1 'Lexend', sans-serif; color: #333; }
.cv-cal .iv-cal__grid span, .cv-cal .iv-cal__grid i { font-family: 'Lexend', sans-serif !important; font-size: 16px; letter-spacing: 0; }
.cv-cal .iv-cal__w { display: flex; align-items: center; justify-content: center; background: var(--a); color: #fff; font-weight: 600; font-size: 14px; }
.cv-cal .iv-cal__d { position: relative; display: flex; align-items: center; justify-content: center; }
.cv-cal .iv-cal__d:nth-child(7n) i { font-weight: 700; }
.cv-cal .iv-cal__d i { position: relative; z-index: 1; font-style: normal; }
.cv-cal .iv-cal__d.is-mark i { font-weight: 700; color: #111; }
.cv-cal .iv-cal__heart { position: absolute; width: 36px; height: 36px; margin: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); fill: none; stroke: #e0333f; stroke-width: 1.6; animation: cv-beat 1.4s ease-in-out infinite; }
@keyframes cv-beat { 50% { transform: translate(-50%, -50%) scale(1.14); } }

/* Map */
.cv-map { overflow: hidden; border-radius: inherit; }
.cv-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Countdown */
.cv-countdown { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.cv-countdown__u { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; }
.cv-countdown__u b { font: inherit; }
.cv-countdown__line { flex: 1; text-align: inherit; white-space: nowrap; }
.cv-countdown__line b { font: inherit; }

/* Gallery: fill the placed box; main stage takes leftover height above the thumb strip. */
.cv-gal { display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; box-sizing: border-box; }
.cv-gal__main { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 6px; }
.cv-gal__slide { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #f3f1ee; opacity: 0; transform: scale(1.04); transition: opacity .8s, transform 1.4s; cursor: zoom-in; pointer-events: none; }
.cv-gal__slide img, .cv-gal__th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-gal__slide.is-on { opacity: 1; transform: none; z-index: 1; pointer-events: auto; }
.cv-gal__thumbs { display: flex; gap: 6px; height: 78px; overflow-x: auto; scrollbar-width: none; flex: none; -webkit-overflow-scrolling: touch; }
.cv-gal__thumbs::-webkit-scrollbar { display: none; }
.cv-gal__th { flex: 0 0 88px; height: 100%; padding: 0; border: 2px solid transparent; border-radius: 5px; overflow: hidden; background: none; opacity: .6; cursor: pointer; transition: opacity .3s, border-color .3s; }
.cv-gal__th.is-on { opacity: 1; border-color: var(--a); }
.cv-gal__th .iv-photo, .cv-gal__slide .iv-photo { width: 100%; height: 100%; }

/* Imported sliders keep the exact photographed stage, arrows and thumbnail geometry. */
.cv-gal--restored { display: block; }
.cv-gal--restored .cv-gal__main { flex: none; border-radius: 0; }
.cv-gal--restored .cv-gal__slide { background: none; transform: none; border-radius: 0; box-shadow: none; }
.cv-gal--restored .cv-gal__slide > .cv-el { inset: 0; width: 100% !important; height: 100% !important; }
.cv-gal--restored .cv-gal__thumbs { position: absolute; left: 0; width: 100%; display: block; }
.cv-gal__track { position: relative; height: 100%; }
.cv-gal--restored .cv-gal__th { position: absolute; top: 0; padding: 0; border: 0; border-radius: 0; opacity: var(--cv-thumb-opacity, .6); }
.cv-gal--restored .cv-gal__th.is-on { opacity: 1; }
.cv-gal__arrow { z-index: 3; }
.cv-gal__main { touch-action: pan-y; }
.cv-gal__main img { -webkit-user-drag: none; user-select: none; }
.cv-gal button:focus-visible { outline: 2px solid var(--a); outline-offset: -2px; }
.cv-gal--depth { display: block; }
.cv-gal--depth .cv-gal__main { height: 100%; overflow: visible; border-radius: 0; z-index: 0; }
.cv-gal--depth .cv-gal__slide { inset: auto; opacity: 1; transform: none; transform-origin: 0 0; background: none; overflow: visible; cursor: pointer; pointer-events: auto; transition: transform .55s ease; }
.cv-gal--depth .cv-gal__slide.is-on { cursor: zoom-in; }
.cv-gal--depth .cv-gal__slide { border-radius: 0; box-shadow: none; }
.cv-gal--restored .cv-gal__slide:hover .iv-photo, .cv-gal--depth .cv-gal__slide:hover .iv-photo { transform: none; }
.cv-gal--depth .cv-bt__ico svg { fill: none; }
.cv-depth__dot { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; }
.cv-depth__dot::before { content: ''; position: absolute; width: 20px; height: 20px; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* RSVP form on the original boxes */
.cv-form { position: absolute; inset: 0; margin: 0; }
.cv-form__f { position: absolute; left: 0; width: 100%; box-sizing: border-box; margin: 0; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--a) 22%, transparent); border-radius: 8px; background: rgba(255, 255, 255, .96); font: inherit; color: #333; outline: none; resize: none; appearance: none; -webkit-appearance: none; }
.cv-form__f:focus { border-color: var(--a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 15%, transparent); }
select.cv-form__f { background-image: linear-gradient(45deg, transparent 50%, #555 50%), linear-gradient(135deg, #555 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.cv-form__btn { position: absolute; left: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.cv-form__msg { position: absolute; left: 0; right: 0; text-align: center; font-size: 12px; }
.cv-form__f::placeholder { color: inherit; opacity: .6; }
.cv-form--source-lc .cv-form__f::placeholder { opacity: 1; }
.cv-gift-group { padding: 0; border: 0; background: transparent; font: inherit; text-align: inherit; cursor: pointer; }
.cv-wedding-pane[hidden] { display: none; }
.cv-wedding-tabs [data-wedding-tab][aria-pressed="true"] .cv-bt__in { background-color: rgb(242, 1, 1) !important; }
.cv-wedding-tabs [data-wedding-tab][aria-pressed="true"] .cv-bt__t { color: rgb(255, 255, 251) !important; }
.cv-wedding-tabs [data-wedding-tab][aria-pressed="false"] .cv-bt__in { background-color: rgba(242, 2, 2, 0) !important; }
.cv-wedding-tabs [data-wedding-tab][aria-pressed="false"] .cv-bt__t { color: rgb(115, 115, 115) !important; }
.cv-wl { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cv-wl .iv-wishes, .cv-wl .iv-wishes__track { display: flex; flex-direction: column; gap: 8px; animation: none; transform: none; height: auto; max-height: none; overflow: visible; }
.cv-wl .iv-wish { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--wl-bg, rgba(255, 255, 255, .8)); border-left: 3px solid var(--wl-bd, var(--a)); text-align: left; }
.cv-wl .iv-wish b { display: block; color: var(--wl-c, var(--a)); font-size: 13px; }
.cv-wl .iv-wish p { margin: 2px 0 0; color: var(--wl-t, #555); font-size: 12.5px; line-height: 1.45; }

/* Popups */
.cv-modal { padding: 12px; }
.cv-modal__box { position: relative; width: 420px; zoom: calc(var(--cvz) * .94); box-sizing: border-box; overflow: hidden; transform: translateY(16px) scale(.96); transition: transform .3s; }
.cv-modal.is-open .cv-modal__box { transform: none; }
.cv-modal__x { position: absolute; z-index: 5; right: 8px; top: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .88); color: #333; font: 400 24px/1 sans-serif; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.cv-qrt { display: none; position: relative; width: 100%; height: 100%; background: #fff; padding: 0; border: 0; box-shadow: none; }
.cv-qrt.is-on { display: block; }
.cv-qrt .iv-qr__svg { width: 100%; height: 100%; display: block; }
.cv-qrt__none { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 12px; color: #888; border: 1px dashed #ccc; }
.cv-qrt [hidden] { display: none !important; }
.cv-qrt__dl { position: absolute; left: 100%; bottom: 0; margin-left: 6px; padding: 4px 12px; border: 0; border-radius: 999px; background: var(--a); color: #fff; font: 500 11px/1.4 'Lexend', sans-serif; cursor: pointer; white-space: nowrap; }
.cv-qr-add { width: 100%; height: 100%; border: 1.5px dashed var(--a); border-radius: 8px; background: #fff; color: var(--a); font: 500 12px/1.4 'Lexend', sans-serif; cursor: pointer; }
.cv-bank { display: none; }
.cv-bank.is-on { display: inline; }
.cv-bank .iv-qr-lock { cursor: copy; }
.cv-bank__tabs { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.cv-bank__tabs button { padding: 3px 10px; border: 1px solid var(--a); border-radius: 999px; background: #fff; color: var(--a); font: 500 11px/1.4 'Lexend', sans-serif; cursor: pointer; }
.cv-bank__tabs button.is-on { background: var(--a); color: #fff; }

/* Cover (opening page) */
.cv-intro { background-color: #fff; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; transition: opacity .9s ease .35s, transform 1.3s cubic-bezier(.6, 0, .3, 1); }
.cv-intro .cv { flex: none; }
.iv-opening .cv-intro { opacity: 0; transform: translateX(-50%) scale(1.12); }
.iv-opening .cv-intro .cv-dc--envelope .cv-i, .iv-opening .cv-intro .cv-dc--seal .cv-i { transition: transform 1s ease, opacity .8s; transform: translateY(-30px) scale(1.05); opacity: 0; }

/* Entrance animations (same names, durations and delays as the original design) */
.cv-el[data-cva] { animation-duration: var(--ad, 1s); animation-delay: var(--al, 0s); animation-iteration-count: var(--ac, 1); animation-fill-mode: both; animation-timing-function: var(--at, ease); }
.cv-el[data-cva="in"] { opacity: 0; }
.cv-el[data-cva="in"].cv-on { opacity: 1; animation-name: var(--an); }
.cv-el[data-cva="loop"] { animation-name: var(--an); }
/* Load-time effects (curtains opening, pulses) wait behind the cover until the card is opened. */
.iv-locked:not(.iv-opened) #iv-content .cv-el[data-cva="loop"] { animation-play-state: paused; }
.iv-editing .cv-el[data-cva] { opacity: 1; animation: none; }
/* One-shot curtains would cover the design while frozen at their start position. */
.iv-editing .cv-el[style*="--an:mH"][style*="--ac:1;"] { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .cv-el[data-cva] { opacity: 1 !important; animation: none !important; } .cv-el[style*="--an:mH"][style*="--ac:1;"] { visibility: hidden; } }

/* methiep.site keyframes, kept exactly as the original designs define them */
@keyframes mtFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mtFadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mtFadeInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mtFadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mtPulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes mtBounceIn { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(.9); } 100% { opacity: 1; transform: scale(1); } }
@keyframes mtFlipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0); opacity: 1; } }
@keyframes mtFlipInY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0); opacity: 1; } }
@keyframes mtRotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } }
@keyframes mtRotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } }
@keyframes mtRotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } }
@keyframes mtRotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } }
@keyframes mtSlideInUp { 0% { opacity: 0; transform: translateY(2000px); } 100% { transform: translateY(0); } }
@keyframes mtFlipFromBottom { from { transform: rotateX(90deg); opacity: 0; } to { transform: rotateX(0deg); opacity: 1; } }
@keyframes mtSlideUpAndFlip { 0% { transform: translateY(0) rotateY(0deg); opacity: 0; } 60% { transform: translateY(-170px) rotateY(0deg); opacity: 1; } 100% { transform: translateY(-180px) rotateY(180deg); opacity: 1; } }
@keyframes mtSlideUp { from { transform: translateY(var(--distance, 170px)); } to { transform: translateY(0); } }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes pulse { from, to { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } }
@keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } }
@keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } }
@keyframes flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { transform: perspective(400px); } }
@keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); } 0% { opacity: 0; transform: scale3d(.3, .3, .3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(.9, .9, .9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(.97, .97, .97); } to { opacity: 1; transform: none; } }
@keyframes rotateIn { from { transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rotateInDownLeft { from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { transform-origin: left bottom; transform: none; opacity: 1; } }
@keyframes rotateInDownRight { from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { transform-origin: right bottom; transform: none; opacity: 1; } }
@keyframes rotateInUpLeft { from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { transform-origin: left bottom; transform: none; opacity: 1; } }
@keyframes rotateInUpRight { from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { transform-origin: right bottom; transform: none; opacity: 1; } }
@keyframes swing { 20% { transform: rotate3d(0, 0, 1, 15deg); } 40% { transform: rotate3d(0, 0, 1, -10deg); } 60% { transform: rotate3d(0, 0, 1, 5deg); } 80% { transform: rotate3d(0, 0, 1, -5deg); } to { transform: none; } }
@keyframes slideInUp { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: none; } }
@keyframes flipFromBottom { from { opacity: 0; transform: perspective(600px) rotateX(-90deg); transform-origin: bottom; } to { opacity: 1; transform: none; transform-origin: bottom; } }
@keyframes slideUpAndFlip { from { opacity: 0; transform: translateY(60px) rotateX(60deg); } to { opacity: 1; transform: none; } }
@keyframes slideUpToOriginal { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: none; } }
@keyframes moveRightToLeft { from { transform: translateX(0); } to { transform: translateX(-120%); } }
@keyframes moveLeftToRight { from { transform: translateX(0); } to { transform: translateX(120%); } }
@keyframes moveBottomToTop { from { transform: translateY(0); } to { transform: translateY(-220px); } }
@keyframes mH { from { transform: translateX(0); } to { transform: translateX(var(--distance, 100%)); } }
@keyframes mU { from { transform: translateY(0); } to { transform: translateY(var(--distance, -100%)); } }
@keyframes bhFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes bhSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes bhBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes bhGlow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes r4 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes tada { from { transform: scale(1); } 10%, 20% { transform: scale(.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes slideInDown { from { opacity: 0; transform: translateY(-2000px); } to { opacity: 1; transform: none; } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-2000px); } to { opacity: 1; transform: none; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(2000px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes bounceInDown { from { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes bounceInUp { from { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Editor on canvas */
.iv-editing .cv-intro { display: none; }
.iv-editing .cv .iv-photo[data-slot] { outline-offset: -2px; }
.cv-el[data-qr-for] { cursor: pointer; }