/* =====================================================================
   enhance.css — hero motion layer (additive, isolated).
   Loaded AFTER styles.css so it augments the existing hero without
   touching it. All entrance animations use `animation … both` with the
   hidden state living ONLY inside the keyframe, so when the global
   prefers-reduced-motion rule (styles.css) disables animation the
   elements simply render in their normal, visible state. The one
   exception (the fishing-line stroke) gets an explicit reduced-motion
   fallback below. Remove this file + its <link> to fully revert.
   ===================================================================== */

/* Keep hero content above the ambient orbs. */
.hero .container { z-index: 1; }

/* ---- Hero card photo ---------------------------------------------- */
/* Fills the swipe card behind the badge/name/meta. No z-index, so the
   existing .phone-card::after scrim (generated content) still paints on
   top of it and keeps the name + meta legible; the z-index:1 text/badge
   sit above the scrim. The card's gradient background remains as a
   graceful fallback if the image ever fails to load. To use a real
   (consented) photo later, swap img/sam.svg for img/sam.jpg + update src. */
.phone-card { overflow: hidden; }
.phone-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- Orchestrated hero entrance (plays once, on load) -------------- */
@keyframes hkRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hkSlide { from { opacity: 0; transform: translateX(40px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes hkDraw { to { stroke-dashoffset: 0; } }

.hero .eyebrow      { animation: hkRise .60s .05s both; }
.hero .hero-title   { animation: hkRise .70s .16s both; }
.hero .hero-subtitle{ animation: hkRise .70s .48s both; }
.hero .cta-buttons  { animation: hkRise .70s .62s both; }
.hero .hero-note    { animation: hkRise .70s .78s both; }
.hero .hero-visual  { animation: hkSlide 1s .28s cubic-bezier(.2,.7,.2,1) both; }

/* The cast line draws itself, like landing the cast. */
.cast-line path { stroke-dasharray: 240; stroke-dashoffset: 240; }
.cast-line path { animation: hkDraw 1.3s .5s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { .cast-line path { stroke-dashoffset: 0; } }

/* ---- Continuous ambient motion ------------------------------------ */
/* Slow shimmer across the gradient headline accent. */
.gradient-text {
  background-size: 260% 100%;
  animation: hkShimmer 9s ease infinite;
}
@keyframes hkShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Phone gently floats. */
.phone { animation: hkBob 6.5s 1.1s ease-in-out infinite; will-change: transform; }
@keyframes hkBob { 0%,100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-13px) rotate(.5deg); } }

/* Heartbeat on the like action (the last action circle). */
.phone-actions span:last-child { animation: hkBeat 2.8s 1.4s ease-in-out infinite; }
@keyframes hkBeat { 0%,100% { transform: scale(1); } 12% { transform: scale(1.16); } 24% { transform: scale(1); } 36% { transform: scale(1.1); } }

/* ---- Ambient drifting orbs behind the hero ------------------------ */
.hero-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; filter: blur(64px); }
.hero-orb  { position: absolute; border-radius: 50%; mix-blend-mode: multiply; will-change: transform; }
@media (prefers-color-scheme: dark) { .hero-orb { mix-blend-mode: screen; } }
:root[data-theme="dark"] .hero-orb { mix-blend-mode: screen; }
.hero-orb.o1 { width: 420px; height: 420px; background: var(--indigo);  top: -120px; left: -70px;  opacity: .22; animation: hkD1 19s ease-in-out infinite; }
.hero-orb.o2 { width: 360px; height: 360px; background: var(--oxblood); top: 30px;   right: -60px; opacity: .16; animation: hkD2 23s ease-in-out infinite; }
.hero-orb.o3 { width: 300px; height: 300px; background: var(--gold);    bottom: -130px; left: 42%;  opacity: .15; animation: hkD3 27s ease-in-out infinite; }
@keyframes hkD1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(38px,28px) scale(1.08); } }
@keyframes hkD2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-34px,24px) scale(1.05); } }
@keyframes hkD3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(28px,-32px) scale(1.09); } }

/* ---- Floating status pills beside the phone (desktop only) -------- */
.hero-visual { position: relative; }
.hero-pill {
  position: absolute; display: flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 13px; font-size: 12.5px; font-weight: 600;
  color: var(--ink); box-shadow: var(--shadow-lg); z-index: 2;
}
.hero-pill .pdot { width: 8px; height: 8px; border-radius: 50%; }
.hero-pill.p-top { top: 54px; left: -22px; animation: hkBob 6.5s .5s ease-in-out infinite; }
.hero-pill.p-bot { bottom: 78px; right: -18px; animation: hkBob 7s 1s ease-in-out infinite; }
@media (max-width: 880px) { .hero-pill { display: none; } }

/* =====================================================================
   Feature sections — reveal cascade + icon life.
   Everything below rides the SAME .reveal → .in mechanism already wired
   in script.js, and the global prefers-reduced-motion rule in styles.css
   (animation:none + transition:none) neutralizes all of it, so reduced-
   motion users see the sections fully static and visible. Additive only.
   ===================================================================== */

/* Cards in a grid cascade in one after another instead of popping in
   unison. transition-delay overrides only the delay of the .reveal
   transition already defined in styles.css. */
.features-grid .reveal:nth-child(1) { transition-delay: 0s;   }
.features-grid .reveal:nth-child(2) { transition-delay: .07s; }
.features-grid .reveal:nth-child(3) { transition-delay: .14s; }
.features-grid .reveal:nth-child(4) { transition-delay: .21s; }
.features-grid .reveal:nth-child(5) { transition-delay: .28s; }
.features-grid .reveal:nth-child(6) { transition-delay: .35s; }

/* Section intros (eyebrow + title + subtitle) rise in as they scroll into
   view — .reveal is added to each .section-head in the markup. */

/* Icons gain a little life: they pop as their card reveals, and lean in
   on hover. No animation-fill-mode, so after the pop the icon returns to
   its resting transform and the hover transition stays in control. */
.feature-icon { transition: transform .28s cubic-bezier(.34, 1.56, .64, 1); will-change: transform; }
.feature-card:hover .feature-icon { transform: translateY(-3px) scale(1.08) rotate(-4deg); }
.feature-card.reveal.in .feature-icon { animation: hkPop .55s ease-out; }
@keyframes hkPop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* =====================================================================
   "See it in action" — animated product demos (Live date tracking +
   Plan the date), ported from the approved preview. Every class is hkd-
   prefixed and every keyframe hkd*-named to avoid any collision with
   styles.css or the hero. Captions use the site's own --ink tokens so they
   read on the light section. The global prefers-reduced-motion rule kills
   the motion; the block at the very end restores static, visible states so
   nothing is left hidden. Additive + reversible.
   ===================================================================== */
.hkd-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 46px 34px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 760px) { .hkd-grid { gap: 52px; } }
.hkd-demo { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 300px; }
.hkd-cap { text-align: center; max-width: 340px; }
.hkd-cap h3 { margin: 0 0 6px; font-size: 1.18rem; font-weight: 750; letter-spacing: -.01em; }
.hkd-cap p { margin: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.55; }

.hkd-phone { position: relative; width: 288px; height: 540px; border-radius: 42px; padding: 12px;
  background: linear-gradient(160deg, #3a2b58, #221636);
  box-shadow: 0 30px 60px -22px rgba(20, 10, 40, .5), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.hkd-screen { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: #160f28; }
.hkd-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 96px; height: 22px; border-radius: 999px; background: #241636; z-index: 9; }

/* --- Demo 1: live date tracking --- */
.hkd-map { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 30%, #23315a 0%, #1a2444 60%, #141a34 100%); }
.hkd-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hkd-street { stroke: #33406e; stroke-width: 6; stroke-linecap: round; fill: none; }
.hkd-street.thin { stroke: #2b365e; stroke-width: 3; }
.hkd-route { stroke: var(--gold); stroke-width: 4; fill: none; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; animation: hkdDraw 5.5s ease-in-out infinite; }
@keyframes hkdDraw { 0% { stroke-dashoffset: 340; } 30%, 100% { stroke-dashoffset: 0; } }
.hkd-dot { position: absolute; top: 0; left: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; z-index: 5;
  offset-path: path("M 40 430 C 90 380, 60 300, 130 270 S 210 200, 200 90"); animation: hkdTravel 5.5s ease-in-out infinite; }
@supports not (offset-path: path("M0 0")) { .hkd-dot { top: 90px; left: 200px; } }
@keyframes hkdTravel { 0% { offset-distance: 0%; } 30%, 100% { offset-distance: 100%; } }
.hkd-dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--indigo); border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(98, 68, 196, .4); }
.hkd-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--indigo); animation: hkdPing 2s ease-out infinite; }
@keyframes hkdPing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
.hkd-pill { position: absolute; z-index: 7; display: flex; align-items: center; gap: 7px; background: rgba(28, 19, 44, .86);
  backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 8px 12px;
  font-size: 12px; font-weight: 650; color: #efeaf7; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
.hkd-pill .g { width: 8px; height: 8px; border-radius: 50%; background: #3DBE7A; animation: hkdLive 1.8s ease-out infinite; }
@keyframes hkdLive { 0% { box-shadow: 0 0 0 0 rgba(61, 190, 122, .55); } 100% { box-shadow: 0 0 0 9px rgba(61, 190, 122, 0); } }
.hkd-pill.is-top { top: 52px; left: 16px; right: 16px; justify-content: center; }
.hkd-pill.is-mid { top: 150px; right: 20px; background: rgba(192, 132, 40, .18); border-color: rgba(192, 132, 40, .4); color: #f0cd8f; }
.hkd-msg { position: absolute; z-index: 7; left: 18px; bottom: 64px; max-width: 170px; background: #fff; color: #1c1330;
  border-radius: 14px 14px 14px 4px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(8px); animation: hkdMsg 5.5s ease-in-out infinite; }
@keyframes hkdMsg { 0%, 55% { opacity: 0; transform: translateY(8px); } 64%, 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
.hkd-expire { position: absolute; z-index: 7; left: 16px; right: 16px; bottom: 16px; text-align: center; font-size: 11.5px; color: #b7abd4; letter-spacing: .02em; }

/* --- Demo 2: plan the date --- */
.hkd-plan { position: absolute; inset: 0; padding: 56px 18px 18px; display: flex; flex-direction: column; gap: 12px;
  background: radial-gradient(100% 60% at 50% 0%, #2a1d46 0%, #160f28 70%); }
.hkd-plan-h { font-size: 15px; font-weight: 800; letter-spacing: -.01em; margin: 2px 2px 6px; color: #efeaf7; }
.hkd-row { display: flex; align-items: center; gap: 11px; background: #241a38; border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px; padding: 12px 13px; opacity: 0; transform: translateY(10px); animation: hkdFill 6s ease-in-out infinite; }
.hkd-row .ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 16px; }
.hkd-row b { display: block; font-size: 13.5px; color: #efeaf7; }
.hkd-row span { display: block; font-size: 11.5px; color: #b7abd4; margin-top: 1px; }
.hkd-row:nth-child(2) { animation-delay: .1s; }
.hkd-row:nth-child(3) { animation-delay: .55s; }
.hkd-row:nth-child(4) { animation-delay: 1s; }
@keyframes hkdFill { 0% { opacity: 0; transform: translateY(10px); } 12%, 100% { opacity: 1; transform: translateY(0); } }
.hkd-cta { margin-top: auto; position: relative; height: 48px; border-radius: 14px; overflow: hidden; }
.hkd-cta .hkd-btn, .hkd-cta .hkd-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 14px; border-radius: 14px; }
.hkd-cta .hkd-btn { background: linear-gradient(120deg, var(--indigo), #7a5ad6); color: #fff; animation: hkdBtnOut 6s ease-in-out infinite; }
.hkd-cta .hkd-done { background: #3DBE7A; color: #06301c; opacity: 0; animation: hkdDoneIn 6s ease-in-out infinite; }
@keyframes hkdBtnOut { 0%, 58% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes hkdDoneIn { 0%, 58% { opacity: 0; } 68%, 94% { opacity: 1; } 100% { opacity: 0; } }
.hkd-chk { width: 17px; height: 17px; }
.hkd-chk path { stroke: #06301c; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; animation: hkdChk 6s ease-in-out infinite; }
@keyframes hkdChk { 0%, 63% { stroke-dashoffset: 22; } 70%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 22; } }

/* Reduced-motion: styles.css already kills the animations globally; restore
   the finished, visible state so no demo element is stuck hidden. */
@media (prefers-reduced-motion: reduce) {
  .hkd-route { stroke-dashoffset: 0; }
  .hkd-dot { offset-distance: 100%; }
  .hkd-msg { opacity: 1; transform: none; }
  .hkd-row { opacity: 1; transform: none; }
  .hkd-cta .hkd-btn { opacity: 1; }
  .hkd-cta .hkd-done { opacity: 0; }
  .hkd-chk path { stroke-dashoffset: 0; }
}

/* ---------- Three more demos: Events, Compatibility, Chat → video ------
   Reuse .hkd-phone/.hkd-screen/.hkd-notch from above; only the screen
   contents differ. Same isolation + reduced-motion rules. */

/* Demo 3: Events — who's going */
.hkd-ev { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 52px 15px 15px; gap: 10px; background: radial-gradient(100% 55% at 50% 0, #241a3e, #160f28 72%); }
.hkd-ev-banner { height: 116px; border-radius: 15px; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 12px; background: linear-gradient(135deg, #6244C4 0, #8a4bb0 45%, #B0463C 100%); }
.hkd-ev-banner .em { position: absolute; top: 9px; right: 12px; font-size: 30px; }
.hkd-ev-banner b { color: #fff; font-size: 15px; font-weight: 800; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.hkd-ev-when { font-size: 11.5px; color: #b7abd4; margin: 2px 2px 0; }
.hkd-ev-lab { font-size: 12px; font-weight: 750; color: #efeaf7; margin: 8px 2px 2px; }
.hkd-ev-avs { display: flex; align-items: center; padding-left: 9px; height: 44px; }
.hkd-ev-av { width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid #160f28; margin-left: -9px; opacity: 0; transform: translateX(12px) scale(.7); animation: hkdAv 6s ease-in-out infinite; }
.hkd-ev-av:nth-child(1) { background: linear-gradient(135deg, #e08a9a, #c0566a); }
.hkd-ev-av:nth-child(2) { background: linear-gradient(135deg, #7fb3e0, #4f7fc0); animation-delay: .2s; }
.hkd-ev-av:nth-child(3) { background: linear-gradient(135deg, #e0c07f, #c0984f); animation-delay: .4s; }
.hkd-ev-av:nth-child(4) { background: linear-gradient(135deg, #8fd6a8, #4fae78); animation-delay: .6s; }
.hkd-ev-av.more { background: #2c2144; color: #cdbff0; font-size: 12px; font-weight: 800; display: grid; place-items: center; animation-delay: .8s; }
@keyframes hkdAv { 0% { opacity: 0; transform: translateX(12px) scale(.7); } 16%, 100% { opacity: 1; transform: translateX(0) scale(1); } }
.hkd-ev-match { margin-top: 6px; display: flex; align-items: center; gap: 8px; background: rgba(192, 132, 40, .16); border: 1px solid rgba(192, 132, 40, .4); border-radius: 12px; padding: 9px 11px; opacity: 0; animation: hkdEvMatch 6s ease-in-out infinite; }
.hkd-ev-match .tag { font-size: 9px; font-weight: 800; letter-spacing: .08em; background: #D69A3C; color: #241A05; padding: 3px 7px; border-radius: 999px; }
.hkd-ev-match b { font-size: 12.5px; color: #efeaf7; }
@keyframes hkdEvMatch { 0%, 52% { opacity: 0; transform: translateY(6px); } 62%, 100% { opacity: 1; transform: translateY(0); } }

/* Demo 4: Compatibility match-% */
.hkd-cm { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 52px 18px 18px; gap: 14px; background: radial-gradient(90% 50% at 50% 8%, #2a1d46, #160f28 72%); }
.hkd-cm-h { font-size: 12px; font-weight: 750; color: #b7abd4; letter-spacing: .04em; text-transform: uppercase; margin-top: 4px; }
.hkd-ring { position: relative; width: 148px; height: 148px; }
.hkd-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hkd-ring .tk { stroke: #2c2144; stroke-width: 13; fill: none; }
.hkd-ring .fl { stroke: url(#hkdcg); stroke-width: 13; fill: none; stroke-linecap: round; stroke-dasharray: 408; stroke-dashoffset: 408; animation: hkdRing 6s ease-in-out infinite; }
@keyframes hkdRing { 0% { stroke-dashoffset: 408; } 40%, 100% { stroke-dashoffset: 33; } }
.hkd-ring .ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hkd-ring .pct { font-size: 34px; font-weight: 850; color: #fff; letter-spacing: -.02em; }
.hkd-ring .pl { font-size: 10.5px; color: #b7abd4; font-weight: 650; margin-top: -2px; }
.hkd-cm-rows { width: 100%; display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.hkd-cm-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; opacity: 0; transform: translateY(8px); animation: hkdCmRow 6s ease-in-out infinite; }
.hkd-cm-row:nth-child(1) { animation-delay: .5s; }
.hkd-cm-row:nth-child(2) { animation-delay: .7s; }
.hkd-cm-row:nth-child(3) { animation-delay: .9s; }
.hkd-cm-row .ck { width: 20px; height: 20px; flex: none; border-radius: 50%; background: rgba(61, 190, 122, .18); display: grid; place-items: center; color: #3DBE7A; font-size: 12px; font-weight: 800; }
.hkd-cm-row span { color: #b7abd4; }
.hkd-cm-row b { color: #efeaf7; }
@keyframes hkdCmRow { 0% { opacity: 0; transform: translateY(8px); } 18%, 100% { opacity: 1; transform: translateY(0); } }

/* Demo 5: Chat → video */
.hkd-ch { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 50px 12px 12px; gap: 7px; background: radial-gradient(100% 50% at 50% 0, #221733, #160f28 72%); }
.hkd-bub { max-width: 76%; padding: 8px 12px; font-size: 12.5px; line-height: 1.35; border-radius: 15px; opacity: 0; transform: translateY(8px); animation: hkdBub 7s ease-in-out infinite; }
.hkd-bub.in { align-self: flex-start; background: #241a38; color: #efeaf7; border-bottom-left-radius: 4px; }
.hkd-bub.out { align-self: flex-end; background: linear-gradient(120deg, #6244C4, #7a5ad6); color: #fff; border-bottom-right-radius: 4px; }
.hkd-bub.b1 { animation-delay: .2s; }
.hkd-bub.b2 { animation-delay: .7s; }
.hkd-bub.b3 { animation-delay: 2.4s; }
@keyframes hkdBub { 0% { opacity: 0; transform: translateY(8px); } 6%, 100% { opacity: 1; transform: translateY(0); } }
.hkd-typing { align-self: flex-start; display: flex; gap: 4px; background: #241a38; padding: 11px 13px; border-radius: 15px; border-bottom-left-radius: 4px; opacity: 0; animation: hkdType 7s ease-in-out infinite; }
.hkd-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9c8fc4; animation: hkdDots 1.2s ease-in-out infinite; }
.hkd-typing i:nth-child(2) { animation-delay: .15s; }
.hkd-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hkdType { 0%, 16% { opacity: 0; } 22%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes hkdDots { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
.hkd-callbar { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 14px; font-weight: 800; font-size: 13.5px; color: #fff; background: linear-gradient(120deg, #3DBE7A, #2fa869); opacity: 0; transform: translateY(10px); animation: hkdCall 7s ease-in-out infinite; }
.hkd-callbar .rec { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: hkdPulseDot 1.4s ease-out infinite; }
@keyframes hkdCall { 0%, 60% { opacity: 0; transform: translateY(10px); } 70%, 94% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes hkdPulseDot { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } }

@media (prefers-reduced-motion: reduce) {
  .hkd-ev-av { opacity: 1; transform: none; }
  .hkd-ev-match { opacity: 1; transform: none; }
  .hkd-ring .fl { stroke-dashoffset: 33; }
  .hkd-cm-row { opacity: 1; transform: none; }
  .hkd-bub { opacity: 1; transform: none; }
  .hkd-typing { opacity: 0; }
  .hkd-callbar { opacity: 1; transform: none; }
}