/* ---------------------------------------------------------------------------
   Motion layer, added on top of the signed-off design. Nothing here changes a
   colour, a size or a position at rest — it only governs how things arrive.
   Everything is gated behind html.enh, which the script adds, so if JavaScript
   fails the page renders exactly as designed with nothing hidden.
   --------------------------------------------------------------------------- */

/* soft cross-fade between pages where the browser supports it */
@view-transition { navigation: auto; }

html.enh body { animation: pageIn .55s ease both; }
@keyframes pageIn { from { opacity: 0 } to { opacity: 1 } }

/* --- scroll reveals ------------------------------------------------------- */
html.enh [data-rv] {
  opacity: 0;
  transform: translateY(16px);
}
html.enh [data-rv].seen {
  opacity: 1;
  transform: none;
  transition: opacity .95s cubic-bezier(.22,.61,.36,1),
              transform .95s cubic-bezier(.22,.61,.36,1);
}
html.enh [data-rv].seen[data-d="1"] { transition-delay: .07s }
html.enh [data-rv].seen[data-d="2"] { transition-delay: .14s }
html.enh [data-rv].seen[data-d="3"] { transition-delay: .21s }
html.enh [data-rv].seen[data-d="4"] { transition-delay: .28s }
html.enh [data-rv].seen[data-d="5"] { transition-delay: .35s }
html.enh [data-rv].seen[data-d="6"] { transition-delay: .42s }

/* --- full-bleed photographs drift a little as you scroll ------------------ */
html.enh [data-par] { will-change: transform; }

/* --- photographs answer the cursor, barely ------------------------------- */
html.enh [data-card] { overflow: hidden; display: block; }
html.enh [data-card] img,
html.enh [data-gallery] img {
  transition: transform 1.3s cubic-bezier(.22,.61,.36,1), opacity .5s ease;
}
html.enh [data-card]:hover img,
html.enh [data-gallery] img:hover { transform: scale(1.028); }

/* the underlined links grow their rule rather than just changing colour */
html.enh a[style*="border-bottom"] { transition: color .35s ease, border-color .35s ease; }

/* --- anyone who has asked for less movement gets none of it -------------- */
@media (prefers-reduced-motion: reduce) {
  html.enh body { animation: none; }
  html.enh [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.enh [data-par] { transform: none !important; }
  html.enh [data-card]:hover img,
  html.enh [data-gallery] img:hover { transform: none; }
}

/* ===================================================================== */
/* The phone menu. Six links and three social marks will not sit across   */
/* the top of a 390px screen, so below 821px they move into a full-screen */
/* panel behind one button, and the home page quotes stand down entirely. */
/* ===================================================================== */
.mnav-btn { display:none; }

@media (max-width: 820px) {
  html.has-mnav [data-hidenav],
  html.has-mnav .hd-nav,
  html.has-mnav header .hd-social { display:none !important; }

  /* the quotes need a column of their own to read; on a phone there isn't
     one, and set over him they were unreadable either way */
  html.has-mnav [data-quotes] { display:none !important; }

  .mnav-btn {
    display:block; position:relative; z-index:220;
    width:48px; height:40px; padding:0; margin:0; border:0; background:none;
    cursor:pointer; color:#2e2823; -webkit-tap-highlight-color:transparent;
    /* the inner-page header sets pointer-events:none and switches it back on
       per child — without this the button is simply not clickable there */
    pointer-events:auto;
  }
  .hd .mnav-btn { color:rgba(244,239,232,0.92); }
  .hd.is-solid .mnav-btn { color:#2E2823; }
  .mnav-btn i {
    display:block; position:absolute; left:10px; width:28px; height:1.5px;
    background:currentColor; border-radius:1px;
    transition:transform .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  }
  .mnav-btn i:nth-child(1) { top:15px; }
  .mnav-btn i:nth-child(2) { top:23px; }
  /* open, the two rules become an unmistakable cross for getting back out */
  .mnav-btn.is-open { position:fixed; top:14px; right:14px; color:#f4efe8; }
  .mnav-btn.is-open i { width:26px; left:11px; }
  .mnav-btn.is-open i:nth-child(1) { top:19px; transform:rotate(45deg); }
  .mnav-btn.is-open i:nth-child(2) { top:19px; transform:rotate(-45deg); }

  /* display:flex would otherwise beat the browser's own [hidden] rule and
     leave the panel standing open over the page */
  .mnav[hidden] { display:none !important; }
  .mnav {
    position:fixed; inset:0; z-index:210; background:#16343A;
    display:flex; flex-direction:column; align-items:flex-start;
    justify-content:center; gap:clamp(30px,7vh,54px);
    padding:0 clamp(28px,8vw,48px);
    animation:mnavIn .42s cubic-bezier(.22,.61,.36,1) both;
  }
  @keyframes mnavIn { from { opacity:0 } to { opacity:1 } }
  .mnav-links { display:flex; flex-direction:column; gap:clamp(18px,3.4vh,30px); }
  .mnav-links a {
    color:rgba(244,239,232,0.86); font-size:clamp(22px,6.6vw,32px);
    font-weight:200; letter-spacing:.16em; text-transform:uppercase;
    line-height:1; text-decoration:none;
  }
  .mnav-links a[aria-current="page"] { color:#f4efe8; }
  .mnav-social { display:flex; gap:22px; }
  .mnav-social a { color:rgba(244,239,232,0.7); }
  .mnav-social svg { width:22px; height:auto; display:block;
    fill:none; stroke:currentColor; stroke-width:1.3; }
  .mnav-social svg .fill, .mnav-social svg .dot { fill:currentColor; stroke:none; }

  html.mnav-open, html.mnav-open body { overflow:hidden; }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .mnav { animation:none; }
  .mnav-btn i { transition:none; }
}