/* ---------- Floating bottom nav (glass pill) ---------- */
.floating-nav {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(calc(100% + 40px + env(safe-area-inset-bottom)));
  z-index: 1000;

  display: flex;
  flex-direction: column;
  align-items: stretch;

  /* Sized by its content: with left: 50% and no width it would shrink to half
     the viewport and, now that the row may shrink, drop the bar off-centre. */
  width: max-content;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 40px - env(safe-area-inset-bottom));

  /* Shown/hidden purely via transform (slide off-screen below), never
     opacity — the glass blur on .nav-header (see below) needs to be at
     full strength the instant the pill starts sliding in, not fade in
     gradually with it. Matches the reference nav's behavior. */
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.floating-nav.is-visible {
  transform: translateX(-50%) translateY(0);
}

/* Scroll-driven show/hide, layered on top of the intro reveal above — only
   takes effect once .is-visible is set, and never while the contact form
   (.is-open) is on screen. */
.floating-nav.is-visible.is-scroll-hidden:not(.is-open) {
  transform: translateX(-50%) translateY(calc(100% + 40px + env(safe-area-inset-bottom)));
  pointer-events: none;
}

/* Set once the one-time intro reveal above finishes (js/nav.js) — swaps in
   a much snappier duration for every scroll/pointer hide-show after that,
   without touching the deliberately slow entrance. */
.floating-nav.nav-scroll-ready {
  transition-duration: 0.4s;
  transition-timing-function: ease-in-out;
}

/* Row holding the nav pill and, next to it, the theme toggle square —
   kept separate from .nav-header so adding the toggle never shrinks the
   pill itself. */
.nav-row {
  display: flex;
  gap: 0;
}

.nav-header {
  display: flex;
  align-items: center;
  /* .nav-row is stretched to the contact form's width while it's open
     (align-items: stretch on .floating-nav), which would otherwise leave
     empty space between the toggle and the pill. Growing into that space
     keeps the toggle flush against the form's right edge as it opens,
     without shifting the links inside. */
  flex-grow: 1;
  flex-shrink: 0;
  /* 036: one cell is --nav-cell-h tall and the bar leaves --nav-pill-gap around
     the cells, so the sliding box (one cell) sits the same distance from the
     bar's edge on every side. Bar height = cell + 2 gaps = 56px. */
  --nav-cell-h: 48px;
  padding: var(--nav-pill-gap);

  background: var(--nav-glass-bg);
  /* 055: --nav-extra (Contact's extra width) eases in and out with the form (same curve and
     duration as .contact-form-wrap's width), instead of jumping when .is-open toggles. */
  transition: background-color 0.3s ease, --nav-extra 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  border-radius: var(--nav-radius);
  backdrop-filter: blur(var(--nav-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(140%);
  /* No `will-change` here on purpose: under an ancestor whose transform is
     animated (.floating-nav) WebKit switches the blur off for good
     (WebKit bug 219729), and Safari on iPhone showed the menu without its
     slide. The reference nav that animates fine on iPhone has none. */
}

/* 055: Contact is wider than the other two cells by the difference between its word and
   Work's (16px Archivo 500; 14px: see below), so the air between the word and the bar's right edge equals the
   air Work has on the left. Only with the contact form closed: open, the form sets the width
   and the three cells stay equal. */
.nav-links > li:last-child {
  grid-column: 3 / 5;
}

.floating-nav:not(.is-open) .nav-header {
  --nav-extra: 18.6px;
}

/* Typed, so the browser can animate it (an untyped custom property switches at once). */
@property --nav-slide {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@property --nav-extra {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

/* Square, same height as .nav-header (stretched by .nav-row, width set to
   match by js/nav.js — Chromium doesn't resolve aspect-ratio from a
   flex-stretched cross size) and same corner radius, styled as part of
   the same glass pill. */
.nav-theme-toggle {
  position: relative;
  /* Fallback = .nav-header's real height (8px gap +
     48px cell = 56px; the value doesn't depend on the font),
     so the square is already its final size on first paint. js/nav.js
     still overwrites it with the measured height. A smaller fallback (it
     used to be 44px) made the nav visibly jump on pages where it's on
     screen from the start (project pages); on the home it's hidden until
     the intro ends, so nobody ever saw it. */
  width: var(--nav-toggle-size, 56px);
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  background: var(--nav-toggle-bg-inverted);
  border: none;
  border-radius: var(--nav-radius);
  cursor: pointer;
  /* 042: no browser tap flash on phones (the theme wipe is the feedback). */
  -webkit-tap-highlight-color: transparent;

  /* clip-path instead of overflow:hidden + border-radius — that
     combination left a persistent hairline of the button's true
     background along one edge once the scaled wipe circle settled at the
     end of the click animation (a rounded-corner clipping/antialiasing
     quirk in Chromium). clip-path clips on a different rendering path and
     doesn't have that seam. */
  clip-path: inset(0 round var(--nav-radius));
}

/* Both circles are centered the same way (fixed size + negative margin)
   so their animated `transform` is pure scale, not translate+scale. See
   js/theme.js for how the click handler drives them. */
.nav-theme-toggle-dot,
.nav-theme-toggle-wipe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
}

.nav-theme-toggle-dot {
  z-index: 2;
  background: var(--nav-link-active-inverted);
  transform: scale(1);
  transition: transform 0.2s ease;
}

/* Grows slightly on hover as an affordance that the button is
   clickable. Suppressed while the click animation itself is running
   (js/theme.js sets [data-animating]) so this transition doesn't fight
   the WAAPI-driven grow/settle around the same property. */
/* Keep in sync with the HOVER_SCALE constant in js/theme.js — the click
   animation reads the dot's actual on-screen size (hovered or not) so its
   wipe circle starts at the same size, with no visible jump/cut. */
.nav-theme-toggle:hover .nav-theme-toggle-dot {
  transform: scale(1.08);
}

.nav-theme-toggle[data-animating="true"] .nav-theme-toggle-dot {
  transition: none;
}

/* Grows to cover the whole square during the click animation — starts at
   the same size/position as the dot so it visually *is* the old dot
   growing into the new background. Hidden (scale(0)) at rest. */
.nav-theme-toggle-wipe {
  z-index: 1;
  transform: scale(0);
  pointer-events: none;
}

.nav-links {
  position: relative;
  /* Three cells of the same width (the widest word sets it) and nothing
     between them: the distance between words is the cell itself. */
  display: grid;
  /* minmax(0, ...): a cell may shrink below its word's padded width, so on
     phones between 361 and 500px the row fits the bar instead of pushing the
     theme square out of the frame. The widest word still sets the cell width
     when nothing squeezes it (desktop). */
  /* 055: a fourth, thin track (--nav-extra) that only the Contact cell spans, so Contact is
     exactly --nav-extra wider than Work and Info (unset = 0 = three equal cells, as before; it
     is set on .nav-header while the contact form is closed, see below). */
  grid-template-columns: repeat(3, minmax(0, 1fr)) var(--nav-extra, 0px);
  list-style: none;
  /* Fills the header when the contact form stretches it (desktop too), so the
     cells and the box keep the same gap to the bar's outer edge. */
  flex: 1 1 0;
  min-width: 0;
}

.nav-links > li {
  position: relative;
  z-index: 1;
  display: flex;
}

/* The sliding box: ONE piece behind the words, exactly one cell wide, parked
   on the marked section by js/nav.js through --nav-i (0 Work, 1 Info,
   2 Contact). Only `transform` animates, and it has no backdrop-filter or
   will-change of its own: both would switch the bar's blur off on Safari for
   iPhone (bugs 027/028, WebKit 219729). Fully round ends (semicircles). */
.nav-links > .nav-pill {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  /* The box slides through --nav-slide (a number that eases from one cell index to the next), not
     through left/width themselves: so when --nav-extra eases with the contact form, the box follows
     Contact's cell frame by frame instead of chasing it. */
  --nav-slide: var(--nav-i, 0);
  left: calc(var(--nav-slide) * (100% - var(--nav-extra, 0px)) / 3);
  /* One cell of the first three tracks, plus --nav-extra when the box marks Contact (index 2).
     --nav-extra = 0: the old 1/3 of the row. */
  --nav-cell: calc((100% - var(--nav-extra, 0px)) / 3);
  width: calc(var(--nav-cell) + var(--nav-extra, 0px) * clamp(0, var(--nav-slide) - 1, 1));
  border-radius: 9999px;
  background: var(--nav-pill-bg);
  transition: --nav-slide 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

/* No marked section (a project page): no box. */
/* Hidden at once (as always). The only fade is .pill-fade-out below, which js/nav.js sets just on
   a project page reached from a marked section. */
.nav-links:not([data-pill]) .nav-pill {
  visibility: hidden;
}

/* js/nav.js switches the slide off for the moment the box first appears or
   starts on the previous page's section, so it never slides in from nowhere. */
.nav-links.is-snap .nav-pill {
  transition: none;
}

/* First entry to the site (js/nav.js): the menu arrives with no mark, then
   Work gets its mark and the box FADES in where it is, instead of sliding in
   from somewhere. A plain opacity animation on the box alone: still no
   backdrop-filter or will-change on it. js/nav.js puts the class on just
   before the mark and takes it off once the fade is over. */
@keyframes nav-pill-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.nav-links.pill-fade-in .nav-pill {
  animation: nav-pill-in 0.5s ease both;
}

/* 064 ronda 6: arriving on a page with no marked section (a project) from one that had it, the box
   is drawn where it was and fades out, instead of disappearing at once. Opacity only, 300 ms. */
@keyframes nav-pill-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.nav-links.pill-fade-out .nav-pill {
  visibility: visible;
  animation: nav-pill-out 0.3s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .nav-links > .nav-pill {
    transition: none;
  }

  .nav-links.pill-fade-out .nav-pill {
    animation: none;
    opacity: 0;
    visibility: hidden;
  }

  .nav-links.pill-fade-in .nav-pill {
    animation: none;
  }
}

.nav-link {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: center;
  height: var(--nav-cell-h);
  padding: 0 18px;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 500;
  color: var(--nav-link-inactive);
  text-decoration: none;
  white-space: nowrap;
  /* Same fully round shape as the sliding box: the tap flash on phones follows it. */
  border-radius: 9999px;
  /* 042: no browser tap flash on phones; only the sliding box shows where you tapped.
     The keyboard ring (:focus-visible below) stays. */
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
}

/* Only with a real pointer: on touch screens :hover sticks to the link that
   was just tapped, leaving it coloured after its active mark has moved on. */
@media (hover: hover) {
  .nav-link:hover {
    color: var(--nav-link-active);
  }
}

.nav-link:focus-visible {
  outline: 2px solid var(--nav-link-active);
  outline-offset: 3px;
}

.nav-link.is-active {
  color: var(--nav-link-active);
}

/* ---------- Responsive ---------- */
/* Mobile (up to 500px wide; from 501px on the menu is the desktop pill, like on tablets): the menu spans the page's side margins (the same --grid-margin
   the content uses, 20px = the gap under the menu), instead of being a
   centred pill. The theme square stays square on the right; .nav-header
   (flex-grow: 1) widens to meet it and the three cells share that width.

   Bug 028 (Safari on iPhone): moving an element that is position: fixed makes
   Safari paint a block behind its floating buttons and tint the bottom bar
   (with no animation at all the bar stayed transparent). So on phones the
   fixed frame (.floating-nav) never moves and has no background: it only
   clips (overflow: hidden), and the two glass blocks (.nav-header and the
   theme square) slide up and down inside it. Hidden, the pill is entirely behind
   the frame's edge: nothing of it shows. No opacity anywhere (decision of the
   user, 2026-10-12). The centring translateX(-50%) is gone here too. */
@media (max-width: 500px) {
  .floating-nav,
  .floating-nav.is-visible,
  html.skip-intro .floating-nav,
  .floating-nav.is-visible.is-scroll-hidden:not(.is-open) {
    transform: none;
    transition: none;
  }

  .floating-nav {
    left: var(--grid-margin);
    right: var(--grid-margin);
    width: auto;
    max-width: none;
    overflow: hidden;
  }

  /* The header may give up width so the theme square always fits the frame
     (it was flex-shrink: 0 and cut the square at 361-500px). The three cells
     share the whole bar (375px iPhone: 279px minus the gaps). */
  .nav-header {
    flex-shrink: 1;
    min-width: 0;
  }

  /* The frame is a transparent strip: while the menu is hidden it must not
     catch taps meant for the page. */
  .floating-nav:not(.is-visible),
  .floating-nav.is-visible.is-scroll-hidden:not(.is-open) {
    pointer-events: none;
  }

  /* Ronda 4: the menu is two glass blocks side by side (.nav-header and the
     theme square), each with its own rounded corners where they meet. So each
     one is the element that slides AND carries its own blur (WebKit bug
     219729 switches off the blur of a child under an ancestor with an
     animated transform); .nav-row itself has no glass and no transform. */
  .nav-header,
  .nav-theme-toggle {
    transform: translateY(calc(100% + 4px));
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* 055: --nav-extra (Contact's extra width) keeps easing with the form on phones too: this
     list replaces the one in the base rule, so without it the words jumped. */
  .nav-header {
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s ease,
      --nav-extra 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .floating-nav.is-visible .nav-header,
  .floating-nav.is-visible .nav-theme-toggle,
  html.skip-intro .nav-header,
  html.skip-intro .nav-theme-toggle {
    transform: none;
  }

  .floating-nav.is-visible.is-scroll-hidden:not(.is-open) .nav-header,
  .floating-nav.is-visible.is-scroll-hidden:not(.is-open) .nav-theme-toggle {
    transform: translateY(calc(100% + 4px));
  }

  html.skip-intro .nav-header,
  html.skip-intro .nav-theme-toggle {
    transition: none;
  }

  /* Snappier hide/show (0.25s) for the mobile pill only, once the intro is over; desktop keeps 0.4s. */
  .floating-nav.nav-scroll-ready .nav-header {
    transition-duration: 0.25s, 0.3s, 0.45s;
    transition-timing-function: ease-in-out, ease, cubic-bezier(0.65, 0, 0.35, 1);
  }

  .floating-nav.nav-scroll-ready .nav-theme-toggle {
    transition-duration: 0.25s;
    transition-timing-function: ease-in-out;
  }
}

@media (max-width: 360px) {
  .nav-header {
    --nav-cell-h: 40px;
  }

  .nav-link {
    padding: 0 10px;
    font-size: 14px;
  }

  /* 055: the same difference between the two words, at 14px. */
  .floating-nav:not(.is-open) .nav-header {
    --nav-extra: 16.3px;
  }

  /* Same as the fallback above for this breakpoint's lower header
     (8px gap + 40px cell = 48px). */
  .nav-theme-toggle {
    width: var(--nav-toggle-size, 48px);
  }
}

/* ---------- 062: fade between pages ----------
   Changing page (home, Info, a project, Privacy) uses the browser's cross-document View
   Transition. Every page loads this file, so the opt-in and the layers of the menu live here;
   css/project.css keeps the Next/Previous camera (type "pager") on top. Opacity only, no
   movement: the page you leave fades out to the page background (--color-bg, each theme's own),
   then the new one fades in. 350 ms + 450 ms (064: calmer than the first 150 + 150), so the navigation itself is never held back (the
   browser keeps loading the next page while the old one fades). Reduced motion or no support:
   the page changes directly. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* The menu stays put in its own layers on top, never inside the page that fades. The PARTS
     are named, never .floating-nav (an ancestor with a name becomes the backdrop root of the
     glass and the blur stops seeing the page; see css/project.css). */
  .nav-header {
    view-transition-name: site-nav-bar;
  }

  .nav-theme-toggle {
    view-transition-name: site-nav-theme;
  }

  ::view-transition-group(site-nav-bar),
  ::view-transition-image-pair(site-nav-bar),
  ::view-transition-old(site-nav-bar),
  ::view-transition-new(site-nav-bar),
  ::view-transition-group(site-nav-theme),
  ::view-transition-image-pair(site-nav-theme),
  ::view-transition-old(site-nav-theme),
  ::view-transition-new(site-nav-theme) {
    animation: none;
    mix-blend-mode: normal;
  }

  ::view-transition-old(site-nav-bar),
  ::view-transition-old(site-nav-theme) {
    display: none;
  }

  ::view-transition-group(site-nav-bar) {
    box-sizing: content-box;
    border: 3px solid transparent;
    translate: -3px -3px;
    clip-path: inset(3px round var(--nav-radius));
  }

  ::view-transition-new(site-nav-bar) {
    backdrop-filter: blur(var(--nav-blur)) saturate(140%);
    border-radius: var(--nav-radius);
  }

  /* The footer's logo and contact lines are their own layers (064 round 4: they fade by opacity, they are
     not recoloured, while the footer's background fades with the page to the general background). Not for
     Next/Previous (there the footer travels inside the page, as before). Only under
     html.footer-fade (js/footer.js sets it on pageswap when the footer is really in view): a named
     layer is painted above the page, so while the footer is still covered it must not exist. */
  html.footer-fade:not(:active-view-transition-type(pager)) .footer-logo {
    view-transition-name: site-footer-logo;
  }

  html.footer-fade:not(:active-view-transition-type(pager)) .footer-details {
    view-transition-name: site-footer-details;
  }

  html:not(:active-view-transition-type(pager))::view-transition {
    background: var(--color-bg);
  }

  /* 064 round 4 (point 7): on touch screens (Safari iPhone / iPad) the browser tints its top and bottom bars
     with the colour of a full-screen layer, and ::view-transition is one: the stripes seen during the fade
     (bugs 028 / 030 / 060). Here it is transparent: <html> already paints the mode's colour behind it
     (css/base.css), which is what the fade goes through. */
  @media (pointer: coarse), (hover: none) {
    html:not(:active-view-transition-type(pager))::view-transition {
      background: transparent;
    }
  }

  html:not(:active-view-transition-type(pager))::view-transition-group(root),
  html:not(:active-view-transition-type(pager))::view-transition-image-pair(root),
  html:not(:active-view-transition-type(pager))::view-transition-group(site-footer-logo),
  html:not(:active-view-transition-type(pager))::view-transition-image-pair(site-footer-logo),
  html:not(:active-view-transition-type(pager))::view-transition-group(site-footer-details),
  html:not(:active-view-transition-type(pager))::view-transition-image-pair(site-footer-details) {
    animation: none;
    isolation: auto;
  }

  html:not(:active-view-transition-type(pager))::view-transition-old(root),
  html:not(:active-view-transition-type(pager))::view-transition-new(root),
  html:not(:active-view-transition-type(pager))::view-transition-old(site-footer-logo),
  html:not(:active-view-transition-type(pager))::view-transition-new(site-footer-logo),
  html:not(:active-view-transition-type(pager))::view-transition-old(site-footer-details),
  html:not(:active-view-transition-type(pager))::view-transition-new(site-footer-details) {
    mix-blend-mode: normal;
  }

  html:not(:active-view-transition-type(pager))::view-transition-old(root) {
    animation: page-fade-out 350ms ease-in-out both;
  }

  html:not(:active-view-transition-type(pager))::view-transition-new(root) {
    animation: page-fade-in 450ms ease-in-out 350ms both;
  }

  html:not(:active-view-transition-type(pager))::view-transition-old(site-footer-logo),
  html:not(:active-view-transition-type(pager))::view-transition-old(site-footer-details) {
    animation: footer-to-bg 350ms ease-in-out both;
  }

  html:not(:active-view-transition-type(pager))::view-transition-new(site-footer-logo),
  html:not(:active-view-transition-type(pager))::view-transition-new(site-footer-details) {
    animation: footer-from-bg 450ms ease-in-out 350ms both;
  }

  @keyframes page-fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes page-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* 064 round 4: the footer's logo and contact lines are not recoloured any more: they go to opacity 0
     (leaving) and come from opacity 0 (arriving), while the footer's background, which travels inside the
     page snapshot, fades to the general background (the page layers over --color-bg). */
  @keyframes footer-to-bg {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes footer-from-bg {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* 068: pages change WITHOUT changing document (js/spa.js): the menu is never redrawn and only the page
   under it fades, by opacity, on the real page (no fixed layer, no animated background: <html> keeps
   painting the mode's colour behind). Touch screens: no browser View Transition at all (WebKit bug 285400:
   its layer does not reach under Safari's bars). Desktop keeps it for the Next / Previous camera, the only
   page change left that reloads. */
@media (pointer: coarse), (hover: none) {
  @view-transition { navigation: none; }
}
@media (prefers-reduced-motion: no-preference) {
  /* ONE mechanism for both directions (no keyframe animation: two overlapping ones on the same property made
     Safari play the arrival twice). The timing used is the destination state's: coming in = 450ms (base),
     going out = 350ms (page-leaving).
     Page: opacity. Footer: its BACKGROUND goes to the page's colour (--color-bg) and back (so it stops
     looking like a block); its ELEMENTS (logo, details) go to opacity 0 and back, no colour change. */
  html .page-content {
    transition: background-color 0.3s ease, opacity 450ms ease-in-out;
  }
  /* The canvas (<html>) and the footer's background ALWAYS move together: same duration, curve and start, in
     each state — rest / theme switch 0.3s ease (= css/base.css html), leaving 350ms, arriving 450ms. */
  html .footer {
    transition: background-color 0.3s ease, filter 0.3s ease;
  }
  html.page-arriving,
  html.page-arriving .footer {
    transition: background-color 450ms ease-in-out, filter 0.3s ease;
  }
  html .footer-logo,
  html .footer-details {
    transition: color 0.3s ease, opacity 450ms ease-in-out;
  }
  /* The canvas: near the end of the page (phones and tablets) js/footer.js gives <html> the footer's colour
     (--footer-bg, bug 028). While the page fades it must show the PAGE's colour, or the faded page reveals
     the footer's colour and the whole screen seems to turn black. Only .footer's own background changes. */
  html.page-leaving {
    background: var(--color-bg);
    transition: background-color 350ms ease-in-out;
  }
  html.page-leaving .page-content {
    opacity: 0;
    transition: background-color 0.3s ease, opacity 350ms ease-in-out;
  }
  html.page-leaving .footer {
    background-color: var(--color-bg); /* beats .footer's var(--footer-look-bg) by specificity, no !important */
    transition: background-color 350ms ease-in-out, filter 0.3s ease;
  }
  html.page-leaving .footer-logo,
  html.page-leaving .footer-details {
    opacity: 0;
    transition: color 0.3s ease, opacity 350ms ease-in-out;
  }
  /* Back / forward with the browser's own animation (js/spa.js, html.page-cut): out at once, in by fading. */
  html.page-cut.page-leaving,
  html.page-cut.page-leaving .page-content,
  html.page-cut.page-leaving .footer,
  html.page-cut.page-leaving .footer-logo,
  html.page-cut.page-leaving .footer-details {
    transition: none;
  }
}