/*
MOTION — elegant transitions & reveals for nathan-hall.com
------------------------------------------------------------------
Everything that hides content is scoped to `html.mo`, a class that
js/motion.js only adds when JavaScript is running AND the visitor has
not asked for reduced motion. No JS / reduced motion = the site looks
exactly as it did before.

To tune the feel, change the variables below.
------------------------------------------------------------------ */

:root {
  --mo-ease: cubic-bezier(.16, 1, .3, 1);       /* soft, long deceleration */
  --mo-ease-io: cubic-bezier(.76, 0, .24, 1);   /* page curtain */
  --mo-veil: #111111;                           /* curtain colour (light mode) */
  --mo-veil-text: #E7E3E0;
}
html.mo-dark {
  --mo-veil: #14151a;                           /* curtain colour (dark mode) */
}


/*
1. PAGE TRANSITION — a quiet curtain that carries the NHDD mark
   Leaves: rises from the bottom. Arrives: lifts away off the top.
------------------------------------------------------------------ */
html.mo::after {
  content: "NHDD \\";
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mo-veil);
  color: var(--mo-veil-text);
  font: 500 15px/1 "Sohne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.02em;
  transform: translate3d(0, 100%, 0);
  pointer-events: none;
  will-change: transform;
}
/* Page is arriving: curtain fully covering until JS lifts it */
html.mo-cover::after {
  transform: none;
  pointer-events: auto;
  /* safety net: if JS ever stalls, the curtain removes itself */
  animation: mo-failsafe 0s linear 5s forwards;
}
html.mo-reveal::after {
  transform: translate3d(0, -100%, 0);
  transition: transform .9s var(--mo-ease-io);
}
/* Page is leaving: curtain rises to cover */
html.mo-leave::after {
  transform: none;
  pointer-events: auto;
  transition: transform .6s var(--mo-ease-io);
}
@keyframes mo-failsafe { to { visibility: hidden; opacity: 0; } }


/*
2. SCROLL REVEALS — blocks of content (text sections, footer, cards)
   Fade + a gentle 34px rise, staggered when several arrive together.
------------------------------------------------------------------ */
html.mo .mo-item {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
}
html.mo .mo-item.mo-visible {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease var(--d, 0ms),
              transform 1.3s var(--mo-ease) var(--d, 0ms);
}
/* once revealed, hand control back so hover states etc. stay snappy */
html.mo .mo-item.mo-done {
  transition: opacity .5s ease, transform .5s ease;
}


/*
3. IMAGE FADE-INS — photos fade up and settle from a very slight zoom
------------------------------------------------------------------ 
html.mo img.mo-item {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(1.03);
}
html.mo img.mo-item.mo-visible {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s ease var(--d, 0ms),
              transform 1.6s var(--mo-ease) var(--d, 0ms);
}
html.mo img.mo-item.mo-done {
  transition: none;
}*/


/*
4. PROJECT TEASERS (homepage grid + "more projects" on work pages)
   The card rises in; the image inside eases down from a wider crop
   to the resting crop your hover effect already uses.
------------------------------------------------------------------ */
html.mo #projects .project-teaser.mo-item:not(.mo-visible) .image-teaser-project {
  background-size: 110% 110%;
}
html.mo #projects .project-teaser.mo-item.mo-visible:not(.mo-done) .image-teaser-project {
  background-size: 102% 102%;
  transition: background-size 1.9s var(--mo-ease) var(--d, 0ms);
}

/* Focus effect: while one project is hovered, the others recede a little 
@media (hover: hover) and (pointer: fine) {
  html.mo #projects:has(.project-teaser:hover) .project-teaser.mo-done:not(:hover) {
    opacity: .5;
  }
  html.mo #projects .project-teaser.mo-done {
    transition: opacity .6s ease;
  }
}*/

/* A small arrow slides in beside the project title on hover 
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #projects .project-teaser h3 a::after {
    content: "\2192";
    display: inline-block;
    margin-left: .45em;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .4s ease, transform .6s var(--mo-ease);
  }
  #projects .project-teaser:hover h3 a::after {
    opacity: 1;
    transform: none;
  }
}


/*
5. HEADLINES — line-by-line mask reveal
   js/motion.js wraps each authored line (the <br class="clear"> breaks)
   in a mask; lines glide up into place one after another.
------------------------------------------------------------------ */
html.mo .mo-line {
  display: block;
  overflow: hidden;
  /* room for descenders / tight line-height, cancelled out by the margin */
  padding: .2em 0;
  margin: -.2em 0;
}
html.mo .mo-line-in {
  display: block;
  transform: translate3d(0, 115%, 0);
}
html.mo .mo-split.mo-visible .mo-line-in {
  transform: none;
  transition: transform 1.2s var(--mo-ease)
              calc(var(--i, 0) * 110ms + var(--d, 0ms));
  line-height: 40px;
}

@media screen and (max-width: 460px) {
  html.mo .mo-split.mo-visible .mo-line-in {
  line-height: 1em;
  }


/*
6. LIGHT / DARK SWITCH — colours cross-fade instead of snapping
   (the toggle ball keeps its own slide animation)
------------------------------------------------------------------ */
html.mo-theming body,
html.mo-theming body *:not(.ball) {
  transition: background-color .5s ease, color .5s ease,
              border-color .5s ease, fill .5s ease !important;
}


/*
7. SAFETY NET — if the script fails part-way, show everything
------------------------------------------------------------------ */
html.mo-failsafe .mo-item,
html.mo-failsafe .mo-split .mo-line-in {
  opacity: 1 !important;
  transform: none !important;
}