/* ==========================================================================
   PINK AT THE COURT — stylesheet
   Colors are unchanged from the original design; this file only improves
   layout, depth, typography, motion and interaction.
   ========================================================================== */

/* Animatable 3D "spread" used for the gallery intro (progressive enhancement) */
@property --spread {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #171216;
  color: #f8edf2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(circle at 0 35%, rgba(213, 138, 167, .13), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(213, 138, 167, .1), transparent 30%),
    #171216;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

::selection { background: #d58aa747; color: #f8edf2; }

:focus-visible {
  outline: 2px solid #d58aa7;
  outline-offset: 3px;
}

/* Soft drifting light behind the page (same pink as the original glows) */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ambient i {
  position: absolute;
  border-radius: 50%;
  background: #d58aa714;
  filter: blur(70px);
  will-change: transform;
}
.ambient i:nth-child(1) {
  width: 46vmax; height: 46vmax;
  left: -16vmax; top: 18%;
  animation: drift-a 24s ease-in-out infinite alternate;
}
.ambient i:nth-child(2) {
  width: 40vmax; height: 40vmax;
  right: -14vmax; bottom: -12vmax;
  animation: drift-b 30s ease-in-out infinite alternate;
}

#app {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Header & footer
   -------------------------------------------------------------------------- */
header,
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(18px, 4vw, 64px);
}

header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 78px;
  flex: 0 0 78px;
  border-bottom: 1px solid rgba(255, 231, 240, .09);
  background: rgba(23, 18, 22, .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand-mark {
  flex: none;
  width: 39px;
  height: 39px;
  border: 1px solid rgba(213, 138, 167, .6);
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #e3a6bc;
  background: linear-gradient(145deg, rgba(213, 138, 167, .18), rgba(213, 138, 167, .03));
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 0 0 0 #d58aa721;
  animation: heartbeat 3.6s ease-in-out infinite;
}

.brand-name { font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.brand-name span { color: #d995af; }
.brand-sub { font-size: 10px; color: #bba8b1; letter-spacing: .13em; margin-top: 4px; }

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #cdbbc4;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.live-dot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d58aa7;
  box-shadow: 0 0 12px #d58aa777;
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #d58aa7;
  animation: ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}

footer {
  min-height: 57px;
  border-top: 1px solid #ffe7f017;
  color: #927f89;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.footer-title { color: #d7a0b5; font-weight: 800; letter-spacing: .14em; }
.tags { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.tags span { white-space: nowrap; transition: color .3s ease, transform .3s ease; cursor: default; }
.tags span:hover { color: #e4b0c3; transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  padding: 22px clamp(20px, 7vw, 110px) 18px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}

.visual-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.visual-heading,
.visual-caption {
  width: min(100%, 540px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.visual-heading { margin-bottom: 8px; }

.eyebrow { color: #dca0b7; font-size: 10px; letter-spacing: .23em; text-transform: uppercase; font-weight: 700; }
.visual-count { color: #aa98a1; font-size: 10px; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.count-current { color: #e4b0c3; font-weight: 700; display: inline-block; min-width: 2ch; }
.count-current.tick { animation: tick .45s cubic-bezier(.2, .8, .2, 1); }

/* --------------------------------------------------------------------------
   3D gallery
   -------------------------------------------------------------------------- */
.scene {
  --card-h: clamp(190px, 29vh, 240px);
  --card-w: calc(var(--card-h) * .83);
  --radius: calc(var(--card-w) * 1.46);
  --persp: 1500px;

  width: min(100%, 540px);
  height: calc(var(--card-h) * 1.8);
  position: relative;
  perspective: var(--persp);
  perspective-origin: 50% 42%;
  display: grid;
  place-items: center;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.scene.dragging { cursor: grabbing; }
.scene:focus-visible { outline: none; }
.scene:focus-visible .photo.is-active { outline: 2px solid #d58aa7; outline-offset: 4px; }

/* Ambient glow behind the ring */
.scene::before {
  content: "";
  position: absolute;
  width: 78%;
  height: 70%;
  border-radius: 50%;
  background: #d58aa721;
  filter: blur(54px);
  transform: translateY(24px);
  animation: glow 7s ease-in-out infinite alternate;
}

.ring {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  transform-style: preserve-3d;
  will-change: transform;
  animation: spread 1.5s cubic-bezier(.16, .84, .24, 1) .25s backwards;
}

/* Stage floor: contact shadow + soft pink halo, lies flat under the ring */
.ring::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--radius) * 2.7);
  height: calc(var(--radius) * 2.7);
  margin: calc(var(--radius) * -1.35) 0 0 calc(var(--radius) * -1.35);
  border-radius: 50%;
  background:
    radial-gradient(circle, #0e0a0db3 0, transparent 36%),
    radial-gradient(circle, transparent 38%, #d58aa721 50%, transparent 66%);
  transform: translateY(calc(var(--card-h) * .6)) rotateX(90deg);
  pointer-events: none;
}

/* No-JS fallback: original continuous spin */
html:not(.js) .ring {
  animation: spread 1.5s cubic-bezier(.16, .84, .24, 1) .25s both, spin 26s linear infinite;
}
html:not(.js) .ring:hover { animation-play-state: running, paused; }

.photo {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #ffe6f040;
  background: linear-gradient(150deg, #68404f, #2a1d25 72%);
  box-shadow: 0 20px 55px #0006;
  display: flex;
  align-items: flex-end;
  padding: 15px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(calc(var(--radius) * var(--spread)));
  transition: border-color .5s ease, box-shadow .5s ease;
}

/* With JS the inside of the ring is visible too, dimmed for depth */
html.js .photo {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

.photo:nth-child(2n) { background: linear-gradient(145deg, #8e596d, #39242f 75%); }
.photo:nth-child(3n) { background: linear-gradient(145deg, #6b6269, #35232d 72%); }
.photo:nth-child(4n) { background: linear-gradient(145deg, #9b6c7d, #38232d 75%); }

.photo img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-user-drag: none;
  user-select: none;
  transform: scale(1.001);
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}

/* Readability overlay */
.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 27%, #f8d2e059, transparent 21%),
    radial-gradient(ellipse at 50% 80%, #d58aa78c, transparent 42%),
    linear-gradient(155deg, transparent 20%, #0e0a0db3);
}

/* Inner frame */
.photo::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 4;
  pointer-events: none;
  border: 1px solid #ffeff52b;
  border-radius: 10px;
  transition: border-color .5s ease, inset .5s cubic-bezier(.2, .7, .2, 1);
}

/* Depth shading + moving light sheen (driven by the gallery script) */
.photo-shade,
.photo-sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.photo-shade { background: #0e0a0d; opacity: var(--shade, 0); }
.photo-sheen {
  background: linear-gradient(115deg, transparent 38%, #ffeff52b 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: var(--sheen, 50%) 0;
  opacity: calc(1 - var(--shade, 0));
}

.photo-content { position: relative; z-index: 5; transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.photo-icon {
  position: absolute;
  z-index: 5;
  top: 22px;
  right: 18px;
  color: #ffecf4cc;
  font-size: 24px;
  pointer-events: none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.photo-number { display: block; color: #e8b7c9; font-size: 9px; letter-spacing: .18em; margin-bottom: 6px; }
.photo-label { display: block; font-size: 13px; font-weight: 700; text-shadow: 0 1px 12px #0e0a0db3; }

/* Cards facing away: hide mirrored text */
.photo[data-back] .photo-content,
.photo[data-back] .photo-icon { opacity: 0; }

/* Front card gets a gentle emphasis */
.photo.is-active {
  border-color: rgba(213, 138, 167, .6);
  box-shadow: 0 24px 60px #0006, 0 0 46px #d58aa721;
}
.photo.is-active img { transform: scale(1.05); }
.photo.is-active::after { inset: 8px; border-color: #ffe6f040; }
.photo.is-active .photo-content { transform: translateY(-2px); }

.visual-caption { margin-top: 2px; color: #a996a0; font-size: 11px; }
.visual-caption strong { color: #e4b0c3; }
.drag-hint { display: inline-flex; align-items: center; gap: 4px; }

/* --------------------------------------------------------------------------
   Form side
   -------------------------------------------------------------------------- */
.form-side { width: 100%; max-width: 480px; justify-self: center; }

.form-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d58aa747;
  background: #d58aa714;
  border-radius: 999px;
  padding: 7px 11px;
  color: #e2a9be;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .15em;
}
.form-kicker span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d58aa7;
  box-shadow: 0 0 0 0 #d58aa777;
  animation: pulse 2.4s ease-out infinite;
}

h1 {
  font-size: clamp(34px, 4vw, 54px);
  letter-spacing: -.055em;
  line-height: .99;
  margin: 19px 0 12px;
  font-weight: 760;
  text-wrap: balance;
}
h1 em { font-style: normal; color: #d995af; }

.intro { color: #b9a7b0; line-height: 1.6; font-size: 13px; max-width: 390px; margin: 0 0 21px; text-wrap: pretty; }

.event-meta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; color: #d7c5cd; font-size: 11px; }
.event-meta span { transition: color .3s ease; }
.event-meta span:hover { color: #f8edf2; }

/* Form panel */
#registration-form {
  position: relative;
  padding: 20px 20px 16px;
  border: 1px solid #ffe7f022;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(33, 25, 32, .78), rgba(33, 25, 32, .42));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px #0006, inset 0 1px 0 #ffe7f017;
}

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }

label {
  font-size: 10px;
  font-weight: 700;
  color: #e5d5dc;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: color .25s ease;
}
.field:focus-within label { color: #e2a9be; }

input,
select {
  width: 100%;
  min-width: 0;
  height: 45px;
  padding: 0 13px;
  border: 1px solid #ffe7f022;
  border-radius: 10px;
  outline: none;
  color: #f8edf2;
  background: #211920;
  font: inherit;
  font-size: 12px;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease, transform .25s ease;
}
input::placeholder { color: #887780; transition: color .25s ease; }
input:hover,
select:hover { border-color: #d58aa747; }
input:focus,
select:focus { border-color: #d58aa7; box-shadow: 0 0 0 3px #d58aa71c, 0 8px 24px #0006; }
input:focus::placeholder { color: #887780; }
input:user-invalid,
select:user-invalid { border-color: #e68e9c66; box-shadow: 0 0 0 3px #a53a4a25; }

select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23e3a6bc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px;
}
select option { background: #211920; }

.submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 47px;
  margin-top: 17px;
  border: 0;
  border-radius: 10px;
  color: #21151c;
  background: linear-gradient(100deg, #d995af, #e8b5c8);
  font: inherit;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 8px 25px #d58aa721;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, filter .3s ease;
}
.submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, #ffecf4cc 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.submit > span { display: inline-block; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.submit:hover { filter: brightness(1.04); transform: translateY(-2px); box-shadow: 0 14px 34px #d58aa747; }
.submit:hover::before { transform: translateX(120%); }
.submit:hover > span { transform: translateX(4px); }
.submit:active { transform: translateY(0) scale(.99); box-shadow: 0 6px 18px #d58aa721; }
.submit:focus-visible { outline-color: #e8b5c8; outline-offset: 4px; }
.submit.is-loading { pointer-events: none; filter: brightness(.95); }
.submit.is-loading > span {
  width: 14px;
  height: 14px;
  border: 2px solid #21151c;
  border-top-color: transparent;
  border-radius: 50%;
  font-size: 0;
  animation: spinner .7s linear infinite;
}

.privacy { color: #887780; font-size: 10px; text-align: center; margin: 11px 0 0; }

.notice {
  padding: 12px 14px;
  border-radius: 10px;
  margin: 0 0 13px;
  font-size: 12px;
  line-height: 1.45;
  animation: notice-in .7s cubic-bezier(.2, .8, .2, 1) backwards;
}
.success { border: 1px solid #7cbe9660; background: #44805b21; color: #bfe5cb; }
.error { border: 1px solid #e68e9c66; background: #a53a4a25; color: #ffc3cc; }

/* --------------------------------------------------------------------------
   Entrance transitions
   -------------------------------------------------------------------------- */
header,
.visual-heading,
.visual-caption,
.form-kicker,
h1,
.intro,
.event-meta,
.notice,
#registration-form,
footer {
  animation: rise .9s cubic-bezier(.2, .7, .2, 1) backwards;
}
header { animation-name: fade-down; animation-delay: 0s; }
.visual-heading { animation-delay: .12s; }
.scene { animation: scene-in 1.1s cubic-bezier(.2, .7, .2, 1) .18s backwards; }
.visual-caption { animation-delay: .5s; }
.form-kicker { animation-delay: .2s; }
h1 { animation-delay: .3s; }
.intro { animation-delay: .4s; }
.event-meta { animation-delay: .48s; }
#registration-form { animation-delay: .56s; }
.fields > .field { animation: rise .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.fields > .field:nth-child(1) { animation-delay: .66s; }
.fields > .field:nth-child(2) { animation-delay: .74s; }
.fields > .field:nth-child(3) { animation-delay: .82s; }
.fields > .field:nth-child(4) { animation-delay: .9s; }
.submit { animation: rise .8s cubic-bezier(.2, .7, .2, 1) .98s backwards; }
footer { animation-name: fade-in; animation-delay: .7s; }

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes spin {
  from { transform: rotateX(-7deg) rotateY(0deg); }
  to { transform: rotateX(-7deg) rotateY(360deg); }
}
@keyframes spread { from { --spread: .12; } to { --spread: 1; } }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes fade-down { from { opacity: 0; transform: translate3d(0, -14px, 0); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes scene-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes notice-in { from { opacity: 0; transform: translate3d(0, -10px, 0) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes glow { from { opacity: .7; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: translateY(24px) scale(1.06); } }
@keyframes ping { 70%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 #d58aa777; } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes heartbeat {
  0%, 60%, 100% { transform: scale(1); box-shadow: 0 0 0 0 #d58aa721; }
  68% { transform: scale(1.08); box-shadow: 0 0 22px 2px #d58aa721; }
  76% { transform: scale(1); }
  84% { transform: scale(1.05); }
}
@keyframes spinner { to { transform: rotate(360deg); } }
@keyframes tick { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8vmax, -6vmax, 0) scale(1.15); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8vmax, 5vmax, 0) scale(1.12); } }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .scene { --card-h: clamp(180px, 27vh, 224px); }
}

@media (max-width: 900px) {
  main {
    grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
    gap: 22px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .scene { --card-h: 200px; }
  h1 { font-size: 42px; }
}

@media (max-width: 680px) {
  header { height: 70px; flex-basis: 70px; gap: 10px; }
  .brand { gap: 10px; }
  .brand-mark { width: 36px; height: 36px; font-size: 23px; border-radius: 12px; }
  .brand-name { font-size: 11.5px; letter-spacing: .08em; white-space: nowrap; }
  .brand-sub { font-size: 9px; letter-spacing: .08em; white-space: nowrap; }
  .header-right { font-size: 9.5px; letter-spacing: .06em; }

  main { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 17px 22px 22px; }
  .visual-side { order: 0; }
  .visual-heading { margin-bottom: 0; }

  .scene {
    --card-h: 158px;
    --persp: 1000px;
    width: 100%;
    height: 262px;
  }

  .visual-caption { font-size: 10px; }
  .form-side { max-width: none; padding-top: 19px; }
  h1 { font-size: clamp(36px, 10vw, 46px); margin-top: 14px; }
  .intro { margin-bottom: 16px; font-size: 12px; }
  .event-meta { margin-bottom: 16px; gap: 13px; }
  #registration-form { padding: 16px 16px 14px; border-radius: 16px; }
  input, select { height: 48px; font-size: 16px; } /* prevents iOS zoom on focus */
  .submit { height: 50px; }

  footer { padding: 14px 18px; align-items: flex-start; flex-direction: column; gap: 9px; }
  .tags { justify-content: flex-start; gap: 8px 13px; }
}

@media (max-width: 420px) {
  .fields { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
}

@media (max-width: 380px) {
  main { padding-left: 16px; padding-right: 16px; }
  .scene { --card-h: 140px; height: 236px; }
  .brand-sub { display: none; }
  .header-right { font-size: 9px; letter-spacing: .04em; }
}

/* Short desktop windows: keep the gallery proportionate */
@media (min-width: 681px) and (max-height: 760px) {
  .scene { --card-h: clamp(170px, 28vh, 210px); }
}

/* Touch devices: no hover-only effects needed */
@media (hover: none) {
  .submit:hover { transform: none; box-shadow: 0 8px 25px #d58aa721; }
  .submit:hover::before { transform: translateX(-120%); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}