/* Table of Contents
  01. General Variables
  02. Body Styling
  03. Header
  04. Home Page Content
  05. First Fold
  06. Second Fold (Story) and Work chapters
  07. Footer, cursor bubble


  Meta:
  Use the table of contents to navigate the styles.css file.
  Use the search functionality to find specific styles.
  Use the comments to understand the purpose of each section.
  Use the code to customize the styles to your liking.
  Use lowercase and hyphens for class names.

*/





/* Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');


/* General Variables */
:root {
  /* Background Variables */
  color-scheme:               dark light;
  --background-light:       hsl(0, 0%, 98%);
  --background-dark:        hsl(0, 0%, 10%);
  --background-grid-opacity:  5%;
  --background-grid-color:    color-mix(in oklab, var(--background-light) var(--background-grid-opacity), var(--background-dark) var(--background-grid-opacity));
  --background-grid-size:     clamp(2.5rem,6.65vw,15.2rem);
  @media screen and (max-width: 768px){
    --background-grid-opacity:  7%;
  }
  --background-grid-width:    0.05em;
  --background-grid-image:    linear-gradient(90deg, var(--background-grid-color) var(--background-grid-width), transparent var(--background-grid-width)),
                              linear-gradient(0deg, var(--background-grid-color) var(--background-grid-width), transparent var(--background-grid-width));
  --background-grain-speed:   17s;
  --custom-cursor:            url('icons/cursor.png') 3 3, auto;
  --custom-cursor-pointer:    url('icons/cursor-pointer.png') 3 3, auto;
  --container-width-desktop:  1080px;
  /* --container-width-desktop:  clamp(1080px, 77.6vw, 1400px); */

  --text-light:           hsl(000, 000%, 000%);
  --text-dark:            hsl(000, 000%, 100%);
  --accent-light:         hsl(040, 100%, 060%);
  --accent-dark:          hsl(056, 054%, 075%);
  --card-bg-light:        hsl(000, 000%, 100%);
  --card-bg-dark:         hsl(000, 000%, 012%);
  --clr-primary:          hsl(028, 095%, 057%);
  --border-radius:          1rem;

  /* Font Variables */
  --font-family-primary:    'Work Sans', sans-serif;
  --font-family-secondary:  'Work Sans', sans-serif;
  --font-family-tertiary:   'Work Sans', sans-serif;
  --font-size-h1:           clamp(1.50rem, 3vw ,3.0rem);    /* 24px, 3% value of width-of-browser ,  48px */
  --font-size-h2:           clamp(1.25rem, 2.5vw, 2.5rem);  /* 20px, 2.5% value of width-of-browser, 40px */
  --font-size-h3:           clamp(1.15rem, 2.0vw, 2.0rem);  /* 16px, 2% value of widht-of-browser,   32px */
  --font-size-p:            clamp(0.95rem, 1.5vw, 1.0rem);  /* 16px, 1.5% value of with-of-browser, 18px */
  --font-size-small:        clamp(0.75rem, 1.0vw, 1.0rem);  /* 12px, 1% value of widht-of-browser,   16px */
  --font-size-large:        clamp(0.875rem, 1.35vw, 1.25rem); /* 14px, 1.35% value of widht-of-browser, 20px */
  --font-size-navigation:   1.04rem;
  @media screen and (max-width: 768px){
  --font-size-navigation:   2.6rem; /* 42px */
  }
}
/* Displays */
.d-desktop{
  @media screen and (max-width: 1024px){
    display: none !important;
  }
}
* {
  box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-family-primary);
  /* text-transform: uppercase; */
  margin:         0;
  margin-block:   0.5rem;
  padding:        0;
  font-weight:    400;
  flex-shrink:    0;
}
h1.large {font-size: var(--font-size-large);}
h1 {font-size: var(--font-size-h1);}
h2 {font-size: var(--font-size-h2);}
h3 {font-size: var(--font-size-h3);}
h4 {font-size: var(--font-size-h4);}
h5 {font-size: var(--font-size-h5);}
h6 {font-size: var(--font-size-h6);}
p  {font-size: var(--font-size-p); margin: 0;padding: 0.5rem 0;}
.d-flex{display:       flex;}
.d-block{display:      block;}
.d-grid{display:       grid;}
.d-none{display:       none !important;}
.font-large{font-size:        var(--font-size-large);}
.font-small {font-size:       var(--font-size-small);}
.font-primary{font-family:    var(--font-family-primary);}
.font-secondary{font-family:  var(--font-family-secondary);}


.c-loader{
  position:         fixed;
  width:            100vw;
  height:           100vh;
  min-height:       100vh;
  pointer-events:   none;
  flex-direction:   column;
  z-index:          200;
  top:              0;
  left:             0;
  width:            100%;
  visibility:       hidden;
  overflow:         hidden;
  opacity:          0;
  @media (prefers-color-scheme: dark) {background:     var(--background-dark);}
  @media (prefers-color-scheme: light) {background:    var(--background-light);}
  .c-loader__mask {
    z-index:          200;
    position:         absolute;
    display:          flex;
    justify-content:  center;
    align-items:      center;
    width:            100%;
    height:           100%;
    overflow:         hidden;
    @media (prefers-color-scheme: dark) {background:     var(--background-dark);}
    @media (prefers-color-scheme: light) {background:    var(--background-light);}
    .c-loader__inner {
      width:            100%;
      height:           100vh;  
      @media (prefers-color-scheme: dark) {background:     var(--card-bg-dark);}
      @media (prefers-color-scheme: light) {background:    var(--card-bg-light);}
      position:         relative;
      video {
        object-fit: cover;
        max-width: 100vw;
      }
    }
  }
}


[data-scroll-container] {
  height: 100%; /* Ensure the container takes the full height */
  overflow: hidden; /* Prevent overflow outside the container */
}
/* Wrapper acts as the viewport */
#smooth-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
}
/* Content scrolls smoothly inside the wrapper */
#smooth-content {
  position: relative;
  width: 100%;
  will-change: transform;
  overflow: visible;
}
/* Body Styling */
body {
  cursor:               var(--custom-cursor);
  scroll-behavior:      smooth;
  background-color:     var(--background-light);
  color:                var(--text-light);
  font-family:          var(--font-family-secondary);
  margin:               0;
  padding:              0;
  transition:           background-color 0.3s, color 0.3s;
  background-size:      var(--background-grid-size) 200vh;
  background-image:     var(--background-grid-image);
  background-position:  center top;
  overflow-x:           hidden;
  &.is-loading {
    overflow: hidden;
    pointer-events: none;
    * {
      pointer-events: none;
    }
  }

  /* @media (prefers-color-scheme: dark) {
    background-color: var(--background-dark);
    color: var(--text-dark);
  } 
  */
  @media (prefers-color-scheme: light) {
    /* &::after {
      filter:         invert(1);
      animation:      noise var(--background-grain-speed) steps(10) infinite;
      pointer-events: none;
      background:     url(https://grainy-gradients.vercel.app/noise.svg) repeat;
      content:        '';
      height:         500%;
      left:           -100%;
      position:       fixed;
      top:            -100%;
      width:          500%;
      z-index:        -1;
    } */
  }
  a,btn,input{
    cursor:   var(--custom-cursor-pointer) !important;
    color:    currentColor
  }
    @media screen and (min-width: 768px) {
      > nav.mobile-navigation {
        display: none !important;
      }
    }
}






/* Header */
header{
  position:         fixed;
  z-index:          10;
  left:             0;
  right:            0;
  top:              0;
  background:       hsl(from var(--card-bg-dark) H S L / 90%);
  @media (prefers-color-scheme: light) {
    background:       hsl(from var(--card-bg-light) H S L / 90%);
  }
  backdrop-filter:  blur(10px);
  border-bottom:    1px solid var(--background-grid-color);


  .header-wrapper{
    display:          flex;
    justify-content:  space-between;
    align-items:      center;
    padding-inline:   2.0rem;
    padding-block:    1.5rem;
    .logo-area {
      display:          flex;
      align-items:      center;
      justify-content:  space-between;
      gap:              16px;
      .logo-wrapper{
        display:            flex;
        align-items:        center;
        gap:                1rem;
        text-decoration:    none;
        font-size:          1.04rem;
        color:              var(--text-light);
        @media (prefers-color-scheme: dark) {
          color:            var(--text-dark);
        }
      }
    }
    .menu-trigger{
      display:            none;
      -webkit-appearance: none;
      appearance:         none;
      + label{
        display:            none;
        @media screen and (max-width: 768px){
            display:      block;
            cursor:       pointer;
            width:        3.75rem;
            height:       1.75rem;
            color:        var(--text-dark);
        }
      }
    }
  }
}





/* Navigation */
.navigation {
  overflow: hidden auto;
  z-index: 2;
  -webkit-overflow-scrolling: touch;

  ul {
    display: flex;
    margin: 0;
    padding: 0;
    gap: 2rem;

    @media screen and (min-width: 768px) {
      justify-content: flex-end;
      gap: 1rem !important;
    }

    @media screen and (max-width: 768px) {
      flex-direction: column;
    }

    li {
      list-style: none;
      color: hsl(from var(--text-dark) H S L / 50%);

      @media screen and (max-width: 768px) {
        > span {
          display: none;
        }
      }

      > * {
        font-size: var(--font-size-navigation);
        text-decoration: none;
        transition: color 0.3s;
        color: var(--text-light);

        @media (prefers-color-scheme: dark) {
          color: var(--text-dark);
        }

        &:hover {
          @media (prefers-color-scheme: dark),
          (prefers-color-scheme: light) {
            color: var(--accent-light);
          }
        }
      }

      label {
        @media screen and (min-width: 768px) {
          display: none;
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    position: fixed;
    inset: 0;
    left: 120vw;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.6s ease, transform 0.3s ease 0.3s;
    background: hsl(from var(--card-bg-dark) h s l / 100%);
    will-change: transform;
    transform: skewX(5deg) translateX(80px);
  }

  &.mobile-navigation:has(+ div#smooth-wrapper input#menu-trigger:checked) {
    width: 100%;
    left: 0;
    position: fixed;
    transform: skewX(0deg) translateX(0px);
  }

}






main.main-content {
  overflow: hidden;
  section{
    display:          flex;
    align-items:      center;
    justify-content:  center;
    min-height:       70vh;
    justify-content:  start;
    padding-block:    5rem;
    &.one-fold {
      min-height:     100vh;
    }
    &.intro{
      position:   relative;
      min-height: 100vh;
      overflow:   hidden;
      span{
        display: inline-block;
        &.status-light {
          width:  12px;
          height: 12px;
          background: radial-gradient(hsl(20deg 100% 50%), hsl(29, 100%, 44%));
          border-radius: 100%;
          margin-right: 0.4rem;
        }
      }
      .freelance-label{
        display:          inline-flex;
        padding-inline:   0.5rem;
        align-items:      center;
        @media screen and (max-width: 768px){
          border:         1px solid;
          border-radius:  1rem;
        }
      }
      .comma-mobile{
        display: none;
        @media screen and (max-width: 768px){
          display: inline-block;
          padding-right: 0.5rem
        }
      }
      .comma-desktop{
        @media screen and (max-width: 768px){
          display: none;
        }
      }
      h1,h2,h3{
        overflow: hidden;
      }
      .intro-text{
        overflow: hidden;
      }
    }
    
    /* Second fold: Story (rises over the hero like a curtain) */
    &.story{
      position:         relative;
      z-index:          2;
      min-height:       100vh;
      padding-block:    clamp(6rem, 14vh, 9rem) clamp(4rem, 10vh, 7rem);
      background-color: var(--background-dark);
      color:            var(--text-dark);
      .container{
        display:          flex;
        flex-direction:   column;
        gap:              clamp(2rem, 5vh, 3.5rem);
      }
      .story-tabs{
        display:          flex;
        flex-wrap:        wrap;
        gap:              0.5rem;
      }
      .story-tab{
        font:             inherit;
        font-size:        var(--font-size-small);
        color:            hsl(from var(--text-dark) H S L / 70%);
        background:       transparent;
        border:           1px solid transparent;
        border-radius:    2rem;
        padding:          0.55rem 1rem;
        min-height:       44px;
        transition:       color 0.3s, background-color 0.3s, border-color 0.3s;
        &:hover{
          color:          var(--text-dark);
          border-color:   hsl(from var(--text-dark) H S L / 35%);
        }
        &:focus-visible{
          outline:        2px solid var(--text-dark);
          outline-offset: 2px;
        }
        &.is-active{
          background:     var(--text-dark);
          color:          var(--text-light);
        }
      }
      .story-text{
        font-size:        clamp(1.75rem, 4.2vw, 3.6rem);
        line-height:      1.2;
        font-weight:      400;
        letter-spacing:   -0.01em;
        max-width:        22em;
        padding:          0;
        .word{
          opacity:        0.22;
        }
      }
      .story-footer{
        display:          flex;
        justify-content:  space-between;
        align-items:      flex-end;
        gap:              2rem;
        flex-wrap:        wrap;
      }
      .story-location{
        display:          grid;
        gap:              0.25rem;
        padding:          0;
        span{ opacity: 0.6; }
        strong{ font-weight: 500; font-size: var(--font-size-large); }
      }
    }

    /* Shared call-to-action: label + round arrow button */
    .story-cta{
      display:          inline-flex;
      align-items:      center;
      gap:              1rem;
      color:            var(--text-dark);
      text-decoration:  none;
      font-size:        var(--font-size-large);
      .story-cta-icon{
        display:          grid;
        place-items:      center;
        width:            3rem;
        height:           3rem;
        border:           1px solid hsl(from var(--text-dark) H S L / 60%);
        border-radius:    50%;
        transition:       background-color 0.3s, color 0.3s, transform 0.4s ease;
      }
      &:hover .story-cta-icon,
      &:focus-visible .story-cta-icon{
        background:       var(--text-dark);
        color:            var(--text-light);
        transform:        rotate(-45deg);
      }
      &:focus-visible{
        outline:          2px solid var(--text-dark);
        outline-offset:   6px;
        border-radius:    2rem;
      }
      /* Arrows that point up and right keep their angle; the arrow just nudges */
      &.is-ne:hover .story-cta-icon,
      &.is-ne:focus-visible .story-cta-icon{
        transform:        none;
      }
      &.is-ne .story-cta-icon svg{
        transition:       transform 0.3s ease;
      }
      &.is-ne:hover .story-cta-icon svg,
      &.is-ne:focus-visible .story-cta-icon svg{
        transform:        translate(2px, -2px);
      }
    }
    /* The whole project card is the link, so the card hover lights the button */
    .project:hover .story-cta-icon,
    .project:focus-visible .story-cta-icon{
      background:       var(--text-dark);
      color:            var(--text-light);
    }
    /* Magnetic wrapper: JS moves this, the icon inside keeps its own hover motion */
    .magnet{
      display:          inline-grid;
      will-change:      transform;
    }

    /* Work Section: every project is a chapter */
    &.work{
      display:          block;
      background-color: var(--background-dark);
      color:            var(--text-dark);
      padding-top:      clamp(2rem, 6vh, 4rem);
      padding-bottom:   clamp(5rem, 12vh, 9rem);
      .work-head{
        max-width:        44rem;
        margin-bottom:    clamp(3rem, 8vh, 6rem);
        .chapter-label{
          opacity:          0.6;
          letter-spacing:   0.12em;
          text-transform:   uppercase;
        }
        .work-title{
          font-size:        clamp(2rem, 5vw, 4.2rem);
          line-height:      1.05;
          font-weight:      500;
          letter-spacing:   -0.02em;
          margin-block:     0.75rem 1rem;
        }
        .work-intro{
          opacity:          0.7;
          padding:          0;
        }
      }
      ol.projects{
        padding:          0;
        margin:           0;
        list-style:       none;
        display:          grid;
        gap:              clamp(4.5rem, 12vw, 9rem);
        li{
          margin:         0;
          .project{
            display:              grid;
            grid-template-columns: 1.15fr 1fr;
            align-items:          center;
            gap:                  clamp(1.5rem, 5vw, 4rem);
            color:                inherit;
            text-decoration:      none;
            @media screen and (max-width: 768px) {
              grid-template-columns: 1fr;
            }
            &:focus-visible{
              outline:            2px solid var(--text-dark);
              outline-offset:     8px;
              border-radius:      0.75rem;
            }
            .project-image-wrapper{
              border-radius:      0.75rem;
              overflow:           hidden;
              background:         var(--card-bg-dark);
              img, video{
                display:          block;
                width:            100%;
                height:           auto;
                aspect-ratio:     606 / 475;
                object-fit:       cover;
                scale:            1.16;
                transition:       scale 0.7s ease;
              }
            }
            .project-content{
              display:            grid;
              justify-items:      start;
              gap:                0.5rem;
            }
            .project-number{
              font-size:          var(--font-size-small);
              letter-spacing:     0.12em;
              font-variant-numeric: tabular-nums;
              span{ opacity: 0.45; }
            }
            .project-tag{
              display:            inline-block;
              font-size:          var(--font-size-small);
              padding:            0.35rem 0.8rem;
              border:             1px solid hsl(from var(--text-dark) H S L / 35%);
              border-radius:      2rem;
              margin-block:       0.25rem 0.5rem;
            }
            .project-title{
              font-size:          clamp(2.2rem, 5vw, 4rem);
              font-weight:        500;
              line-height:        1.05;
              letter-spacing:     -0.02em;
              margin-block:       0;
            }
            .project-description{
              opacity:            0.7;
              max-width:          30em;
              padding-block:      0.5rem 1rem;
            }
            .project-link{
              margin-top:         0.5rem;
            }
          }
          &:nth-child(even) .project-image-wrapper{
            @media screen and (min-width: 769px) {
              order:          2;
            }
          }
          &:hover .project-image-wrapper :is(img, video){
            scale:            1.22;
          }
          // Media that plays on hover shows the whole frame, with only a small zoom.
          .project-image-wrapper .js-hover-media{
            scale:            1;
            object-fit:       contain;
          }
          &:hover .project-image-wrapper .js-hover-media{
            scale:            1.03;
          }
        }
      }
      .work-more{
        display:            grid;
        justify-items:      center;
        gap:                1.5rem;
        text-align:         center;
        margin-top:         clamp(5rem, 12vh, 8rem);
        p{
          font-size:        var(--font-size-h2);
          padding:          0;
        }
      }
    }
  }
}
footer{
  background:   var(--card-bg-dark);
  color:        var(--text-dark);
  border-top:   1px solid var(--background-grid-color);
  text-align:   center;
  display:      block;
  padding:      clamp(4rem, 12vh, 7rem) 1rem 2rem;
  .footer-inner{
    display:          grid;
    justify-items:    center;
    gap:              1.25rem;
  }
  .footer-title{
    font-size:        clamp(3rem, 11vw, 9rem);
    font-weight:      500;
    line-height:      0.95;
    letter-spacing:   -0.03em;
    padding:          0;
  }
  .footer-mail{
    font-size:        var(--font-size-h3);
    text-decoration:  underline;
    text-underline-offset: 0.3em;
    text-decoration-color: hsl(from var(--text-dark) H S L / 40%);
    transition:       text-decoration-color 0.3s;
    &:hover{ text-decoration-color: var(--text-dark); }
  }
  .footer-links{
    display:          flex;
    flex-wrap:        wrap;
    justify-content:  center;
    gap:              0.5rem 1.75rem;
    list-style:       none;
    margin:           clamp(2rem, 6vh, 4rem) 0 0;
    padding:          0;
    a{
      font-size:      var(--font-size-small);
      text-decoration: none;
      opacity:        0.65;
      transition:     opacity 0.3s;
      &:hover{ opacity: 1; }
    }
  }
}

/* Blinds: horizontal slats that close over the hero while you scroll past it */
.blinds{
  position:         absolute;
  inset:            0;
  z-index:          3;
  display:          flex;
  flex-direction:   column;
  pointer-events:   none;
  > span{
    flex:             1 1 0;
    background:       var(--background-dark);
    box-shadow:       0 1px 0 0 var(--background-dark);
    transform:        scaleY(0);
    transform-origin: 50% 0%;
  }
}

/* Cursor bubble shown over project cards (fine pointers only) */
.cursor-bubble{
  position:         fixed;
  left:             0;
  top:              0;
  z-index:          300;
  width:            5.5rem;
  height:           5.5rem;
  display:          grid;
  place-items:      center;
  border-radius:    50%;
  background:       var(--text-dark);
  color:            var(--text-light);
  font-size:        0.9rem;
  pointer-events:   none;
  opacity:          0;
  will-change:      transform;
}
@media (hover: none), (pointer: coarse) {
  .cursor-bubble{ display: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .blinds{ display: none; }
  .story-text .word{ opacity: 1 !important; }
}
.container{
  width:                100%;
  max-width:            var(--container-width-desktop);
  margin:               auto;
  padding-inline:       clamp(24px, 8vw, 40px);
  @media screen and (max-width: 768px) {
    padding-inline:     1rem;
  }
}