/* === Fonts ===
  Update the path if your braven.otf lives elsewhere.
*/
@font-face {
 font-family: 'Braven';
 src: url('fonts/Braven.otf') format('opentype');
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}

/* ===== Global ===== */
:root{
 /* Easy spacing knobs */
 --track: 0.035em;   /* letter spacing (between characters) */
 --space: 0.25em;    /* word gap (between “Tanner” and “Hutchinson”) */
}

:root{
  /* ...your existing vars... */
  --hand-shift: -10vw;       /* move left (-) or right (+) */
  --hand-min: 120px;        /* smallest size */
  --hand-ideal: 22vw;       /* scales with viewport */
  --hand-max: 390px;        /* largest size */
}


html, body {
 height: 100%;
 margin: 0;
 font-family: 'Braven', Arial, sans-serif;
 background: #f0f0f0;
}


/* ===== Loading Screen ===== */
.loading-screen {
 position: fixed;
 inset: 0;
 background-color: #ffffff;
 z-index: 10000;
 overflow: hidden;
}


/* Responsive loading logo (bottom-left, scales with viewport) */
#loading-logo{
 position: fixed;
 left: clamp(60px, 10vw, 148px);
 bottom: clamp(60px, 20vh, 180px);
 width: clamp(80px, 16vw, 190px);
 height: auto;
 pointer-events: none;
 z-index: 15000;      /* below the title (20000) */
}


/* Auto-shrink if overlap detected (JS toggles this) */
#loading-logo.logo-compact{
 width: clamp(56px, 14vw, 120px);
 bottom: clamp(8px, 4vh, 36px);
}


@media (max-width: 480px){
 #loading-logo{
   left: 4vw;
   bottom: 4vh;
   width: clamp(64px, 22vw, 140px);
 }
}


/* Circular text */
#text-ring text {
 font-size: 7px;
 font-family: Arial, sans-serif;
 fill: black;
 letter-spacing: 2.3px;
}



/* ===== Single H1 (loader + page) ===== */
.title {
 position: fixed;                 /* centered while in loader / overlay */
 top: 45%;
 left: 50%;
 transform: translate(-50%, -50%) translateZ(0);
 margin: 0;
 font-family: 'Braven', Arial, sans-serif;
 font-size: 90px;
 font-weight: 700;
 line-height: 1;
 color: #000;                     /* black in loader */
 user-select: none;
 pointer-events: none;
 visibility: hidden;              /* prevent flash before JS sets transforms */
 z-index: 20000;                  /* above the loading logo */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: geometricPrecision;
 font-kerning: none;              /* per-letter spans; disable kerning */
 white-space: nowrap;
}


/* Per-letter controls */
.title .letter,
.title .space {
 display: inline-block;
 will-change: transform, opacity;
}


/* Tracking & spaces */
.title .letter { margin-right: var(--track); }
.title .letter:last-child { margin-right: 0; }
.title .space  { width: var(--space); }


/* Keep text AA stable during the color flip (overlay + docked) */
.title,
#first-section-text .title {
 backface-visibility: hidden;
 will-change: transform, color;
}


/* ===== First Section ===== */
section#first-section {
 height: 100vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 background-color: #b0b0b0;
 transform: translateY(-100vh);   /* slides down into view */
 z-index: 10500;
 position: relative;
}


/* The H1 will live here after slide */
#first-section-text {
 position: absolute;
 top: 45%;
 left: 50%;
 transform: translate(-50%, -50%) translateZ(0);
 width: 100%;
 text-align: center;
}


/* When the H1 is inside the first section, it should be white */
#first-section-text .title {
 position: static;
 transform: translateZ(0);
 color: #fff;
 z-index: auto;
 display: inline-block;
}

/* keep the burst inside the hero */
#first-section { overflow: hidden; }

/* minimal texty button */
.ghost-link{
  margin-top: 12px;
  background: none;
  border: none;
  color: #ffffff;
  font-family: 'Menlo', monospace;
  font-size: .9em;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 100px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

/* CREATE the sliding box */
.ghost-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;  /* Start completely off-screen left */
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.383);
  border-radius: 8px;
  z-index: -1;
}

.ghost-link:hover::before {
  animation: slideThrough 0.8s ease infinite;  /* Plays the animation once */
}

/* Animation that moves from left to right and off-screen */
@keyframes slideThrough {
  0% {
    left: -100%;  /* Start off-screen left */
  }
  100% {
    left: 100%;   /* End off-screen right */
  }
}

.ghost-link:hover{ 
  opacity: 1;
}



/* Subtitle (appears after slide completes) */
#subtitle-text {
 margin-top: 2.95em;
 font-family: 'Braven', Arial, sans-serif;
 font-size: 1.35vw;
 letter-spacing: 0.025em;
 font-weight: 400;
 text-align: center;
 color: #554f4f;
 width: 100%;
 opacity: 0;
}

/* Make the button independent of the subtitle/layout */
#explode-btn {
  position: absolute;        /* take it out of the flex flow */
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(3px, 28vh, 1000px);   /* or use top: ... if you prefer */
  z-index: 11050;
  pointer-events: auto;
}

/* Break any spacing coupling with the subtitle */
#explode-btn.ghost-link {
  margin: 0;                 /* ignore the flow spacing */
  padding: 4px 18px;         /* tweak as you like */
}

/* If you prefer placing it near the top instead of the bottom:
#explode-btn { top: calc(45% + 180px); bottom: auto; }
*/



/* --- FIRST-SECTION WORD-ONLY NAV (top-right) --- */
.first-nav{
 position: absolute;
 top: 20px;
 right: clamp(12px, 4vw, 32px);
 display: flex;
 gap: clamp(14px, 2.4vw, 28px);
 z-index: 11000;
 opacity: 0;               /* hidden until intro finishes */
 pointer-events: none;     /* enable when .ready */
 transition: opacity .3s ease;
}
.first-nav.ready{
 opacity: 1;
 pointer-events: auto;
}


.nav-link{
 background: none;
 border: none;
 color: #fff;              /* matches your first-section */
 font: inherit;
 font-size: clamp(14px, 1.2vw, 16px);
 letter-spacing: .02em;
 cursor: pointer;
 padding: 0;
 text-decoration: none;
 outline: none;
}
.nav-link:hover{ text-decoration: underline; }
.nav-link:focus-visible{ outline: 2px solid rgba(255,255,255,.6); outline-offset: 3px; border-radius: 9px; }


/* Drop-down panel (minimal) */
/* Make the parent’s hover area include the space under the word */
.nav-item{
 position: relative;
 padding-bottom: 12px;        /* <-- NEW: extends hover area downward */
}


/* Put the dropdown flush under the word; add a small visual offset,
  but keep it within the parent's hover area */
.dropdown{
 position: absolute;
 top: 100%;                   /* <-- was calc(100% + 8px) */
 right: 0;
 margin-top: 8px;             /* visual spacing, still within padding-bottom */
 display: none;
 min-width: 220px;
 background: none;
 color: #111;
 border-radius: 10px;
 box-shadow: 0 06px 12px rgba(0,0,0,.12);
 padding: 4px;
 z-index: 3000;              /* sit above everything nearby */
}


/* Keep it open on hover (desktop), on touch-open (.open), or keyboard focus */
.nav-item:hover > .dropdown,
.nav-item.open  > .dropdown,
.nav-item:focus-within > .dropdown{
 display:block;
}


/* Optional: a tiny invisible “hover bridge” to be extra safe */
.nav-item::after{
 content: "";
 position: absolute;
 left: -12px;
 right: -12px;
 top: 100%;
 height: 18px;                   /* bridge between word & panel */
}


.drop-link{
 display: inline-block;
 width: auto;
 text-align: left;
 background: none;
 border: none;
 color: #f8f8f8;
 font: inherit;
 font-size: 15px;
 padding: 6px 12px;
 border-radius: 8px;
 cursor: pointer;
 text-decoration: none; /* for <a> items */
}
.drop-link:hover{ background: rgba(0,0,0,.06); }

/* ===== TZH Logo (Top-Left) ===== */
.tzh-logo-container {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 11000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tzh-logo-container.ready {
  opacity: 1;
  pointer-events: auto;
}

.circle-logo {
  position: relative;
  width: 80px;
  height: 80px;
  cursor: pointer;
}

.circle-outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Letter styling - ONLY for TZH logo */
.circle-logo .letter {
  position: absolute;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  transition: all 0.6s ease;
  line-height: 1;
}

/* Initial positions - T top left, Z middle right, H bottom left */
.circle-logo .letter.t {
  top: 16px;
  left: 18px;
}

.circle-logo .letter.z {
  top: 30px;
  right: 16px;
}

.circle-logo .letter.h {
  bottom: 16px;
  left: 18px;
}

/* HOVER STATE - Transform to face */
.circle-logo:hover .letter.t {
  top: 24px;
  left: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  color: transparent;
  font-size: 0;
}

.circle-logo:hover .letter.z {
  top: 24px;
  right: 20px;
  left: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  color: transparent;
  font-size: 0;
}

.circle-logo:hover .letter.h {
  opacity: 0;
}

/* SVG mouth styling */
.mouth-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.circle-logo:hover .mouth-svg {
  opacity: 1;
}

/* Demo sections */
section {
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

/* Base section styling */
section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Theme via variables */
  background: var(--bg, #ffffff);
  color: var(--fg, #000000);
}

/* Per-section themes */
#first-section           { --bg:#b0b0b0; --fg:#ffffff; }
#skills                  { --bg:#101010; --fg:#f2f2f2; }
#life                    { --bg:#030303; --fg:#f4f4f4; }
#achievements-anchor     { --bg:#ffffff; --fg:#000000; }
#bio                     { --bg:#000000; --fg:#f7f7f7; }
#thanks                  { --bg:#ffffff; --fg:#000000; }

/* ==== Skills / GSAP Hand Morph ==== */
#skills { position: relative; }

/* Make the overall skills layout wider and give more room to the text */
#skills .skills-inner{
  max-width: 2000px;                 
  margin: 0 auto;
  display: grid;
  grid-template-columns: 6% 160%;    /* Give even more space to text (was 40% 60%) */
  gap: clamp(16px, 4vw, 60px);      /* Increased gap for more breathing room */
  align-items: center;               /* Center items vertically */
  padding: 0 clamp(20px, 4vw, 60px); /* Add some side padding */
}

/* Ensure the right side (text) can actually expand inside the grid */
#skills .skills-right { 
  min-width: 0;                       /* critical in CSS Grid to prevent squish */
}

/* Remove the restrictive max-width and positioning issues */
#skills-text{
  position: relative;
  width: 100%;
  /* REMOVED: max-width: 72ch; - this was limiting the text width */
}

/* The skill items stack in the same spot, but now fill the available width */
#skills-text .skill-item{
  position: absolute;
  inset: 0;
  /* Remove right padding constraint */
  padding-right: 0;                   
}

/* Remove the transform that was nudging the text box */
#skills #skills-text {
  /* REMOVED: transform: translate(40px, -10px); - this was creating positioning issues */
}

.hand-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#skills-hand-svg{
  width: clamp(var(--hand-min), var(--hand-ideal), var(--hand-max));
  height: auto;
  color: var(--fg);
  cursor: pointer;
  touch-action: manipulation;
  transform: translateX(var(--hand-shift)); /* nudge left/right */
}

#skills-hand-svg path{ 
  vector-effect: non-scaling-stroke;
}

#skills-hand-svg #hand{
  fill: currentColor;              /* make the active hand match var(--fg) */
}

.hand-hint{
  margin: 0;
  font-size: clamp(12px, .95vw, 14px);
  letter-spacing: .02em;
  opacity: .7;
  user-select: none;
}

/* accessible hidden heading */
.visually-hidden{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* SKILLS: overlay copy so only one shows in a fixed spot */
#skill-copy {
  position: relative;         
  min-height: 12rem;          /* Increased min-height for more space */
  width: 100%;
}

#skill-copy .skill-item {
  position: absolute;
  inset: 0;                   
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;       
}

#skill-copy .skill-item.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Center only the skill headings (h3), keep paragraphs left-aligned */
#skill-copy h3 { 
  margin: 0 0 1.2rem; 
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.2;
  text-align: center;  /* Add this line to center the headings */
}

#skill-copy p  { 
  margin: 0; 
  line-height: 1.6;
  font-size: clamp(16px, 1.4vw, 20px);
  text-align: center;    /* Keep paragraphs left-aligned (or remove this line if you want default) */
}

/* Updated text styling - removed the restrictive max-width */
#skill-copy h3 { 
  margin: 0 0 1.2rem; 
  font-size: clamp(24px, 1.8vw, 36px); /* Slightly larger headings */
  line-height: 1.2;
}

#skill-copy p  { 
  margin: 0; 
  line-height: 1.6;           /* Better readability */
  font-size: clamp(14px, 1.4vw, 18px); /* Responsive text size */
  /* REMOVED: max-width: 52ch; - this was the main constraint! */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  #skills .skills-inner {
    grid-template-columns: 1fr; /* Stack on mobile */
    gap: clamp(20px, 6vw, 40px);
    text-align: center;
  }
  
  #skill-copy {
    min-height: 8rem; /* Smaller on mobile */
  }
}

/* ==== Hand Arrows - Responsive Sizing ==== */
.hand-arrows {
  position: absolute;
  bottom: clamp(230px, 15vw, 280px);    /* Responsive bottom position */
  left: clamp(28%, 28vw, 38%);       /* Responsive left position */
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(35px, 10.8vw, 38px);        /* Responsive gap */
  z-index: 100;
}

.hand-arrows img {
  width: clamp(60px, 10vw, 65px);     /* Responsive width: min 80px, scales with viewport, max 180px */
  height: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
  margin: 0;
}

.hand-arrows img:hover {
  transform: scale(1.15);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  #skills .skills-inner {
    grid-template-columns: 1fr;
    gap: clamp(20px, 6vw, 40px);
    text-align: center;
  }
  
  #skill-copy {
    min-height: 8rem;
  }
  
  .hand-arrows {
    bottom: clamp(120px, 10vh, 200px);  /* Different positioning on mobile */
    left: 50%;                          /* Center on mobile */
    gap: clamp(8px, 2vw, 20px);        /* Larger gap on mobile for touch */
  }
  
  .hand-arrows img {
    width: clamp(60px, 15vw, 120px);   /* Different scaling on mobile */
  }
}

/* Professional Achievements Section - CSS Grid Approach */
#achievements-anchor {
  position: relative;
  min-height: 450vh;
  padding: 5vh 5vw;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8vh;
  max-width: 1800px; /* Professional constraint - prevents ultra-wide issues */
  margin: 0 auto;
  background: var(--bg, #ffffff);
  color: var(--fg, #000000);
}

#achievements-anchor h2 {
  text-align: center;
  font-size: calc(2rem + 2vw); /* Scales smoothly without clamp */
  margin: 0;
  color: var(--fg);
  grid-column: 1;
}

/* Grid container for work boxes */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr); /* 12-column system like Bootstrap */
  grid-template-rows: repeat(40, 10vh); /* 8 rows, each 15% of viewport height */
  gap: 2vw;
  position: relative;
  min-height: 400vh; /* Ensures vertical space for yarn line */
}

/* Individual box positioning using grid areas */
#workBox1 {
  grid-column: 6 / 16;  /* Spans columns 4-9 (6 columns wide) */
  grid-row: 7 / 11;      /* Spans rows 1-2 */
}

#workBox2 {
  grid-column: 3 / 13;  /* Spans columns 7-11 (5 columns wide) */
  grid-row: 15 / 19;      /* Spans rows 3-4 */
}

#workBox3 {
  grid-column: 7 / 17;   /* Spans columns 2-7 (6 columns wide) */
  grid-row: 23 / 27;      /* Spans rows 5-6 */
}

#workBox4 {
  grid-column: 6 / 16;  /* Spans columns 5-10 (6 columns wide) */
  grid-row: 31 / 35      /* Spans rows 7-8 */
}

/* Base work box styles */
.work-box {
  background: rgba(176, 176, 176, 1);
  border-radius: 0.5rem;
  position: relative;
  overflow: visible;
  min-height: 250px; /* Fallback minimum */
  min-width: 300px;
  z-index: 10;
}

.work-box canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

/* Title positioning */
.box-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(1rem + 0.5vw); /* Responsive typography */
  font-weight: bold;
  color: black;
  text-align: center;
  transition: top 1.5s ease-out 0.5s, transform 1.5s ease-out 0.5s;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
}

.box-title.moved-up {
  top: -50px;
  transform: translate(-50%, 0);
}

/* ---------YARN SECTION-------------------

/* Life Section - CSS Grid Approach */
#life {
  min-height: 100vh;
  padding: 0 clamp(40px, 8vw, 120px);
  background: var(--bg, #030303);
  color: var(--fg, #f4f4f4);
  overflow: hidden; /* Add this line */

}

.life-content {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12 column grid */
  grid-template-rows: repeat(8, 1fr);     /* 8 row grid */
  height: 100vh;
  gap: 2vw;
  position: relative;
  max-width: 1800px;
  margin: 0 auto;
}

/* Text positioning */
.life-text {
  grid-column: 1 / 6;    /* Spans columns 1-5 */
  grid-row: 3 / 6;       /* Spans rows 3-5 */
  align-self: center;
  z-index: 10;
}

.life-text h2 {
  font-size: clamp(28px, 4vw, 32px);
  margin-bottom: 30px;
  color: var(--fg);
}

.life-text blockquote {
  font-size: clamp(18px, 2.2vw, 20px);
  line-height: 1.6;
  font-style: italic;
  margin: 0;
  color: var(--fg);
}

/* Yarn container positioning */
.yarn-container {
  grid-column: 7 / 12;
  grid-row: 2 / 8; /* Extend to bottom of grid */
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-rows: auto 1fr; /* First row for yarn ball, second fills remaining */
}

.yarn-unified {
  grid-row: 1 / -1; /* Spans entire container height */
  width: 75%;
  justify-self: end;
  filter: invert(1);
  object-fit: fill;
  object-position: top center;
}

.yarn-unified #yarn-unravel path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  stroke-width: 3.2;
}


/* Mobile layout */
@media (max-width: 768px) {
  .life-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    gap: 40px;
    padding: 40px 0;
  }
  
  .life-text {
    grid-column: 1;
    grid-row: 1;
    text-align: center;
  }
  
  .yarn-container {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: 80%;
    max-width: 300px;
  }
  
  .yarn-ball {
    width: 100%;
    top: 0;
    left: -20%;
  }
  
  .yarn-path {
    width: 90%;
    top: 20%;
    right: 0;
  }
}

.yarn-anchor {
  position: absolute;
  bottom: 0;  /* for example, anchor at bottom center */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
}

/* Make the overlay SVG track the achievements section */
#achievements-anchor {
  position: relative; /* anchor for absolute positioning */
}

#yarn-connections {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0; /* behind boxes */
}

.yarn-svg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* so it doesn’t block clicks */
  z-index: 5; /* under your boxes but above background */
}

/* The actual path element */
#continuous-yarn {
  stroke: #333333; /* Dark color - adjust to match your design */
  stroke-width: 3; /* Slightly thicker for visibility */
  fill: none;
  stroke-linecap: round; /* Smooth line endings */
  stroke-linejoin: round; /* Smooth corners */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); /* Subtle shadow for depth */
}

/* Optional: Add a subtle glow effect when yarn reaches each box */
.work-box.yarn-connected {
  box-shadow: 0 0 20px rgba(231, 24, 24, 0.3);
  transition: box-shadow 1.5s ease;
}

@media (max-width: 768px) {
  .life-content {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  
  .yarn-container {
    width: 250px;
    height: 300px;
    margin: 0 auto;
  }  
}