/* ============================================================
   Page-transition + sequential reveal (shared by all pages)
   ============================================================ */

/* The sliding cover panel */
.transition{
  position:fixed;
  inset:0;
  z-index:80;
  background:var(--cover, #843a27);   /* colour rotates per navigation (set in JS) */
  transform:translateY(100%);         /* default: parked just below the viewport */
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* BY.BB logomark centred on the cover, same size as the preloader logo.
   Drawn from the SVG via mask so --cover-logo sets its colour per background. */
.transition-logo{
  width:min(46vw,560px);
  aspect-ratio:1969 / 681;
  background-color:var(--cover-logo, #fff9ef);
  -webkit-mask:url("Logo/BYBB_LOGOMARK_PLUM.svg") no-repeat center;
          mask:url("Logo/BYBB_LOGOMARK_PLUM.svg") no-repeat center;
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
}

/* arriving from an internal link -> panel already covers, no animation yet */
html.is-entering  .transition{ transform:translateY(0); }
/* revealing the new page -> swipe the panel DOWN and away */
html.is-revealing .transition{ transform:translateY(100%); transition:transform .65s cubic-bezier(.76,0,.24,1); }
/* leaving the current page -> swipe the panel UP to cover everything */
html.is-leaving   .transition{ transform:translateY(0);    transition:transform .55s cubic-bezier(.76,0,.24,1); }

/* ---- sequential fade-in of page content ---- */
/* Only hide while a staggered entrance is pending (entering or first-load preloader). */
.reveal{ transition:opacity .6s ease, transform .6s ease; }
html.stagger .reveal{ opacity:0; transform:translateY(10px); }
html.stagger .reveal.revealed{ opacity:1; transform:none; }

/* ---- links: underline races in from the left on hover, site-wide ---- */
a{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:left 100%;
  background-size:0% 1px;
  transition:background-size .3s ease;
}
a:hover{ background-size:100% 1px; }
/* nav links are stacked flex items — stop them stretching so the underline
   matches the word width, not the column width */
.nav a{ align-self:flex-start; }

/* ============================================================
   Mobile navigation — "Menu" toggle + full-screen slide-out
   (markup injected by transition.js so it works on every page)
   ============================================================ */
@font-face{
  font-family:'Moulin';
  src:url('fonts/Moulin-Light.ttf') format('truetype');
  font-weight:300; font-style:normal; font-display:swap;
}

/* the "Menu" word that replaces the nav links on mobile */
.menu-toggle{
  display:none;                     /* desktop: hidden — the full nav is shown instead */
  background:none; border:0; padding:0; margin:0;
  font-family:inherit; font-size:15px; letter-spacing:.01em; line-height:1.5;
  color:var(--plum); cursor:pointer;
}
.p-header .menu-toggle{ color:var(--beige); }   /* portfolio header sits on a dark photo */

/* the slide-out panel */
.menu-overlay{
  position:fixed; inset:0; z-index:70;
  background:#843a27; color:var(--beige);
  display:flex; flex-direction:column;
  padding:26px;
  overflow-y:auto;
  transform:translateX(-100%);      /* parked just off the left edge */
  /* keep the panel visible until the slide-back finishes, THEN hide it */
  transition:transform .55s cubic-bezier(.76,0,.24,1), visibility 0s linear .55s;
  pointer-events:none;
  visibility:hidden;
}
.menu-overlay.open{
  transform:translateX(0);          /* slides in, left -> right */
  transition:transform .55s cubic-bezier(.76,0,.24,1), visibility 0s;
  pointer-events:auto;
  visibility:visible;
}
.menu-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  font-size:15px; letter-spacing:.01em; line-height:1.5;
}
.menu-close{
  background:none; border:0; padding:0; margin:0;
  font-family:inherit; font-size:15px; letter-spacing:.01em; line-height:1.5;
  color:var(--beige); cursor:pointer;
}
.menu-nav{ display:flex; flex-direction:column; margin-top:56px; }
.menu-nav a{
  font-family:'Scto Grotesk A','Helvetica Neue',Arial,sans-serif; font-weight:300;
  font-size:34px; line-height:1.5; letter-spacing:.01em;
  color:var(--beige); text-decoration:none; width:max-content;
}
/* contact, acknowledgement & copyright all match the "Menu"/"Close" text (15px) */
.menu-contact{
  margin-top:40px;
  font-size:15px; letter-spacing:.01em; line-height:1.5;
}
.menu-contact a{ color:var(--beige); text-decoration:none; }
.menu-foot{ margin-top:auto; padding-top:48px; }
.menu-logo{
  width:128px;
  aspect-ratio:1969 / 681;
  background-color:var(--beige);
  -webkit-mask:url("Logo/BYBB_LOGOMARK_PLUM.svg") no-repeat left center;
          mask:url("Logo/BYBB_LOGOMARK_PLUM.svg") no-repeat left center;
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  margin-bottom:28px;
}
.menu-ack{
  font-size:15px; letter-spacing:.01em; line-height:1.5; max-width:40ch;
}
.menu-copy{
  font-size:15px; letter-spacing:.01em; line-height:1.5; margin-top:24px;
}

/* the menu is a mobile-only pattern */
@media (min-width:681px){ .menu-overlay{ display:none; } }

@media (max-width:680px){
  .menu-toggle{ display:inline-block; }
  /* hide the in-flow nav + logo; the menu takes over navigation */
  .masthead .nav{ display:none; }
  .header .logo-mark, .p-header .logo-mark{ display:none; }
  /* turn the masthead into a single top bar: Menu (left) · studio (right) —
     display:flex included because about/contact never declare it themselves */
  body .masthead{ display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start; }
  body .studio{ margin-bottom:0; }
  .header .masthead, .p-header .masthead{ flex:1; }   /* fill the width the logo vacated */
}