/* HERO ----------------------------------------------------------*/
.hero-landing{
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
 
}

.hero-container{
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

/* HERO REVEAL (wipe from left -> right) ----------------------------------- */
.hero-reveal{
  position: relative;
  overflow: hidden;
  display: block;
}

.hero-reveal::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #4999d4;
  transform: translateX(0);
  z-index: 3;
  pointer-events: none;
}

.hero-reveal.is-revealed::before{
  transform: translateX(101%);
}

.hero-reveal.is-revealing::before{
  animation: hero-wipe 900ms cubic-bezier(.22,.75,.25,1) forwards;
}

@keyframes hero-wipe{
  to{ transform: translateX(101%); }
}

.hero-title{
  font-family: "headline";
  font-style: italic;
  font-size: 5rem;
  text-transform: uppercase;
  color: #ffffff;
  line-height: .9;
  margin-bottom: 24px;
  user-select: none;
}

.hero-line{
  display: inline-block;   
  white-space: nowrap;
  width: auto;
}



  .hero-intro{
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 200;
    font-size: 1.2rem;
    color: #d8d8d8;
    line-height: 1.4;
    text-align: left;
    margin: 0;
    user-select: none;
    z-index: 9999;
  }

.typewriter{
  display: inline;          /* inline so it wraps naturally */
  white-space: normal;      /* allow line breaks */
  overflow: visible;        /* don't clip wrapped lines */
  max-width: 100%;
  overflow-wrap: anywhere;  /* prevent horizontal overflow */
  word-break: break-word;
  z-index: 5;
}


.typewriter .tw-text{
  z-index: 999;
  /* inherits .hero-intro styling */
}

.typewriter .tw-cursor{
  display: inline-block;
  width: 0.6ch;
  margin-left: 0.1ch;
  transform: translateY(0.05em);
  border-right: 2px solid #4999d4; /* blue cursor for contrast */
  animation: tw-blink 0.9s step-end infinite;
  height: 1.2em;
  vertical-align: -0.15em;
}


/* Start hidden until JS kicks it off (prevents a blank line + cursor) */
.typewriter.is-waiting{
  opacity: 0;
}
.typewriter.is-typing{
  opacity: 1;
}

@keyframes tw-blink{
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .typewriter .tw-cursor{ animation: none; opacity: 0; }
}


@media (max-width: 575.99px){
  .hero-intro{
    font-size: .9rem;
  }

  .hero-title{
    font-size: 5rem;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 400;
    color: #ffffff;
    line-height: .9;
    margin-bottom: 8px;
    user-select: none;
  }
}

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

.hero-landing{
  position: relative;
  overflow: hidden;
}

/* Cursor-following image floater */
.hero-floater{
  position: absolute;
  left: 0;
  top: 0;
 
  /* 20% smaller */
  width: clamp(128px, 14.4vw, 224px);

  /* cap tall verticals */
  max-height: clamp(180px, 26vh, 320px);

  transform: translate3d(-9999px, -9999px, 0);
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.hero-floater.is-active{ opacity: 1; }

/* Subtle ease-in pop (doesn't fight JS transform) */
.hero-floater.is-active .hero-floater__media{
  animation: floaterPop 260ms cubic-bezier(.2,.9,.2,1);
}
@keyframes floaterPop{
  from { transform: scale(.92); opacity: .0; }
  to   { transform: scale(1);   opacity: 1; }
}

.hero-floater__media{
  position: relative;
  width: 100%;
  height: auto;

  /* no rounding */
  border-radius: 0;
  overflow: hidden;

  background: transparent;
  backdrop-filter: blur(6px);

  /* baseline behavior */
  display: flex;
  align-items: flex-end;     /* bottom edge baseline */
  justify-content: center;
}

.hero-floater__img{
  display: block;
  opacity: 80%;

  /* keep natural aspect */
  width: auto;
  height: auto;

  /* never exceed floater box */
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
  object-position: center;
}

/* Hint text */
.hero-floater__hint{
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate3d(-50%, 10px, 0);

  font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.55);
  padding: 6px 10px;
  border-radius: 999px;

  opacity: 0;
  transition: opacity 220ms ease;
  white-space: nowrap;
}

.hero-floater.is-active .hero-floater__hint{
  opacity: 1;
}

.hero-floater__media{
  min-height: 120px; /* prevents “invisible until image loads” */
}

@media (max-width: 767px){
  .hero-floater{
    display: none !important;
  }
}


@media (prefers-reduced-motion: reduce){
  .hero-floater{ display:none; }
}







/* HERO CURSOR TRAIL (pooled emitter) --------------------------------------------- */
/* Uses existing .hero-floater__media / .hero-floater__img styling for the “frame”. */

.hero-landing{
  position: relative; /* anchor absolute trail + create stacking context */
  overflow: hidden;   /* keep trail clipped inside hero */
}

/* Keep the hero copy ABOVE the trail */
.hero-landing .container,
.hero-landing .container-fluid{
  position: relative;
  z-index: 5;
}

/* Specifically keep the TLDR/typewriter line above everything */
.hero-landing .hero-intro.typewriter{
  position: relative;
  z-index: 6;
}

.hero-trail{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* behind copy, above background */
}

.hero-trail__item{
  position: absolute;
  left: 0;
  top: 0;

  width: clamp(128px, 14.4vw, 224px);


  /* Constrain tall portrait images */
  height: clamp(160px, 22vh, 256px);
transform: translate3d(-9999px, -9999px, 0);
  opacity: 0; /* JS stamps in at 1 instantly */
  transition: opacity 260ms ease;
  will-change: transform, opacity;
}


/* Trail sizing overrides so portrait images respect the item height */
.hero-trail .hero-floater__media{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start; /* 👈 top align */
  justify-content: center;
}


.hero-trail .hero-floater__img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.hero-trail__item.is-active{
  opacity: var(--trail-opacity, 1);
}

/* IMPORTANT: the previous hero floater style capped image opacity at 80%.
   Override inside the trail so the HEAD is truly 100% opaque. */
.hero-trail .hero-floater__img{
  opacity: 1 !important;
}

/* Pop on spawn (media only so it doesn’t fight JS position) */
.hero-trail__item.is-active .hero-floater__media{
  animation: floaterPop 220ms cubic-bezier(.2,.9,.2,1);
}

/* Hint text (subtle, optional) */
.hero-trail__hint{
  position: absolute;
  left: 24px;
  bottom: 24px;

  font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.45);
  padding: 6px 10px;
  border-radius: 999px;

  opacity: 0;
  transition: opacity 220ms ease;
}
.hero-landing:hover .hero-trail__hint{ opacity: 1; }

@media (max-width: 767px){
  .hero-trail{ display:none !important; }
}

@media (prefers-reduced-motion: reduce){
  .hero-trail{ display:none !important; }
}




/* STICKY STORY--------------------------------------*/
:root{
  --gutter: 32px;
  --peek: 80px;
  --panelH: 55vh;
}

/* Make sizing predictable everywhere */
.hmeSticky_sect,
.hmeSticky_grid,
.hmeSticky_col,
.hmeSticky_gutter,
.hmeStickyBoxes{
  box-sizing: border-box;
}

/* section */
.hmeSticky_sect{
  background: transparent;
  padding-bottom: 0; /* we’ll control release via a tiny end spacer */

  /* Full-bleed (100vw) even when nested inside Bootstrap containers */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* prevent any accidental horizontal scroll from sticky/padding math */
  overflow-x: clip; /* use hidden if you need broader support */
}

/* grid */
.hmeSticky_grid{
  display: grid;
  grid-template-columns: var(--gutter) 1fr var(--gutter);
  align-items: start;
  width: 100%;
  max-width: 100%;
}

/* Kill Bootstrap container-fluid padding that shifts the section */
.hmeSticky_grid.container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
  max-width: 100%;
}

.hmeSticky_gutter{ background: transparent; }

.hmeSticky_col{
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* panels */
.hmeStickyBoxes{
  position: sticky;
  top: calc(var(--peek) + (var(--i) * var(--peek)));
  height: var(--panelH);

  /* padding stays inside width thanks to border-box */
  padding: 6vh var(--gutter);

  display: flex;
  border-radius: 0;
  z-index: calc(10 + var(--i));

  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* this controls how much of the previous panel shows */
.hmeStickyBoxes:not(:last-of-type){
  margin-bottom: var(--peek); /* 64px peek */
}

/* center content */
.hmeStickyCenter{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding: 24px;

}

.hmeArrow{ display:block; opacity: .9; }

.bg-yellow{ background:#4999d4; color:#fff; }
.bg-blue  { background:#d6d0b0; color:#fff; }
.bg-red   { background:#f9a336; color:#fff; }
.bg-white { background:#efebdb; color:#080808; }

.hmeStickyText{
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  text-align: justify;
  text-align-last: justify;
  letter-spacing: .02em;
  font-size: clamp(40px, 10vw, 292px);
  line-height: 1.02;
  user-select: none;


  /* helps prevent “visual spill” with huge words on small screens */
  max-width: 100%;
}

/* only 64px of scroll after the 4th panel lands, then release */
.hmeStickyEnd{
  height: var(--peek);
}

/* mobile */
@media (max-width: 767.98px){
  .skillsSelect__btn{ border-bottom-width: 1px; border-bottom-color: rgba(128,128,128,0.5); }
  .skillsTile{ width: clamp(130px, 17vw, 230px); aspect-ratio: 4 / 3; }

  :root{ --panelH: 55vh; 
      --gutter: 0px;
  }

  /* single column layout */
  .hmeSticky_grid{
    grid-template-columns: 1fr;
    padding: 0;
  }

  /* keep a side gutter on mobile (preferred) */
  .hmeSticky_col{
    padding-inline: var(--gutter);
  }

  /* avoid double-gutters: col provides outer gutter, panels don't add more */
  .hmeStickyBoxes{
    padding-left: 0;
    padding-right: 0;
  }

  .hmeStickyText{
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 15vw;
}
  .hmeSticky_gutter{ display:none; }
}

/* Neon chaos text — like hamburger spans, but clipped into the letters */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hmeStickyText--neon{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    text-align: justify;
    text-align-last: justify;
    background-image: radial-gradient(
      circle at 30% 30%,
      #ece5c4,
      #4999d4,
      #f9a336,
      #efebdb
    );
  font-size: clamp(40px, 10vw, 292px);
    background-size: 200% 200%;
    background-position: 0% 0%;
    
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

    /* only color motion, no geometry motion */
    animation: hmeNeonChaos 8s ease-in-out infinite alternate;
  }

  @keyframes hmeNeonChaos {
    0%   { background-position: 0% 0%;    background-size: 200% 200%; }
    25%  { background-position: 80% 30%;  background-size: 400% 400%; }
    50%  { background-position: 20% 90%;  background-size: 300% 300%; }
    75%  { background-position: 100% 10%; background-size: 600% 600%; }
    100% { background-position: 0% 0%;    background-size: 200% 200%; }
  }
}


  .hmeStickyText--neon{
    background-image: radial-gradient(
      circle at 30% 30%,
      #ece5c4,
      #4999d4,
      #f9a336,
      #FFD400
    );

    background-size: 200% 200%;
    background-position: 0% 0%;

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

    /* only color motion, no geometry motion */
    animation: hmeNeonChaos 8s ease-in-out infinite alternate;
  }

@media (max-width: 767.98px){
  .hmeStickyText--neon {
    font-size: 15vw;}
  

}


/* ABOUT / SKILLS ACCORDION (skillsProjects) */

/* Keep punctuation glued to the skill link on mobile (prevents orphaned '?') */
.skillsInlineLink::after,
.skillsInlineSkill::after{
  content: "?";
  display: inline;
  margin-left: 0;
  text-decoration: none; /* don't underline punctuation */
}
.skillsProjects{
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: clip; /* prevents horizontal scroll + keeps tiles contained */
  background: transparent;
}

.skillsStage{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; /* allow UI to work cleanly */
}

.skillsTile{
  position: absolute;
  z-index: 1;
  pointer-events: auto; /* re-enable links */
  display: block;
  width: clamp(162px, 19.8vw, 288px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(var(--tileScale, 1)) translateZ(0);
  transition: opacity 180ms ease, transform 220ms ease;
  opacity: 1;
  will-change: transform, opacity;
  text-decoration: none;
}

.skillsTile__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 220ms ease;
  display: block;
}

/* Project tile hover affordance */
.skillsTile{
  cursor: pointer;
}

.skillsTile__img{
  transition: transform 220ms ease;
  will-change: transform;
}

.skillsTile:hover{
  z-index: 2;
}


.skillsTile:hover .skillsTile__img,
.skillsTile:focus-visible .skillsTile__img{
  transform: scale(1.04);
}

.skillsInlineLink,
.skillsInlineSkill{
  display: inline-flex;
  align-items: baseline;
}


.skillsUI{
  position: relative;
  z-index: 5;
  height: 100%;
  width: 100%;
  pointer-events: none; /* opt-in per interactive control */
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Mobile lockup */
.skillsMobile{
  display: none;
  width: 100%;
  padding: 0 24px;
}



/* === SKILLS / PROJECTS (streamlined: links only, no filtering UI) === */

.skillsLockup{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 780px;
  padding: 0 24px;
  pointer-events: auto;
}

.skillsSentence__copy--single{
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 1.5rem;
  line-height: 1.35;
  color: #ffffff;
  letter-spacing: 2.5px;
}

.skillsInlineLink,
.skillsInlineSkill{
  font: inherit;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}


.skillsInlineLink:hover .skillText,
.skillsInlineSkill:hover .skillText{
  color: #4999d4;
}

.skillEmoji{
  margin-right: 6px;
}


/* === Skills lockup (stacked list layout) — preserves existing type sizing === */
.skillsSentence__copy--single.skillsLockupList{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

/* Lines: emoji + text, centered */
.skillsLockupLine{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
}

/* Underline on text only */
.skillsLockupLine .skillText{
  text-decoration: underline;
  text-decoration-thickness: .5px;
  text-underline-offset: 0.2em;
}

/* Keep any “glued ?” pseudo punctuation from affecting this lockup */
.skillsLockupList .skillsInlineLink::after,
.skillsLockupList .skillsInlineSkill::after{
  content: none !important;
}

/* Mobile: slightly tighter stack */
@media (max-width: 767.98px){
  .skillsSentence__copy--single.skillsLockupList{ gap: 8px; }
}




/* Tile badges (bottom-left skill emojis, max 3) */
.skillsTile{
  overflow: hidden;
}

.skillsTile__badges{
  border-radius: 999px;
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  gap: 6px;
  z-index: 3;
  pointer-events: none;
  font-size: 14px;
  line-height: 1;
  padding: 10px 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(2px);
}

@media (max-width: 767.98px){
  .skillsSentence__copy--single{
    font-size: 1.2rem;
    line-height: 1.2;
    letter-spacing: 1.5px;
  }

  .skillsTile__badges{
    font-size: 12px;
    padding: 6px;
    left: 4px;
    bottom: 4px;
  }
}


/* Tile aspect ratios */
.skillsTile{
  aspect-ratio: 16 / 9;
}
@media (max-width: 767.98px){
  .skillsTile{
    aspect-ratio: 16 / 9;
    width: clamp(130px, 22vw, 210px);
  }
}



/* HERO MOBILE FUN (tap for fun) --------------------------------------------- */
/* Mobile-only button + full-hero pop image layer (under hero copy) */

.hero-fun{
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 4; /* under hero copy (z=5/6), above pop (z=2) */
  display: none; /* enabled on mobile */
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.hero-funBtn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #c6c6c6;
  background: transparent;
  color: #c6c6c6;
  display: grid;
  place-items: center;
  font: 500 20px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hero-funBtn span{
  display: inline-block;
  transform: translateY(-1px); /* try -1px or -2px */
}

.hero-funBtn:active{
  transform: scale(0.96);
}

.hero-funLabel{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.78);
}

.hero-funPop{
  position: absolute;
  inset: 0;
  z-index: 2; /* behind copy */
  pointer-events: none;
  opacity: 0;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.hero-funPopImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  transform: translateZ(0);
}

/* state classes */
.hero-funPop.is-active{
  animation: heroFunIn 180ms cubic-bezier(.2,.9,.2,1) forwards;
}
.hero-funPop.is-leaving{
  animation: heroFunOutElegant 900ms cubic-bezier(.2,.9,.2,1) forwards;
}
.hero-funPop.is-leaving .hero-funPopImg{
  animation: heroFunOutImg 900ms cubic-bezier(.2,.9,.2,1) forwards;
}

/* entrance: quick pop in */
@keyframes heroFunIn{
  0%   { opacity: 0; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1.02); }
}

/* exit: floaty + elegant (longer tail) */
@keyframes heroFunOutElegant{
  0%   { opacity: 1; transform: scale(1.02) translateY(0px); }
  100% { opacity: 0; transform: scale(1.035) translateY(18px); }
}

/* image: keep scale stable so there’s no “zoom bump” */
@keyframes heroFunOutImg{
  0%   { filter: saturate(1.03) contrast(1.03) blur(0px); transform: scale(1); }
  100% { filter: saturate(1.03) contrast(1.03) blur(0.8px); transform: scale(1); }
}

@media (max-width: 767.98px){
  .hero-fun{ display: flex; }
}

@media (prefers-reduced-motion: reduce){
  .hero-funPop.is-active,
  .hero-funPop.is-leaving,
  .hero-funPop.is-leaving .hero-funPopImg{
    animation: none !important;
  }
}