/* -----------------------------------
   GLOBAL RESET & FONTS
----------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --green: #0ae448;
  --black: #0e100f;
  --white: #fffce1;
  --lt: #abff84;
  --grey: #191919;
  --s75: #bbbaa6;
  --s50: #7c7c6f;
  --s25: #42433d;
  --grad-macha: linear-gradient(114.41deg, #0ae448 20.74%, #abff84 65.5%);
  --grad-orange: linear-gradient(111.45deg, #ff8709 0.42%, #FFC0E1 70.08%);
}

body {
  background: linear-gradient(
    114deg,
    rgba(255, 255, 255, 1) 10%,
    rgba(217, 217, 217, 1) 25%,
    rgba(180, 235, 255, 1) 50%,
    rgba(255, 228, 228, 1) 74%,
    rgba(194, 245, 100, 1) 100%
  );
  font-family: "Inconsolata", monospace;
  color: #504D4D;
  overflow-x: hidden; transition: background-color 0.3s ease;
}

/* -----------------------------------
   TYPOGRAPHY
----------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: "Cherry Bomb One", system-ui;
  font-weight: 400;
}
/* ---------------------------
   GLOBAL RESPONSIVE FIXES
--------------------------- */

/* Prevent giant text on mobile */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }

  h1 { font-size: 2.4rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.6rem; }
}



 h1.name, .melo{
  justify-content:center;
  align-items: center;
  display: flex;
  text-shadow:
        0 4px 8px #9B869D,
        0 0 25px rgba(255, 200, 240, 0.8),
        0 0 60px rgba(255, 200, 240, 0.5);
        z-index: 4;
}

.title {
  font-size: 40px;
  color: #9B869D;
  margin-top: -100px;
  z-index: 2;
}

@media (min-width: 480px)  { 
  .title {
   
  font-size: 40px;
  }
}

@media (min-width: 768px)  { 
  .title {
   
    font-size: 40px;
  }
}

@media (min-width: 992px)  { 
  .title  {
    
    font-size: 40px;
  }
}

@media (min-width: 1024px) { 
  .title  {
 
    font-size: 80px;
  }
}

@media (min-width: 1440px) { 
  .title  {
 
    font-size: 80px;
  }
}

.melis {
  font-size: 26px !important;
}

.folio{ font-weight: 500;
  font-size:18px; 
  color: #9B869D;
}

.project-link{
  font-family: "Inconsolata", monospace !important;
  font-weight: 500;
}


button {
  border: none;
    }


/* Buttons scale better */
@media (max-width: 600px) {
  button {
    font-size: 20px;
    padding: 6px 16px;

  }
}


/* -----------------------------------
   NAVBAR
----------------------------------- */
.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.navbar {
  position: fixed;
  width: 100%;
  padding: 24px;
  left: 0;
  top: 0;
  display: flex;                 
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

@media (max-width: 600px) {
  .navbar {
    padding: 12px;
  }

  .navbar a {
    font-size: 18px;
    padding: 10px 12px;
  }
}

 .navlink {
 
  width: 100%;
  height: 200px;
  
  align-items: center;
  justify-content: center;
  /*border-radius: 50%;*/
 border: 1px dashed var(--s25)!important;
  position: relative;
  cursor: pointer;
}

.link1{
 display: flex;
    position: relative;
    display: inline-block;
    will-change: transform;
    cursor: pointer;
    align-items: center;
  justify-content: right;
  padding: 16px 32px;
  border-radius: 99px;
   font-family: Inconsolata, monospace;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--black);
  /*color: #9B869D;#594E31;*/
  overflow: hidden;

}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  justify-content: space-between; 
}

.navbar a {
  font-family: "Cherry Bomb One";
  color: #9B869D;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
  transition: transform 0.3s ease-in-out;
}

.navbar a:hover {
  color:#E3F99C;
  transform: scale(1.1);
  background-color: #FFD9E9;
}


.nav-right .icon {
  display: none;
}


@media screen and (max-width: 600px) {

  .navbar {background-color: #FEF3ED;
    /*opacity: 0.8;*/
    flex-direction: column;
    align-items: flex-start;
    
  }

  .nav-left {
    width: 100%;
    margin-bottom: 10px;
  }

  .nav-right {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 40px;
  }

  .nav-right .icon {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
  }
  .navbar a:hover {
  background-color: #FFD9E9;
}

  .nav-right a:not(.icon) {
    display: none;
  }

  .navbar.responsive .nav-right a:not(.icon) {
    display: block;
    width: 100%;
    text-align: left;
  }
}


/* -----------------------------------
   HERO
----------------------------------- */

.hero {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo { 
  margin-bottom:60px;
  left: 500px;
  width:90px;
    height: 90px;
    z-index:1;
}

@media (min-width: 780px) {
.logo {
     margin-bottom: 40px;
     width:169px;
    height:169px;
  }
}

.melogo { position: static; z-index:2;
  margin-bottom: 150px;
 
}

@media (max-width: 600px) {
  .melogo {
    left: 0;
    margin-bottom: 40px;
    transform: scale(0.8);
  }

  }


.name {margin-top:200px ;
  width: 100%;
}

@media (max-width: 768px) {.name {
  margin-top:0px ;
  }
}

.melo{ margin-top:100px ;
  position:absolute;
 width: 100%;  
}

@media (min-width: 780px) {.melo{ margin-top:150px ;
  position:absolute;
 width: 100%;  
  }
}

.name-svg { overflow: visible;
  width: 100%;
  height:100%;
}

.name-text {
  background: #f5d7e4;
background: linear-gradient(102deg,rgba(245, 215, 228, 1) 0%, rgba(255, 223, 186, 1) 100%);
  font-size: clamp(150px, 50vw, 130px);
}


@media (min-width: 780px) { 
 .name-text{
 
     font-size: clamp(100px, 50vw, 100px);
  }
}

 .melo-text { 
  width: 100%;
  height: auto;
  display: block;
  font-size: clamp(200px, 50vw, 220px);
}

@media (min-width: 780px) { 
 .melo-text {
 
     font-size: clamp(150px, 50vw, 150px);
  }
}


/* -----------------------------------
   FLUFFIES (floating PNGs)
----------------------------------- */
.fluffy-wrapper {
    position: absolute;
    /* your existing positions */
}


.fluffies { z-index: 0;
  position: fixed;
}

.fluff, .fluff1, .fluff2, .fluff3, .fluff4,
.fluffy, .fluffy1, .fluffy2, .fluffy3, .fluffy4 {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

/* Your custom positions */
.fluff { left: 465px; top: 111px; }
.fluff1 { left: -400px; top: 0; }
.fluff2 { left: 0; top: 0; }
.fluff3 { margin-top: -200px; }
.fluff4 { margin-top: 200px; }

.fluffy { left: -250px; top: 246px; }
.fluffy1 { left: 288px; top: 151px; }
.fluffy2 { left: -660px; top: -134px; }
.fluffy3 { left: -200px; top: -450px; }
.fluffy4 { left: 400px; top: -400px; }

@media (max-width: 600px) {
  .fluffies img,
  .fluffy,
  .fluffy1,
  .fluffy2,
  .fluffy3,
  .fluffy4 {
    transform: scale(0.6);
  }

  .fluffies {
    /*top: 0;
    left: 0;*/
  }
}

#fluffy1{
  filter: drop-shadow(6px 4px 8px #FFC8C9);
}
.fluffintro{top:-500px; position:relative; z-index: 2}
/* -----------------------------------
   HORIZONTAL SCROLL
----------------------------------- */
.horizontal-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

@media (max-width: 600px) { .horizontal-track {
    margin-top:70px;
  }
}

.horizontal-track {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: max-content;
   
}

/* -----------------------------------
   SCENES
----------------------------------- */

.scene {
    margin:400px 100px;
    width: 100vw;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scene-1{ margin:0;
background: #91E8F8;
background: linear-gradient(123deg, rgba(145, 232, 248, 1) 28%, rgba(198, 228, 240, 1) 83%, rgba(217, 217, 217, 1) 100%);
}


@media (min-width: 480px)  { 
  .scene {
  
  width: 80vw;
  }
}

@media (min-width: 768px)  { 
  .scene {
   
    width: 70vw;
  }
}

@media (min-width: 992px)  { 
  .scene {
    
    width: 70vw;
  }
}

@media (min-width: 1024px) { 
  .scene {
 
    width: 50vw;
  }
}

@media (min-width: 1440px) { 
  .scene {
 
    width: 40vw;
  }
}

/* -----------------------------------
   SVG ANIMATION
----------------------------------- */
svg {
  width: 100%;
  height: auto;
}

.ga-journey-text {
  font-size: 1.2rem;
  fill: #9B869D;
  font-weight: 600;
  letter-spacing: 1px;
}

.text-scroll{
 width:50%; 
 height: 100%;
}

@media (max-width: 768px)  {.text-scroll{
    width:100%; 
  }
}

.text-scroll.text-end{
 /* width: 40vw !important; */
}

.text-scroll.text-end{
    width:50%; 
  height: 100%;
  /*margin: 0 0 0 -330px;*/
  top: 40px !important;
}

@media (max-width: 768px) {.text-scroll.text-end{
  width:100%; 
  margin: 0 0 0 -200px;
 }
}

.end{
  left: -660px !important;
  margin-top: -350px;
   top: -210px !important;
  position: relative !important;
  overflow: visible;
}

@media (max-width: 768px)  {.end{
    top: -100px !important; 
    left: -110px !important;
    transform: rotate(130deg)!important;
  }
}

.scroll{  overflow: visible;
  left: 400px !important;
  margin-top: -400px;
   top: 220px !important;
position: relative !important;
}

@media (max-width: 768px)  {.scroll{
    top: 320px !important; 
    left: -50px !important;
  }
}

.ga-journey-dot, .ga-journey-dot1{
  width: 50px;
}

@media (min-width: 768px) {.ga-journey-dot, .ga-journey-dot1{
  width: 75px;
  }
}

.scene-svg { 
  position: relative;
  z-index: 2;
  margin: 0 -150px 0 -150px; 
  
}

@media (min-width: 480px)  { 
  .scene-svg {
   /*margin: 0 -250px 0 -250px;*/
  
  }
}

@media (min-width: 768px)  { 
  .scene-svg { 
     margin: 0 -220px 0 -220px;
  }
}

@media (min-width: 992px)  {  
  .scene-svg {  margin: 0 -300px 0 -300px; 
  }
}

@media (min-width: 1024px) { 
  .scene-svg {  margin: 0 -300px 0 -300px;
  }
}

@media (min-width: 1440px) {  
  .scene-svg { margin: 0 -295px 0 -295px;
  }
}

.ga-journey-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

}

.trail {
  stroke: #ff69b4;
}

/*.icon {
  filter: drop-shadow(0 0 10px #ff69b4);
}*/


/* -----------------------------------
   PROJECT CARDS
----------------------------------- */

.card-4, .card-6 {  }

@media (min-width: 992px) {.card-4, .card-6 {
    }
  }

.project-card { 
        box-shadow: 25px 25px rgba(106, 92, 56, 0.4);  
        opacity: 0.9;
        inset: 0;
        cursor: pointer;
        transform: rotateX(0), rotateY(0) rotateZ(0);
        display: inline-block;
        outline: 2px dashed transparent;
        transition: all 600ms ease;
  /*transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;*/
    width: 380px;
    padding: 0 0 20px 0;
    background: #FEF3ED;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px; overflow: hidden;
}

@media (min-width: 992px) { .project-card { 
  padding: 34px;
}}

.project-card:hover {
  inset: 6px 0 5.5px 0;
        transform: rotateX(5deg) rotateY(3deg) rotateZ(.25deg);
        box-shadow: none;
}

.project-thumb {
    margin: 20px 20px;
    width: auto;
    height: 180px;
    border-radius: 12px;
}

.project-title {
    color: #9B869D;
    font-size: 32px;
    font-family: "Cherry Bomb One";
    text-align: center;
}

.overlay-title{
  color: #B197B3;
  margin: 100px 0 20px;
  font-size: 40px;

}

@media (max-width: 768px)  { 
  .overlay-title {
   margin: 10px 0 15px;
  font-size: 32px;
    
  }
}

.project-desc {
    color: black;
    font-size:1.2rem;
    font-family: Inconsolata;
    text-align: center;
    line-height: 24px;
}

.view-project {
    padding: 12px 24px;
    color: #D19BD7;
    border: none;
    border-radius: 68px; /*8px*/
    font-family: Cherry Bomb One;
    cursor: pointer;
}

@media (max-width: 600px) {
  .project-card {
    width: 90%;
    padding: 10px;
  }

  .project-thumb {
    height: 140px;
  }

  /*.project-title {
    font-size: 24px;
  }

  .project-desc {
    font-size: 14px;
  }*/
}


/* -----------------------------------
   OVERLAY
----------------------------------- */

body.no-scroll {
    overflow: hidden;
}


/* OVERLAY FULLSCREEN */
#project-overlay, #about-overlay {
    overflow: hidden;
    position: fixed;
    inset: 0;
    background: linear-gradient(
    145deg,
    rgba(217, 217, 217, 1) 20%,
    rgba(180, 235, 255, 1) 40%,
    
    rgba(255, 228, 228, 1) 80%,
    rgba(194, 245, 100, 1) 100%
  );
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

@media (min-width: 768px) {
  #project-overlay, #about-overlay {
    /*padding: 20px;*/
  }
}
  /*@media (min-width: 480px)  { /* Mobile Large */ 
  /* #project-overlay, #about-overlay {
   
  padding: 20px;
  }
}*/



/* FLEX WRAPPER */
.overlay-inner {
  /*overflow-y: auto; */
    max-height: 100%;
    width: 100%;
    max-width:85%;
    display: flex;
    gap:42px;
    background: rgba(254, 243, 237, 0.7);
      margin: 30px 0 30PX;
    padding:20px 40px 40px 40px;
    align-items: center;  
}

/* LEFT SIDE */
.overlay-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px; 
    order:2;
    
}

.overlay-gallery-viewport {
    max-width: 820px;          
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    overflow-y: hidden;
}

.overlay-gallery {
    display: flex;
    gap: 100px;
    flex-shrink: 0;
     order:1;
}

@media(max-width: 600px) {.overlay-gallery {
  gap: 40px;
  }
}

/* GALLERY ITEMS */
.overlay-gallery img{
    width: 100%;
    height: auto;
    object-fit:contain;
    flex-shrink: 0;
}

.x {
  top: 0px !important;
  right: 0px !important;
  width: 10rem !important;
  height: 12rem !important;
  font-size: 1.4rem;
  position: fixed !important;
}

.overlay-close-btn  button {
    position: fixed;
    top: 20px !important;
    right: 30px !important;
    width: 50px;
    height: 50px;
    border-radius: 50% !important;
    font-size: 32px !important;
    cursor: pointer;
    inset: auto;
    z-index: 9999;
     margin: 4px 4px;
     padding: 20px;
     padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; 
  align-items:end !important; 
  background: #FEF3ED;
}


@media (max-width: 600px)  { 
   .overlay-close-btn button{
      top: 15px !important;
    right: 32px !important;
    width: 45px;
    height: 45px;
   font-size: 29px !important;
   
  }
}


.overlay-gallery video {
   width: 100%;
    height: auto;
    max-width: 820px;
    max-height: auto;
    object-fit: contain;
    /*border-radius: 12px;*/
    flex-shrink: 0;
   
}



@media (max-width: 1024px) {
  .overlay-inner {
    max-height: 100%;
    max-width:100%;
       flex-direction: column;
    gap: 22px;
    overflow-y: auto;  
    margin: 100px 0 10PX;

  }

  .overlay-gallery-viewport {
    max-width: 100%;
        max-height: 80vh;
        flex-shrink: 0;
  }

  .overlay-gallery img,
  .overlay-gallery video {
    width: 100%; 
    object-fit: contain; 
    display: inline-block;
  }
  @media (max-width: 768px) {
    .overlay-gallery img,
    .overlay-gallery video {
        max-width: 100%;
        max-height: 80vh;
    }
}
}

.overlay-description{

font-size: 22px; line-height:150% ;
}


@media (max-width: 768px)  { /* Desktop */
  .overlay-description{
    font-size:18px; line-height:150% ;
    
  }
}


/*--------------------------------
      GALLERY FX
---------------------------*/
.special-gallery {
  position: relative;
  cursor: crosshair;
}

/* hidden by default */
.gallery-light {
 z-index: 99999;
  position: absolute;
    width: 400px;
    height: 400px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    display: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(195, 255, 0, 0.6), transparent 70%);
}

@media (max-width: 600px)  {.gallery-light {
    width: 300px !important;
    height: 300px !important;
     }
  }

.gallery-light-1 {
 z-index: 99999;
  position: absolute;
    width: 400px;
    height: 400px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    display: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 0, 0.6), transparent 70%);
}

.project-overlay:hover .gallery-light,.gallery-light-1 {
  display: block;     
}

/*********************************************/
/*.mag-zone {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
}*/
.mag-zone {
  margin-top:-80px;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  /*border-radius: 50%;
 border: 1px dashed var(--s25);*/
  position: relative;
  cursor: pointer;
  z-index: 9999;
}

.lets{
  margin:-100px;
  width: 80%;
  height: 16rem;
  z-index: 2;
}

.mag-btn {
  margin-top: 40px;
    position: relative;
    display: inline-block;
    will-change: transform;
    cursor: pointer;
    align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: 99px;
   font-family: Inconsolata, monospace;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--black);
  /*color: #9B869D;#594E31;*/
  overflow: hidden;
}

.mag-zone .label {
    position: relative;
    display: inline-block;
    will-change: transform;
}

.mag-btn .bg{
  position: absolute;
  inset: 0;
  border-radius: 99px;
  z-index: 0;
}


.mag-btn.summer.bg {
  background: var(--grad-orange);
}


/* Main content wrapper */
.about-container {width: 100%;
  align-items: center;
    max-width: 1000px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 26px;
    position: relative;
}


/* Main text */
.about-text { margin: -10px 0 20px;
    font-family: Inconsolata, monospace;
    font-size: 24px;
    line-height: 38px;
    color: #594E31; justify-content: left;
    z-index: 4;
}

@media (min-width: 768px)  { 
   .about-text {
   margin: 20px 10px 40px;
   
  }
}

/* Skills grid */
.about-skills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 20px 0 50px;
    
}

.about-skills div {
    font-family: Inconsolata;
    font-size: 28px;
    font-weight: 700;
    color: #594E31;
}

/* CTA button */
.about-cta {
    margin-top: 40px;
    padding: 12px 24px;
    background:/*#D5B3D8;#B197B3;*/ #BCA3BE;
    border-radius: 68px;
    border: none;
    font-family: "Cherry Bomb One";
    font-size: 28px;
    color: #FEF3ED;
    cursor: pointer;
}

@media (max-width: 600px) {
  .about-container {
    padding: 0 20px;
  }

  .about-text {

    font-size: 18px;
    line-height: 30px;
  }

  .about-skills div {
    font-size: 20px;
  }
}


.wave-overlay-container, .wave-intro-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; 
    z-index: -1; 
}
.wave-intro-container{
   z-index: 0;
 }

.shape-overlays, .shape-overlays-intro {
    width: 100%;
    height: 100%;
}


.shape-overlays__path {
    transition: d 0.6s ease;
}
.freeze-scroll {
    overflow: hidden !important;
}