/* --- The Climb - Aydin Ferrari-Shaikh --- */

:root {
  --noir: #050507;
  --night: #171331;
  --dusk: #4a2a5c;
  --ember: #b05a52;
  --dawn: #e8955a;
  --gold: #f6be74;
  --ink-light: #ececf0;
  --ink-dark: #3a2113;
  --display: "Cormorant Garamond", Georgia, serif;
  --utility: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  background: var(--noir);
  color: var(--ink-light);
  font-family: var(--utility);
  overflow-x: hidden;
}

/* --- scroll progress line --- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 50;
  background: linear-gradient(90deg, #9aa4c8, #b79ad4, #efa090, #f5b45e);
  transition: transform 0.15s linear;
  will-change: transform;
}

/* --- chapter dots nav --- */
.dots {
  position: fixed;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.dots button {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(236, 236, 240, 0.5);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}
.dots button:hover, .dots button:focus-visible { transform: scale(1.4); }
.dots button.active { background: rgba(236, 236, 240, 0.9); }
.dots.on-summit button { border-color: rgba(58, 33, 19, 0.5); }
.dots.on-summit button.active { background: rgba(58, 33, 19, 0.8); }

/* --- fixed HUD --- */
.hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  color: rgba(236, 236, 240, 0.55);
  pointer-events: none;
  mix-blend-mode: difference;
}
.hud-year { font-weight: 600; transition: color 0.6s; }

/* --- climb stage --- */
.climb-wrap { position: relative; }

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.scene {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  will-change: transform;
  /* the narrative gradient: noir → night → dusk → ember → dawn → gold (bottom to top) */
  background: linear-gradient(
    to bottom,
    var(--gold) 0%,
    var(--dawn) 4.5%,
    var(--ember) 12%,
    var(--dusk) 22%,
    var(--night) 38%,
    #0a0a15 58%,
    var(--noir) 78%,
    var(--noir) 100%
  );
}

/* --- sky & architecture decor (percent of scene) --- */
.sun {
  position: absolute;
  top: 1.2%; left: 24%;
  width: clamp(90px, 14vw, 160px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7e0 0%, #ffd98a 45%, rgba(255,190,110,0.35) 70%, transparent 75%);
  filter: blur(2px);
}
.sun-glow {
  position: absolute;
  top: -2%; left: 0;
  width: 100%; height: 12%;
  background: radial-gradient(ellipse 60% 90% at 32% 30%, rgba(255,220,150,0.5), transparent 65%);
}
.haze {
  position: absolute;
  left: 0; width: 100%;
  filter: blur(5px);
}
.haze-1 { top: 5.2%; height: 5px; background: rgba(255, 200, 140, 0.35); }
.haze-2 { top: 7.4%; height: 4px; background: rgba(240, 150, 130, 0.25); }

.floor-light {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 22%;
  background: radial-gradient(ellipse 45% 60% at 50% 88%, rgba(255,255,255,0.06), transparent 70%);
}

.stars { position: absolute; inset: 0; pointer-events: none; }
.star {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 3.4s ease-in-out infinite;
}
.star.bright {
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.55);
  animation-name: twinkle-bright;
}
.star.still { animation: none; }
@keyframes twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.85; } }
@keyframes twinkle-bright { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* --- stairs (geometry set by JS) --- */
.flight {
  position: absolute;
  height: 26px;
  margin-top: -13px;
  transform-origin: 0 50%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);
}
.landing {
  position: absolute;
  height: 18px;
  margin-top: -9px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.85);
}

/* --- the climber --- */
.figure {
  position: absolute;
  z-index: 10;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.9));
  will-change: transform;
}
.figure .flip { display: block; }
.figure svg { display: block; animation: bob 0.9s ease-in-out infinite; }
.figure .acc {
  opacity: 0;
  transform: scale(0.4);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.figure .acc.on { opacity: 1; transform: none; }
.figure.lit { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 7px rgba(255, 217, 138, 0.85)); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* --- typography blocks in the scene --- */
.eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  font-weight: 500;
  color: rgba(236, 236, 240, 0.55);
}

.hero {
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 12;
  padding: 0 6vw;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -22% -10%;
  background: radial-gradient(ellipse 55% 60% at 50% 45%, rgba(5, 5, 7, 0.88), transparent 72%);
  z-index: -1;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 1.1rem 0 0.9rem;
}
.hero-line {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  color: rgba(236, 236, 240, 0.72);
}
.scroll-hint {
  margin-top: 2.6rem;
  font-size: 0.6rem;
  letter-spacing: 0.45em;
  color: rgba(236, 236, 240, 0.45);
}
.hint-arrow {
  display: inline-block;
  margin-left: 0.7em;
  animation: drift 1.8s ease-in-out infinite;
}
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

.chapter {
  position: absolute;
  width: min(38vw, 300px);
  z-index: 12;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.chapter.visible { opacity: 1; transform: translateY(0); }
.chapter { cursor: pointer; }
.chapter:hover h2, .chapter:focus-visible h2 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.chapter:focus-visible { outline: 1px solid rgba(236, 236, 240, 0.5); outline-offset: 8px; }
.read-more {
  font-family: var(--utility);
  font-size: 0.56rem;
  letter-spacing: 0.32em;
  margin-top: 0.7rem;
  opacity: 0.55;
  transition: opacity 0.3s;
}
.chapter:hover .read-more { opacity: 1; }
.chapter h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  margin: 0.5rem 0 0.55rem;
}
.chapter p:not(.eyebrow) {
  font-size: clamp(0.72rem, 1.5vw, 0.85rem);
  line-height: 1.65;
  color: rgba(236, 236, 240, 0.66);
}
.chapter.align-right { text-align: right; }

/* mobile: cinematic caption card over the scene
   (no backdrop-filter - live blur is a frame killer on phones) */
.chapter.caption {
  width: auto;
  text-align: center;
  background: rgba(5, 5, 7, 0.74);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
}

/* per-chapter accent - the color arc */
#ch1 .ch-accent { color: #9aa4c8; }
#ch2 .ch-accent { color: #b79ad4; }
#ch3 .ch-accent { color: #efa090; }
#ch4 .ch-accent { color: #f5b45e; }

/* summit mark, in-scene */
.summit-mark {
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 12;
  color: var(--ink-dark);
}
.summit-mark .eyebrow { color: rgba(90, 50, 22, 0.75); }
.summit-mark h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  margin: 0.7rem 0 0.5rem;
}
.summit-line {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  color: rgba(90, 50, 22, 0.8);
}

/* --- the summit plateau (normal flow) --- */
.summit {
  position: relative;
  z-index: 20;
  background: linear-gradient(to bottom, var(--gold), #fbe0b2 55%, #fdecc9);
  color: var(--ink-dark);
  padding: clamp(4rem, 10vh, 7rem) 6vw clamp(2.5rem, 6vh, 4rem);
}
.summit-inner { max-width: 46rem; margin: 0 auto; }

.currently {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(58, 33, 19, 0.3);
  border-radius: 10px;
  margin-bottom: 3.5rem;
  background: rgba(255, 255, 255, 0.22);
}
.pulse {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2e7d4f;
  margin-right: 0.6rem;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(46, 125, 79, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(46, 125, 79, 0); } }

.projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 560px) {
  .projects { grid-template-columns: 1fr; }
}
.project {
  border: 1px solid rgba(58, 33, 19, 0.3);
  border-radius: 12px;
  padding: 1.3rem 1.2rem 1.1rem;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, background 0.3s ease;
}
.project:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.32); }
.project.featured {
  grid-column: 1 / -1;
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(58, 33, 19, 0.42);
}
.project.featured h3 { font-size: 1.7rem; }
@media (max-width: 560px) { .project.featured h3 { font-size: 1.5rem; } }
.proj-eyebrow {
  font-size: 0.56rem;
  letter-spacing: 0.3em;
  opacity: 0.65;
}
.project h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.45rem;
  margin: 0.45rem 0 0.5rem;
}
.project p:not(.proj-eyebrow) {
  font-size: 0.76rem;
  line-height: 1.65;
  opacity: 0.85;
  flex: 1;
}
.project p a {
  color: var(--ink-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(58, 33, 19, 0.4);
  white-space: nowrap;
}
.stack {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.9rem;
}
.stack li {
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  padding: 0.22rem 0.55rem;
  border: 1px solid rgba(58, 33, 19, 0.3);
  border-radius: 999px;
}
.proj-more {
  margin: 1.1rem 0 4rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-align: right;
}
.proj-more a { color: var(--ink-dark); font-weight: 600; }

.facts {
  list-style: none;
  margin-bottom: 1rem;
}
.facts li {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.5;
  padding: 0.55rem 0;
  border-bottom: 1px dashed rgba(58, 33, 19, 0.25);
}
.facts li:last-child { border-bottom: none; }
.facts-title { margin-top: 4.5rem; }

.summit-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  margin-bottom: 1.6rem;
}
.contact-title { margin-top: 4.5rem; }

.skills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.skills li {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(58, 33, 19, 0.35);
  border-radius: 999px;
  white-space: nowrap;
}

.contact { display: flex; flex-direction: column; }
.contact a {
  font-family: var(--display);
  font-size: clamp(1.4rem, 4.2vw, 2.3rem);
  font-weight: 500;
  color: var(--ink-dark);
  text-decoration: none;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(58, 33, 19, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  transition: padding-left 0.35s ease, opacity 0.35s ease;
}
.contact a:first-child { border-top: 1px solid rgba(58, 33, 19, 0.25); }
.contact a span {
  font-family: var(--utility);
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  opacity: 0.6;
}
.contact a:hover, .contact a:focus-visible { padding-left: 1rem; opacity: 0.7; }
.contact a:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }

footer {
  margin-top: 5rem;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  opacity: 0.55;
  text-align: center;
}

/* --- chapter detail dialog --- */
.modal { position: fixed; inset: 0; z-index: 60; }
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 5, 7, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-panel {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(88vw, 560px);
  max-height: 84vh;
  overflow-y: auto;
  background: #0c0c11;
  border: 1px solid var(--acc, #9aa4c8);
  border-radius: 14px;
  padding: 2.2rem 2.2rem 1.8rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
  animation: panel-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes panel-in { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.modal-close {
  position: absolute;
  top: 0.9rem; right: 1.1rem;
  background: none;
  border: none;
  color: rgba(236, 236, 240, 0.6);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}
.modal-close:hover, .modal-close:focus-visible { color: #fff; }
.modal-body .eyebrow { color: var(--acc, #9aa4c8); }
.modal-body h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  margin: 0.6rem 0 1rem;
}
.modal-body p:not(.eyebrow) {
  font-size: 0.85rem;
  line-height: 1.75;
  color: rgba(236, 236, 240, 0.78);
  margin-bottom: 0.9rem;
}
.detail-points {
  list-style: none;
  margin: 1.2rem 0 0.4rem;
  border-top: 1px solid rgba(236, 236, 240, 0.15);
}
.detail-points li {
  font-size: 0.76rem;
  line-height: 1.6;
  color: rgba(236, 236, 240, 0.85);
  padding: 0.55rem 0 0.55rem 1.1rem;
  border-bottom: 1px solid rgba(236, 236, 240, 0.15);
  position: relative;
}
.detail-points li::before {
  content: "◆";
  position: absolute;
  left: 0;
  font-size: 0.5rem;
  top: 0.85rem;
  color: var(--acc, #9aa4c8);
}
.modal-stack { margin-top: 1.1rem; }
.modal-stack li { border-color: rgba(236, 236, 240, 0.3); color: rgba(236, 236, 240, 0.8); font-size: 0.6rem; letter-spacing: 0.05em; padding: 0.22rem 0.55rem; border-radius: 999px; border: 1px solid rgba(236,236,240,0.3); }
body.modal-open { overflow: hidden; }

/* --- small screens --- */
@media (max-width: 640px) {
  .chapter { width: min(52vw, 240px); }
  .hud { padding: 0.9rem 1rem; font-size: 0.52rem; }
  .dots { right: 0.55rem; }
}

/* phones / touch: skip blend-mode compositing on the fixed HUD, every frame of scroll pays for it,
   and cut the raster cost of the big scrolling scene (soft shadows and blur filters are what hurt) */
@media (max-width: 768px), (pointer: coarse) {
  .hud {
    mix-blend-mode: normal;
    text-shadow: 0 1px 4px rgba(5, 5, 7, 0.55);
  }
  .flight { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.55); }
  .landing { box-shadow: 0 5px 9px rgba(0, 0, 0, 0.6); }
  .sun { filter: none; }
  .haze { display: none; }
  .figure { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.85)); }
  .figure.lit { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 5px rgba(255, 217, 138, 0.8)); }
}

/* --- simplified climb (old touch browsers without scroll-driven animations) ---
   fixed sky backdrop that glides one gradient step per chapter; the story
   blocks scroll natively in normal flow - zero per-frame scripted movement */
body.simple .stage {
  position: fixed;
  inset: 0;
  height: auto;
  z-index: -1; /* behind all in-flow content, above the body background */
}
body.simple .scene {
  height: 500vh;
  transform: translate3d(0, -400vh, 0);
  transition: transform 900ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
body.simple .scene.phase-1 { transform: translate3d(0, -300vh, 0); }
body.simple .scene.phase-2 { transform: translate3d(0, -200vh, 0); }
body.simple .scene.phase-3 { transform: translate3d(0, -100vh, 0); }
body.simple .scene.phase-4 { transform: translate3d(0, 0, 0); }
body.simple #tower, body.simple .figure { display: none; }

body.simple .climb-wrap { height: auto !important; }
body.simple .simple-flow { position: relative; z-index: 1; padding: 0 7vw; }
body.simple .hero {
  position: static;
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 10vh;
}
body.simple .chapter {
  position: static;
  width: auto;
  max-width: 24rem;
  margin: 0 auto 58vh;
  text-align: center;
  background: rgba(5, 5, 7, 0.74);
  border-radius: 10px;
  padding: 1.2rem 1.2rem 1.1rem;
}
body.simple .chapter:first-of-type { margin-top: 24vh; }
body.simple .summit-mark {
  position: static;
  text-align: center;
  margin: 6vh auto 30vh;
}

.mini-climb {
  position: relative;
  width: 190px;
  height: 72px;
  margin: 0 auto 1rem;
}
.mini-flight {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 170px;
  height: 13px;
  margin-left: -85px;
  border-radius: 2px;
  transform: rotate(-14deg);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.mini-climber {
  position: absolute;
  bottom: 31px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8));
}
.mini-climber svg { display: block; }
.mini-climber .acc { opacity: 0; }
.mini-climber .acc.on { opacity: 1; }

/* --- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .figure svg, .hint-arrow, .star, .pulse { animation: none; }
  .chapter { transition: none; opacity: 1; transform: none; }
  .project { transition: none; }
  .modal-panel { animation: none; }
  body.simple .scene { transition: none; }
}