*{
  font-family: "Goldman", sans-serif;
  font-weight: lighter;
}
/* hide the system cursor on desktops */
@media (hover:hover) and (pointer:fine){
  body{ cursor:none; }
}


.bold{
  font-weight: 800;

}

:root{
  /* default (idle) look */
  --cursor-ring-color:#FFF8E8;
  --cursor-dot-color:#FFF8E8;
  --cursor-size:75px;          /* ring Ø when idle */
  --cursor-font-size:15px;     /* letter size idle */
}

.cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--cursor-size);
  height: var(--cursor-size);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1000;
}


.closePreview{
  display: none;
}

.cursor-follower text{
  font-size:var(--cursor-font-size);
  letter-spacing:4px;
  fill:var(--cursor-ring-color);
  transition:font-size .15s ease,width .15s ease,height .15s ease;
}

.cursor-follower circle{
  fill:var(--cursor-dot-color);
}

.cue-svg{
  animation:spin 12s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg);}}

.background-pattern::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  background:#0f110c radial-gradient(#575A5E 1px,transparent 1px) 0/18px 18px;
}


/* === Sticky setup === */
.sticky-column {
  position: sticky;
  position: -webkit-sticky;
  top:20vh;
}

.sticky-main
.elementor-widget-wrap {
display: block!important;
}

/* === Adjust project-section layout === */
.project-section {
  display: flex;
  align-items: start;
  width: 100%;
  scroll-snap-align: start;
  min-height: 100vh;
  padding: 2rem 0px 10rem 0px;
  overflow: visible;
  box-sizing: border-box;
 
}




.left {
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 50%;
  overflow-y: auto;
  color: #FFF8E8;
  box-sizing: border-box;
  text-align: right;
  overflow-x: visible;
}

  .container{
    display:flex;
    flex-direction:column;   /* stack name, small-container, socials */
    align-items:flex-end;    /* default: push children to the right */
    width:60%;
  }
  
  .name{

    align-self:flex-start;   /* this one hugs the left edge of .container */
    margin:.25em 0;
    font-size:2.5rem;
    padding-left: 1em;
  }
  

  .small-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start; 
    height: auto;
    padding: 0 0 0 6rem; 
    font-size: 1.3rem;
  }
  
  .small-left {
    flex: 0.5rem; 
    text-align: right;
    padding-right: 1rem;
    
  }

  .divider {
    width: 1px;
    height: 5rem; /* match the text height */
    background-color: #FFF8E8;
    align-self: center; /* align with text top */
  }
  
  .small-right {
    flex: 2; 
    text-align: left;
    padding-left: 0.8rem;
    padding-top: -2rem;
    min-width: 15rem;
  }



  .socialscontainer{
    display: flex;
    justify-self: end;
    padding-right: 0.5rem;
  }

  .socials{
    height: 1.8rem;
    font-size: 1.8rem; /* ⬆️ Try 2rem, 2.5rem, or even px like 32px */
    color: #FFF8E8;   /* make sure it's visible if needed */
    margin: 0 0.3rem; /* optional spacing between icons */
  }

  /*================ right side====================*/
  
  .icon {
    height: 2rem;
    font-size: 2rem; /* ⬆️ Try 2rem, 2.5rem, or even px like 32px */
    color: #FFF8E8;   /* make sure it's visible if needed */
    margin: 0 0.3rem; /* optional spacing between icons */
    flex-shrink: 0;
  }

  .icon-wrapper{
    position:relative;          /* positioning context for tooltip */
    display:inline-block;       /* keeps width = icon width */
  }
  
  /* hidden tooltip */
  .icon-wrapper::after{
    content:attr(data-label);
    position:absolute;
    left:50%; bottom:110%;      /* centred, sitting just above */
    transform:translateX(-50%);
    white-space:nowrap;

    font-size:.75rem;
    color:#0f110c;
    background:#FFF8E8;
    border-radius:4px;
    box-shadow:0 2px 6px #0002;
  
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  
  /* show on hover or focus */
  .icon-wrapper:hover::after,
  .icon-wrapper:focus-visible::after{
    opacity:1;
  }
  
  
  .project{
    font-size: 1.2rem; /* ⬆️ Try 2rem, 2.5rem, or even px like 32px */
    flex-shrink: 0;
    color: #FFF8E8;
  }


  .project-title{
    font-size: 2.4rem;
    margin-bottom: 0px;
  }

  /* .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem;
    overflow-y: auto;
    box-sizing: border-box;
    color: #FFF8E8;
    gap: 1rem;
  } */

  .right {
    flex: 1;
    height: auto;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    box-sizing: border-box;
    color: #FFF8E8;
    gap: 1rem;
  }
  
/* cards column already has z-index:3 – just add position */
.cards-wrapper{
  overflow: visible;     /* establishes the containing block */
  height: 40rem;
  line-height: 4rem;
}

  
.projectCard{
  position: fixed;
  z-index: 100;
  width: 18rem;
  height: 25rem;
  background-color:none; 
  cursor: pointer;
  border-radius: 20px;
  
}

.doubleProject{
  padding: 1rem 0rem 1rem 0rem;
  margin: none;
  line-height: 0.4rem;
}

.doublePtext{
  margin: none;
  padding: none;
}

/* Title text */
#prevTitle {
  font-size: 1.8rem;    /* bigger title */
  line-height: 1.3;     /* space between lines */
  letter-spacing: 0.5px;
  margin: 0rem 0rem 0.2rem 0rem;

}

/* Description text */
#prevDesc {
  font-size: 1.1rem;      /* normal body size */
  line-height: 1.4;     /* more readable spacing */
  color: #d7d1c1;       /* softer color */
  margin-bottom: 0.75rem;
}

/* Tools list */
#prevTools {
  font-size: 1rem;    /* a little smaller */
  line-height: 1;
  color: #aaa;
  font-style: italic;
}

#prevVid, #prevImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; /* JS will toggle */
}


.project-card::after{

  content:
    attr(data-title)  "\A"          /*  \\A = line break  */
    attr(data-desc)   "\A"
    attr(data-tools);

  white-space:pre-line;             /* turn the \\A into real breaks */

  /* ------- look & feel of the “preview card” ------- */
  position:fixed; top:6rem; right:2rem;   /* ALWAYS same place */
  width:26rem; 
  background:#0f110c; color:#FFF8E8;
  border-radius:12px; box-shadow:0 10px 40px #0006;
  font-family:inherit; line-height:1.3;

  opacity:0; transform:translateX(30px);
  transition:opacity .25s ease, transform .25s ease;
  z-index:1000; pointer-events:none;      /* ignore the mouse */
}

/* ============================ */
  /* ============================ */
.preview { display: none; /* or opacity:0; pointer-events:none; */ }
.preview.show { display: block; /* or opacity:1; pointer-events:auto; */ }


  /*=====================videoHoverPlayer==============*/



  
/* 1 — keep this rule only for the tiny per‑card hover videos (if you still use them) */
/* --- fixed panel itself --- */
.preview{
  position:fixed; left:10%;
  width:37rem;                /* shrink panel */
  border-radius:12px; overflow:hidden;
  background:#071108;
  opacity:0; 
  transition:opacity .25s, transform .25s;
  z-index:1000;
  align-self: center;
}
.preview.show{ opacity:1; transform:none; }

/* --- main video inside panel, scaled not cropped --- */
.preview-player{
  width:100%; height:auto;
  object-fit:contain;           /* shows entire frame */
  display:block;
  opacity:0; transition:opacity .25s;
}
.preview.show .preview-player{ opacity:1; }

/* (optional) tiny hidden per‑card video clips */
.project-card .preview-video{
  position:absolute; width:15rem; height:12rem;
  opacity:0; pointer-events:none;
}






/* =====================
=====================
===================== */



 /*--------------scroll bar------------------*/
/* Global scrollbar button removal */


/* These selectors target the start and end buttons specifically */


html {
  scroll-behavior: smooth;
  /* For Firefox */
  scrollbar-width: thin;
  scrollbar-color: #FFF8E8 transparent;
}

.project-scroll-container{
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:clip;
  max-height:15rem; min-width:10rem;
}
.filter{
  display:flex; flex-direction:row; gap:0.4rem;
  margin-top: 20vh;
  height:3rem; max-width:26rem;
}
body.scrollbars-always .project-scroll-container{
  scrollbar-width: thin;                      /* Firefox */
  scrollbar-color: #FFF8E8 transparent;
}
body.scrollbars-always .project-scroll-container::-webkit-scrollbar,
body.scrollbars-always .filter::-webkit-scrollbar{
  width: 3px; height: 3px;                    /* Chrome / Edge / Safari */
}
body.scrollbars-always .project-scroll-container::-webkit-scrollbar-thumb,
body.scrollbars-always .filter::-webkit-scrollbar-thumb{
  background:#FFF8E8;
  border-radius:4px;
}


/*--------------scroll bar------------------*/


 /*=======================================AboutMe=================*/

 /* ScrollReveal :) ==============================*/
 .texts span {
  opacity: 0.1;
  transform: translateY(1rem);
  transition: opacity 0.4s, transform 0.4s;
}

.texts span.visible {
  opacity: 1;
  transform: translateY(0);
}



/* scrollReveal */

 .about-section{
  scroll-snap-align: start;
  min-height: 80vh;
  display:flex;
  justify-content:center;   /* left edge of viewport */
  align-content:flex-start;
  padding-bottom: 4rem;
 }

.about-container{
  width:80%
}

.img-smallcontainer{
  display: flex;
  padding-left: 3rem;
  padding-bottom: 2rem;
 }

 .border-animation{
  display: flex;
  justify-content:flex-end;
  position: relative;          /* new stacking context */
  inline-size: 7rem;           /* same as img width  */
  block-size: 7rem;   
  
  z-index:1;
}

.border-animation::after{
  content:'';
  position:absolute;
  inset:-3px;                    /* border thickness */
  border-radius:5px;
  background:linear-gradient(45deg,#ffd868,#53131E,#003D5B,#ffd868);
  background-size:300% 300%;
  animation:borderShift 6s linear infinite;
  filter:blur(8px);              /* ✨ glow lives here */
  z-index:0;                     /* under the photo, over page bg */
}


.about-me{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:5px;
  position:relative;
  z-index:1;                     /* above the blurred frame */
}

.about-title{
  color: #FFF8E8;
  font-size: 3rem;
  padding-left: 2rem;
}



@keyframes borderShift{
  0%{background-position:0 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0 50%;}
}

 .texts{
  width: 95%;
  padding-top: 1rem;
  padding-left: 3rem;
  text-align: left;
  position:relative;         
  display: inline-block;
  min-height:4rem;           /* prevents layout shift */
  font-size: 1.1rem;
  line-height: 1.4;
}


/* Reveal-noreveal text =====================================*/
.text{
  color: #FFF8E8;
  display:none;  
}
.is-visible{
  display:block;
}
/* reveal============================================== */

.options{
  width: 95%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-weight: 800;
  padding-bottom: 2rem;
}

.option{
  background: transparent;          /* no white fill */
  border: 2px solid transparent;    /* hide default border */
  color: #FFF8E8;                   /* same ivory you use elsewhere */
  font-size: 1.2rem;
  padding: .45rem 1rem;
  cursor: none;
  opacity: .8;
  transition: border-color .2s ease,
              opacity       .2s ease,
              transform     .2s ease;

  /* kill user-agent styles on Safari/iOS */
  -webkit-appearance: none;
}

.bottom-section{
  text-align: end;
}
/* wrapper */
.icon-wrapper{
  position:relative;
  display:inline-flex;
  align-items:center;
}

/* tooltip */
.icon-wrapper::after{
  content:attr(data-label);
  position:absolute;
  left:50%;
  bottom:calc(100% + 6px);
  transform:translateX(-50%);
  padding:.25rem .5rem;
  font-size:.75rem;
  color:#0f110c;
  background:#FFF8E8;
  border-radius:4px;
  box-shadow:0 2px 6px #0002;
  white-space:nowrap;
  opacity:0;
  z-index:10;                 /* ensure it floats above neighbours */
  pointer-events:none;
  transition:opacity .2s ease;
}

.icon-wrapper:hover::after{
  opacity:1;
}
















/* ===========================================================
================================================demo
=========================================================== */


.skills-overview {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.skill-btn {
  padding: 0.5rem 1rem;
  background-color: #1d1f21;
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.skill-btn.active,
.skill-btn:hover {
  background-color: #575a5e;
}

.skills-details-container {
  overflow: hidden;
}

.skills-details {
  display: flex;
  transition: transform 0.5s ease;
  width: 300%; /* Adjust based on the number of sections */
}

.skill-detail {
  min-width: 100%;
  opacity: 0.5;
  transition: opacity 0.5s ease;
  padding: 1rem;
}

.skill-detail.active {
  opacity: 1;
}




/* skills :)================================================ */

.box {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease-out;
}

.box.show {
  opacity: 1;
  transform: translateY(0);
}

/* {
  font-size: 1.9rem;
  margin-bottom: 0;
} */

.skills-section{
  display: flex;
  justify-content:center;   /* left edge of viewport */
  align-content:flex-start;       /* top edge (optional) */
  width: 100%;
}

.skills-container{
  display: block;
  width: 70%;
}

.skills {
  display: block;
  align-items: center;
margin-top: 4rem;
 
  color:#FFF8E8;
}

.skills-container-small{
  display: flex;
  align-items: start;
  height: fit-content;
}

.text-wrap{
  width: 45rem;
}

.img-wrap {
  width: 35rem;        /* the box size you already chose  */
  display: flex;      /* centers the image inside        */
  justify-content: center;
  align-items: center;
  overflow: hidden;   /* optional: cut off any spillover */
}


.img-wrap2 {
display: none;
}


.img-wrap3 {
  width: 35rem;        /* the box size you already chose  */
  height: auto;       /*  ── square, adjust as you like  */
  display: flex;      /* centers the image inside        */
  justify-content: center;
  align-items: center;
  overflow: hidden;   /* optional: cut off any spillover */
}

/* reset the hard-coded size on the image */
.skills-img {
  width: 40rem;
  height: auto;
  min-width: 24rem;
  object-fit: cover;   
  padding: 7rem 0 0 2rem;
}

.skills-img-starbucks {
  width: 100rem;
  height: auto;
  min-width: 32rem;
  object-fit: cover;   
  padding: 3rem 0 0 2rem;
}



.title-skills{
  color: #FFF8E8;
  font-size: 2rem;
  font-weight: 200;
  padding-top: 2rem;
  margin: 0px;
}

.title-skills2{
  color: #FFF8E8;
  font-size: 2.5rem;
  padding-left: 3rem;
  margin: 0px;
}

.skills-list{
  list-style: none;  
 font-size: 1.2rem;
 border-top: 1px solid rgba(255, 255, 255, 0.12); 
 padding-top: 1rem;
}

li{
  margin-top: 3rem;
  line-height: 1.5rem;
}

.core-skills{
  padding-top: 3rem;
  font-size: 2rem;
  font-weight: 600;
}

.leadership{
  list-style: square;
  margin-top:0.5rem;
  line-height: 1.5rem;
}

.leadership-list{
  padding-left: 4rem;
  padding-top: 1rem;
  padding-bottom: 5rem;
}










/* Responsive part==========================================
============================================================
============================================================ */

@media (max-width: 1024px) {

  .about-title{
    color: #FFF8E8;
    font-size: 3rem;
    padding-left: 2rem;
    margin: 0 0 3rem 0;
    height: 7rem;
  }

  .about-section{
    padding-bottom: 2rem;
  }

  .about-me{
    min-width: 7rem;
  }

  .project-section {
    flex-direction: column;
    padding: 2rem 1rem;
    align-items: center;
  }

  .left {
    position: static;
    height: auto;
    align-items: center;
    width: 100%;
  }

.small-right{
min-width: 11rem;
}

  .name{
    align-self:flex-start;   /* this one hugs the left edge of .container */
    margin:.25em 0;
    font-size:2.5rem;
    padding-left: 0em;
   padding-top: 3rem;
  }

  .container{
    width: 80%;
  }

  .texts{
    min-width: 18rem;
    padding-left: 0;
    text-align: center;
  }
  
  .options{
    width: 100;
  }

  .small-container {
    padding-left: 20rem;
  }

  .img-smallcontainer{
    padding: 0%;
  }
  
  .filter{
    margin-top: 5rem;
    height: 1rem;
    align-self: center;
  
  }


  .right {
    width: 100%;
    margin-top: 1rem;
    align-items: center;
  }

  .btn {
    font-size: 1rem;
    width: 100%;
  }

  .skills-section{
    align-items: center;
    padding-bottom: 4rem;
  }

  .skills-container-small{
    display: block;
    align-items: start;
    height: fit-content;
  }

  .options{
    display: space-between;
    justify-content: center;
    width: 100%;
  }

  .skills-list{
    display:Block;
    padding: 0px;
  }

  .text-wrap{
    width: fit-content;
  }



  .title-skills{
    padding-top: 10rem;
  }

  /* IMG============ */

  .img-wrap{
    display: none;
  }
  
  .img-wrap2{
    padding: 2rem 0 2rem 0;
    width: 16rem;        /* the box size you already chose  */
    display: flex;      /* centers the image inside        */
    justify-content: center;
    align-items: center;
    overflow: hidden; 
  }

  .img-wrap3{
    width: 20rem;        /* the box size you already chose  */
    display: absolute;      /* centers the image inside        */
    justify-content: center;
    align-items: center;
    overflow: hidden; 
  }

  .skills-img {
    display:flex;
    width: 18rem;
    padding: 0 0 0 0;
  }
  
  .skills-img-starbucks {
  display:flex;
  padding: 0 0 0 0;
  padding-bottom: 0rem;
  padding-right: 2rem;
  }


  /* ========= */

  .cards-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .projectCard{
    position: fixed;
    width: 18rem;
    height: 25rem;
    transform: translate(-20%, -65%);
  }

  /* Close button (shows only when panel is visible) */
#closePreview{
  position:absolute;
  top:.5rem; right:.75rem;
  font:inherit;
  font-size:1.6rem;
  line-height:1;
  color:#FFF8E8;
  background:transparent;
  border:0;
  cursor:pointer;
  opacity:.9;
}
.preview{
  justify-self: center;
  bottom: 7rem;
  left: auto;
  width:15rem;
}

#prevTitle {
  font-size: 1.2rem;    /* bigger title */
  line-height: 1.3;     /* space between lines */
  margin: 0rem 0rem 0.1rem 0rem;
  padding: 0rem 0rem 0rem 1rem;

}

/* Description text */
#prevDesc {
  font-size: 0.9rem;      /* normal body size */
  line-height: 1.4;     /* more readable spacing */
  color: #d7d1c1;       /* softer color */
  margin-bottom: 0.75rem;
  margin: 0rem 0rem 0.1rem 0rem;
  padding: 0rem 0.8rem 0rem 0.8rem;
}

/* Tools list */
#prevTools {
  font-size: 0.8rem;    /* a little smaller */
  line-height: 1;
  color: #aaa;
  font-style: italic;
  margin: 0rem 0rem 0.8rem 0rem;
  padding: 0rem 0.8rem 0rem 0.8rem;
}

.closePreview{
  display: flex;
}





  .end{
    padding-bottom: 5rem;
  }

}