/* ============================================================
   Annual Student Fair — Basilica College, Ragama
   Premium digital invitation · light theme · static site
   ============================================================ */

:root {
  /* Palette — ivory, warm neutrals, champagne gold */
  --ivory: #faf6ef;
  --cream: #f3ead9;
  --paper: #fffdf8;
  --gold: #b08d4f;
  --gold-deep: #97763e;
  --gold-soft: #c9ab7a;
  --ink: #3a322a;
  --ink-soft: #71675a;
  --line: rgba(176, 141, 79, 0.38);
  --line-faint: rgba(176, 141, 79, 0.2);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Sophisticated easings — natural, cinematic, never game-like */
  --ease-flap: cubic-bezier(0.65, 0.02, 0.28, 1);
  --ease-rise: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-reveal: cubic-bezier(0.33, 1, 0.68, 1);

  --envelope-w: clamp(272px, 76vw, 400px);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background-color: var(--ivory);
  /* Layered light: soft top glow, gentle vignette, faint paper grain */
  background-image:
    radial-gradient(ellipse 100% 62% at 50% -8%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 60%),
    radial-gradient(ellipse 120% 90% at 50% 115%, rgba(214, 196, 160, 0.18), rgba(214, 196, 160, 0) 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.024'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

/* ---------- Accessibility helpers ---------- */
.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 300;
  padding: 10px 18px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--gold);
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.2s var(--ease-reveal);
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ============================================================
   OPENING SCREEN
   ============================================================ */
.opening {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background-color: transparent;
  transition: opacity 0.95s var(--ease-reveal), visibility 0s linear 0.95s;
  overflow-y: auto;
}

.opening.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Fine hairline frame corners — engraved stationery feel */
.opening__frame {
  position: absolute;
  width: clamp(34px, 7vw, 64px);
  height: clamp(34px, 7vw, 64px);
  pointer-events: none;
}
.opening__frame--tl { top: 18px; left: 18px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.opening__frame--tr { top: 18px; right: 18px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.opening__frame--bl { bottom: 18px; left: 18px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.opening__frame--br { bottom: 18px; right: 18px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }

.opening__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.1rem, 2.8vh, 1.9rem);
  max-width: 660px;
}

.opening__brand { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }

/* School crest in a restrained gold ring */
.opening__badge {
  display: block;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 50%;
  margin-bottom: 0.9rem;
  box-shadow: 0 6px 18px -8px rgba(58, 50, 42, 0.25);
  background: var(--paper);
}
.opening__logo {
  width: clamp(58px, 13vw, 76px);
  height: auto;
  border-radius: 50%;
}

.opening__school {
  margin: 0;
  font-weight: 400;
  font-size: clamp(0.72rem, 2.3vw, 0.9rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}

.opening__event {
  margin: 0.15rem 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 7.4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.opening__date {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0.6rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.02rem, 3.2vw, 1.25rem);
  color: var(--ink-soft);
}
.opening__date-rule {
  display: inline-block;
  width: clamp(26px, 7vw, 44px);
  height: 1px;
  background: var(--line);
}

/* ============================================================
   ENVELOPE — pure CSS layered structure
   ============================================================ */
.envelope {
  position: relative;
  width: var(--envelope-w);
  aspect-ratio: 400 / 262;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  perspective: 1400px;
  animation: envelope-breathe 3.6s var(--ease-reveal) infinite;
  transition: transform 0.4s var(--ease-rise);
  touch-action: manipulation;
}

/* Gentle hover lift (fine pointers only) */
@media (hover: hover) and (pointer: fine) {
  .envelope:hover { transform: translateY(-5px); }
  .envelope:hover .envelope__body { filter: brightness(1.02); }
}

/* Phase 1 — tactile press feedback */
.envelope:active { transform: translateY(-1px) scale(0.985); }
.opening.is-opening .envelope,
.opening.is-opening .envelope:active { animation: none; transform: none; }

@keyframes envelope-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.envelope__body {
  position: absolute; inset: 0; display: block;
  transition: transform 1.1s var(--ease-rise) 1.5s, opacity 0.9s ease 1.6s;
  will-change: transform, opacity;
}

/* Phase 6 — the opened envelope recedes as the page takes over */
.opening.is-opening .envelope__body {
  transform: translateY(46px) scale(0.9);
  opacity: 0;
}

/* Back wall */
.envelope__back {
  position: absolute; inset: 0;
  background: linear-gradient(165deg, #f0e5cf 0%, #e7d8bb 55%, #ddcaa6 100%);
  border-radius: 5px;
  box-shadow:
    0 30px 60px -20px rgba(58, 50, 42, 0.38),
    0 8px 20px -8px rgba(58, 50, 42, 0.2);
}

/* The letter peeking inside (Phases 3–4: visible, then rises) */
.envelope__letter {
  position: absolute;
  left: 4.5%;
  right: 4.5%;
  top: 5%;
  bottom: 7%;
  background: linear-gradient(180deg, #fffef9 0%, #fbf4e7 100%);
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(58, 50, 42, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.32em;
  padding: 6% 8%;
  z-index: 2;
  transition: transform 1.25s var(--ease-rise) 0.6s;
  will-change: transform;
}

.opening.is-opening .envelope__letter { transform: translateY(-64%) scale(1.05); }

/* Tiny gold monogram seal printed on the letter */
.envelope__letter-crest {
  width: clamp(22px, 7%, 30px);
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  margin-bottom: 0.1em;
  background:
    radial-gradient(circle at 50% 50%, rgba(176,141,79,0.14), rgba(176,141,79,0.05));
  position: relative;
}
.envelope__letter-crest::after {
  content: "B";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(11px, 3.4vw, 15px);
  color: var(--gold);
}

.envelope__letter-line {
  font-size: clamp(0.56rem, 2.4vw, 0.78rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.envelope__letter-line--script {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.9rem, 3.8vw, 1.28rem);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--gold-deep);
}
.envelope__letter-line--small { color: var(--ink-soft); letter-spacing: 0.32em; }
.envelope__letter-rule { width: 32%; height: 1px; background: var(--line); }

/* Front folds sit above the letter, with realistic edge shading */
.envelope__front { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.envelope__panel { position: absolute; inset: 0; border-radius: 5px; }
.envelope__panel--left {
  background: linear-gradient(102deg, #f8f0e0 46%, #ecdfc4 52%, #f3e9d3 58%);
  clip-path: polygon(0 0, 51% 50%, 0 100%);
}
.envelope__panel--right {
  background: linear-gradient(258deg, #f8f0e0 46%, #ecdfc4 52%, #f3e9d3 58%);
  clip-path: polygon(100% 0, 49% 50%, 100% 100%);
}
.envelope__panel--bottom {
  background: linear-gradient(180deg, #f5ecd9 42%, #ecdfc2 70%, #e5d5b4);
  clip-path: polygon(0 100%, 50% 44%, 100% 100%);
}

/* Flap — hinged at the top edge (Phase 2) */
.envelope__flap {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(180deg, #f3e8d0 0%, #e9dab9 55%, #dfceab 100%);
  clip-path: polygon(0 0, 100% 0, 50% 57%);
  border-radius: 5px 5px 0 0;
  transform-origin: top center;
  transition: transform 0.9s var(--ease-flap), z-index 0s linear 0.45s;
  will-change: transform;
  /* foil line along the fold edge */
  filter: drop-shadow(0 1px 0 rgba(176, 141, 79, 0.35));
}

/* Gold wax seal with engraved ring */
.envelope__seal {
  position: absolute;
  left: 50%; top: 33%;
  width: clamp(36px, 11%, 48px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ddc08c, #b08d4f 62%, #90713a);
  box-shadow:
    0 4px 10px rgba(58, 50, 42, 0.4),
    inset 0 0 0 3px rgba(255, 250, 238, 0.3),
    inset 0 2px 5px rgba(255, 255, 255, 0.35);
  transition: opacity 0.4s ease 0.1s, transform 0.5s var(--ease-reveal) 0.1s;
}
.envelope__seal::after {
  content: "";
  position: absolute; inset: 22%;
  border-radius: 50%;
  border: 1px solid rgba(255, 250, 238, 0.5);
}

.opening.is-opening .envelope__flap {
  transform: rotateX(180deg);
  z-index: 1;
}
.opening.is-opening .envelope__seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
}

/* Hint under the envelope */
.opening__hint {
  margin: 0.2rem 0 0;
  font-size: clamp(0.72rem, 2.4vw, 0.85rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  animation: hint-fade 3s ease-in-out infinite;
  transition: opacity 0.5s ease;
}
.opening__hint-mobile { display: none; }
@media (hover: none), (pointer: coarse) {
  .opening__hint-desktop { display: none; }
  .opening__hint-mobile { display: inline; }
}
.opening.is-opening .opening__hint { opacity: 0; animation: none; }
@keyframes hint-fade { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.95; } }

/* ============================================================
   INVITATION LETTER
   ============================================================ */
.invitation { display: block; }

.letter {
  display: flex;
  justify-content: center;
  padding: clamp(3.2rem, 9vh, 6.5rem) 20px clamp(2.6rem, 7vh, 4.8rem);
}

.letter__card {
  position: relative;
  width: min(680px, 100%);
  background: linear-gradient(180deg, var(--paper) 0%, #fdf8ee 100%);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 40px 80px -38px rgba(58, 50, 42, 0.32),
    0 12px 28px -14px rgba(58, 50, 42, 0.14);
  padding: clamp(2.6rem, 7vw, 4.4rem) clamp(1.4rem, 6vw, 3.6rem);
  text-align: center;
}

/* Engraved double keyline */
.letter__card::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.letter__card::after {
  content: "";
  position: absolute;
  inset: 15px;
  border: 1px solid var(--line-faint);
  pointer-events: none;
}

/* Small corner accents on the outer keyline */
.letter__corner { position: absolute; width: 22px; height: 22px; pointer-events: none; }
.letter__corner--tl { top: 6px; left: 6px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.letter__corner--tr { top: 6px; right: 6px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.letter__corner--bl { bottom: 6px; left: 6px; border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.letter__corner--br { bottom: 6px; right: 6px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }

/* School crest — primary branding, elegantly framed */
.letter__badge {
  display: inline-block;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 8px 22px -10px rgba(58, 50, 42, 0.3);
  margin-bottom: 1.2rem;
}
.letter__logo {
  width: clamp(72px, 18vw, 104px);
  height: auto;
}

.letter__eyebrow {
  margin: 0 0 0.5rem;
  font-size: clamp(0.66rem, 2.1vw, 0.78rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
}

.letter__heading {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 5.8vw, 2.7rem);
  line-height: 1.14;
  color: var(--ink);
}

/* Diamond ornament divider */
.letter__ornament {
  display: block;
  width: 7px; height: 7px;
  margin: 1.1rem auto;
  background: var(--gold);
  transform: rotate(45deg);
  position: relative;
}
.letter__ornament::before,
.letter__ornament::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(36px, 10vw, 60px);
  height: 1px;
  background: var(--line);
}
.letter__ornament::before { right: 14px; }
.letter__ornament::after  { left: 14px; }

.letter__title {
  margin: 0 0 2rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 4.2vw, 1.75rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.letter__details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 auto 2.1rem;
  max-width: 440px;
}

.letter__detail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.5rem 0.2rem;
  border-bottom: 1px solid var(--line-faint);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  color: var(--ink);
}
.letter__detail:last-child { border-bottom: 0; }

.letter__detail-label {
  font-family: var(--sans);
  font-size: clamp(0.62rem, 1.9vw, 0.72rem);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

.letter__quote {
  margin: 0 auto 1.5rem;
  max-width: 470px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.06rem, 3.4vw, 1.26rem);
  line-height: 1.8;
  color: var(--ink-soft);
}

.letter__divider {
  display: block;
  width: 56px;
  height: 1px;
  margin: 0 auto 1.5rem;
  background: var(--line);
  position: relative;
}
.letter__divider::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  background: var(--gold-soft);
  transform: translate(-50%, -50%) rotate(45deg);
}

.letter__closing {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.98rem, 3vw, 1.12rem);
  color: var(--ink-soft);
}

/* ============================================================
   EVENT DETAILS SECTION
   ============================================================ */
.details {
  display: flex;
  justify-content: center;
  padding: 0 20px clamp(3.2rem, 8vh, 5.5rem);
}

.details__inner {
  width: min(560px, 100%);
  text-align: center;
  padding: clamp(2rem, 5vw, 2.8rem) clamp(1.3rem, 5vw, 2.5rem) clamp(2.2rem, 5vw, 3rem);
  background: rgba(255, 253, 248, 0.65);
  border: 1px solid var(--line);
  box-shadow: 0 20px 45px -30px rgba(58, 50, 42, 0.25);
}

/* Committee logo: navy-on-white art blends into the ivory card */
.details__logo {
  width: clamp(56px, 14vw, 88px);
  height: auto;
  margin: 0 auto 1rem;
  mix-blend-mode: multiply;
}

.details__heading {
  margin: 0 0 0.9rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 4.4vw, 1.7rem);
  letter-spacing: 0.06em;
  color: var(--ink);
}

.details__ornament {
  display: block;
  width: 5px; height: 5px;
  margin: 0 auto 1.4rem;
  background: var(--gold-soft);
  transform: rotate(45deg);
}

.details__list { margin: 0; display: flex; flex-direction: column; gap: 0.85rem; }

.details__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.2rem;
  border-bottom: 1px solid var(--line-faint);
}
.details__item:last-child { border-bottom: 0; }

.details__item dt {
  font-size: clamp(0.62rem, 1.9vw, 0.72rem);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

.details__item dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1rem, 3.2vw, 1.2rem);
  color: var(--ink);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  text-align: center;
  padding: 1.8rem 20px 2.4rem;
  border-top: 1px solid var(--line-faint);
}

.footer__event {
  margin: 0 0 0.7rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.footer__credit {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.footer__heart { font-size: 0.72rem; }

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  margin-left: 2px;
}

/* Sonal wordmark — black-on-white art blends into the ivory footer */
.footer__logo {
  width: auto;
  height: 13px;
  mix-blend-mode: multiply;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-reveal);
}

/* The name itself: subtly more distinctive, still elegant */
.footer__name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  color: var(--gold-deep);
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(151, 118, 62, 0.35);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.footer__link:hover .footer__name,
.footer__link:focus-visible .footer__name {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.footer__link:hover .footer__logo { opacity: 1; transform: translateY(-1px); }

/* ============================================================
   REVEAL ANIMATIONS (applied after opening)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease-reveal), transform 1s var(--ease-rise);
}

.invitation.is-revealed .reveal,
.footer.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.invitation.is-revealed .letter .reveal { transition-delay: 0.1s; }
.invitation.is-revealed .details .reveal { transition-delay: 0.35s; }
.footer.is-revealed { transition: opacity 1.1s var(--ease-reveal) 0.5s; }

/* ============================================================
   RESPONSIVE REFINEMENTS
   ============================================================ */

/* Tablets — three-column detail rows */
@media (min-width: 700px) {
  .letter__details { flex-direction: row; gap: 0; max-width: 560px; }
  .letter__detail {
    flex: 1;
    flex-direction: column;
    gap: 0.3rem;
    border-bottom: 0;
    border-right: 1px solid var(--line-faint);
    padding: 0.45rem 0.9rem;
  }
  .letter__detail:last-child { border-right: 0; }
  .details__list { flex-direction: row; }
  .details__item { flex: 1; flex-direction: column; gap: 0.3rem; border-bottom: 0; border-right: 1px solid var(--line-faint); }
  .details__item:last-child { border-right: 0; }
}

/* Very wide screens — preserve comfortable reading width */
@media (min-width: 1600px) {
  .letter__card { width: 720px; }
  .opening__event { font-size: 3.9rem; }
}

/* Short landscape screens — nothing clips, everything reachable */
@media (max-height: 560px) {
  .opening__inner { gap: 0.7rem; }
  .opening__badge { padding: 5px; margin-bottom: 0.4rem; }
  .opening__logo { width: 42px; }
  .opening__event { font-size: clamp(1.4rem, 5.4vh, 2rem); }
  .opening__date { font-size: 0.95rem; margin-top: 0.25rem; }
  :root { --envelope-w: clamp(225px, 44vh, 330px); }
  .letter { padding-top: 2.2rem; }
}

/* Small phones — tighter ornaments, comfortable tap target */
@media (max-width: 360px) {
  .letter__card { padding-left: 1.1rem; padding-right: 1.1rem; }
  .letter__card::before { inset: 8px; }
  .letter__card::after { inset: 12px; }
}

/* ============================================================
   REDUCED MOTION — simplify but keep the interaction functional
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .envelope, .opening__hint { animation: none; }
  .envelope__flap { transition-duration: 0.25s; }
  .envelope__letter { transition-duration: 0.45s; transition-delay: 0.2s; }
  .envelope__body { transition-duration: 0.35s; transition-delay: 0.2s; }
  .reveal, .footer.is-revealed { transition-duration: 0.25s; transition-delay: 0s; }
  .opening { transition-duration: 0.3s; }
  .envelope:hover { transform: none; }
}