/* styles.css */
/* ==== Reset & globals ==== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap");


* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width:100%; height:100%; }

:root{
  --accent-gradient: linear-gradient(
      45deg,
      #f8f9fa 0%,
      #c0c0ff 50%,
      #f0c0c0 100%
  );

  --accent-gradient2: linear-gradient(
      45deg,
      #f8f9fa 0%,
      #cdcdff 50%,
      #ffd5d5 100%
  );
}


body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #0d0d0d;
  color:#f4e8ff;
  overflow-y: scroll;
  overflow-x: hidden;
  font-weight: 400;
  line-height: 1.6;
}
/* Put this near the top of styles.css */


/* ==== Typography & layout ==== */
.header { display:flex; align-items:center; padding:1.5em; }
.header-logo { font-size:2em; color:#fff; text-decoration:none;}
.header-button { margin-left:auto; border:1px solid #b6b6b6; border-radius:999px; padding:.75em 1em; color:#b6b6b6; text-decoration:none; }

.hero { padding:6em 5%; text-align:center; }
/* Hero title styling (restored to original) */
/* ==== Hero heading left + image right ==== */
.hero-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: nowrap;         /* keep text & image on one row */
  margin-bottom: 0em;

  /* typography */
  font-family: 'Major Mono Display', sans-serif;
  font-size: 8.375em;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* make text-block take up about half the space */
.hero-heading .text-block {
  flex: 1 1 50%;
  max-width: 50%;
}

/* Remove the inherited centering on the hero section: */
.hero {
  text-align: left;
}

/* Ensure the hero-heading's text block is left-aligned */
.hero-heading {
  text-align: left;
}

/* And make sure the inner text actually hugs the left edge */
.hero-heading .text-block {
  text-align: left;
}

/* constrain the image to the other half */
.hero-heading .hero-image {
  flex: 0 0 auto;
  width: 40%;               /* tweak as you like */
  height: auto;
  margin-left: 0.5em;
  margin-top: -0.5em;         /* space between text and image */
  z-index: -1;
}

/* MOBILE: stack them again */
/* Removed duplicate media query - consolidated above */
/* full-width top nav */
.header {
  display: flex;
  justify-content: center;
  padding: 1em 5%;
  
  position: sticky;
  top: 2rem;
  z-index: 100;
}
html {
  scroll-behavior: smooth;
}

/* container for even spacing */
.header-nav {
  display: flex;
  gap: 1em;
  width: 100%;
  max-width: 800px;
  gap: 4em;
}

/* style each button/link */
.nav-link {
  flex: 1;
  text-align: center;
  padding: 0.75em 0;
  border: 1px solid rgba(182,182,182,0.6);
  border-radius: 999px;
  text-decoration: none;
  font-size: 1rem;
  color: #b6b6b6;
  background-color: rgba(255,255,255,0.03);
  
  /* Apply Liquid Glass effect to navigation */
  backdrop-filter: url('#liquid-glass-subtle');
  
  transition: background 0.3s ease, color 0.3s ease;
}

.nav-link:hover {
  background-color: rgba(182,182,182,0.2);
  color: #fff;
}

.text-block { display:flex; flex-direction:column;  }
.herow { display:block; overflow:hidden; }
.herow.line-1 { display:flex; align-items:flex-end; margin-bottom:-.1em; }
.split-words { display:inline-block; }
.hero-image { width:600px; max-width:90%; opacity:0; animation:fadeIn 4s ease-out forwards; }

.hero-intro { 
  margin-top:-1em; 
  font-size:1.25rem; 
  max-width:32em; 
  margin-left:auto; 
  margin-right:auto; 
  line-height:1.6; 
  font-weight: 400;
}

.projects { padding:4em 5%; }
.projects-heading { 
  text-transform:uppercase; 
  letter-spacing:.05em; 
  font-size:1.25em; 
  margin-bottom:1em; 
  color:#fff; 
  font-weight: 600;
}
.projects-grid { display:grid; grid-template-columns:1fr 1fr; gap:2em; }
.project-link { text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.project-image-wrapper { position:relative; padding-top:70%; overflow:hidden; }
.project-image, .hover-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hover-image { transform: translateX(10%); transition:transform 1s cubic-bezier(.3,1,.2,1); }
.project-image { clip-path:polygon(0 0,100% 0,100% 100%,0 100%); transition:clip-path 1s cubic-bezier(.3,1,.2,1); }
.project-link:hover .hover-image { transform:translateX(0); }
.project-link:hover .project-image { clip-path:polygon(0 0,0 0,0 100%,0 100%); }
.project-details { display:flex; justify-content:space-between; align-items:center; margin-top:.75em; font-size:1rem; }
.project-type { opacity:.6; }

.socials { display:flex; justify-content:center; gap:1em; padding:2em 0; }
.social-link { border:1px solid #b6b6b6; border-radius:50%; width:3em; height:3em; display:flex; align-items:center; justify-content:center; color:inherit; text-decoration:none; }

.cta { padding:4em 5%; text-align:center; }
.cta h2 { 
  color: rgba(255, 255, 255, 0.7);
  font-size:2.5em; 
  margin-bottom:1em; 
  font-weight: 300;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.button { 
  display:inline-block; 
  border:1px solid #b6b6b6; 
  border-radius:999px; 
  padding:1em 2em; 
  text-transform:uppercase; 
  text-decoration:none; 
  color:inherit;
  
  /* Apply Liquid Glass effect to buttons */
  backdrop-filter: url('#liquid-glass');
}

/* ==== Animations ==== */
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }

/* ==== Responsive ==== */
@media (max-width: 768px) {
  .projects-grid { 
    grid-template-columns: 1fr !important; 
    gap: 1.5em;
  }
  .hero-heading {
    flex-direction: column;
    align-items: flex-start;
    font-size: 15vw;
  }
  .hero-heading .hero-image {
    width: 100%;
    margin: 0em 0 0 0;
  }
  .hero-heading .text-block {
    max-width: 100%;
  }
  .hero-image { 
    width: 60vw !important;
    margin-left: 3em !important;
    margin-top: -3em !important; 
  }
  .hero-glass-pane {
    left: 0.5em;
    width: calc(100vw - 1em);
    min-width: 0;
    max-width: 90vw;
    height: auto;
    min-height: 120px;
    margin-top: 2em;
    padding: 0.5em;
  }
  .hero-heading .herow {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block;
  }
  .header-nav {
    gap: 0.5em;
  }
}

@media (max-width: 600px) {
  .hero-heading {
    font-size: clamp(1.5rem, 15vw + 1rem, 20rem) !important;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0em;
  }
  .hero-glass-pane {
    max-width: 93vw;
    height: 50vw !important;
    margin-left: -1em !important;
    padding: 0.3em;
    border-radius: 10px;
  }

  .hero-image { 
    width: 80vw !important;
    margin-left: 0.9em !important;
    
  }
  .hero-heading .herow {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block;
  }
  
  /* Optimize Liquid Glass for mobile performance */
  .glass,
  .nav-link,
  .hero-intro,
  .overlay,
  .social-link,
  .button,
  .download-btn,
  .header-button {
      /* Mobile optimization - reduce filter intensity */
  backdrop-filter: url('#liquid-glass') !important;
}

.hero-glass-pane {
  backdrop-filter: url('#liquid-glass-extra') !important;
}
}

/* Button / social "fill" animation */
.header-button,
.button,
.social-link {
  position: relative;
  overflow: hidden;
}

.button-fill,
.social-fill {
  position: absolute;
  inset: 0;
  background-color: #ccb7ff28;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 0.3s ease-out;
  z-index: 0;
}

.header-button .header-button-text,
.button .button-text,
.social-icon {
  position: relative;
  z-index: 1;
}

/* on hover, grow the fill */
.header-button:hover .button-fill,
.button:hover .button-fill {
  transform: scaleY(1);
}

.social-link:hover .social-fill {
  transform: scaleY(1);
}
/* in styles.css */
.hero-heading .herow {
  display: block;   /* ensure each one is on its own line */
}


.hero-heading .herow:nth-child(2) {
  margin-left: 2em;   
}
.hero-heading .herow:nth-child(3) {
  margin-left: 3em;
  margin-right: -1em;
}



/* 1) Make the hero a positioning context */
.hero {
  position: relative;
  overflow: visible; /* allow pane or text to bleed if desired */
  
}

/* 1) Liquid Glass pane above the image */
.hero-glass-pane {
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  transition: opacity 0.26s ease-out;
  
  z-index: 2;
  pointer-events: none;
  box-sizing: border-box;
  margin-top:7em;
}
.hero-glass-pane {
  position: absolute;
  top: 2.5em;
  left: 2em;
  width: 90vw;
  height: 350px;
  padding: 1em;              /* thickness of your "border" area */
  border-radius: 12px;
  
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2;
}



/* 2) Put the image below the glass */
.hero-image {
  position: relative;
  z-index: 1;           /* ← lower than the pane */
}

/* 3) Text still on top */
.hero-heading,
.hero-intro {
  position: relative;
  z-index: 3;
  
}

/* 4) Keep your rise-up animation masking on each line */
.hero-heading .herow {
  overflow: hidden;
  
}

.page-wrapper {
  position: relative;
  z-index: 0;
  min-height: 100vh;
  /* overflow-x: hidden; removed so .art-row can scroll horizontally */
}

.page-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('background3.jpg') no-repeat center center;
  background-size: cover;
  opacity: 0.5;
  z-index: -1;
  will-change: background-position;
  background-position: center calc(var(--parallax-offset, 0px));
}



/* Liquid Glass on the hero intro */
.hero-intro {
  position: relative;
  z-index: 3;
  padding: 2em;
  border-radius: 12px;
  overflow: hidden;
  
  /* Apply Liquid Glass effect to hero intro */
  backdrop-filter: url('#liquid-glass');
}




.header-button .header-button-text,
.button .button-text,
.social-icon {
  position: relative;
  z-index: 1;
}



.header-button .header-button-text,
.button .button-text,
.social-link .social-icon {
  position: relative; /* lift text/icon above the glass + shadow */
  z-index: 1;
}




.header-button .header-button-text,
.button .button-text,
.social-link .social-icon {
  position: relative;   /* sit above the glass */
  z-index: 1;
}
/* —— Make the "Contact" header button larger —— */
.header-button {
  padding: 1em 1.5em;       /* from .75/1 → 1/1.5 for more heft */
  font-size: 1.5rem;          /* bump up the type a bit */
  
  /* Apply Liquid Glass effect to header button */
  backdrop-filter: url('#liquid-glass');
}

/* —— Make the round social links larger —— */
.social-link {
  width: 4em;               /* from 3em → 4em */
  height: 4em;
}

.social-link .social-icon {
  font-size: 1.5em;         /* or adjust your SVG's width/height */
}

/* —— Make the "Get in touch" CTA bigger —— */
.cta .button {
  padding: 1.25em 2em;      /* from 1em/2em → 1.25/2 for more presence */
  font-size: 1.1rem;
}

/* 1) Define a reusable Liquid Glass class */
.glass {
  /* Liquid Glass background with subtle transparency */
  background: rgba(255, 255, 255, 0.03);
  
  /* curved corners */
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  
  overflow: hidden;

  /* Subtle shadows for depth */
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);

}

/* Liquid Glass effect - apply filter directly like Vue component */
.glass {
  backdrop-filter: url('#liquid-glass') drop-shadow(-8px -10px 46px #0000005f);
  transition: opacity 0.26s ease-out;
}

/* Custom strength examples - you can apply these to specific elements */
.glass-extra-strong {
  backdrop-filter: url('#liquid-glass-extra') drop-shadow(-8px -10px 46px #0000005f);
  transition: opacity 0.26s ease-out;
}

.glass-subtle {
  backdrop-filter: url('#liquid-glass-subtle') drop-shadow(-8px -10px 46px #0000005f);
  transition: opacity 0.26s ease-out;
}

/* Mobile fallbacks for devices that don't support SVG filters */
@media (max-width: 768px) {
  .glass {
    backdrop-filter: blur(8px) brightness(1.1) contrast(1.1);
    filter: drop-shadow(-8px -10px 46px #0000005f);
    transition: opacity 0.26s ease-out;
  }
  
  .glass-extra-strong {
    backdrop-filter: blur(12px) brightness(1.2) contrast(1.2);
    filter: drop-shadow(-8px -10px 46px #0000005f);
    transition: opacity 0.26s ease-out;
  }
  
  .glass-subtle {
    backdrop-filter: blur(4px) brightness(1.05) contrast(1.05);
    filter: drop-shadow(-8px -10px 46px #0000005f);
    transition: opacity 0.26s ease-out;
  }
  
  /* Override any existing filter properties on mobile */
  .nav-link,
  .hero-intro,
  .overlay,
  .social-link,
  .button,
  .download-btn,
  .header-button {
    backdrop-filter: blur(8px) brightness(1.1) contrast(1.1) !important;
    filter: drop-shadow(-8px -10px 46px #0000005f) !important;
  }
  
  .hero-glass-pane {
    backdrop-filter: blur(12px) brightness(1.2) contrast(1.2) !important;
    filter: drop-shadow(-8px -10px 46px #0000005f) !important;
  }
}

/* JavaScript fallback for devices without SVG filter support */
.no-svg-filters .glass {
  backdrop-filter: blur(8px) brightness(1.1) contrast(1.1) !important;
  filter: drop-shadow(-8px -10px 46px #0000005f) !important;
}

.no-svg-filters .glass-extra-strong {
  backdrop-filter: blur(12px) brightness(1.2) contrast(1.2) !important;
  filter: drop-shadow(-8px -10px 46px #0000005f) !important;
}

.no-svg-filters .glass-subtle {
  backdrop-filter: blur(4px) brightness(1.05) contrast(1.05) !important;
  filter: drop-shadow(-8px -10px 46px #0000005f) !important;
}

.no-svg-filters .nav-link,
.no-svg-filters .hero-intro,
.no-svg-filters .overlay,
.no-svg-filters .social-link,
.no-svg-filters .button,
.no-svg-filters .download-btn,
.no-svg-filters .header-button {
  backdrop-filter: blur(8px) brightness(1.1) contrast(1.1) !important;
  filter: drop-shadow(-8px -10px 46px #0000005f) !important;
}

.no-svg-filters .hero-glass-pane {
  backdrop-filter: blur(12px) brightness(1.2) contrast(1.2) !important;
  filter: drop-shadow(-8px -10px 46px #0000005f) !important;
}

/* 2) Liquid Glass edge highlights */
.glass::before,
.glass::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* Ensure Liquid Glass elements have proper positioning context */
/* .glass, */
.nav-link,
.hero-intro,
.overlay,
.social-link,
.button,
.download-btn,
.header-button {
  position: relative;
  isolation: isolate;
}

/* top edge highlight */
.glass::before {
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(160, 172, 255, 0.3),
    rgba(224, 251, 255, 0.4),
    rgba(160, 172, 255, 0.3),
    transparent
  );
}

/* left edge highlight */
.glass::after {
  top: 0; left: 0; width: 1px; height: 100%;
  background: linear-gradient(
    180deg,
    rgba(224, 251, 255, 0.4),
    rgba(255, 205, 241, 0.2),
    transparent,
    rgba(255, 205, 241, 0.2),
    rgba(224, 251, 255, 0.4)
  );
}


.gradient-text2 {
  background-image: var(--accent-gradient2) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
          color: transparent !important;
}


.project-image-wrapper {
  position: relative;
  overflow: hidden;
}

/* the sliding Liquid Glass card */
.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  
  /* start it shifted up/left a bit and invisible */
  transform: translate(100%, 0%);/*This is for the animation- if you make it a certain percentage it will appear from there rather than just from wherever*/
  opacity: 0;
  
  /* animate both move + fade */
  transition: transform 0.5s ease, opacity 0.5s ease;
  
  /* ensure text is on top */
  z-index: 5;
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  
  /* Apply Liquid Glass effect to overlay */
  backdrop-filter: url('#liquid-glass-strong');
}

/* on hover, drop into place */
.project-link:hover .overlay {
  transform: translate(0, 0);
  opacity: 1;
}

/* typography inside */
.overlay-title {
  margin-bottom: 0.5em;
  font-size: 1.25rem;
  font-weight: 600;
}
.overlay-desc {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
}


.socials {
  display: flex;
  gap: 1em;
}

.social-link {
  position: relative;
  display: flex;                  /* center contents */
  align-items: center;
  justify-content: center;
  width: 4em;
  height: 4em;
  border: 1px solid #b6b6b6;
  border-radius: 50%;
  text-decoration: none;
  overflow: hidden;
  
  /* Apply Liquid Glass effect to social links */
  backdrop-filter: url('#liquid-glass');
}



.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-icon svg {
  width: 1.5em;       /* try 1.5em, 2em, etc. */
  height: 1.5em;
  fill: #fff;       /* make the icon white */
}


.project-extras {
  grid-column: span 2; /* forces it to span the full row */
  display: flex;
  justify-content: flex-start; /* or center, if you prefer */
  padding-left: 0.5em;
  margin-top: -1em;
  margin-bottom: 2em;
}

.download-btn {
  display: inline-block;
  padding: 0.5em 1.25em;
  font-size: 0.9rem;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  
  /* Apply Liquid Glass effect to download buttons */
  backdrop-filter: url('#liquid-glass');
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
}

.projects-grid > .project-card {
  display: flex;
  flex-direction: column;
}
.download-btn {
  align-self: flex-start;
  padding: 0.5em 1.25em;
  font-size: 0.9rem;
  margin-top: -0.25em;
}

.art-row {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 1em;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  max-width: 100vw;
  box-sizing: border-box;
  min-height: 320px;
}
.art-row::-webkit-scrollbar { display: none; }