/* ============================================================
   MEWEEE × WeeeTinker-inspired dark theme overlay
   Deep violet backgrounds, vivid red accent, glassmorphism,
   ambient glow blobs, and interactive cursor effects.
   Load order: LAST (after main.css and cdn.myportfolio CSS).
============================================================ */

:root {
  --wt-bg:          #10001d;
  --wt-bg-deep:     #140022;
  --wt-bg-panel:    #241038;
  --wt-bg-panel-rgb: 36, 16, 56;
  --wt-bg-sidebar:  #1a002f;
  --wt-text:        #f7edff;
  --wt-text-dim:    #c4b0d7;
  --wt-text-muted:  #9b83ae;
  --wt-accent:      #f3113b;
  --wt-accent-rgb:  243, 17, 59;
  --wt-accent-hover:#ff335d;
  --wt-accent-glow: rgba(243, 17, 59, 0.34);
  --wt-border:      rgba(255, 255, 255, 0.07);
  --wt-border-strong: rgba(255, 255, 255, 0.12);
  --wt-glass-tint:  rgba(36, 16, 56, 0.45);
  --wt-shadow:      rgba(0, 0, 0, 0.4);

  /* Fluid type scale */
  --fs-xxl: clamp(3rem, 8vw, 7rem);
  --fs-xl:  clamp(2.25rem, 6vw, 5rem);
  --fs-l:   clamp(1.6rem, 3vw, 2.5rem);
  --fs-m:   clamp(1.05rem, 1.4vw, 1.35rem);
  --fs-body:clamp(.92rem, 1.05vw, 1rem);
  --fs-sm:  clamp(.8rem, .9vw, .9rem);

  /* Rhythm */
  --gap-section: clamp(4rem, 8vw, 10rem);
  --radius-lg:   16px;
  --radius-md:   10px;
  --ease:        cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
html {
  background: var(--wt-bg) !important;
  background-image: none !important;
  background-color: var(--wt-bg) !important;
}
html, body {
  color: var(--wt-text) !important;
  -webkit-font-smoothing: antialiased;
}
body {
  background: var(--wt-bg) !important;
  background-image: none !important;
}
html:before {
  display: none !important;
}

body.transition-enabled .site-wrap,
.site-container,
.site-content {
  background: transparent !important;
}

/* Kill Adobe Portfolio background video/panel overlay and all stray backgrounds */
.page-background-video,
.page-background-video-with-panel,
.page-background-video .video-wrap,
.page-background-video-with-panel .video-wrap {
  display: none !important;
}

/* Nuke any stray backgrounds from base theme */
.site-wrap,
.site-wrap > *,
.site-container,
.site-content,
.header-placeholder,
main,
section {
  background: transparent !important;
  background-color: transparent !important;
}

/* ---------- Ambient glow blobs (via dedicated element to avoid body pseudo conflicts) ---------- */
body::before,
body::after {
  content: none !important;
}

.site-wrap { position: relative; z-index: 1; }

/* ---------- Interactive grid canvas ---------- */
#wt-grid-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Header / nav (glassmorphism) ---------- */
.site-header.js-site-header {
  background: transparent !important;
  padding: clamp(1rem, 2.5vw, 2rem) clamp(1.25rem, 4vw, 3rem) !important;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  background: rgba(16, 0, 29, 0.75) !important;
  border-bottom: 1px solid var(--wt-border);
}

.site-header .logo-text a,
.site-header .logo a {
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--wt-text) !important;
  font-size: clamp(1rem, 1.4vw, 1.35rem) !important;
}

.site-header .nav-container a,
.responsive-nav .nav-container a {
  color: var(--wt-text-dim) !important;
  font-weight: 500 !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: .02em;
  position: relative;
  padding: .25rem .15rem;
  transition: color .25s var(--ease);
}
.site-header .nav-container a:hover,
.site-header .nav-container a.active {
  color: var(--wt-text) !important;
}
.site-header .nav-container a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 2px; background: var(--wt-accent);
  transition: right .35s var(--ease);
}
.site-header .nav-container a:hover::after,
.site-header .nav-container a.active::after { right: 0; }

.site-header .social ul li a .icon,
.responsive-nav .social ul li a .icon {
  fill: var(--wt-text-muted) !important;
  transition: transform .25s var(--ease), fill .25s var(--ease);
}
.site-header .social ul li a:hover .icon {
  transform: translateY(-2px);
  fill: var(--wt-accent) !important;
}

/* Responsive nav overlay */
.responsive-nav {
  background: var(--wt-bg) !important;
  overflow: hidden !important;
}
.responsive-nav .nav-container a {
  color: var(--wt-text) !important;
  font-size: 44px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  transition: color .25s var(--ease) !important;
}
.responsive-nav .nav-container a:hover {
  color: var(--wt-accent) !important;
}
.responsive-nav .page-title,
.responsive-nav .project-title,
.responsive-nav .link-title,
.responsive-nav .gallery-title {
  padding: 0 0 20px !important;
}
/* Social bar: transparent bg, match footer style */
.responsive-nav .social {
  background: transparent !important;
  border-top: 1px solid var(--wt-border) !important;
}
.responsive-nav .social ul li a .icon,
.responsive-nav .social ul li a .icon .st0 {
  fill: #ffffff !important;
  transition: transform .25s var(--ease), fill .25s var(--ease) !important;
}
.responsive-nav .social ul li a:hover .icon,
.responsive-nav .social ul li a:hover .icon .st0 {
  fill: var(--wt-accent) !important;
  transform: translateY(-2px) !important;
}
/* Close button */
.close-responsive-button:before,
.close-responsive-button:after {
  background-color: var(--wt-text) !important;
}
/* No scrollbar when responsive nav is open */
.show-responsive-nav {
  overflow: hidden !important;
}

/* Hamburger */
.hamburger i {
  background: var(--wt-text) !important;
}

/* ---------- Masthead ---------- */
.masthead {
  padding: clamp(5rem, 12vw, 12rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 6rem) !important;
  background: transparent !important;
  position: relative;
  overflow: hidden;
}

.masthead-contents { max-width: 1400px; margin: 0 auto; }
.masthead-text { text-align: left !important; position: relative; z-index: 2; }

.masthead-text h1,
.masthead-text .main-text,
.masthead h1 {
  font-size: var(--fs-xxl) !important;
  line-height: .92 !important;
  letter-spacing: -.025em !important;
  font-weight: 600 !important;
  color: var(--wt-text) !important;
  margin: 0 0 clamp(1rem, 2vw, 2rem) !important;
  text-wrap: balance;
}

/* Gradient headline accent like weeetinker hero */
.masthead-text h1 {
  background: linear-gradient(to right, var(--wt-accent), #ff6b8a, var(--wt-accent));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: wt-gradient-shift 4s ease infinite;
}

@keyframes wt-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.masthead-text p,
.masthead-text .main-text + div p {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
  color: var(--wt-text-dim) !important;
  max-width: 48ch;
  font-weight: 400 !important;
}

/* Masthead buttons */
.masthead-buttons a,
.masthead-button {
  background: var(--wt-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: .75rem 1.4rem !important;
  font-weight: 600 !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: .02em !important;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.masthead-buttons a:hover,
.masthead-button:hover {
  opacity: .88;
  transform: translateY(-1px);
}

/* ---------- Gallery grid (project covers) ---------- */
main { background: transparent !important; }

.project-covers {
  max-width: 4000px;
  margin: 0 auto !important;
  padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 3vw, 2.5rem) !important;
  display: grid !important;
  /* Tile min 360px on desktop; up to 10 cols on very wide monitors.
     Mobile still collapses to 1 column via min(100%, ...). */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
  gap: clamp(1rem, 2vw, 1.75rem) !important;
}

/* "Other projects" strip: always single row — 4/2/1 across breakpoints. */
.other-projects .project-covers {
  max-width: 100% !important;
  grid-template-columns: repeat(4, 1fr) !important;
}
.other-projects .project-covers > .project-cover:nth-child(n+5) {
  display: none !important;
}
@media (max-width: 1023px) {
  .other-projects .project-covers {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .other-projects .project-covers > .project-cover:nth-child(n+3) {
    display: none !important;
  }
}
@media (max-width: 599px) {
  .other-projects .project-covers {
    grid-template-columns: 1fr !important;
  }
  .other-projects .project-covers > .project-cover:nth-child(n+2) {
    display: none !important;
  }
}
/* Align "OTHER PROJECTS" heading with the left edge of the first tile. */
.other-projects .title-wrapper {
  padding-left: clamp(1rem, 3vw, 2.5rem) !important;
}
.other-projects .title-container,
.other-projects .other-projects-title {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.project-cover {
  background: linear-gradient(to bottom, rgba(44, 18, 64, 0.6), rgba(20, 0, 34, 0.8)) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--wt-border) !important;
  box-shadow: 0 8px 32px var(--wt-shadow) !important;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s var(--ease) !important;
  position: relative;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}
.project-cover:hover {
  border-color: var(--wt-border-strong) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(var(--wt-accent-rgb), 0.08) !important;
}

/* Top-edge accent line on cards */
.project-cover::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--wt-accent-rgb), 0.3), transparent);
  z-index: 2;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.project-cover:hover::before { opacity: 1; }

/* Soft accent hover tint on each tile — fades in on hover, soft-light
   blend so the noir thumbnails get a hint of brand red without flat
   painting. */
.project-cover .cover-image-wrap {
  background: var(--wt-bg-deep) !important;
  overflow: hidden;
  position: relative;
}
.project-cover .cover-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(var(--wt-accent-rgb), 0) 0%,
    rgba(var(--wt-accent-rgb), 0.18) 55%,
    rgba(var(--wt-accent-rgb), 0.55) 100%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .55s var(--ease);
  z-index: 3;
}
.project-cover:hover .cover-image-wrap::after {
  opacity: 1;
}
.project-cover .cover-image,
.project-cover .cover {
  background: transparent !important;
  width: 100% !important;
  height: 100% !important;
}
.project-cover .cover-content-container {
  display: flex;
  flex-direction: column;
}
.project-cover .cover__img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.project-cover:hover .cover__img { transform: scale(1.03); }

.project-cover .details-wrap {
  padding: clamp(.9rem, 1.6vw, 1.3rem) clamp(1rem, 1.8vw, 1.5rem) clamp(1rem, 2vw, 1.5rem) !important;
  background: transparent !important;
  border-top: 1px solid var(--wt-border);
}
.project-cover .details { background: transparent !important; }
.project-cover .title {
  font-size: var(--fs-m) !important;
  font-weight: 600 !important;
  color: var(--wt-text) !important;
  line-height: 1.2 !important;
}
.project-cover .date {
  display: inline-block;
  margin-top: .4rem;
  font-size: .75rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--wt-accent);
  padding: .2rem .5rem;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.project-cover .custom1,
.project-cover .custom2 {
  display: block;
  margin-top: .5rem;
  font-size: .78rem !important;
  color: var(--wt-text-muted) !important;
}

/* ---------- Cursor glow overlay on cards ---------- */
.project-cover .wt-cursor-glow {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background:
    radial-gradient(
      circle 200px at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(var(--wt-accent-rgb), 0.12) 0%,
      rgba(var(--wt-accent-rgb), 0.06) 25%,
      rgba(var(--wt-accent-rgb), 0.02) 50%,
      transparent 100%
    );
  mix-blend-mode: screen;
  transition: opacity .4s;
}

/* ---------- Footer ---------- */
footer, .site-footer, .adobe-portfolio-footer {
  background: var(--wt-bg-deep) !important;
  color: var(--wt-text-dim) !important;
  /* Tight padding so footer fits the icons; 24px minimum below for breathing room. */
  padding: 10px clamp(1.25rem, 4vw, 3rem) 24px !important;
  margin-top: var(--gap-section);
  border-top: 1px solid var(--wt-border);
}
/* Footer social row: flex layout, fixed icon size. */
.site-footer .social,
.site-footer .social ul,
.site-footer .social ul li,
.site-footer .social ul li a {
  margin: 0 !important;
  padding: 0 !important;
}
.site-footer .social ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1.25rem !important;
  line-height: 1 !important;
}
.site-footer .social ul li a .icon,
.site-footer .social ul li a svg {
  display: block !important;
  height: 20px !important;
  width: auto !important;
}
footer a, .site-footer a { color: var(--wt-text-dim) !important; }
footer a:hover, .site-footer a:hover { color: var(--wt-accent) !important; }

.site-footer .social ul li a .icon,
.pf-footer-social ul li a .icon {
  fill: var(--wt-text-muted) !important;
  transition: transform .25s var(--ease), fill .25s var(--ease);
}
.site-footer .social ul li a .icon .st0,
.pf-footer-social ul li a .icon .st0 {
  fill: var(--wt-text-muted) !important;
}
.site-footer .social ul li a:hover .icon,
.site-footer .social ul li a:hover .icon .st0,
.pf-footer-social ul li a:hover .icon,
.pf-footer-social ul li a:hover .icon .st0 {
  transform: translateY(-2px);
  fill: var(--wt-accent) !important;
}

/* Also fix header social .st0 */
.site-header .social ul li a .icon .st0,
.responsive-nav .social ul li a .icon .st0 {
  fill: var(--wt-text-muted) !important;
  transition: fill .25s var(--ease);
}
.site-header .social ul li a:hover .icon .st0 {
  fill: var(--wt-accent) !important;
}

.footer-text, .footer-text a { color: var(--wt-text-muted) !important; }

/* ---------- Contact page ---------- */
.contact-form, .contact form, form.contact-form {
  max-width: 720px;
  margin: 0 auto;
}
input[type="text"], input[type="email"], textarea {
  border: 1px solid var(--wt-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 1rem 1.1rem !important;
  background: rgba(var(--wt-bg-panel-rgb), 0.5) !important;
  color: var(--wt-text) !important;
  font-size: var(--fs-body) !important;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  outline: none !important;
  border-color: var(--wt-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--wt-accent-rgb), 0.2) !important;
}

button, .btn, input[type="submit"], .button--primary {
  background: var(--wt-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: .9rem 1.6rem !important;
  font-weight: 600 !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: .02em !important;
  cursor: pointer;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
button:hover, .btn:hover, input[type="submit"]:hover {
  transform: translateY(-1px);
  opacity: .88;
}

/* ---------- Project detail pages ---------- */
.project-wrap, .project-content, .project {
  background: transparent !important;
}
.project-title, .project h1 {
  font-size: var(--fs-xl) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  line-height: .95 !important;
  color: var(--wt-text) !important;
}

/* All module text */
.module-text, .module-text p {
  color: var(--wt-text-dim) !important;
}

/* ---------- Scrollbar ---------- */
html { scrollbar-color: var(--wt-accent) var(--wt-bg-deep); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #wt-grid-canvas { display: none; }
}

/* ---------- Project cover: image fills the rounded card edge-to-edge ---------- */
.project-cover {
  overflow: hidden;
  position: relative;
  transform: perspective(800px) rotateY(0deg) rotateX(0deg) scale3d(1, 1, 1);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.project-covers { perspective: 1200px; }
.project-cover .cover-content-container {
  margin: 0 !important;
  height: 100% !important;
}

/* ---------- Disable the default Adobe-Portfolio slide-out hover  ----------
   Cards stay grayscale at all times (no color flip on hover).                 */
.project-cover .cover,
.project-cover:hover .cover,
.project-cover.touch-hover .cover {
  filter: grayscale(100%) !important;
}
.project-cover:hover .cover-image::after,
.project-cover.touch-hover .cover-image::after {
  background-color: transparent !important;
  opacity: 0 !important;
}
.project-cover:hover .cover-normal.has-rollover,
.project-cover.touch-hover .cover-normal.has-rollover {
  opacity: 1 !important;
  visibility: visible !important;
}
.project-cover:hover .details-wrap,
.project-cover.touch-hover .details-wrap {
  opacity: 0 !important;
}
.project-cover:hover .cover__img,
.project-cover.touch-hover .cover__img {
  transform: translate(-50%, -50%) !important;
}

/* ---------- Hologram cursor glow (weeetinker login style) ---------- */
.project-cover .wt-cursor-glow {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .35s ease;
  background:
    radial-gradient(
      circle 280px at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(var(--wt-accent-rgb), 0.22) 0%,
      rgba(var(--wt-accent-rgb), 0.12) 18%,
      rgba(var(--wt-accent-rgb), 0.04) 40%,
      transparent 70%
    ),
    radial-gradient(
      circle 600px at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(180, 210, 255, 0.06) 0%,
      rgba(200, 225, 255, 0.03) 30%,
      transparent 100%
    );
  mix-blend-mode: screen;
}
.project-cover:hover .wt-cursor-glow,
.project-cover.touch-hover .wt-cursor-glow {
  opacity: 1 !important;
}
/* Iridescent border sheen on hover — picks up cursor position */
.project-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    radial-gradient(
      circle 240px at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(var(--wt-accent-rgb), 0.6),
      rgba(var(--wt-accent-rgb), 0.18) 35%,
      rgba(255, 255, 255, 0.05) 60%,
      transparent 80%
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 3;
}
.project-cover:hover::after,
.project-cover.touch-hover::after {
  opacity: 1;
}

/* ---------- Remove empty space reserved below fixed header ---------- */
.header-placeholder { display: none !important; }

/* ---------- Project page: toilet-paper vertical scroll ---------- */
#project-modules {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}
#project-modules > .project-module.text {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto !important;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2.5rem);
}
#project-modules > .project-module.text .module-text {
  font-size: clamp(0.95rem, 1vw + 0.5rem, 1.1rem);
  line-height: 1.65;
}
#project-modules .project-module.image {
  width: 100%;
  padding: 0;
  border-radius: 0;
}
/* Default single-column case-study pages: cap each image at 70% width and
   center horizontally. Grid pages (hamlet menu, lunario, na-pura, londres)
   override this with !important inline rules. */
.project-module.image {
  max-width: 70% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 767px) {
  .project-module.image {
    max-width: 100% !important;
  }
}
/* Page header titles (e.g. "Ai Tu Book&Canvas"): JetBrains Mono to match
   the top-nav typography instead of Fraunces serif. */
.page-header .title,
.page-header h1.title,
.page-header h1 {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}
/* Below 1024px, video boxes grow to match body text width with side gutters. */
@media (max-width: 1023px) {
  .project-module.video,
  #project-modules .project-module.video {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(1.25rem, 4vw, 4rem) !important;
    padding-right: clamp(1.25rem, 4vw, 4rem) !important;
    box-sizing: border-box !important;
  }
  .project-module.video .embed-dimensions,
  .project-module.video .embed-aspect-ratio {
    max-width: 100% !important;
    width: 100% !important;
  }
}
#project-modules .project-module.image .js-lightbox,
#project-modules .project-module.image > a > .js-lightbox {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0;
  isolation: isolate;
}
#project-modules .project-module.image img {
  transition: transform .15s linear, opacity .15s linear, filter .15s linear;
  transform-origin: center center;
  backface-visibility: hidden;
  border-radius: 0;
  display: block;
  width: 100%;
  height: auto;
}
#project-modules img {
  border-radius: 0;
}
#project-modules .pm-parallax {
  transition: opacity .25s linear;
}
#project-modules .project-module.text.pm-parallax,
#project-modules .module-caption-container.pm-parallax {
  transition: transform .2s linear, opacity .25s linear;
}
/* (mobile override removed — layout is already vertical) */

/* ---------- Scroll-direction aware top nav ---------- */
.site-header.js-site-header {
  transition: transform .45s cubic-bezier(.22,.61,.36,1), background .3s ease, backdrop-filter .3s ease !important;
  will-change: transform;
}
.site-header.js-site-header.nav-hidden {
  transform: translateY(-100%);
}

/* ---------- Hide lightbox wrap until activated (offscreen class is broken) ---------- */
#lightbox-wrap.offscreen,
.js-lightbox-wrap.offscreen { display: none !important; }

/* ---------- MEWEEE wordmark SVG in header ---------- */
.site-header .logo a {
  position: relative;
  display: inline-block;
  --logo-mx: -200px;
  --logo-my: -200px;
}
.site-header .logo a .meweee-logo-svg {
  display: block;
  height: 24px;
  width: auto;
  position: relative;
  z-index: 1;
}
/* Red color reveal — circle of red follows cursor over the logo */
.site-header .logo a::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/meweee-logo-red.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 2;
  -webkit-mask-image: radial-gradient(
    circle 22px at var(--logo-mx) var(--logo-my),
    #000 100%,
    transparent 100%
  );
          mask-image: radial-gradient(
    circle 22px at var(--logo-mx) var(--logo-my),
    #000 100%,
    transparent 100%
  );
  transition: -webkit-mask-image .08s linear, mask-image .08s linear;
}
/* Soft red halo glow following the cursor */
.site-header .logo a::before {
  content: "";
  position: absolute;
  inset: -16px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    circle 60px at calc(var(--logo-mx) + 16px) calc(var(--logo-my) + 16px),
    rgba(243, 17, 59, 0.45) 0%,
    rgba(243, 17, 59, 0.18) 30%,
    rgba(243, 17, 59, 0.05) 60%,
    transparent 100%
  );
  filter: blur(8px);
  opacity: 0;
  transition: opacity .25s ease;
}
.site-header .logo a:hover::before {
  opacity: 1;
}
/* Mobile: left-align logo with project cards */
@media (max-width: 767px) {
  .site-header.js-site-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .site-header .logo,
  .site-header .logo-wrap,
  .site-header .logo a {
    text-align: left !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .site-header .logo a .meweee-logo-svg {
    margin-left: 0 !important;
    height: 19px !important; /* 24px × 0.8 = 19px (20% smaller on mobile) */
  }
  /* Mobile: 12px side padding on the project content container so nothing
     touches the viewport edges. */
  #project-canvas,
  #project-modules,
  .other-projects {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  .other-projects .title-container,
  .other-projects .other-projects-title {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* ---------- Header nav links + social icons: white by default ---------- */
.site-header .nav-container a,
.site-header .nav-container a.active {
  color: #ffffff !important;
}
.site-header .social ul li a .icon,
.site-header .social ul li a .icon .st0,
.responsive-nav .social ul li a .icon,
.responsive-nav .social ul li a .icon .st0,
.site-footer .social ul li a .icon,
.site-footer .social ul li a .icon .st0,
.pf-footer-social ul li a .icon,
.pf-footer-social ul li a .icon .st0 {
  fill: #ffffff !important;
}

/* ---------- Tighten footer spacing + transparent background ---------- */
.site-footer {
  padding-top: 10px !important;
  padding-bottom: 24px !important;
  margin-top: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.site-footer .pf-footer-social,
.site-footer .pf-footer-social ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}