/* ============================================================================
   Emulator mount (hub-side)

   Sits inside .stage so it inherits the 16:9 contained box — the
   emulator scales to the same coordinate space as the room/specs view,
   no full-viewport overlay. No background of its own: the active
   room's front.png is the backdrop. The mount fills the stage, and the
   emulator's own 1920x1024 stage transform-scales to fit.
   ============================================================================ */
.emulator-mount {
   position: absolute;
   inset: 0;
   /* Stacking layout for the in-place v3 emulator:
        bg (.stage-bg)        z-index 0/1
        emulator (this)       z-index 20
        drawer (.specs)       z-index 30
      The emulator lives BETWEEN the bg and the drawer. When inactive
      (pre-mounted during specs) it is invisible so the user only sees
      the empty TV from the room's front.png. Activating it fades the
      emulator in over the same 380ms as the drawer slide-out, so the
      two motions feel like one transition. */
   z-index: 20;
   pointer-events: none;
   opacity: 0;
   transition: opacity 380ms ease;
}

.emulator-mount[data-active="true"] {
   pointer-events: auto;
   opacity: 1;
}

.emulator-mount[hidden] {
   display: none;
}

/* ============================================================================
   webOS Emulator (vanilla port)

   1:1 port of weboshub30/pages/styles/emulator.scss. Same selectors, same
   coordinates. Two changes vs the source:
   - Cursor + arrow URLs come from CSS custom properties so the host can
     theme them. Defaults are the LG CDN URLs (same as the React version).
   - data-embedded="true" makes the root fill its parent instead of the
     viewport and removes the stage background (the host owns chrome).

   Loaded by the hub via <link rel="stylesheet">.
   ============================================================================ */

.webos-emulator {
   width: 100vw;
   height: 100vh;
   min-width: 320px;
   min-height: 320px;
   position: relative;
   overflow: hidden;
   background: #050505;
   color: #fff;

   --webos-emulator-cursor: url("../assets/emulator-chrome/cursor.png");
   --webos-emulator-arrow: url("../assets/emulator-chrome/arrow.png");
}

.webos-emulator[data-embedded="true"] {
   width: 100%;
   height: 100%;
   background: transparent;
}

.webos-emulator[data-embedded="true"] .webos-emulator__stage {
   background: none;
}

.webos-emulator button {
   font: inherit;
   text-transform: none;
   border: 2px solid #fd312e;
   outline: 0;
   appearance: none;
}

.webos-emulator__stage {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 1920px;
   height: 1080px;
   overflow: hidden;
   transform-origin: center;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.webos-emulator__toolbar {
   position: absolute;
   z-index: 50;
   top: 28px;
   left: 36px;
   right: 36px;
   min-height: 64px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   pointer-events: none;
}

.webos-emulator__toolbar-left,
.webos-emulator__toolbar-controls {
   pointer-events: auto;
}

.webos-emulator__toolbar-left {
   display: flex;
   align-items: center;
   gap: 14px;
   min-width: 0;
}

.webos-emulator .webos-emulator__exit-arrow {
   width: 44px;
   height: 44px;
   flex: 0 0 44px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   border: 1px solid rgba(255, 255, 255, 0.18);
   color: #fff;
   background: rgba(10, 10, 10, 0.46);
   backdrop-filter: blur(14px);
}

.webos-emulator__exit-arrow:hover {
   background: rgba(255, 255, 255, 0.16);
}

.webos-emulator__exit-arrow span {
   position: relative;
   display: block;
   width: 20px;
   height: 20px;
}

.webos-emulator__exit-arrow span::before,
.webos-emulator__exit-arrow span::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   display: block;
}

.webos-emulator__exit-arrow span::before {
   width: 10px;
   height: 10px;
   border-left: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: translate(-60%, -50%) rotate(45deg);
}

.webos-emulator__exit-arrow span::after {
   width: 15px;
   height: 2px;
   border-radius: 2px;
   background: currentColor;
   transform: translate(-35%, -50%);
}

.webos-emulator__title-group {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.webos-emulator__title-group h1,
.webos-emulator__eyebrow {
   margin: 0;
   color: #fff;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.webos-emulator__title-group h1 {
   font-size: 32px;
   font-weight: 700;
   line-height: 1;
}

.webos-emulator__eyebrow {
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0;
   opacity: 0.75;
}

.webos-emulator__toolbar-controls {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px;
   border: 1px solid rgba(255, 255, 255, 0.16);
   border-radius: 8px;
   background: rgba(10, 10, 10, 0.46);
   backdrop-filter: blur(14px);
}

.webos-emulator__year-toggle {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 4px;
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.1);
}

.webos-emulator__year-toggle button {
   height: 38px;
   min-width: 76px;
   padding: 0 14px;
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 6px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   line-height: 1;
   background: transparent;
}

.webos-emulator__year-toggle button[data-active="true"] {
   background: #fd312e;
}

.webos-emulator__year-toggle button:not([data-active="true"]):hover {
   background: rgba(255, 255, 255, 0.18);
}

/* Disclaimer note — a small, subtle footnote near the very bottom of the
   stage. Just the bullet lines, italic, on a faint translucent strip.
   Lives inside the scaled 1920x1080 stage, so it scales with everything. */
.webos-emulator__note {
   position: absolute;
   z-index: 16;
   left: 40px;
   bottom: 40px;
   width: fit-content;
   padding: 16px;
   border-radius: 10px;
   background: rgba(235, 235, 235, 0.9);
   color: #1a1a1a;
}
.webos-emulator__note ul {
   margin: 0;
   padding-left: 18px;
   display: flex;
   flex-direction: column;
   gap: 3px;
}
.webos-emulator__note li {
   font-size: 18px;
   font-weight: 400;
   line-height: 1.4;
}

.webos-emulator__content {
   position: absolute;
   z-index: 15;
   /* Per-category placement. The hub sets --emu-x / --emu-y / --emu-scale
      (see applyEmulatorPlacement in main.js) so the TV + remote block
      lands on whichever room's TV is showing. x/y is the block's center
      on the 1920x1080 stage; scale resizes TV + remote as one unit, so
      the bezel always keeps its ratio to the screenshot. Defaults below
      = the UHD tuning (also used by the standalone build). */
   top: var(--emu-y, 39.9%);
   left: var(--emu-x, 53.6%);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 68px;
   width: max-content;
   height: 700px;
   transform: translate(-50%, -50%) scale(var(--emu-scale, 1));
}

.webos-emulator__tv-container {
   position: relative;
   /* Bezel box size. Per category via --emu-bezel-w / --emu-bezel-h so a
      new bezel art with a different aspect can be fit exactly. The screen
      below is positioned independently, so resizing the box doesn't drag
      the screen content. */
   width: var(--emu-bezel-w, 1220px);
   height: var(--emu-bezel-h, 700px);
}

.webos-emulator__bezel {
   position: absolute;
   inset: 0;
   z-index: 10;
   width: 100%;
   height: 100%;
   pointer-events: none;
   user-select: none;
   /* Bezel art. The hub swaps it per category via --emu-bezel-img; the
      default is the locally-bundled bezel (also used by the standalone build). */
   background-image: var(
      --emu-bezel-img,
      url("../assets/emulator-chrome/bezel.png")
   );
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
}

.webos-emulator__screen {
   position: absolute;
   /* Screen position inside the bezel — per category via --emu-screen-x /
      --emu-screen-y so the screenshot lines up with each bezel's opening. */
   top: var(--emu-screen-y, 5px);
   left: var(--emu-screen-x, 5px);
   z-index: 5;
   /* IMPORTANT: base size stays at the design's 784x442 because the
      JSON hotspot coordinates (button.top / left / width / height) are
      absolute pixels relative to it. To grow the visible screen we
      raise transform: scale — image AND hotspots scale together so
      tooltips stay anchored to the right spots. --emu-screen-scale makes
      that size tunable per bezel. */
   width: 782px;
   height: 442px;
   overflow: hidden;
   background: #000;
   /* 1.54 gets ~1207x681 visible inside the default 1220x700 bezel. */
   transform: scale(var(--emu-screen-scale, 1.54));
   transform-origin: top left;
}

.webos-emulator__screen,
.webos-emulator__screen * {
   /* Inlined (not via a CSS var): url() inside a custom property is resolved
      by Chrome against the document base — with <base href="/emulator/emulator-INT/">
      that mangles the "../" to css/assets/… (404). A url() in a normal
      property resolves against THIS stylesheet, which is correct. */
   cursor:
      url("../assets/emulator-chrome/cursor.png") 0 0,
      auto;
   user-select: none;
}

.webos-emulator__screen-stack {
   position: absolute;
   inset: 0;
}

.webos-emulator__screen-image {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   object-fit: cover;
}

.webos-emulator__screen-image--backdrop {
   z-index: 1;
}

.webos-emulator__screen-image--current {
   z-index: 2;
}

/* Re-applied via JS (remove + reflow + add) so navigation re-triggers it. */
.webos-emulator__screen-image--current.webos-emulator__screen-image--fade {
   animation: webosScreenFade 180ms ease both;
}

/* Intro layer — the tall full-page screenshot (webOS home + all menus below).
   Lives inside the screen box (782x442, overflow:hidden), so it's cropped to
   the TV exactly. width:100% fills the screen; height:auto keeps its aspect,
   so it overflows downward and top-aligned shows the home screen first. Sits
   above the screenshots + hotspots. The intro animation drives translateY
   (scroll to the bottom, then back to the top); then it's hidden and the
   emulator starts. */
.webos-emulator__intro {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: auto;
   z-index: 9;
   /* auto (NOT none) so the intro intercepts the mouse while it plays — the
      hotspots + hover callouts below must not fire during the intro. It's only
      visible during the intro (hidden otherwise), so it blocks only then. */
   pointer-events: auto;
   display: block;
   will-change: transform;
}

/* display:block above beats the browser's [hidden]{display:none} (author >
   UA), so restore hidden with an equal-or-higher-specificity author rule. */
.webos-emulator__intro[hidden] {
   display: none;
}

/* The intro scroll: hold at the top, scroll down to the bottom, hold, then
   scroll back up to the top. --intro-scroll (set by playIntro) = full image
   height - screen box height. Tune the pace via the animation duration. */
@keyframes webos-intro-scroll {
   0%,
   9% {
      transform: translateY(0);
   }
   50%,
   59% {
      transform: translateY(calc(-1 * var(--intro-scroll, 0px)));
   }
   100% {
      transform: translateY(0);
   }
}
.webos-emulator__intro--playing {
   animation: webos-intro-scroll 6s ease-in-out both;
}
.webos-emulator__intro--done {
   opacity: 0;
   transition: opacity 220ms ease;
}

/* Fixed left menu bar (the webOS sidebar is fixed on the TV). Overlaid on the
   scrolling intro at top:0 left:0, full screen height, so it stays put while
   the content scrolls behind it. Sits above the intro image. Shown/hidden with
   the intro by playIntro. */
.webos-emulator__intro-sidebar {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: auto;
   z-index: 10;
   pointer-events: none;
   display: block;
}
.webos-emulator__intro-sidebar[hidden] {
   display: none;
}

/* Step cards — an extra image (eStreamer gif etc.) overlaid on the TV screen
   while the emulator is on certain steps (see STEP_CARDS in emulator.js).
   Lives inside the screen box (overflow:hidden) so it's clipped to the TV and
   positioned in % of it. Sits above the screenshots + hotspots but below the
   intro; pointer-events:none so it never blocks the hotspots underneath. The
   inner img is width:100%/height:auto so any gif aspect fits the configured
   width. Position/size come from each card's inline style (top/left/width). */
.webos-emulator__card {
   position: absolute;
   z-index: 6;
   pointer-events: none;
}
.webos-emulator__card[hidden] {
   display: none;
}
.webos-emulator__card-img {
   display: block;
   width: 100%;
   height: auto;
   user-select: none;
}

/* Step caption — a white rounded text card shown BELOW the TV on certain steps
   (see the "caption" key in data-2026.json). Sits inside the tv-container as a
   sibling of the screen, anchored to the bottom of the bezel and horizontally
   centered, so it tracks the TV placement per category. Copy comes from the
   JSON; placement/looks are fixed here. */
.webos-emulator__caption {
   position: absolute;
   top: 100%;
   left: 50%;
   z-index: 12;
   margin-top: 28px;
   width: max-content;
   max-width: 940px;
   padding: 22px 32px;
   border-radius: 18px;
   background: #fff;
   color: #1a1a1a;
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
   text-align: center;
   /* Hidden resting state: faded out + nudged down. Adding --show fades it in
      while it slides up into place; removing --show reverses it. visibility is
      delayed on the way out so the fade can finish, and instant on the way in. */
   opacity: 0;
   visibility: hidden;
   transform: translateX(-50%) translateY(20px);
   transition:
      opacity 300ms ease,
      transform 300ms ease,
      visibility 0s linear 300ms;
}
.webos-emulator__caption--show {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(0);
   transition:
      opacity 300ms ease,
      transform 300ms ease,
      visibility 0s;
}
.webos-emulator__caption p {
   margin: 0;
   font-size: 20px;
   font-weight: 400;
   line-height: 1.4;
}
.webos-emulator__caption-title {
   color: #555;
}
.webos-emulator__caption-text {
   margin-top: 8px;
   color: #1a1a1a;
}
.webos-emulator__caption-title[hidden],
.webos-emulator__caption-text[hidden] {
   display: none;
}

.webos-emulator__missing-screen {
   position: absolute;
   inset: 0;
   z-index: 2;
   display: grid;
   place-content: center;
   gap: 8px;
   color: #fff;
   text-align: center;
   background: #111;
}

/* `display: grid` above wins over the browser's [hidden] { display: none }
   by specificity, so the placeholder would never hide. This explicit rule
   matches specificity and restores the expected behavior. */
.webos-emulator__missing-screen[hidden] {
   display: none;
}

.webos-emulator__missing-screen span {
   font-size: 13px;
   opacity: 0.72;
}

.webos-emulator__missing-screen strong {
   max-width: 560px;
   color: #fff;
   font-size: 18px;
   line-height: 1.2;
   word-break: break-word;
}

.emulator-button {
   position: absolute;
   z-index: 5;
   padding: 0;
   /* Visible hotspot box: 2px red outline + faint red fill. */
   border: 2px solid #fd312e;
   border-radius: 4px;
   background: rgba(253, 49, 46, 0.1);
   transition:
      background-color 180ms ease,
      border-color 180ms ease;
}

/* Directional hotspots are arrows/triangles, not boxes — no fill/outline. */
.emulator-button[data-triangle="true"],
.emulator-button[data-arrow="true"] {
   border: 0;
   background: transparent;
}

.emulator-button:hover {
   /* Keep a clear white border on hover (high contrast against the TV
      content) so what's being selected reads plainly. 3px to match the v3. */
   border: 3px solid #fff;
   background: rgba(255, 255, 255, 0.2);
}

.emulator-button:hover[data-triangle="true"],
.emulator-button:hover[data-arrow="true"] {
   border: 0;
   background: transparent;
}

.emulator-button:focus-visible,
.webos-emulator__remote-home:focus-visible,
.webos-emulator__remote-back:focus-visible,
.webos-emulator__remote-channels:focus-visible,
.webos-emulator__toolbar button:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 2px;
}

.emulator-button--triangle-up-sm-disabled,
.emulator-button--triangle-down-sm-disabled,
.emulator-button--arrow-up-disabled,
.emulator-button--arrow-down-disabled {
   opacity: 0.4;
}

.webos-emulator__arrow-wrap {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
}

.webos-emulator__arrow-wrap--arrow-left {
   transform: rotate(180deg);
}

.webos-emulator__arrow-wrap--arrow-up,
.webos-emulator__arrow-wrap--arrow-up-disabled {
   transform: rotate(-90deg);
}

.webos-emulator__arrow-wrap--arrow-down,
.webos-emulator__arrow-wrap--arrow-down-disabled {
   transform: rotate(90deg);
}

.webos-emulator__arrow {
   display: block;
   width: 12px;
   height: 12px;
   /* Inlined for the same reason as the cursor above (custom-property url()
      resolves against the wrong base under <base href>). */
   background-image: url("../assets/emulator-chrome/arrow.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   animation: webosArrowBounce 1.4s linear 0.2s infinite;
}

.webos-emulator__popover {
   position: absolute;
   z-index: 25;
   max-width: 293px;
   padding: 17px;
   border-radius: 8px;
   background: #eeedf1;
   color: #000;
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.webos-emulator__popover[data-show="false"] {
   display: none;
}

.webos-emulator__popover h2,
.webos-emulator__popover p {
   margin: 0;
   text-align: left;
}

.webos-emulator__popover h2 {
   color: #fd312e;
   font-size: 13px;
   font-weight: 700;
   line-height: 1.1;
}

.webos-emulator__popover p {
   margin-top: 5px;
   color: #151515;
   font-size: 11px;
   line-height: 1.25;
}

.webos-emulator_remote {
   position: relative;
   width: fit-content;
   height: 516px;
   /* Resize the remote WITHOUT moving the TV. The remote is a flex item
      next to the tv-container; growing its box (height/width) would widen
      the centered content block and shift the TV off the photo. A
      transform scales it visually only — the layout box stays 516px, so
      the TV framing is untouched. transform-origin keeps the left edge
      (the gap to the TV) and the vertical center fixed, so it grows to
      the right and symmetrically up/down. Hit regions are children, so
      they scale with it. Driven per category by --emu-remote-scale
      (applyEmulatorPlacement in main.js); default 1 = today's size. */
   transform: scale(var(--emu-remote-scale, 1));
   transform-origin: left center;
}

.webos-emulator__remote-image {
   position: relative;
   z-index: 5;
   display: block;
   height: 100%;
   width: auto;
   pointer-events: none;
   user-select: none;
}

.webos-emulator__remote-home,
.webos-emulator__remote-back,
.webos-emulator__remote-channels {
   position: absolute;
   z-index: 8;
   padding: 0;
   background: rgba(165, 0, 52, 0.02);
}

.webos-emulator__remote-home:hover:not(:disabled),
.webos-emulator__remote-back:hover:not(:disabled),
.webos-emulator__remote-channels:hover:not(:disabled) {
   background: rgba(165, 0, 52, 0.1);
}

.webos-emulator__remote-home:disabled,
.webos-emulator__remote-back:disabled,
.webos-emulator__remote-channels:disabled {
   cursor: default;
}

.webos-emulator__remote-home,
.webos-emulator__remote-back {
   border-radius: 50%;
}

.webos-emulator__remote-home {
   top: 41.43%;
   left: 5.23%;
   width: 32.88%;
   height: 7.36%;
}

.webos-emulator__remote-back {
   top: 59.5%;
   left: 4.93%;
   width: 32.88%;
   height: 7.36%;
}

/* App quick-launch buttons over the remote's app grid (NETFLIX / prime video /
   Disney+). Faint hit regions like home/back — starting positions, tune to
   taste (% of the remote panel). */
.webos-emulator__remote-app {
   position: absolute;
   z-index: 8;
   padding: 0;
   border-radius: 8px;
   background: rgba(165, 0, 52, 0.02);
}
.webos-emulator__remote-app:hover {
   background: rgba(165, 0, 52, 0.1);
}
.webos-emulator__remote-netflix {
   top: 69.32%;
   left: 10.12%;
   width: 39.99%;
   height: 3.6%;
}
.webos-emulator__remote-prime {
   top: 69.32%;
   left: 51.18%;
   width: 39.99%;
   height: 3.6%;
}
.webos-emulator__remote-disney {
   top: 73.12%;
   left: 9.65%;
   width: 38.47%;
   height: 3.6%;
}

.webos-emulator__remote-channels {
   top: calc(70% + 8px);
   left: 44.75%;
   width: 52%;
   height: 7%;
   border-radius: 12px;
   transform: skewY(-6deg);
}

/* Power (turn the TV off). Starting hotspot over the red power icon at the top
   of the remote — tune to taste (% of the remote panel). The button's
   data-emu-target is empty until the "TV off" screen key exists (emulator.js). */
.webos-emulator__remote-power {
   position: absolute;
   z-index: 8;
   top: 1.5%;
   right: 47%;
   width: 32.88%;
   height: 7.36%;
   padding: 0;
   border-radius: 50%;
   background: rgba(165, 0, 52, 0.02);
}
.webos-emulator__remote-power:hover:not(:disabled) {
   background: rgba(165, 0, 52, 0.1);
}

/* Microphone button + its hover menu. The button is only a hover trigger (no
   target of its own); hovering fades in a CTA-style menu of two actions
   (Long Press / Short Press) to the left. .mic-group holds the position (same
   size as power — tune to taste); the button fills it. */
.webos-emulator__mic-group {
   position: absolute;
   z-index: 8;
   top: 39%;
   left: 33.5%;
   width: 32.88%;
   height: 7.36%;
}
.webos-emulator__remote-mic {
   position: absolute;
   inset: 0;
   padding: 0;
   border-radius: 50%;
   background: rgba(165, 0, 52, 0.02);
}
.webos-emulator__remote-mic:hover:not(:disabled) {
   background: rgba(165, 0, 52, 0.1);
}
/* The two actions, revealed to the left of the mic on hover. padding-right
   bridges the gap so the pointer can move onto the menu without it closing. */
.webos-emulator__mic-menu {
   position: absolute;
   left: 100%;
   top: 50%;
   transform: translateY(-50%);
   padding-left: 8px; /* bridges the mic->menu gap (flush box) so hover survives */
   display: flex;
   flex-direction: column;
   gap: 8px;
   opacity: 0;
   pointer-events: none;
   transition: opacity 160ms ease;
   z-index: 12;
}
.webos-emulator__mic-group:hover .webos-emulator__mic-menu {
   opacity: 1;
   pointer-events: auto;
}
.webos-emulator .webos-emulator__mic-option {
   white-space: nowrap;
   padding: 8px 16px;
   border: none;
   border-radius: 999px;
   background: #fd312e;
   color: #fff;
   font-family: "LG EI", sans-serif;
   font-size: 15px;
   font-weight: 700;
   line-height: 1;
   cursor: pointer;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
   transition: background-color 160ms ease;
}
.webos-emulator .webos-emulator__mic-option:hover {
   background: #e0201d;
}

/* TV powered off: hide every remote hotspot except power, so the only live
   control is the button that turns the TV back on. */
.webos-emulator[data-off="true"] .webos-emulator__remote-home,
.webos-emulator[data-off="true"] .webos-emulator__remote-back,
.webos-emulator[data-off="true"] .webos-emulator__remote-app,
.webos-emulator[data-off="true"] .webos-emulator__remote-channels,
.webos-emulator[data-off="true"] .webos-emulator__mic-group {
   display: none;
}

@keyframes webosScreenFade {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

@keyframes webosArrowBounce {
   0% {
      opacity: 1;
      transform: translateX(0) scale(1);
   }
   25% {
      opacity: 0;
      transform: translateX(10px) scale(0.9);
   }
   26% {
      opacity: 0;
      transform: translateX(-10px) scale(0.9);
   }
   55% {
      opacity: 1;
      transform: translateX(0) scale(1);
   }
}