/* ==========================================================
   उत्तम ❤️ लक्ष्मी — birthday surprise
   Light palette: ivory · blush · rose · champagne gold · wine ink
   ========================================================== */
:root {
  --paper: #fffaf3;
  --blush: #fdeeea;
  --blush-2: #f7d9db;
  --rose: #e3879a;
  --rose-deep: #c2475f;
  --wine: #8e2440;
  --ink: #4a1626;
  --ink-soft: #7d4453;
  --gold: #c9a45c;
  --gold-hi: #ecd49a;
  --gold-deep: #9f7a32;
  --shadow: rgba(142, 36, 64, .18);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  --f-np: "Noto Serif Devanagari", "Kohinoor Devanagari", "Noto Sans Devanagari", "Mukta", serif;
  --f-hand: "Kalam", "Noto Serif Devanagari", "Kohinoor Devanagari", cursive;
  --f-script: "Great Vibes", "Cormorant Garamond", cursive;

  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cpath d='M100 172C40 128 4 92 4 54 4 24 28 4 56 4c20 0 36 12 44 28 8-16 24-28 44-28 28 0 52 20 52 50 0 38-36 74-96 118z'/%3E%3C/svg%3E");
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  position: fixed; inset: 0;
  background: radial-gradient(120% 85% at 50% 30%, #fffaf3 0%, #fdeeea 48%, #f6d6d9 100%) var(--blush);
  color: var(--ink);
  font-family: var(--f-np);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
button { font: inherit; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- layers ---------- */
.bg { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.8s var(--ease-io); z-index: 0; }
.bg-velvet {
  background:
    radial-gradient(60% 40% at 50% 38%, rgba(255, 226, 170, .55), transparent 70%),
    radial-gradient(95% 70% at 50% 45%, #fff6ee 0%, #fbe1e1 52%, #f1c7cd 100%);
}
.bg-ivory { background: linear-gradient(180deg, #fffdf8 0%, #fdf1ea 45%, #f7dadb 80%, #efc3ca 115%); }
body[data-scene="5"] .bg-velvet, body[data-scene="6"] .bg-velvet { opacity: 1; }
body[data-scene="7"] .bg-ivory { opacity: 1; }

#ambient, #fx { position: fixed; inset: 0; pointer-events: none; }
#ambient { z-index: 1; }
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(125% 95% at 50% 42%, transparent 60%, rgba(194, 71, 95, .12) 100%);
}
#stage { position: fixed; inset: 0; z-index: 3; }
.dimmer { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255, 236, 200, .9), rgba(255, 248, 242, .97) 70%); opacity: 0; transition: opacity 1.3s var(--ease-io); }
.dimmer.on { opacity: 1; }
.flash { position: fixed; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(circle at 50% 42%, #fff, rgba(255, 232, 190, .9) 40%, rgba(255, 245, 235, .6) 80%); opacity: 0; transition: opacity .7s var(--ease-io); }
.flash.on { opacity: 1; }
#fx { z-index: 6; }

/* ---------- HUD ---------- */
.hud {
  position: fixed; z-index: 8; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(10px + var(--safe-t)) 14px 8px;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
#btn-back { grid-column: 1; justify-self: start; }
.progress { grid-column: 2; }
.hud-right { grid-column: 3; justify-self: end; display: flex; gap: 8px; }
.hud-btn {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  color: var(--wine);
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(142, 36, 64, .2);
  box-shadow: 0 4px 14px rgba(142, 36, 64, .1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .2s var(--ease-out), background .3s, border-color .3s, opacity .3s;
  touch-action: manipulation;
}
.hud-btn svg { width: 20px; height: 20px; }
.hud-btn:hover { background: #fff; border-color: rgba(142, 36, 64, .4); }
.hud-btn:active { transform: scale(.92); }
.hud-btn:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 3px; }
.hud-btn:disabled { opacity: .4; cursor: default; }
#btn-music .ic-on { display: none; }
#btn-music.playing .ic-on { display: block; }
#btn-music.playing .ic-off { display: none; }
.eq { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: none; gap: 2px; height: 6px; align-items: flex-end; }
#btn-music.playing .eq { display: flex; }
.eq i { width: 2px; background: var(--rose-deep); border-radius: 1px; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .2s; }
.eq i:nth-child(3) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { height: 2px; } 50% { height: 6px; } }
#btn-music.playing svg { transform: translateY(-2px); }

.progress { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; }
.progress li { width: 6px; height: 6px; border-radius: 3px; background: rgba(142, 36, 64, .16); transition: width .6s var(--ease-out), background .6s; }
.progress li.done { background: rgba(194, 71, 95, .5); }
.progress li.now { width: 20px; background: linear-gradient(90deg, var(--rose-deep), var(--gold)); }
body[data-scene="0"] .progress, body[data-scene="1"] .progress { opacity: 0; }

.toast {
  position: fixed; z-index: 9; left: 50%; bottom: calc(18px + var(--safe-b));
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--wine); font-size: 14px; text-align: center;
  border: 1px solid rgba(201, 164, 92, .5); box-shadow: 0 8px 24px var(--shadow);
  transition: opacity .5s, transform .5s var(--ease-out);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- scenes ---------- */
.scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 2.4vh, 24px);
  padding: calc(66px + var(--safe-t)) 20px calc(28px + var(--safe-b));
  text-align: center;
  opacity: 0; visibility: hidden;
  transform: scale(1.035); filter: blur(6px);
  transition: opacity 1.1s var(--ease-io), transform 1.4s var(--ease-out), filter 1.1s var(--ease-io), visibility 0s linear 1.1s;
}
.scene.active {
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition-delay: .25s, .25s, .25s, 0s;
}
.scene.scroll-scene { padding: 0; justify-content: flex-start; }
.scroll { position: relative; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
[data-focus]:focus { outline: none; }

.title {
  margin: 0; max-width: 22ch;
  font-size: clamp(23px, 6.3vw, 34px); font-weight: 600; line-height: 1.55;
  color: var(--wine);
  text-shadow: 0 2px 18px rgba(227, 135, 154, .3);
}
.title.small { font-size: clamp(21px, 5.6vw, 30px); }
.subtitle { margin: -6px 0 0; color: var(--ink-soft); font-size: clamp(16px, 4.3vw, 19px); line-height: 1.7; }
.rise-in { opacity: 0; }
.scene.active .rise-in { animation: riseIn 1.3s var(--ease-out) both; animation-delay: var(--dl, .45s); }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- buttons ---------- */
.cta {
  position: relative; overflow: hidden; max-width: 100%;
  min-height: 52px; padding: 14px 28px; border-radius: 999px; cursor: pointer;
  font-size: clamp(16px, 4.4vw, 18px); font-weight: 600; line-height: 1.5; color: #fff;
  border: 1px solid rgba(236, 212, 154, .95);
  background: linear-gradient(180deg, #d65c76, #a02e4c);
  box-shadow: 0 10px 26px rgba(160, 46, 76, .3), 0 0 0 4px rgba(201, 164, 92, .16), inset 0 1px 0 rgba(255, 255, 255, .35);
  opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), box-shadow .3s, background .3s;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 245, 225, .45) 50%, transparent 70%);
  transform: translateX(-120%); animation: sheen 5s ease-in-out infinite 1.5s;
}
@keyframes sheen { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.cta.show { opacity: 1; transform: none; pointer-events: auto; }
.cta.show:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(160, 46, 76, .36), 0 0 0 5px rgba(201, 164, 92, .24), inset 0 1px 0 rgba(255, 255, 255, .4); }
.cta.show:active, .cta.show.pressed { transform: scale(.95); transition-duration: .12s; }
.cta:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }
.cta.ghost { background: rgba(255, 255, 255, .7); border-color: rgba(142, 36, 64, .35); color: var(--wine); box-shadow: 0 6px 18px rgba(142, 36, 64, .1); }
.cta.ghost::before { display: none; }
.cta.ghost.show:hover { background: #fff; box-shadow: 0 8px 22px rgba(142, 36, 64, .16); }
.btn-col { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn-row .cta { font-size: 16px; padding: 12px 20px; min-height: 48px; }
.link-btn {
  background: none; border: 0; cursor: pointer; padding: 10px 14px; border-radius: 10px;
  color: var(--ink-soft); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(194, 71, 95, .4);
  touch-action: manipulation;
}
.link-btn:hover { color: var(--wine); }
.link-btn:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 2px; }

/* ==========================================================
   1 · Envelope
   ========================================================== */
.center-light {
  position: absolute; left: 50%; top: 40%; width: 140vmax; height: 140vmax; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 220, 170, .5) 0%, rgba(255, 200, 190, .18) 22%, transparent 45%);
  pointer-events: none; animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.envelope-wrap { position: relative; margin: 22px 0 10px; }
.envelope {
  position: relative; width: min(74vw, 320px); aspect-ratio: 1.5;
  perspective: 900px;
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-12px) rotate(1.2deg); } }
.envelope > * { position: absolute; }
.env-back {
  inset: 0; border-radius: 10px;
  background: linear-gradient(160deg, #f5c3ca, #e7a3ae);
  box-shadow: 0 26px 50px rgba(142, 36, 64, .25), 0 0 80px rgba(255, 200, 160, .35);
}
.env-burst {
  left: 50%; top: 20%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255, 220, 160, .6) 40%, transparent 70%);
  transform: scale(0); opacity: 0; transition: transform 1.8s var(--ease-out), opacity 1.8s;
}
.env-card {
  left: 7%; right: 7%; top: 7%; height: 86%; z-index: 2; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; gap: 9px; padding-top: 11%;
  background: linear-gradient(180deg, #fffdf8, #fbf1e4);
  box-shadow: 0 2px 10px rgba(74, 22, 38, .12);
  transition: transform 1.3s var(--ease-out);
}
.env-card-heart { width: 30px; height: 27px; }
.env-card-line { width: 58%; height: 3px; border-radius: 3px; background: rgba(194, 71, 95, .22); }
.env-card-line.short { width: 38%; }
.env-pocket { inset: 0; z-index: 3; filter: drop-shadow(0 -2px 3px rgba(142, 36, 64, .15)); }
.env-pocket::before {
  content: ""; position: absolute; inset: 0; border-radius: 0 0 10px 10px;
  background: linear-gradient(200deg, #fbd6db, #eeb0ba);
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
}
.env-flap { left: 0; right: 0; top: 0; height: 100%; z-index: 4; transform-origin: 50% 0; transition: transform 1s var(--ease-io); filter: drop-shadow(0 4px 4px rgba(142, 36, 64, .18)); }
.env-flap::before {
  content: ""; position: absolute; inset: 0; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #f9d2d8, #e9a6b1);
  clip-path: polygon(0 0, 100% 0, 50% 58%);
}
.seal {
  width: 56px; height: 56px; left: calc(50% - 28px); top: calc(58% - 36px); z-index: 5;
  animation: sealGlow 2.6s ease-in-out infinite;
}
@keyframes sealGlow {
  0%, 100% { filter: drop-shadow(0 4px 8px rgba(120, 60, 10, .35)) drop-shadow(0 0 6px rgba(240, 200, 120, .4)); }
  50% { filter: drop-shadow(0 4px 8px rgba(120, 60, 10, .35)) drop-shadow(0 0 18px rgba(240, 200, 120, .9)); }
}
.seal-half {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4cf 0%, #ebc36d 32%, #c08e35 68%, #8f641d 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 240, 200, .4), inset 0 -3px 6px rgba(90, 50, 0, .35);
  transition: transform .9s var(--ease-out), opacity .9s;
}
.seal-half::after {
  content: ""; position: absolute; inset: 15px 14px 13px;
  background: #a02e4c; opacity: .85;
  -webkit-mask: var(--heart) center / contain no-repeat; mask: var(--heart) center / contain no-repeat;
}
.seal-half.left { clip-path: polygon(0 0, 52% 0, 45% 28%, 56% 50%, 46% 74%, 53% 100%, 0 100%); }
.seal-half.right { clip-path: polygon(52% 0, 100% 0, 100% 100%, 53% 100%, 46% 74%, 56% 50%, 45% 28%); }
.env-shadow { position: absolute; left: 12%; right: 12%; bottom: -26px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(142, 36, 64, .28), transparent); animation: shadow 6s ease-in-out infinite; }
@keyframes shadow { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(.88); opacity: .55; } }

.envelope.broken .seal { animation: none; }
.envelope.broken .seal-half.left { transform: translate(-18px, 22px) rotate(-32deg); opacity: 0; }
.envelope.broken .seal-half.right { transform: translate(18px, 26px) rotate(30deg); opacity: 0; }
.envelope.open .env-flap { transform: rotateX(180deg); }
.envelope.flap-behind .env-flap { z-index: 1; }
.envelope.rise { animation-play-state: paused; }
.envelope.rise .env-card { transform: translateY(-56%); }
.envelope.rise .env-burst { transform: scale(10); opacity: 1; }

/* the first photo rising out of the envelope — whole photo, never cropped */
.reveal-photo {
  position: absolute; left: 50%; top: 48%; z-index: 6; margin: 0;
  padding: 9px 9px 28px; background: #fff; border-radius: 6px;
  box-shadow: 0 18px 40px rgba(74, 22, 38, .22), 0 0 60px rgba(255, 220, 160, .6);
  opacity: 0; transform: translate(-50%, -30%) scale(.35) rotate(-6deg);
  transition: opacity 1.1s var(--ease-out), transform 1.6s var(--ease-back);
  pointer-events: none;
}
.reveal-photo.on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
.reveal-photo img { display: block; max-width: min(76vw, 340px); max-height: 58dvh; width: auto; height: auto; border-radius: 3px; }
#scene-1 .envelope-wrap, #scene-1 .title, #scene-1 .subtitle { transition: opacity 1s, transform 1s; }
#scene-1.revealing .envelope-wrap, #scene-1.revealing .title, #scene-1.revealing .subtitle { opacity: .12; transform: scale(.94); }

/* ==========================================================
   2 · Letter
   ========================================================== */
.paper {
  position: relative; width: min(90vw, 460px); max-height: 68dvh;
  overflow-y: auto; scrollbar-width: none;
  padding: 34px 26px 24px; border-radius: 4px; cursor: pointer;
  text-align: left; color: var(--ink);
  background:
    radial-gradient(120% 60% at 0% 0%, #fff, transparent 60%),
    radial-gradient(80% 50% at 100% 100%, rgba(240, 190, 170, .25), transparent 70%),
    linear-gradient(180deg, #fffdf8, #fbf2e6);
  box-shadow: 0 26px 60px rgba(142, 36, 64, .2), inset 0 0 0 1px rgba(201, 164, 92, .5), inset 0 0 0 7px #fffdf8, inset 0 0 0 8px rgba(201, 164, 92, .28);
  opacity: 0; transform: translateY(40px) rotateX(14deg) scale(.96); transform-origin: 50% 100%;
  transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out);
}
.paper::-webkit-scrollbar { display: none; }
.paper.in { opacity: 1; transform: perspective(900px); }
.paper-orn { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); color: var(--gold-deep); opacity: .7; font-size: 20px; }
.polaroid {
  position: relative; width: fit-content; margin: 8px auto 20px; padding: 8px 8px 24px; background: #fff; border-radius: 4px;
  box-shadow: 0 12px 26px rgba(74, 22, 38, .18);
  opacity: 0; transform: translateY(-18px) rotate(-7deg) scale(.85);
  transition: opacity 1s var(--ease-out), transform 1.3s var(--ease-back);
}
.polaroid::before { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; margin-left: -35px; background: rgba(236, 212, 154, .75); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.polaroid.on { opacity: 1; transform: rotate(-2.5deg); }
.polaroid img { display: block; max-width: min(60vw, 230px); max-height: 26dvh; width: auto; height: auto; border-radius: 2px; }
.letter p { font-family: var(--f-hand); font-size: clamp(18px, 4.8vw, 21px); line-height: 1.9; margin: 0 0 .65em; }
.letter p.salute { font-weight: 700; color: var(--wine); }
.letter p.last { font-weight: 700; color: var(--rose-deep); margin-bottom: 0; }
.ink {
  opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 230% 100%; mask-size: 230% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.ink.on { opacity: 1; animation: ink var(--d, 2400ms) cubic-bezier(.45, .05, .4, 1) forwards; }
.ink.instant { animation: none; -webkit-mask-image: none; mask-image: none; }
@keyframes ink { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.paper.fold { animation: fold 1.3s var(--ease-io) forwards; pointer-events: none; overflow: hidden; }
@keyframes fold {
  0% { transform: perspective(900px); opacity: 1; }
  35% { transform: perspective(900px) rotateX(60deg) scaleY(.6); }
  70% { transform: perspective(900px) rotateX(78deg) scale(.4); opacity: .9; border-radius: 40%; }
  100% { transform: perspective(900px) rotateX(80deg) scale(.06); opacity: 0; border-radius: 50%; }
}
.fold-heart {
  position: absolute; left: 50%; top: 46%; width: 120px; height: 108px; margin: -54px 0 0 -60px;
  opacity: 0; transform: scale(.2); pointer-events: none;
  transition: transform 1s var(--ease-back), opacity .8s;
  filter: drop-shadow(0 0 22px rgba(227, 135, 154, .7)) drop-shadow(0 0 50px rgba(240, 200, 140, .6));
}
.fold-heart.on { opacity: 1; transform: scale(1); }
.fold-heart.fly { opacity: 0; transform: translateY(-38vh) scale(.35); transition: transform .9s var(--ease-io), opacity .9s; }

/* ==========================================================
   3 · Gallery (slides by itself)
   ========================================================== */
.gallery { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.frame {
  --px: 0; --py: 0;
  position: relative; overflow: hidden;
  width: min(88vw, 440px, calc(56dvh * .8)); aspect-ratio: 4 / 5;
  border-radius: 18px; background: #fff;
  border: 6px solid #fff;
  box-shadow: 0 24px 56px rgba(142, 36, 64, .22), 0 0 0 1px rgba(201, 164, 92, .45);
  touch-action: pan-y; cursor: grab;
  transition: opacity 1.2s var(--ease-io), transform 1.2s var(--ease-io), filter 1.2s;
}
.frame:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 4px; }
.frame.dissolve { opacity: 0; transform: scale(.9); filter: blur(10px) brightness(1.4); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease-io); border-radius: 12px; overflow: hidden; }
.slide.in { opacity: 1; }
.slide-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(24px) brightness(1.1) saturate(1.05); opacity: .75; transform: translate(calc(var(--px) * 10px), calc(var(--py) * 10px)); transition: transform .6s var(--ease-out); }
.slide-par { position: absolute; inset: 0; transform: translate(calc(var(--px) * -8px), calc(var(--py) * -8px)); transition: transform .6s var(--ease-out); }
.slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: kb 10s ease-out forwards; filter: drop-shadow(0 6px 16px rgba(74, 22, 38, .2)); }
.kb-a .slide-img { transform-origin: 30% 30%; }
.kb-b .slide-img { transform-origin: 70% 40%; }
.kb-c .slide-img { transform-origin: 50% 70%; }
.kb-d .slide-img { transform-origin: 40% 55%; }
/* gentle zoom that ends at full size, so the whole photo always shows */
@keyframes kb { from { transform: scale(.93); } to { transform: scale(1); } }
.leak {
  position: absolute; inset: -20%; z-index: 3; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(40% 30% at 20% 20%, rgba(255, 220, 160, .6), transparent 70%), radial-gradient(30% 25% at 85% 80%, rgba(255, 170, 190, .5), transparent 70%);
  animation: leak 12s ease-in-out infinite alternate;
}
@keyframes leak { from { transform: translate(-6%, -4%) rotate(0); } to { transform: translate(6%, 5%) rotate(8deg); } }
.frame-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; z-index: 5; background: linear-gradient(90deg, var(--rose), var(--gold)); transform-origin: 0 50%; transform: scaleX(0); opacity: .85; }
.frame.ticking .frame-timer { animation: timer var(--auto, 4500ms) linear forwards; }
@keyframes timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.frame-loader { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; border: 2px solid rgba(194, 71, 95, .2); border-top-color: var(--rose-deep); z-index: 5; opacity: 0; transition: opacity .3s; animation: spin 1s linear infinite; }
.frame.loading .frame-loader { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.frame-empty { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: radial-gradient(circle at 50% 40%, #fff, #fbe4e4); }
.frame-empty svg { width: 70px; height: 63px; animation: beatSoft 2.6s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(227, 135, 154, .6)); }
.frame-empty p { margin: 0; color: var(--wine); font-size: 18px; }
.setup-link { color: var(--ink-soft); font-size: 13px; }
.caption {
  margin: 0; min-height: 1.7em; max-width: 30ch; color: var(--wine); font-family: var(--f-hand); font-size: clamp(17px, 4.5vw, 20px);
  opacity: 0; transform: translateY(6px); transition: opacity .7s, transform .7s var(--ease-out);
}
.caption.on { opacity: 1; transform: none; }
.gal-controls { display: flex; align-items: center; gap: 14px; width: min(88vw, 440px); }
.gal-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gal-bar { width: 100%; height: 3px; border-radius: 3px; background: rgba(142, 36, 64, .12); overflow: hidden; }
.gal-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--rose-deep), var(--gold)); transition: width .8s var(--ease-out); }
.gal-count { font-size: 14px; color: var(--ink-soft); letter-spacing: .05em; }
.round-btn {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0;
  color: var(--wine); background: rgba(255, 255, 255, .75); border: 1px solid rgba(142, 36, 64, .22);
  box-shadow: 0 4px 12px rgba(142, 36, 64, .1);
  transition: background .3s, transform .2s var(--ease-out); touch-action: manipulation;
}
.round-btn svg { width: 22px; height: 22px; }
.round-btn:hover { background: #fff; }
.round-btn:active { transform: scale(.9); }
.round-btn:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 3px; }

/* ==========================================================
   4 · Love letter (its photos change as the letter goes on)
   ========================================================== */
.glow-heart { position: absolute; left: 50%; top: 50%; width: 300px; height: 270px; transform: translate(-50%, -50%); opacity: .14; filter: blur(22px); pointer-events: none; animation: beatSoft 3s ease-in-out infinite; transition: opacity 1.4s, filter 1.4s; }
.glow-heart svg { width: 100%; height: 100%; }
@keyframes beatSoft { 0%, 100% { scale: 1; } 12% { scale: 1.05; } 24% { scale: 1; } 36% { scale: 1.03; } 50% { scale: 1; } }
.love-photos { position: relative; display: none; width: min(80vw, 320px); height: 27dvh; flex-shrink: 0; }
#scene-4.has-photos .love-photos { display: block; }
.love-photos img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: scale(.94) rotate(-1.5deg); filter: drop-shadow(0 12px 22px rgba(74, 22, 38, .22));
  transition: opacity 1.6s var(--ease-io), transform 2s var(--ease-out);
}
.love-photos img.on { opacity: 1; transform: none; }
.love-scroll {
  width: min(92vw, 520px); max-height: 64dvh; padding: 18px 6px 50px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20px, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 20px, #000 calc(100% - 56px), transparent 100%);
  transition: opacity 1.2s, filter 1.2s;
}
#scene-4.has-photos .love-scroll { max-height: 38dvh; }
.love-text { text-align: left; padding: 0 8px; }
.love-text p { margin: 0 0 1.05em; font-size: clamp(17px, 4.6vw, 20px); line-height: 1.95; color: var(--ink); }
.love-text p.salute { font-family: var(--f-hand); font-size: clamp(22px, 6vw, 27px); color: var(--wine); }
.love-text p.closing { font-family: var(--f-hand); font-size: clamp(21px, 5.6vw, 26px); color: var(--rose-deep); margin-top: 1.4em; }
.sn { opacity: 0; filter: blur(6px); transition: opacity 1.4s var(--ease-out), filter 1.4s var(--ease-out); }
.sn.on { opacity: 1; filter: none; }
#scene-4.leaving .love-scroll, #scene-4.leaving .love-photos { opacity: 0; filter: blur(8px); transition: opacity 1.2s, filter 1.2s; }
#scene-4.leaving .glow-heart { opacity: .6; filter: blur(8px); }
#skip-4 { margin-top: -10px; }

/* ==========================================================
   5 · Secret heart
   ========================================================== */
.lead { margin: 0; max-width: 24ch; font-size: clamp(19px, 5.2vw, 24px); line-height: 1.7; color: var(--wine); opacity: 0; transform: translateY(12px); transition: opacity 1.2s, transform 1.2s var(--ease-out), max-height 1s, margin 1s; max-height: 9em; }
.lead.on { opacity: 1; transform: none; }
.lead.away { opacity: 0; max-height: 0; margin: -10px 0; overflow: hidden; }
.locket {
  position: relative; width: min(56vw, 230px); aspect-ratio: 212 / 192; flex-shrink: 0;
  perspective: 1000px;
  filter: drop-shadow(0 18px 28px rgba(142, 36, 64, .25)) drop-shadow(0 0 24px rgba(240, 200, 120, .55));
  opacity: 0; transform: scale(.6) translateY(20px);
  transition: opacity 1.4s var(--ease-out), transform 1.6s var(--ease-back), width 1.2s var(--ease-io);
}
.locket.in { opacity: 1; transform: none; }
.locket.opened { width: min(22vw, 86px); }
.locket-body, .locket-beat { position: absolute; inset: 0; transform-style: preserve-3d; }
.locket-body { animation: sway 8s ease-in-out infinite; }
.locket-beat { animation: beat 2.6s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotateY(-16deg) rotateZ(-1.5deg); } 50% { transform: rotateY(16deg) rotateZ(1.5deg); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.045); } 20% { transform: scale(1); } 30% { transform: scale(1.03); } 45% { transform: scale(1); } }
.locket-half { position: absolute; inset: 0; transition: transform 1.8s var(--ease-io), opacity 1.8s; }
.locket-half svg { display: block; width: 100%; height: 100%; }
.locket-half.l { clip-path: inset(-10% 50% -10% -10%); transform-origin: 10% 50%; }
.locket-half.r { clip-path: inset(-10% -10% -10% 50%); transform-origin: 90% 50%; }
.locket-light {
  position: absolute; inset: 6%; transform: translateZ(-2px) scale(.85); opacity: 0;
  background: radial-gradient(circle at 50% 45%, #fffef5 0%, #ffe9b0 35%, #f6b56e 70%, rgba(220, 110, 90, .7) 100%);
  -webkit-mask: var(--heart) center / contain no-repeat; mask: var(--heart) center / contain no-repeat;
  filter: blur(1px); transition: opacity 1.4s .2s, transform 1.8s var(--ease-out);
}
.locket.opening .locket-beat { animation: none; }
.locket.opening .locket-half.l { transform: rotateY(-125deg); }
.locket.opening .locket-half.r { transform: rotateY(125deg); }
.locket.opening .locket-light { opacity: 1; transform: translateZ(-2px) scale(1.05); }
.locket.opened .locket-half { opacity: 0; }
.locket.opened .locket-light { filter: drop-shadow(0 0 18px rgba(240, 190, 110, .9)); animation: beatSoft 2.6s ease-in-out infinite; }
.heart-photo {
  margin: -6px 0 0; padding: 8px 8px 22px; background: #fff; border-radius: 5px; flex-shrink: 0;
  box-shadow: 0 16px 36px rgba(74, 22, 38, .2), 0 0 40px rgba(240, 200, 130, .45);
  opacity: 0; transform: translateY(-50px) scale(.3);
  transition: opacity 1.2s var(--ease-out), transform 1.6s var(--ease-back);
}
.heart-photo.on { opacity: 1; transform: rotate(1.5deg); }
.heart-photo img { display: block; max-width: min(64vw, 260px); max-height: 25dvh; width: auto; height: auto; border-radius: 3px; }
.secret { width: min(92vw, 500px); max-height: 0; opacity: 0; padding: 0 6px; transition: max-height 1.2s var(--ease-io), opacity 1s; }
.secret.on { max-height: 40dvh; opacity: 1; padding-bottom: 20px; }
.secret p { margin: 0 0 1em; font-size: clamp(17px, 4.6vw, 20px); line-height: 1.95; color: var(--ink); opacity: 0; transform: translateY(10px); filter: blur(5px); transition: opacity 1.6s var(--ease-out), transform 1.6s var(--ease-out), filter 1.6s; }
.secret p.on { opacity: 1; transform: none; filter: none; }
.secret p.salute { font-family: var(--f-hand); color: var(--wine); font-size: clamp(22px, 6vw, 26px); }
.secret p.final { font-family: var(--f-hand); font-size: clamp(22px, 6vw, 27px); color: var(--rose-deep); text-shadow: 0 0 22px rgba(240, 200, 130, .8); margin-top: 1.3em; }

/* ==========================================================
   6 · Birthday
   ========================================================== */
.spotlight { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 2.2s var(--ease-io); }
.spotlight::before {
  content: ""; position: absolute; left: 50%; top: -10%; width: 120vmin; height: 90vh; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 222, 160, .55), rgba(255, 225, 190, .12) 70%, transparent);
  clip-path: polygon(42% 0, 58% 0, 92% 100%, 8% 100%); filter: blur(14px);
}
.spotlight::after { content: ""; position: absolute; left: 50%; top: 34%; width: 90vmin; height: 40vmin; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 225, 165, .5), transparent); }
#scene-6.spot .spotlight { opacity: 1; }
.bday, .final {
  -webkit-mask-image: linear-gradient(180deg, transparent calc(40px + var(--safe-t)), #000 calc(84px + var(--safe-t)));
  mask-image: linear-gradient(180deg, transparent calc(40px + var(--safe-t)), #000 calc(84px + var(--safe-t)));
}
.bday { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: calc(74px + var(--safe-t)) 18px calc(46px + var(--safe-b)); }
.bday > * { max-width: 520px; flex-shrink: 0; }
.step { opacity: 0; visibility: hidden; transform: translateY(20px); filter: blur(5px); transition: opacity 1.3s var(--ease-out), transform 1.3s var(--ease-out), filter 1.3s, visibility 0s linear 1.3s; }
.step.on { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 0s; }
.bday-date { margin: 0; padding: 6px 16px; border-radius: 999px; font-size: 15px; letter-spacing: .06em; color: var(--gold-deep); background: rgba(255, 255, 255, .6); border: 1px solid rgba(201, 164, 92, .45); }
.cake { position: relative; width: min(62vw, 250px); transform: translateY(40px) scale(.92); }
.cake.on { transform: none; }
.cake svg { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(142, 36, 64, .25)); }
.cake-light { position: absolute; left: 50%; top: 18%; width: 170%; height: 120%; transform: translate(-50%, -40%); background: radial-gradient(closest-side, rgba(255, 210, 130, .5), transparent); opacity: 0; transition: opacity 1.5s; }
.cake.lit-3 .cake-light { opacity: 1; animation: breathe 3s ease-in-out infinite; }
.fire { opacity: 0; transition: opacity .7s; }
.cake.lit-1 .c1, .cake.lit-2 .c2, .cake.lit-3 .c3 { opacity: 1; }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.2s ease-in-out infinite alternate; }
.c2 .flame { animation-duration: 1.45s; animation-delay: -.3s; }
.c3 .flame { animation-duration: 1.05s; animation-delay: -.6s; }
@keyframes flicker { 0% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(.94, 1.06) skewX(2deg); } 60% { transform: scale(1.04, .96) skewX(-2deg); } 100% { transform: scale(.97, 1.08) skewX(1deg); } }
.fire-glow { animation: glowPulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes glowPulse { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
.bday-title { margin: 0; font-size: clamp(27px, 7.4vw, 42px); font-weight: 700; line-height: 1.5; filter: none; }
.bday-title .w {
  display: inline-block; margin: 0 .04em;
  background: linear-gradient(180deg, #e0758b 0%, #b8375a 55%, #8e2440 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  opacity: 0; transform: translateY(24px) scale(.9); filter: blur(6px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-back), filter 1s;
  transition-delay: calc(var(--i) * 150ms);
}
.bday-title .w.emo { background: none; -webkit-text-fill-color: initial; color: initial; }
.bday-title.on .w { opacity: 1; transform: none; filter: drop-shadow(0 2px 10px rgba(240, 190, 120, .55)); }
.bday-en { margin: -6px 0 0; font-family: var(--f-script); font-size: clamp(30px, 8.5vw, 44px); color: var(--gold-deep); text-shadow: 0 0 18px rgba(255, 225, 160, .8); line-height: 1.2; }
.bday-msg { margin: 0; max-width: 28ch; font-size: clamp(17px, 4.6vw, 20px); line-height: 1.9; color: var(--ink); }
.portrait { position: relative; margin: 8px 0 0; padding: 6px; border-radius: 22px; background: linear-gradient(135deg, #fff4cf, #d1a24c 40%, #fff2c8 60%, #b8862f); box-shadow: 0 22px 50px rgba(142, 36, 64, .25), 0 0 50px rgba(255, 210, 140, .5); }
.portrait img { display: block; max-width: min(78vw, 360px); max-height: 46dvh; width: auto; height: auto; border-radius: 16px; background: #fff; }
.dedication { position: relative; width: 100%; max-width: 440px; padding: 34px 22px 26px; border-radius: 24px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(201, 164, 92, .5); box-shadow: 0 18px 44px rgba(142, 36, 64, .14); overflow: hidden; }
.ded-heart { position: absolute; left: 50%; top: 50%; width: 320px; height: 288px; margin: -144px 0 0 -160px; background: radial-gradient(circle, #ffc6d2, #e3879a 70%); -webkit-mask: var(--heart) center / contain no-repeat; mask: var(--heart) center / contain no-repeat; opacity: .3; filter: blur(16px); animation: beatSoft 2.8s ease-in-out infinite; pointer-events: none; }
.ded-text { position: relative; margin: 0 0 14px; font-size: clamp(20px, 5.4vw, 24px); font-weight: 600; line-height: 1.75; color: var(--wine); }
.ded-sign { position: relative; margin: 0; font-family: var(--f-hand); font-size: clamp(20px, 5.4vw, 24px); line-height: 1.6; color: var(--rose-deep); }

/* ==========================================================
   7 · Final
   ========================================================== */
.final { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: calc(74px + var(--safe-t)) 20px calc(40px + var(--safe-b)); }
.final > * { flex-shrink: 0; }
.final-photo { margin: 0; padding: 10px 10px 30px; border-radius: 6px; background: #fff; box-shadow: 0 22px 50px rgba(110, 18, 48, .22); rotate: -2deg; }
.final-photo img { display: block; max-width: min(72vw, 320px); max-height: 40dvh; width: auto; height: auto; border-radius: 3px; }
.tiny-heart svg { width: 34px; height: 31px; display: block; animation: beatSoft 2.4s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(200, 50, 90, .4)); }
.final-msg { max-width: 30ch; }
.final-msg p { margin: 0 0 .8em; font-size: clamp(17px, 4.6vw, 20px); line-height: 1.95; color: var(--ink); }
.final-msg p:last-child { font-weight: 600; color: var(--rose-deep); }
.signature { margin: 0; font-family: var(--f-script); font-size: clamp(28px, 7.5vw, 38px); line-height: 1.3; color: var(--wine); }

.finale { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(circle at 50% 45%, #fffaf3, #f6d5d8 80%); opacity: 0; transition: opacity 1.6s var(--ease-io); text-align: center; padding: 20px; }
.finale.on { opacity: 1; }
.finale svg { width: 90px; height: 81px; animation: beatSoft 2.6s ease-in-out infinite; filter: drop-shadow(0 0 24px rgba(227, 135, 154, .7)); }
.finale p { margin: 0; font-family: var(--f-hand); font-size: clamp(26px, 7vw, 36px); color: var(--wine); }

/* ==========================================================
   Setup panel (owner only)
   ========================================================== */
#setup { position: fixed; inset: 0; z-index: 20; overflow-y: auto; background: rgba(74, 22, 38, .55); padding: calc(20px + var(--safe-t)) 16px calc(30px + var(--safe-b)); }
.setup-card { max-width: 640px; margin: 0 auto; background: var(--paper); color: var(--ink); border-radius: 18px; padding: 22px 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); }
.setup-card h2 { margin: 0 0 6px; font-size: 22px; color: var(--wine); }
.setup-note { margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 14px; border: 2px dashed rgba(142, 36, 64, .35); border-radius: 14px; cursor: pointer; text-align: center; background: #fff; transition: background .2s, border-color .2s; }
.drop.over, .drop:hover { background: #fdf0f2; border-color: var(--rose-deep); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:focus-within { outline: 2px solid var(--rose-deep); outline-offset: 2px; }
.drop strong { font-size: 17px; color: var(--wine); }
.drop small { font-size: 13px; color: var(--ink-soft); }
.setup-status { min-height: 1.4em; margin: 12px 0; font-size: 14px; line-height: 1.6; }
.photo-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pitem { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; background: #fff; border: 1px solid rgba(142, 36, 64, .12); border-radius: 12px; padding: 8px; }
.pitem img { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: #f6eee9; }
.pmeta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pnum { font-size: 12px; color: var(--ink-soft); }
.pcap { width: 100%; font: inherit; font-size: 15px; padding: 7px 9px; border: 1px solid rgba(142, 36, 64, .25); border-radius: 8px; background: #fffdf8; color: var(--ink); }
.pcap:focus { outline: 2px solid var(--rose-deep); outline-offset: 1px; }
.pflags { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--ink-soft); }
.pflags label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.pbtns { display: flex; flex-direction: column; gap: 4px; }
.sbtn { cursor: pointer; font-size: 15px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(142, 36, 64, .3); background: #fff; color: var(--wine); transition: background .2s, transform .1s; }
.sbtn:hover { background: #fdf0f2; }
.sbtn:active { transform: scale(.97); }
.sbtn:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 2px; }
.sbtn:disabled { opacity: .45; cursor: default; }
.sbtn.primary { background: var(--wine); color: #fff; border-color: var(--wine); }
.sbtn.primary:hover { background: var(--rose-deep); }
.sbtn.danger { color: #9b1c1c; }
.sbtn.mini { width: 34px; height: 30px; padding: 0; font-size: 14px; }
.setup-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.export-box { margin-top: 16px; font-size: 14px; line-height: 1.7; }
.export-box textarea { width: 100%; font: 13px/1.5 ui-monospace, Menlo, monospace; padding: 10px; border-radius: 8px; border: 1px solid rgba(142, 36, 64, .25); margin: 6px 0 8px; }
body.setup-open .hud { visibility: hidden; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; color: var(--wine); font-size: 20px; z-index: 30; background: var(--blush); }

/* ---------- desktop / short screens ---------- */
@media (min-width: 900px) {
  .scene { gap: 24px; }
  .envelope { width: 340px; }
}
@media (max-height: 640px) {
  .envelope { width: min(60vw, 250px); }
  .scene { gap: 12px; }
}

/* ---------- reduced motion ---------- */
.reduced .scene { transform: none !important; filter: none !important; }
.reduced .envelope, .reduced .env-shadow, .reduced .center-light, .reduced .leak, .reduced .slide-img,
.reduced .locket-body, .reduced .locket-beat, .reduced .cta::before, .reduced .flame, .reduced .fire-glow,
.reduced .glow-heart, .reduced .ded-heart, .reduced .seal { animation: none !important; }
.reduced .sn, .reduced .secret p, .reduced .step, .reduced .bday-title .w, .reduced .love-photos img { filter: none !important; transform: none !important; }
.reduced .ink.on { animation-duration: 1ms; }

/* ---------- self-test speed ---------- */
.fast *, .fast *::before, .fast *::after { transition-duration: 1ms !important; transition-delay: 0s !important; animation-duration: 1ms !important; animation-delay: 0s !important; }