/* Fits for this site on the other format (not part of FORPORT: its copied files stay exactly as they are) */

/* The page is always a little taller than the screen, so its footer starts below the first screen and the corner
   button (../switch.js fades it out as the footer comes up) is there when the page opens, on tall screens too */
.demo-section {
  min-height: calc(100vh + 170px);
  min-height: calc(100lvh + 170px);
}

/* Boxes still waiting for their reveal (script.js hides them until they scroll into view) can be reached with the
   keyboard and read out; they stay see-through until they come into view */
.demo-grid > .demo-grid__item {
  visibility: visible !important;
}

/* An open box stands out: the page behind it dims (its white panel ran into the big white letters of the footer) */
.demo-section,
.nothin-footer {
  transition: filter 0.45s ease;
}

html[data-card-view] .demo-section,
html[data-card-view] .nothin-footer {
  filter: brightness(0.45);
}

/* Keyboard focus shows on the big letters and on Milo */
html .nothin-footer .footer-nothin-svg:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
}

html .companion-character:focus-visible {
  outline: 2px solid #b9ffff;
  outline-offset: 2px;
  border-radius: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .demo-section,
  .nothin-footer {
    transition: none;
  }
}