/* ==========================================================================
   btoomey-theme — custom.css
   Hand-written styles. NOT processed by Tailwind.
   ========================================================================== */

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { text-decoration: none; transition: color 0.2s ease; }
img { display: block; margin: 0; padding: 0; max-width: 100%; }

/* --------------------------------------------------------------------------
   Slideshow
   -------------------------------------------------------------------------- */
#cover-slideshow .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; }
#cover-slideshow .slide.active { opacity: 1; }
#cover-slideshow .slide.intro { transition: opacity 1.4s ease-in-out; }
#cover-slideshow .slide img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Portfolio overlay
   -------------------------------------------------------------------------- */
.portfolio-item .overlay { opacity: 0; transition: opacity 0.3s ease; }
.portfolio-item:hover .overlay { opacity: 1; }

/* --------------------------------------------------------------------------
   Mobile menu
   -------------------------------------------------------------------------- */
#mobile-menu { transform: translateY(-100%); transition: transform 0.4s ease; }
#mobile-menu.open { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
#header { transition: transform 0.3s ease; }

/* --------------------------------------------------------------------------
   Page loader
   -------------------------------------------------------------------------- */
#page-loader { position: fixed; inset: 0; background: #000; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
#page-loader.visible { opacity: 1; pointer-events: all; }
#page-loader span { color: rgba(255, 255, 255, 0.4); font-size: 15px; letter-spacing: 0.15em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Project arrows
   -------------------------------------------------------------------------- */
/* Footer — hide text on mobile, show on sm+ (640px) */
.footer-text-desktop { display: none; }
@media (min-width: 640px) { .footer-text-desktop { display: inline; } }

.project-arrow { position: fixed; top: 50%; transform: translateY(-50%); z-index: 200; display: flex; align-items: center; justify-content: center; width: 44px; height: 100px; color: rgba(255,255,255,0.25); background: transparent; text-decoration: none; pointer-events: auto; transition: color 0.25s ease, background 0.4s ease; }
.project-arrow svg { width: 24px; height: 24px; flex-shrink: 0; }
.project-arrow--prev { left: 0; }
.project-arrow--next { right: 0; }
.project-arrow.scrolled { color: #fff; background: rgba(0,0,0,0.45); }
.project-arrow.scrolled:hover { background: rgba(0,0,0,0.75); }

/* --------------------------------------------------------------------------
   Page transition — B logo diagonal slash
   A hard white diagonal bar (matching the logo's top-left chamfer line)
   sweeps left→right across the viewport as the outgoing page insets behind
   it. Next page fades in clean beneath.
   -------------------------------------------------------------------------- */

#pt-curtain {
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
}

/*
  Hard diagonal slash — solid white bar, skewed ~20° to match the logo
  chamfer angle. Starts fully off-screen left, sweeps right across the
  live page, then exits off-screen right.
*/
#pt-sweep {
  position: absolute;
  top: -10%;
  left: 0;
  width: 14vw;
  height: 120%;
  background: #fff;
  transform: skewX(-20deg) translateX(-120vw);
  will-change: transform;
}

/*
  Dark fill that trails behind the slash — the page appears to fold away
  into darkness. Starts clipped to zero width, expands left of the slash.
*/
#pt-fill {
  position: absolute;
  inset: 0;
  background: #0a0a0a;
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

/* Trigger: fill expands L→R slightly behind the slash */
#pt-curtain.pt-run #pt-fill {
  transition: transform 1.1s cubic-bezier(0.77, 0, 0.18, 1);
  transform: scaleX(1);
}

/* Slash sweeps across — slightly faster than the fill so it leads */
#pt-curtain.pt-run #pt-sweep {
  transition: transform 0.95s cubic-bezier(0.77, 0, 0.18, 1);
  transform: skewX(-20deg) translateX(140vw);
}

/* --------------------------------------------------------------------------
   oEmbed / video wrappers
   -------------------------------------------------------------------------- */
.project-oembed iframe,
.project-oembed embed,
.project-oembed object { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   Contact Form 7
   -------------------------------------------------------------------------- */
.wpcf7 p { margin: 0; }
.wpcf7 label { display: block; color: rgba(255,255,255,0.45); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.15); color: #fff; font-size: 17px; padding: 8px 0; outline: none; border-radius: 0; transition: border-color 0.2s ease; font-family: inherit; }
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus { border-bottom-color: rgba(255,255,255,0.6); }
.wpcf7 textarea { resize: none; min-height: 100px; }
.wpcf7 input[type="submit"] { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.6); font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; padding: 10px 28px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; font-family: inherit; margin-top: 8px; }
.wpcf7 input[type="submit"]:hover { border-color: #fff; color: #fff; }
.wpcf7-not-valid-tip { color: rgba(255,80,80,0.8); font-size: 13px; }
.wpcf7-response-output { border: none !important; color: rgba(255,255,255,0.45); font-size: 14px; padding: 0 !important; margin: 16px 0 0 !important; }