/* Handwriting hero — ported from handwriting-test (style #16) */

body.is-home-intro {
  background-color: #f4f1ea;
  background-image: url("../images/home-paper-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Visible immediately during intro — no fade-in that hides the first strokes. */
body.is-home-intro #home.section--hero {
  opacity: 1;
  transition: none;
}

#home.section--hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--nav-height);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #f4f1ea;
  background-image: url("../images/home-paper-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  filter: blur(0) saturate(1);
  transform: scale(1);
  transition: opacity 1.1s ease;
}

#home.section--hero.is-visible {
  opacity: 1;
}

/* Full-screen overlay while dissolving into About Me */
#home.section--hero.is-dissolving {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
  margin: 0;
  padding-top: var(--nav-height);
  opacity: 1;
  pointer-events: none;
  will-change: opacity, transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

#home.section--hero.is-exiting {
  opacity: 0;
  filter: none;
  transform: translateZ(0) scale(1.025);
  pointer-events: none;
  transition:
    opacity 1.27s cubic-bezier(0.33, 1, 0.68, 1),
    transform 1.27s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Wheel / touch skip: shorter, softer dissolve */
#home.section--hero.is-exiting.is-exiting--fast {
  transition-duration: 0.54s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

#home.section--hero.is-gone,
body.home-intro-skipped #home.section--hero:not(.is-dissolving) {
  display: none;
  min-height: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Fabric under the overlay while intro UI (nav/badge) stays hidden */
body.is-home-intro.home-intro-revealing {
  background-color: #ededeb;
  background-image: url("../images/fabric-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Hide top nav for the whole home intro / handwriting sequence */
body.is-home-intro .site-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
  animation: none;
  transition: none;
}

/* Hide Available for work badge during intro */
body.is-home-intro .hero-badge {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition: none;
}

/* Subtle scroll cue at the bottom while the intro plays */
.home-intro-scroll-hint {
  display: none;
}

body.is-home-intro:not(.home-intro-revealing) .home-intro-scroll-hint {
  display: block;
  position: fixed;
  bottom: clamp(0.85rem, 2.8vh, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(28, 28, 28, 0.71);
  white-space: nowrap;
  pointer-events: none;
  animation: home-intro-hint-in 1.04s cubic-bezier(0.22, 1, 0.36, 1) 1.08s both;
}

body.is-home-intro #home.is-dissolving .home-intro-scroll-hint,
body.is-home-intro #home.is-exiting .home-intro-scroll-hint,
body.home-intro-skipped .home-intro-scroll-hint {
  display: none;
}

@keyframes home-intro-hint-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(2.75rem);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-home-intro:not(.home-intro-revealing) .home-intro-scroll-hint {
    animation: none;
    opacity: 1;
  }
}

body:not(.is-home-intro) .site-nav {
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
    visibility 1.1s 0.15s;
}

body:not(.is-home-intro) .hero-badge {
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
    visibility 1.1s 0.2s;
}

#home .handwriting-stage {
  /* +30% vs previous min(98vw, 90vh, 1400px) */
  width: min(98vw, 117vh, 1820px);
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  margin-inline: auto;
}

#home .handwriting-stage svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

#home #pen-tip,
#home #pen-tip-2 {
  transition: none;
}

#home .ink-dust {
  stroke: #8a8a8a;
  stroke-width: 7.49;
  opacity: 0.22;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#f-combo-blur);
}

#home .ink-ribbon-outer {
  stroke: url(#g-ribbon-a);
  stroke-width: 6.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#f-combo-paper);
}

#home .ink-ribbon-mid {
  stroke: url(#g-ribbon-b);
  stroke-width: 4.06;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#f-combo-paper);
}

#home .ink-main {
  stroke: url(#g-ribbon-c);
  stroke-width: 1.87;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#f-combo-paper);
}

@media (max-width: 768px) {
  #home .handwriting-stage {
    width: min(100vw, 91vh, 100%);
    padding-inline: 0.5rem;
  }
}