/* =====================================================================
   css/site.css — replaces the Webflow interactions (IX2) with CSS.
   Paired with js/site.js.
   ===================================================================== */

/* Hamburger menu: overlay/open styles live in main.css (.w-nav-overlay, [data-nav-menu-open]) */

/* Menu links: underline hidden off to the left, slides in on hover */
.link-wrap.navbar .link-underline.navbar { transform: translate3d(-500px, 0, 0); transition: transform .5s ease; }
.link-wrap.navbar:hover .link-underline.navbar,
.link-wrap.navbar:focus-visible .link-underline.navbar { transform: translate3d(0, 0, 0); }

/* Text links (incl. nav "Resume" + footer email): the underline is always there;
   on hover it sweeps out to the right and back in from the left.
   Mouse/trackpad only — on touch screens it just stays put. */
.link-wrap.lw-icon .link-underline,
.link-wrap2.lw-icon .link-underline { transform: translate3d(-28px, 0, 0); }
.resume-download .link-wrap2 { display: inline-block; overflow: hidden; }
@media (any-hover: hover) and (any-pointer: fine) {
  .link-wrap.lw-plain:hover .link-underline,
  .resume-download .link-wrap2:hover .link-underline,
  .footer-content .link-wrap:hover .link-underline { animation: lw-sweep .75s ease; }
  .lw-icon:hover .link-underline { animation: lw-sweep-icon .75s ease; }
}
.link-wrap.lw-plain:focus-visible .link-underline,
.resume-download .link-wrap2:focus-visible .link-underline,
.footer-content .link-wrap:focus-visible .link-underline { animation: lw-sweep .75s ease; }
.lw-icon:focus-visible .link-underline { animation: lw-sweep-icon .75s ease; }

/* Footer menu (Home / About / Contact / Project): no underline at rest; on hover
   a line grows from the left edge to the full width. Mouse/trackpad only. */
.footer-menu .footer-link { position: relative; }
.footer-menu .footer-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: currentColor; opacity: 1; animation: none;
  transform: scaleX(0); transform-origin: left center;
}
@media (any-hover: hover) and (any-pointer: fine) {
  .footer-menu .footer-link::after { transition: transform .45s cubic-bezier(.22,1,.36,1); }
  .footer-menu .footer-link:hover::after,
  .footer-menu .footer-link:focus-visible::after { transform: scaleX(1); opacity: 1; animation: none; }
}
@keyframes lw-sweep {
  0% { transform: translate3d(0, 0, 0); opacity: 1; }
  33% { transform: translate3d(200%, 0, 0); opacity: 1; }
  34% { transform: translate3d(-100%, 0, 0); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes lw-sweep-icon {
  0% { transform: translate3d(-28px, 0, 0); opacity: 1; }
  33% { transform: translate3d(200%, 0, 0); opacity: 1; }
  34% { transform: translate3d(-100%, 0, 0); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translate3d(-28px, 0, 0); opacity: 1; }
}

/* Endless scrolling strips (About heading strip 30s, BankersKlub 40s) */
.marquee .carousel-item-wrap { animation: marquee 30s linear infinite; will-change: transform; }
.marquee.marquee-slow .carousel-item-wrap { animation-duration: 40s; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }

/* Spinning circular text (Work page) */
.spin { animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Reveal on scroll — only while <html class="rv"> (set in <head>) */
.rv-fade { transition: opacity 1s ease, transform 1s ease; }
html.rv .rv-fade:not(.rv-in) { opacity: 0; transform: translate3d(0, 100px, 0); }
.rv-up { transition: transform .5s ease; }
html.rv .rv-up:not(.rv-in) { transform: translate3d(0, var(--rv-y, 100px), 0); }

/* Lightbox */
.site-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .9); padding: 4vh 4vw; }
.site-lightbox.is-open { display: flex; }
.site-lightbox img { max-width: 100%; max-height: 92vh; width: auto; height: auto; object-fit: contain; }
.site-lightbox__close { position: absolute; top: 12px; right: 16px; width: 44px; height: 44px; border: 0; background: transparent; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .marquee .carousel-item-wrap, .spin { animation: none; }
  .link-underline { animation: none !important; }
  .rv-fade, .rv-up { transition: none; }
}

/* Open menu: one panel, cream at the top (behind the logo bar) fading down into grey;
   it slides down from behind the bar, covering the homepage's semi-transparent bar. */
/* the overlay starts at the top of the bar (not below it); js/site.js pads the menu by the bar height */
.w-nav-overlay { top: 0; }
.w-nav-overlay .navbar-menu { background: linear-gradient(to bottom, #fbf8f1 0%, rgba(251, 248, 241, 0) 100%), #ebebeb; }

/* Laptops / iPad landscape (992px+): .container is max 1300px with no side padding, so
   between ~992 and ~1380px wide the content touched the screen edges. Keep >=40px each side
   (large desktops are unchanged: 1300px still fits). Full-bleed blocks opt out. */
@media (min-width: 992px) {
  .container.w-container:not(.full-width-child) { width: min(1300px, calc(100% - 80px)); }
}

/* Footer "Sarthak Shukla": brand red lifted just enough to pass WCAG AA on the
   dark footer (#ef5a4b on #191919 = 5.1:1; the old #de3d2d was 3.9:1) */
.footer-copyright .webflow-link { color: #ef5a4b; }

/* Footer logo + social icons carry width/height attributes (so the browser can
   reserve their space before they load); CSS still decides the rendered size. */
.footer-logo, .social-button { height: auto; }