/* Homepage ----------------------------------------------------------------
   The homepage carries the display scale and its own section rhythm. Values
   are lifted from the homepage design reference.
-------------------------------------------------------------------------- */

/* Hero --------------------------------------------------------------------
   Scales and stacks under the later sections via position:sticky. The scale
   and fade are driven by --hero-scale / --hero-fade, which the page script
   updates from scroll position exactly as the prototype's syncHero() does.
-------------------------------------------------------------------------- */

.hero {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  padding:clamp(72px, 10vw, 112px) max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2));
  text-align:center;
  position:sticky;
  top:0;
  z-index:0;
  background:#FFFFFF;
  transform-origin:50% 20%;
  transform:scale(var(--hero-scale, 1));
  opacity:var(--hero-fade, 1);
  will-change:transform, opacity;
}

.hero__inner {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  width:100%;
}

.hero__eyebrow { margin-bottom:-14px; }

.hero__title {
  margin:0;
  max-width:1080px;
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:clamp(40px, 8vw, 94px);
  line-height:1.05;
  letter-spacing:-0.02em;
  text-wrap:pretty;
  padding:18px 0;
}

/* The per-word mask. Selectors are written through .hero so they outrank the
   global [data-mask] rules regardless of stylesheet order; the hero's timing
   (1300ms, and an opacity leg) differs from the shared word mask. */
.hero .hero__title > span {
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:0.06em;
}
.hero .hero__title > span > span {
  display:inline-block;
  color:inherit;
  transform:translateY(110%);
  opacity:0;
  transition:
    transform 1300ms var(--ease-spring) 0ms,
    opacity 900ms ease 0ms;
}
.hero .hero__title > span:nth-of-type(2) > span { transition-delay:210ms; }
.hero .hero__title > span:nth-of-type(3) > span { transition-delay:420ms; }
.hero .hero__title > span:nth-of-type(4) > span { transition-delay:630ms; }
.hero .hero__title > span:nth-of-type(5) > span { transition-delay:840ms; }
.hero .hero__title[data-shown] > span > span { transform:translateY(0%); opacity:1; }

.hero .hero__title > span > .hero__word-clarity { color:#8B7BD8; }

.hero__bio {
  margin:0;
  max-width:44em;
  font-size:clamp(16.5px, 1.7vw, 19px);
  line-height:1.62;
  color:#4E625B;
  font-weight:300;
  opacity:0;
  transform:translateY(22px);
  transition:
    transform 1050ms var(--ease-spring) 520ms,
    opacity 700ms ease 1800ms;
}

.hero__actions {
  display:flex;
  gap:14px;
  margin-top:8px;
  opacity:0;
  transform:translateY(22px);
  transition:
    transform 1050ms var(--ease-spring) 720ms,
    opacity 700ms ease 1800ms;
}

.hero .hero__title[data-shown] ~ .hero__bio,
.hero .hero__title[data-shown] ~ .hero__actions {
  opacity:1;
  transform:translateY(0px);
}

/* Hero buttons. Both restate colour on :hover so they outrank a:hover, which
   the prototype's inline colour would otherwise have beaten. */
.hero__actions .btn {
  padding:clamp(12px, 1.5vw, 15px) clamp(20px, 3vw, 30px);
  border-radius:99px;
  font-weight:500;
  font-size:clamp(13.5px, 1.35vw, 15px);
}
.hero__actions .btn--primary { background:#C4F0DA; color:#123028; }
.hero__actions .btn--primary:hover { background:#9FE0C2; color:#123028; }
.hero__actions .btn--secondary { border:1px solid #D5E4DB; color:#1B302A; }
.hero__actions .btn--secondary:hover { border-color:#7BD8B0; color:#0E7A55; }

/* Post-hero ---------------------------------------------------------------- */

#post-hero {
  position:relative;
  z-index:2;
  background:#FFFFFF;
}

/* Skills band -------------------------------------------------------------- */

.skills-head {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:clamp(72px, 10vw, 118px) max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2)) 80px;
  text-align:center;
  background:#FEFBFB;
}
.skills-head h2 {
  margin:0;
  max-width:none;
  white-space:nowrap;
  font-family:'Figtree', sans-serif;
  font-weight:400;
  font-size:clamp(29px, 4.4vw, 48px);
  line-height:1.1;
  letter-spacing:-0.02em;
}

.skills-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:72px 48px;
  padding:0 max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2)) clamp(72px, 10vw, 118px);
  background:#FEFBFB;
}
.skill { display:flex; flex-direction:column; gap:18px; }
.skill h3 {
  margin:0;
  font-family:'Figtree', sans-serif;
  font-weight:400;
  font-size:24px;
}
.skill p {
  margin:0;
  font-size:16.5px;
  line-height:1.66;
  color:#4E625B;
  font-weight:300;
}

/* Featured work ------------------------------------------------------------ */

.work { padding-top:64px; }

.work__head {
  padding:clamp(32px, 4.5vw, 48px) max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2)) 28px;
  position:sticky;
  top:0;
  z-index:5;
  background:#FFFFFF;
}

/* About -------------------------------------------------------------------- */

.about {
  position:relative;
  display:grid;
  grid-template-columns:0.68fr 1fr;
  gap:56px;
  padding:clamp(64px, 8vw, 88px) max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2)) clamp(72px, 10vw, 116px);
  border-top:1px solid #E3EDE7;
}
.about__intro { display:flex; flex-direction:column; gap:28px; }
[data-portrait] {
  width:188px;
  height:188px;
  border-radius:50%;
  flex:none;
  display:block;
  object-fit:cover;
}
.about__title {
  margin:0;
  max-width:500px;
  font-family:'Figtree', sans-serif;
  font-weight:400;
  font-size:clamp(31px, 4.8vw, 52px);
  line-height:1.06;
  letter-spacing:-0.02em;
}
.about__title > span:nth-of-type(2) > span { transition-delay:85ms; }
.about__title > span:nth-of-type(3) > span { transition-delay:170ms; }
.about__title > span:nth-of-type(4) > span { transition-delay:255ms; }
.about__title > span:nth-of-type(5) > span { transition-delay:340ms; }
.about__title > span:nth-of-type(6) > span { transition-delay:425ms; }

.about__copy {
  display:flex;
  flex-direction:column;
  gap:26px;
  padding-top:46px;
}
[data-aboutpara] {
  margin:0;
  font-size:clamp(17px, 1.75vw, 20px);
  line-height:1.66;
  color:#4E625B;
  font-weight:300;
}

/* Footer ------------------------------------------------------------------- */

/* Pixel character ---------------------------------------------------------
   Layers only. She is Phase 6; both sprites start at opacity 0 exactly as the
   prototype does, so nothing renders until her logic is ported.
-------------------------------------------------------------------------- */

#om-sprite-layer {
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
#om2-layer {
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
}
#om-sprite,
#om2-sprite {
  position:absolute;
  left:0;
  top:0;
  width:160px;
  height:128px;
  transform:translate3d(0, 0, 0);
  opacity:0;
  transition:opacity 700ms ease;
  pointer-events:none;
}
#om2-sprite { z-index:1; }

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1040px) {
  [data-pair] { grid-template-columns:minmax(0, 1fr) !important; row-gap:34px !important; }
  #om2-layer { display:none !important; }
}

@media (max-width: 860px) {
  [data-cols3] { grid-template-columns:minmax(0, 1fr) !important; gap:44px !important; }
  [data-two-up] { grid-template-columns:minmax(0, 1fr) !important; }
  [data-sechead] { flex-wrap:wrap; align-items:flex-start !important; gap:16px !important; }
  [data-nav-links] { flex-wrap:wrap; }
  h2[data-nowrap] { white-space:normal !important; }
}

@media (max-width: 760px) {
  #om-sprite-layer { display:none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { transform:none !important; opacity:1 !important; }
  .hero .hero__title > span > span,
  .hero__bio,
  .hero__actions {
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* Sprite internals ---------------------------------------------------------
   Markup and styling are in place so Phase 6 is a pure logic port. Both
   sprites sit at opacity 0 until that logic fades them in.
-------------------------------------------------------------------------- */

#om-bubble,
#om2-bubble {
  position:absolute;
  left:50%;
  transform:translate(-50%, 6px);
  opacity:0;
  transition:opacity 420ms ease, transform 520ms cubic-bezier(0.16, 0.84, 0.28, 1);
  white-space:nowrap;
  max-width:none;
  background:#FFFFFF;
  color:#1B302A;
  font-size:14px;
  font-weight:400;
  line-height:1.45;
  letter-spacing:-0.005em;
  padding:9px 14px;
  border-radius:14px;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
  pointer-events:none;
}
#om-bubble { bottom:98px; }
#om2-bubble { bottom:97px; }

#om-tail,
#om2-tail {
  position:absolute;
  left:50%;
  bottom:-4px;
  width:9px;
  height:9px;
  margin-left:-4.5px;
  background:#FFFFFF;
  border-right:1px solid #E9E9E6;
  border-bottom:1px solid #E9E9E6;
  transform:rotate(45deg);
}

#om-shadow,
#om2-shadow {
  position:absolute;
  left:64px;
  top:91px;
  width:32px;
  height:9px;
  border-radius:50%;
  background:rgba(27, 48, 42, 0.09);
}
#om-shadow { pointer-events:none; }

#om-hit {
  position:absolute;
  left:58px;
  top:36px;
  width:44px;
  height:62px;
  pointer-events:auto;
  cursor:pointer;
}
#om2-hit {
  position:absolute;
  left:52px;
  top:44px;
  width:56px;
  height:56px;
  pointer-events:auto;
  cursor:pointer;
}

#om-sprite-img,
#om2-img {
  width:160px;
  height:128px;
  background-repeat:no-repeat;
  image-rendering:pixelated;
}
#om-sprite-img {
  background-image:url('/assets/sprite-walk.png');
  background-size:640px 1792px;
  background-position:0 0;
}
#om2-img {
  background-image:url('/assets/sprite-idle.png');
  background-size:320px 1536px;
  background-position:0 -384px;
}