/* motion.css: owned by team motion
   Windows 7 Aero motion: short, smooth, interruptible. Only transform and opacity animate.
   motion.js adds and removes the fx- classes and sets --fx-x, --fx-y, --fx-t and --fx-o.
   The durations live only here: motion.js reads animationDuration from computed style. */

/* ---------- Window animations ---------- */
/* --fx-t / --fx-o hold the transform and opacity at the moment a running animation was
   interrupted, so the next one continues from there instead of jumping. */
@keyframes fx-win-open {
  from { transform: var(--fx-t, scale(.94)); opacity: var(--fx-o, 0); }
  to   { transform: none; opacity: 1; }
}
@keyframes fx-win-close {
  from { transform: var(--fx-t, none); opacity: var(--fx-o, 1); }
  to   { transform: scale(.96); opacity: 0; }
}
@keyframes fx-win-min {
  from { transform: var(--fx-t, none); opacity: var(--fx-o, 1); }
  to   { transform: translate(var(--fx-x), var(--fx-y)) scale(.2); opacity: 0; }
}
@keyframes fx-win-restore {
  from { transform: var(--fx-t, translate(var(--fx-x), var(--fx-y)) scale(.2)); opacity: var(--fx-o, 0); }
  to   { transform: none; opacity: 1; }
}

.fx-open    { animation: fx-win-open    200ms cubic-bezier(.2, .8, .2, 1) backwards; }
.fx-close   { animation: fx-win-close   150ms cubic-bezier(.4, 0, 1, 1)   forwards; }
.fx-min     { animation: fx-win-min     220ms cubic-bezier(.4, 0, 1, 1)   forwards; }
.fx-restore { animation: fx-win-restore 220ms cubic-bezier(.2, .8, .2, 1) backwards; }

/* ---------- Start menu ---------- */
@keyframes fx-start-in {
  from { transform: var(--fx-t, translateY(8px)); opacity: var(--fx-o, 0); }
  to   { transform: none; opacity: 1; }
}
@keyframes fx-start-out {
  from { transform: var(--fx-t, none); opacity: var(--fx-o, 1); }
  to   { transform: translateY(8px); opacity: 0; }
}

#start { transform-origin: 0 100%; }
#start.fx-start-in  { animation: fx-start-in  150ms cubic-bezier(.2, .8, .2, 1) backwards; }
#start.fx-start-out { animation: fx-start-out 120ms cubic-bezier(.4, 0, 1, 1)   forwards; }

/* will-change only while an animation runs */
.fx-open, .fx-close, .fx-min, .fx-restore,
#start.fx-start-in, #start.fx-start-out { will-change: transform, opacity; }

/* ---------- Hover and press: .pin, .task, .dicon, #orb ----------
   style.css changes background, border, shadow and filter on hover. Those cannot be faded
   cheaply, so the hover look is reset here and drawn on ::after, which fades with opacity.
   The host isolates, so the ::after (z-index -1) sits above the host's own background and
   below its icon and text. */
.pin, .task, .dicon {
  position: relative;
  isolation: isolate;
}
.pin, .task, .dicon, #orb {
  transition: transform .2s cubic-bezier(.2, .8, .2, 1); /* replaces style.css's background/shadow/border fades */
}
.pin::after, .task::after, .dicon::after, #orb::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px; /* the host's border box (hosts have a 1px border) */
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out;
}

/* resting look: undo style.css's hover look (same specificity, later in the cascade).
   .active keeps its own look, so :not(.active) lets .pin.active win as it does today. */
.pin:not(.active):hover, .task:not(.active):hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.dicon:hover, .dicon:focus-visible, .dicon:active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
#orb img { transition: none; }
#orb:hover img, #orb[aria-expanded="true"] img { filter: drop-shadow(0 0 4px rgba(80, 200, 255, 0.55)); }

/* hover look, copied from style.css, drawn on ::after */
.pin::after, .task::after {
  border: 1px solid rgba(130, 230, 255, 0.95);
  box-shadow: 0 0 8px rgba(77, 200, 255, 0.85), inset 0 0 10px rgba(120, 225, 255, 0.5);
}
.dicon::after {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.35);
}
.dicon:active::after { background: rgba(120, 200, 255, 0.35); } /* style.css's pressed tint */
#orb::after { /* glow behind the round orb, in place of the img's hover drop-shadow */
  inset: 2px;
  border-radius: 50%;
  /* the orb no longer brightens, so the halo carries the hover. A box-shadow paints only outside its box, so the gradient
     fills the gap between the 30px sphere and the 44px box and ends at the same alpha as the shadow starts (no dark ring) */
  background: radial-gradient(circle, rgba(120, 225, 255, 0.9) 0 45%, rgba(120, 225, 255, 0.55) 70%);
  box-shadow: 0 0 12px 3px rgba(120, 225, 255, 0.55);
}

.pin:hover::after, .task:hover::after, .dicon:hover::after, #orb:hover::after,
.pin:focus-visible::after, .task:focus-visible::after, .dicon:focus-visible::after, #orb:focus-visible::after,
#orb[aria-expanded="true"]::after { opacity: 1; }

/* the active pin or task keeps its own look under the pointer, as in style.css: no hover glow on top of it.
   Keyboard focus still gets its mark. These beat the reduced-motion opacity: 1 rule by specificity. */
.pin.active:hover::after, .task.active:hover::after { opacity: 0; }
.pin.active:focus-visible::after, .task.active:focus-visible::after { opacity: 1; }

/* dead pins (no window, no link): no glow, no press, as today */
.pin:not([data-open]):not([href])::after { display: none; }

/* press: quick in, smooth out */
.pin:active, .task:active, .dicon:active, #orb:active {
  transform: scale(.96);
  transition-duration: .06s;
}
.pin:not([data-open]):not([href]):active { transform: none; }

/* ---------- Reduced motion ---------- */
/* animation: none also resets animation-duration to 0s, so motion.js reads 0 and finishes at once */
@media (prefers-reduced-motion: reduce) {
  .fx-open, .fx-close, .fx-min, .fx-restore,
  .fx-start-in, .fx-start-out, #start,
  .pin, .task, .dicon, #orb, #orb img,
  .pin::after, .task::after, .dicon::after, #orb::after {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  /* the state still changes, only the fading goes */
  .pin:hover::after, .task:hover::after, .dicon:hover::after, #orb:hover::after,
  .pin:focus-visible::after, .task:focus-visible::after, .dicon:focus-visible::after, #orb:focus-visible::after,
  #orb[aria-expanded="true"]::after { opacity: 1; }
}

/* ===== lock screen ===== */
/* A first-person view of a Windows 7 logon. motion.js builds the DOM and adds a stage class at a time to
   .fx-lock (fx-lock-s-locked, -click, -press, -pass, -type, -go, -enter, -welcome, -out); the stage classes
   stay on, so each rule below keys on one stage. Only transform and opacity animate. */
@keyframes fx-lock-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-lock-press { 50% { transform: scale(.9); } }
@keyframes fx-lock-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes fx-lock-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.04); } }
/* the cursor: glide in with an ease-out (0 to 78%), press (78 to 88%), release. --fx-lock-x1/y1 is the tile and
   x2/y2 the arrow button, measured by motion.js; the cursor starts 140px right and 120px below its first target */
@keyframes fx-lock-cur-in {
  0%   { transform: translate(calc(var(--fx-lock-x1, 0px) + 140px), calc(var(--fx-lock-y1, 0px) + 120px)); opacity: 0;
         animation-timing-function: cubic-bezier(.15, .7, .2, 1); }
  15%  { opacity: 1; }
  78%  { transform: translate(var(--fx-lock-x1, 0px), var(--fx-lock-y1, 0px)); animation-timing-function: ease-in-out; }
  88%  { transform: translate(var(--fx-lock-x1, 0px), var(--fx-lock-y1, 0px)) scale(.8); }
  100% { transform: translate(var(--fx-lock-x1, 0px), var(--fx-lock-y1, 0px)); opacity: 1; }
}
@keyframes fx-lock-cur-go {
  0%   { transform: translate(var(--fx-lock-x1, 0px), var(--fx-lock-y1, 0px)); opacity: 1;
         animation-timing-function: cubic-bezier(.3, .6, .25, 1); }
  78%  { transform: translate(var(--fx-lock-x2, 0px), var(--fx-lock-y2, 0px)); animation-timing-function: ease-in-out; }
  88%  { transform: translate(var(--fx-lock-x2, 0px), var(--fx-lock-y2, 0px)) scale(.8); }
  100% { transform: translate(var(--fx-lock-x2, 0px), var(--fx-lock-y2, 0px)); opacity: 1; }
}

.fx-lock {
  --fx-lock-bg: url("assets/Logon7-2K.jpg");
  --fx-lock-logo: url("assets/Windows%207%20Logo.png");
  --fx-lock-glass: linear-gradient(rgba(255, 255, 255, .12) 0 46%, transparent 46%), linear-gradient(#1f5b9a, #0f3a70); /* dark enough for white text at 4.5:1 everywhere */
  position: fixed;
  inset: 0;
  z-index: 200; /* above #taskbar (100) and #start (99) */
  overflow: hidden;
  color: #fff;
  font: 14px/1.3 var(--font, "Segoe UI", Tahoma, Arial, sans-serif);
  cursor: default;
  user-select: none;
  background: linear-gradient(135deg, #0d3f8f, #2f86e0 55%, #7cc8f5);
}
.fx-lock-s-out { animation: fx-lock-out 400ms cubic-bezier(.4, 0, 1, 1) forwards; } /* stays hit-testable until removed: a skipping tap must not reach the desktop */
.fx-lock-s-out.fx-lock-quick { animation-duration: 200ms; }

.fx-lock-cam { position: absolute; inset: 0; } /* a plain box: the view is still */
.fx-lock-bg { /* the gradient shows until the jpg has loaded */
  position: absolute;
  inset: 0;
  background: var(--fx-lock-bg) center / cover no-repeat, linear-gradient(135deg, #0d3f8f, #2f86e0 55%, #7cc8f5);
}
.fx-lock-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; }
.fx-lock-s-locked .fx-lock-scene { animation: fx-lock-fade 700ms ease-out forwards; }

.fx-lock-user { /* the positioned parent the cursor is measured against */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -4vh;
  text-shadow: 0 0 6px rgba(0, 30, 80, .85), 0 1px 2px rgba(0, 20, 60, .7);
  transition: opacity 350ms ease-out;
}
.fx-lock-s-welcome .fx-lock-user { opacity: 0; }

.fx-lock-tile { /* a small glassy frame round the guest picture, as on a Windows 7 logon */
  position: relative;
  box-sizing: border-box;
  width: clamp(48px, 7vmin, 56px);
  aspect-ratio: 1;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 4px;
  /* flat blue-grey under the picture (the content box) shows if the file fails; the glass is the frame */
  background: linear-gradient(#6f879f, #6f879f) content-box, linear-gradient(rgba(255, 255, 255, .5) 0 46%, rgba(255, 255, 255, .15) 46%), rgba(190, 225, 250, .35);
  box-shadow: 0 0 0 1px rgba(0, 40, 90, .55), 0 3px 10px rgba(0, 30, 70, .55);
}
.fx-lock-pic { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.fx-lock-tile::after { /* a thin gloss over the picture */
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0 34%, transparent 34%);
  pointer-events: none;
}
.fx-lock-s-press .fx-lock-tile { animation: fx-lock-press 160ms ease-out; }

.fx-lock-name { margin-top: 6px; font-size: 13px; font-weight: 400; text-shadow: 0 1px 3px rgba(0, 20, 60, .9), 0 0 6px rgba(0, 30, 80, .7); }

.fx-lock-sub { display: grid; place-items: center; height: 36px; margin-top: 10px; } /* only the password row */
.fx-lock-pw { display: flex; align-items: center; gap: 8px; padding-left: 42px; /* centres the box; the button sits to its right */ opacity: 0; transition: opacity 250ms ease-out; }
.fx-lock-s-pass .fx-lock-pw { opacity: 1; }

.fx-lock-box {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  width: min(220px, 52vw);
  height: 28px;
  padding: 0 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #5d7d99;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 30, 70, .25);
}
.fx-lock-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #1a1a1a; opacity: 0; }
.fx-lock-dot.fx-lock-on { animation: fx-lock-pop 110ms ease-out forwards; }

.fx-lock-go {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  background: radial-gradient(circle at 50% 20%, #9fe0ff, #1b72c9 65%, #0b3f7d);
  box-shadow: 0 1px 4px rgba(0, 30, 70, .5);
}
.fx-lock-go svg { display: block; }
.fx-lock-s-enter .fx-lock-go { animation: fx-lock-press 160ms ease-out; }

.fx-lock-skip, .fx-lock-mute {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 3px;
  background: var(--fx-lock-glass);
  box-shadow: 0 1px 4px rgba(0, 20, 60, .45), inset 0 0 0 1px rgba(255, 255, 255, .2);
  text-shadow: 0 1px 2px rgba(0, 20, 60, .7);
}

/* the three corner pieces: still, decorative, aria-hidden (the scene is), never focusable. The bottom ones share a
   centre line with the logo (44px up); from left to right at the bottom: ease, logo, mute, power. */
.fx-lock-lang, .fx-lock-ease, .fx-lock-power {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 0 0 1px rgba(0, 40, 90, .45), 0 1px 4px rgba(0, 20, 60, .45);
  text-shadow: 0 1px 2px rgba(0, 20, 60, .7);
}
.fx-lock-lang, .fx-lock-ease { background: linear-gradient(rgba(255, 255, 255, .45) 0 46%, rgba(255, 255, 255, .08) 46%), linear-gradient(#4a93d0, #2a67a8); }
.fx-lock-lang { top: 14px; left: 14px; height: 22px; min-width: 32px; padding: 0 8px; border-radius: 4px; font: 600 11px/1 var(--font, "Segoe UI", Tahoma, Arial, sans-serif); }
.fx-lock-ease { left: 20px; bottom: 29px; width: 30px; height: 30px; border-radius: 50%; }
.fx-lock-ease svg, .fx-lock-power svg { display: block; }
.fx-lock-power { right: 20px; bottom: 32px; width: 48px; height: 24px; border-radius: 4px; overflow: hidden; background: linear-gradient(rgba(255, 255, 255, .4) 0 46%, rgba(255, 255, 255, .05) 46%), linear-gradient(#d94a3f, #8f1410); }
.fx-lock-power-i { flex: 1; display: grid; place-items: center; height: 100%; }
.fx-lock-power-a { display: grid; place-items: center; width: 16px; height: 100%; border-left: 1px solid rgba(255, 255, 255, .45); }

.fx-lock-logo {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  background: var(--fx-lock-logo) 0 0 / 56px 168px no-repeat; /* the first of the three orbs in the sprite */
}

.fx-lock-cursor { /* the tip of the arrow is at the element's top-left corner */
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 26px;
  margin: -1px 0 0 -1px;
  transform-origin: 1px 1px;
  opacity: 0;
  pointer-events: none;
}
.fx-lock-cursor svg { display: block; }
.fx-lock-s-click .fx-lock-cursor { animation: fx-lock-cur-in 900ms linear forwards; }
.fx-lock-s-go .fx-lock-cursor { animation: fx-lock-cur-go 700ms linear forwards; }

.fx-lock-welcome {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center; /* very narrow viewports: the text drops under the gif instead of pushing it off the left edge */
  gap: 18px;
  font-size: 30px;
  font-weight: 300;
  text-shadow: 0 0 8px rgba(0, 30, 80, .85);
  opacity: 0;
  visibility: hidden; /* no text on the locked step: "Welcome" is not in the page's text until its step */
}
.fx-lock-s-welcome .fx-lock-welcome { visibility: visible; animation: fx-lock-fade 400ms ease-out 150ms forwards; } /* the delay lets the name and box fade first */
.fx-lock-gif { /* the gif moves by itself: no transform, it only comes in with the Welcome fade */
  display: block;
  flex: none;
  width: 64px;
  height: auto;
}

/* the two real buttons, outside the hidden scene */
.fx-lock-skip, .fx-lock-mute { position: absolute; z-index: 1; padding: 0; font: inherit; cursor: pointer; }
.fx-lock-skip { top: 14px; right: 14px; padding: 4px 16px; }
.fx-lock-mute { right: 82px; bottom: 27px; display: grid; place-items: center; width: 34px; height: 34px; }
/* a dark edge with a thin white ring outside it: the button outline reads on the pale corner and on the dark blue */
.fx-lock-skip, .fx-lock-mute { border-color: #0a2a56; box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 2px 5px rgba(0, 20, 60, .45); }
.fx-lock-skip:hover, .fx-lock-mute:hover { box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(60, 140, 230, .8), 0 2px 5px rgba(0, 20, 60, .45); }
/* focus ring: dark, white, dark, so it holds on both light and dark parts of the backdrop (static, no animation) */
.fx-lock-skip:focus-visible, .fx-lock-mute:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #0a2a56, 0 0 0 6px #0a2a56;
}
.fx-lock-mute svg { display: block; }

/* tiny viewports: the decorative corner pieces and the logo are dropped so nothing overlaps Mute or runs off the edge.
   Skip and Mute always stay. */
@media (max-width: 319px) {
  .fx-lock-ease, .fx-lock-power, .fx-lock-logo, .fx-lock-lang { display: none; }
  .fx-lock-mute { right: 14px; bottom: 14px; }
  .fx-lock-box { width: min(220px, 40vw); } /* the password row (box + arrow + centring pad) must fit 160px */
}
.fx-lock-slash { display: none; }
.fx-lock-mute[aria-pressed="true"] .fx-lock-wave { display: none; }
.fx-lock-mute[aria-pressed="true"] .fx-lock-slash { display: inline; }

@media (prefers-reduced-motion: reduce) {
  .fx-lock, .fx-lock *, .fx-lock *::before, .fx-lock *::after {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  /* not shown in this mode; if the setting flips mid-intro, nothing stays hidden (the welcome row included).
     The cursor stays hidden: without its glide it would sit as a stray arrow at the top of the tile. */
  .fx-lock-scene, .fx-lock-dot.fx-lock-on, .fx-lock-welcome { opacity: 1; }
}