/* =========================================================
   AFAQ — CREATIVE DEVELOPER PORTFOLIO
   Awwwards-level editorial design system
   ========================================================= */

/* ---- Design Tokens ---- */
:root {
  --bg: #F3F2EE;
  --primary: #080808;
  --secondary: #777771;
  --accent: #146EFF;

  --font-display: 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --font-sans: 'Poppins', sans-serif;

  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --grid-gap: clamp(16px, 1.5vw, 24px);
  --page-pad: clamp(24px, 4vw, 64px);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background: var(--bg);
  color: var(--primary);
  font-family: var(--font-sans);
  cursor: none;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { background: none; border: none; cursor: none; font: inherit; color: inherit; }

/* =========================================================
   CUSTOM CURSOR
   ========================================================= */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  mix-blend-mode: difference;
}

.cursor-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-premium), height 0.3s var(--ease-premium), background 0.3s;
}

.cursor-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s var(--ease-premium), height 0.4s var(--ease-premium), opacity 0.3s, border-color 0.3s;
  opacity: 0;
}

.cursor-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
}

body.cursor-hover .cursor-dot {
  width: 14px;
  height: 14px;
}
body.cursor-hover .cursor-ring {
  opacity: 1;
  width: 50px;
  height: 50px;
}

body.cursor-portrait .cursor-dot {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
}
body.cursor-portrait .cursor-ring {
  opacity: 1;
  width: 70px;
  height: 70px;
}
body.cursor-portrait .cursor-label {
  opacity: 1;
}

/* =========================================================
   SCROLL PROGRESS BAR
   ========================================================= */
#scrollProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px; /* Thin, premium line */
  background: var(--primary); /* Deep black */
  z-index: 9999;
  width: 0%; /* Will be updated via JS */
  transform-origin: left;
}

/* =========================================================
   MINIMALIST SIGNATURE LOADER
   ========================================================= */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  /* Warm off-white paper tone */
  background-color: #FAF8F5;
  /* Extremely subtle noise texture for a premium paper feel */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.loader-content--minimal {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(60px, 10vw, 100px);
  width: min(600px, 90vw);
}

.loader-center {
  text-align: center;
  position: relative;
}

.loader-signature {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(500px, 90vw);
}

.signature-svg {
  width: 100%;
  height: auto;
  max-height: 250px;
}

.sig-text {
  font-family: 'Leckerli One', cursive;
  font-size: 110px;
  fill: #111;
}

.mask-path {
  /* Setup mask drawing */
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
}

/* Animate the mask to draw the text exactly ending at 80% (2.8s) */
.loader.is-loading .mask-path {
  animation: drawMask 2.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes drawMask {
  to { stroke-dashoffset: 0; }
}

.loader-bottom--minimal {
  width: 100%;
  max-width: 240px; 
  margin: 0 auto;
}

.loader-progress-track--minimal {
  width: 100%;
  height: 4px; /* Thickened progress bar */
  background: rgba(17, 17, 17, 0.08); /* Very light gray inactive */
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.loader-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: #111; /* Dark active portion */
  transition: width 0.15s linear;
}

.loader-message {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(17, 17, 17, 0.4);
  text-align: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.8s var(--ease-premium), transform 0.8s var(--ease-premium);
}

.loader-message.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Loader exit */
.loader.is-exiting {
  pointer-events: none;
}

.loader.is-exiting .loader-content--minimal {
  animation: loaderContentUp 1s cubic-bezier(0.8, 0, 0.1, 1) forwards;
}

.loader.is-done {
  animation: loaderFadeOut 1s cubic-bezier(0.8, 0, 0.1, 1) 0.5s forwards;
}

@keyframes loaderContentUp {
  to { transform: translateY(-40px) scale(0.98); opacity: 0; }
}

@keyframes loaderFadeOut {
  to { opacity: 0; visibility: hidden; }
}

/* =========================================================
   SITE
   ========================================================= */
.site {
  opacity: 0;
  visibility: hidden;
  overflow-x: clip;
}
.site.is-visible {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav {
  position: fixed;
  top: clamp(16px, 3vh, 32px);
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none; /* Let clicks pass through the sides */
  opacity: 0;
  /* Start much higher (off-screen) for a pronounced drop animation */
  transform: translateY(-100px) scale(0.95);
  padding: 0 var(--page-pad); /* Prevents touching edges on mobile */
}

.nav.is-visible {
  /* Slower, smoother premium drop animation */
  animation: navDropEnter 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes navDropEnter {
  0% { opacity: 0; transform: translateY(-100px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.nav-inner {
  pointer-events: auto; /* Re-enable clicks on the pill itself */
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px; /* Less rounded, closer to a standard card */
  border: 1px solid rgba(8, 8, 8, 0.08); /* Light subtle border */
  padding: 8px 12px 8px 20px; /* Tighter padding for mobile safety */
  width: 100%;
  max-width: 1000px;
  gap: clamp(16px, 4vw, 40px);
  
  /* Crisp, pointy, clean drop shadow */
  box-shadow: 
    0 24px 32px -12px rgba(0, 0, 0, 0.12), 
    0 8px 16px -4px rgba(0, 0, 0, 0.08), 
    0 2px 4px rgba(0, 0, 0, 0.04);
}

.nav-left {
  display: flex;
  align-items: center;
}

.nav-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.3s;
}

.nav-logo:hover { opacity: 0.7; }

/* The 4-dot flower mark from the reference (pure CSS) */
.nav-logo::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background: 
    radial-gradient(circle at 3px 3px, #111 2.5px, transparent 3px),
    radial-gradient(circle at 11px 3px, #111 2.5px, transparent 3px),
    radial-gradient(circle at 3px 11px, #111 2.5px, transparent 3px),
    radial-gradient(circle at 11px 11px, #111 2.5px, transparent 3px);
  background-color: transparent;
  border-radius: 2px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
}

.nav-link {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: #444; /* softer grey like the reference */
  transition: color 0.3s;
}

.nav-link:hover {
  color: var(--primary);
}

.nav-badge {
  background: #E8EAF6;
  color: #3F51B5;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 100px;
  margin-left: 6px;
  letter-spacing: 0.02em;
}

.nav-divider-v {
  width: 1px;
  height: 16px;
  background: rgba(8, 8, 8, 0.1);
  margin: 0 4px;
}

.nav-btn-solid {
  background: #111;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 24px;
  border-radius: 100px;
  transition: transform 0.3s var(--ease-premium), background 0.3s;
}

.nav-btn-solid:hover {
  transform: scale(1.05);
  background: #000;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 0 var(--page-pad);
  overflow: hidden;
}

/* ---- Technical Status ---- */
.hero-status {
  position: absolute;
  top: clamp(90px, 12vh, 140px);
  left: var(--page-pad);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--secondary);
  opacity: 0;
}

.hero-status.is-visible {
  animation: fadeIn 0.6s var(--ease-premium) forwards;
}

.status-bar-track {
  width: 60px;
  height: 2px;
  background: rgba(8,8,8,0.08);
  border-radius: 1px;
  overflow: hidden;
}

.status-bar-fill {
  height: 100%;
  width: 24%;
  background: var(--accent);
  border-radius: 1px;
  transition: width 0.4s;
}

/* ---- Microcopy Left ---- */
.hero-microcopy-left {
  position: absolute;
  top: clamp(200px, 30vh, 340px);
  left: var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--secondary);
  opacity: 0;
}

.hero-microcopy-left.is-visible {
  animation: fadeIn 0.6s var(--ease-premium) forwards;
}

/* ---- Coordinates ---- */
.hero-coords {
  position: absolute;
  top: clamp(320px, 48vh, 480px);
  left: var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--secondary);
  opacity: 0;
}

.hero-coords.is-visible {
  animation: fadeIn 0.6s var(--ease-premium) forwards;
}

.coords-plus {
  font-size: 12px;
  margin-bottom: 4px;
  color: var(--primary);
  opacity: 0.3;
}

/* ---- Main Headline ---- */
.hero-title {
  position: absolute;
  top: 50%;
  left: clamp(60px, 8vw, 140px);
  transform: translateY(-55%);
  z-index: 5;
}

.hero-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(60px, 10vw, 180px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--primary);
  text-transform: uppercase;
  margin: 0;
}

.hero-line-wrap {
  display: block;
  overflow: hidden;
}

.hero-line {
  display: block;
  transform: translateY(110%);
  will-change: transform;
}

/* ---- Portrait System ---- */
.portrait-system {
  position: absolute;
  top: 50%;
  right: clamp(180px, 22vw, 340px);
  transform: translateY(-50%);
  width: clamp(240px, 22vw, 360px);
  height: clamp(320px, 32vw, 500px);
  z-index: 4;
}

.portrait-offset {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(8, 8, 8, 0.06);
}

.portrait-offset--1 {
  transform: translate(8px, 8px);
}

.portrait-offset--2 {
  transform: translate(16px, 16px);
  border-color: rgba(8, 8, 8, 0.03);
}

.portrait-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(8, 8, 8, 0.12);
  border-radius: 18px;
  overflow: hidden;
  margin: 0;
}




.portrait-img-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  border-radius: 18px;
}

.portrait-offset {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(8, 8, 8, 0.06);
  border-radius: 18px;
}
.portrait-frame-meta {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--secondary);
  z-index: 3;
  opacity: 0.7;
}

.frame-plus {
  font-size: 14px;
  line-height: 1;
  opacity: 0.5;
}

.portrait-img-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  position: relative;
}

.portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  filter: grayscale(100%) contrast(1.05);
  transform: scale(1.08);
  transition: transform 1.2s var(--ease-premium), filter 0.8s;
}

/* HERO SIGNATURE OVERLAY (Diagonal drawing effect) */
.hero-signature {
  position: absolute;
  bottom: 24px;
  left: 24px;
  transform: rotate(-15deg);
  transform-origin: left bottom;
  color: #fff;
  z-index: 10;
  display: flex;
  align-items: baseline;
  /* Starts fully clipped to the left (0 width) */
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.hero-signature.is-drawn {
  /* Slower, elegant drawing animation */
  animation: drawHeroSig 1.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes drawHeroSig {
  to { clip-path: inset(0 -10% 0 -10%); } /* Allow slight overflow for font italics */
}

.hero-sig-text {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 0.8;
  font-weight: 400;
  white-space: nowrap;
}

.hero-sig-dot {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(24px, 3vw, 36px);
  color: #fff;
}

.portrait-img-wrap.is-revealed {
  animation: portraitReveal 1s var(--ease-premium) forwards;
}

.portrait-img-wrap.is-revealed .portrait-img {
  animation: portraitScale 1.2s var(--ease-premium) forwards;
}

@keyframes portraitReveal {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes portraitScale {
  to { transform: scale(1); }
}

.portrait-system:hover .portrait-img {
  filter: grayscale(60%) contrast(1.08);
}

/* ---- Dot Trail ----
   A thin line that departs from the dot at the end of the "AFAQ"
   logo once the entrance sequence has settled: it travels down and
   right, slips behind the portrait, curls up the right edge, cuts
   left behind the top of the frame, exits on the left, drops down
   to the hero footer row, crosses the footer rule, and stops at the
   right edge of the hero content. */
.dot-trail {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}

.dot-trail-path {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

/* ---- Orbital System (disabled — replaced by trail concepts) ---- */
.orbit {
  display: none;
}

.orbit.is-visible {
  animation: fadeIn 1s var(--ease-premium) forwards;
}

.orbit-svg {
  width: 100%;
  height: 100%;
}

.orbit-path {
  fill: none;
  stroke: rgba(8, 8, 8, 0.07);
  stroke-width: 1;
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  transform-origin: center;
  transform: rotate(-15deg);
}

.orbit-path.is-drawing {
  animation: orbitDraw 2s var(--ease-out) forwards;
}

@keyframes orbitDraw {
  to { stroke-dashoffset: 0; }
}

.orbit-node {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(8, 8, 8, 0.3);
  opacity: 0;
  transition: opacity 0.5s;
}

.orbit-node.is-visible {
  opacity: 1;
  animation: nodePulse 3s ease-in-out infinite;
}

@keyframes nodePulse {
  0%, 100% { box-shadow: 0 0 12px rgba(8, 8, 8, 0.3); transform: scale(1); }
  50% { box-shadow: 0 0 20px rgba(8, 8, 8, 0.5); transform: scale(1.2); }
}

/* ---- Identity Panel ---- */
.identity {
  position: absolute;
  top: 50%;
  right: var(--page-pad);
  transform: translateY(-50%);
  text-align: right;
  z-index: 6;
  opacity: 0;
}

.identity.is-visible {
  animation: fadeIn 0.8s var(--ease-premium) forwards;
}

.identity-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.identity-dash {
  font-size: 14px;
  color: var(--secondary);
  margin: 6px 0;
  opacity: 0.4;
}

.identity-role {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--secondary);
}

.identity-spacer {
  height: 16px;
}

.identity-skills {
  font-size: 9px;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: var(--secondary);
  opacity: 0.7;
}

.identity-location {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--secondary);
  opacity: 0.6;
}

/* ---- Bottom Left ---- */
.hero-bottom-left {
  position: absolute;
  bottom: clamp(40px, 6vh, 80px);
  left: var(--page-pad);
  display: flex;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--secondary);
  line-height: 1.7;
  opacity: 0;
}

.hero-bottom-left.is-visible {
  animation: fadeIn 0.6s var(--ease-premium) forwards;
}

.bottom-left-pipe {
  font-size: 18px;
  opacity: 0.2;
  line-height: 1;
}

/* ---- Bottom Info ---- */
.hero-bottom-info {
  position: absolute;
  bottom: clamp(40px, 6vh, 80px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--secondary);
  opacity: 0;
}

.hero-bottom-info.is-visible {
  animation: fadeIn 0.6s var(--ease-premium) forwards;
}

.bottom-info-plus {
  font-size: 12px;
  opacity: 0.3;
}

.bottom-info-rule {
  width: 40px;
  height: 1px;
  background: rgba(8, 8, 8, 0.15);
}

/* ---- Scroll Indicator ---- */
.scroll-indicator {
  position: absolute;
  right: calc(var(--page-pad) + 6px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 10;
  opacity: 0;
}

.scroll-indicator.is-visible {
  animation: fadeIn 0.8s var(--ease-premium) forwards;
}

.scroll-track {
  width: 2px;
  height: 60px;
  background: rgba(8, 8, 8, 0.08);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}

.scroll-track-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: var(--accent);
  border-radius: 1px;
  transition: height 0.15s linear;
}

.scroll-text {
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--secondary);
  text-align: center;
  line-height: 1.6;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.scroll-arrow {
  font-size: 14px;
  color: var(--secondary);
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ---- Project Counter ---- */
.project-counter {
  position: absolute;
  bottom: clamp(40px, 6vh, 80px);
  right: var(--page-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  opacity: 0;
}

.project-counter.is-visible {
  animation: fadeIn 0.6s var(--ease-premium) forwards;
}

.counter-numbers {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.counter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--secondary);
}

.counter-dot {
  width: 5px;
  height: 5px;
  background: var(--primary);
  border-radius: 50%;
}

/* ---- Shared Keyframes ---- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   PROJECTS SECTION
   ========================================================= */
.projects {
  padding: clamp(60px, 10vw, 120px) var(--page-pad);
  background: var(--bg);
  position: relative;
  z-index: 10;
  overflow-x: clip;
}

.projects-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: clamp(60px, 8vw, 100px);
}

@media (min-width: 768px) {
  .projects-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.projects-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--secondary);
  display: block;
  margin-bottom: 24px;
}

.projects-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 10vw, 140px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-transform: uppercase;
  overflow: hidden; /* For line reveal */
}

.projects-title-line {
  display: block;
  transform: translateY(100%);
  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.projects-header.is-revealed .projects-title-line {
  transform: translateY(0);
}

.projects-subtitle {
  font-size: clamp(14px, 1.5vw, 18px);
  color: var(--secondary);
  max-width: 400px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: 0.2s;
}

.projects-header.is-revealed .projects-subtitle {
  opacity: 1;
  transform: translateY(0);
}

.projects-divider {
  width: 0%;
  height: 1px;
  background: rgba(8, 8, 8, 0.1);
  margin-bottom: clamp(40px, 6vw, 80px);
  transition: width 1.5s var(--ease-premium);
}

.projects-divider.is-revealed {
  width: 100%;
}

/* =========================================================
   PROJECTS GRID (2-Column Stretch Reveal)
   ========================================================= */
.projects-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 80px); /* Tighter spacing between rows */
  padding-bottom: 80px; /* Less empty space at bottom */
}

.projects-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px); /* Tighter horizontal gap */
}

@media (min-width: 768px) {
  .projects-row {
    grid-template-columns: 1fr 1fr;
  }
}

.project-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.project-item--empty {
  display: none;
}
@media (min-width: 768px) {
  .project-item--empty {
    display: block;
  }
}

/* IMAGE WRAPPER (Handles the squeeze/clip mask) */
.project-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10; /* Sleeker, shorter aspect ratio */
  overflow: hidden;
  border-radius: 16px;
  background: rgba(8, 8, 8, 0.03); /* subtle box to frame the uncropped image */
  padding: clamp(30px, 5vw, 60px); /* Increased breathing room to make images look smaller */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Premium slow transition for the stretch effect */
  transition: clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Initial Squeezed State for LEFT items (starts extreme right, stretched massively to left) */
.project-item--left .project-img-wrapper {
  clip-path: inset(0 0 0 90%); /* Hides the left 90%, leaving just a sliver */
}

/* Initial Squeezed State for RIGHT items (starts extreme left, stretched massively to right) */
.project-item--right .project-img-wrapper {
  clip-path: inset(0 90% 0 0); /* Hides the right 90%, leaving just a sliver */
}

/* Revealed State */
.project-item.is-revealed .project-img-wrapper {
  clip-path: inset(0 0 0 0);
}

.project-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Prevents any cropping */
  border-radius: 8px; /* Optional slight rounding for UI shots */
  /* Slight scale down as it reveals to add depth */
  transform: scale(1.15);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-item.is-revealed .project-img {
  transform: scale(1);
}

.project-item:hover .project-img {
  transform: scale(1.03);
}

/* INFO / TEXT (Moves in sync with the stretch) */
.project-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s var(--ease-out);
  transition-delay: 0.1s;
}

/* Left item text starts shifted heavily to the right */
.project-item--left .project-info {
  transform: translateX(120px);
}

/* Right item text starts shifted heavily to the left */
.project-item--right .project-info {
  transform: translateX(-120px);
}

/* Text revealed state */
.project-item.is-revealed .project-info {
  transform: translateX(0);
  opacity: 1;
}

.project-meta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--secondary);
  text-transform: uppercase;
}

.project-title {
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
  color: var(--primary);
}

.project-arrow {
  font-weight: 300;
  font-size: 0.9em;
  transition: transform 0.3s var(--ease-out);
}

.project-item:hover .project-arrow {
  transform: translateX(4px);
}
/* =========================================================
   ABOUT SECTION (IDENTITY)
   ========================================================= */
.about {
  padding: clamp(60px, 10vw, 120px) var(--page-pad);
  padding-bottom: 120px;
  overflow-x: clip;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
  align-items: center;
}

@media (min-width: 992px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

.about-text-col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about-headline {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.about-headline-wrap {
  display: block;
  overflow: hidden;
}

.about-headline-line {
  display: block;
  transform: translateY(100%);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-headline.is-revealed .about-headline-line {
  transform: translateY(0);
}

.about-headline-wrap:nth-child(1) .about-headline-line { transition-delay: 0.1s; }
.about-headline-wrap:nth-child(2) .about-headline-line { transition-delay: 0.2s; }
.about-headline-wrap:nth-child(3) .about-headline-line { transition-delay: 0.3s; }
.about-headline-wrap:nth-child(4) .about-headline-line { transition-delay: 0.4s; }

.italic {
  font-family: 'Dancing Script', cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 1.3em; /* Slightly larger to match baseline */
}

.about-desc {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--secondary);
  max-width: 480px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: 0.3s;
}

.about-desc.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.about-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: 0.4s;
}

.about-skills.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.skill-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 10px 16px;
  border: 1px solid rgba(8, 8, 8, 0.1);
  border-radius: 40px;
  color: var(--primary);
}

.about-img-col {
  position: relative;
  width: 100%;
}

.about-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 16px;
  clip-path: inset(100% 0 0 0); /* Bottom up reveal */
  transition: clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-img-col.is-revealed .about-img-wrap {
  clip-path: inset(0 0 0 0);
}

.about-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  filter: grayscale(80%) contrast(1.1);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), filter 1s;
}

.about-img-col.is-revealed .about-img {
  transform: scale(1);
}

.about-img:hover {
  filter: grayscale(0%) contrast(1.05);
}
/* =========================================================
   SERVICES SECTION (CAPABILITIES)
   ========================================================= */
.services {
  padding: clamp(60px, 10vw, 120px) var(--page-pad);
  padding-bottom: 120px;
  overflow-x: clip;
}

.services-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.service-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 40px 0;
  border-top: 1px solid rgba(8, 8, 8, 0.1);
  cursor: pointer;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), padding 0.6s var(--ease-premium), background 0.6s;
}

.service-item:last-child {
  border-bottom: 1px solid rgba(8, 8, 8, 0.1);
}

.service-item.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 992px) {
  .service-item {
    grid-template-columns: 80px 1.5fr 2fr 60px;
    align-items: center;
    gap: 40px;
  }
}

.service-number {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--secondary);
  transition: color 0.4s;
}

.service-name {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: transform 0.6s var(--ease-premium);
}

.service-desc {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--secondary);
  max-width: 480px;
  transition: color 0.4s;
}

.service-icon {
  font-size: 24px;
  display: flex;
  justify-content: flex-end;
  opacity: 0.3;
  transition: transform 0.6s var(--ease-premium), opacity 0.4s;
}

/* Hover Effects */
.service-item:hover {
  background: var(--primary);
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 992px) {
  .service-item:hover {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.service-item:hover .service-number,
.service-item:hover .service-desc {
  color: var(--bg);
  opacity: 0.8;
}

.service-item:hover .service-name {
  color: var(--bg);
  transform: translateX(10px);
}

.service-item:hover .service-icon {
  color: var(--bg);
  opacity: 1;
  transform: translate(10px, -10px);
}

/* FLOATING CURSOR IMAGE */
.service-cursor-img {
  position: fixed;
  top: 0;
  left: 0;
  width: clamp(160px, 18vw, 260px);
  height: clamp(100px, 12vw, 160px);
  pointer-events: none;
  z-index: 100;
  /* position is updated via JS transform */
  transform: translate(0, 0); 
}

.service-cursor-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  filter: grayscale(100%) contrast(1.1);
  opacity: 0;
  transform: scale(0.4) rotate(-5deg);
  /* The bouncy ease out */
  transition: opacity 0.4s var(--ease-premium), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-cursor-img.is-active img {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

@media (max-width: 992px) {
  .service-cursor-img {
    display: none !important;
  }
}
/* =========================================================
   HORIZONTAL SCROLL PROCESS SECTION
   ========================================================= */
.process-section {
  position: relative;
  /* 300vh animation + 100vh hold at start + 100vh hold at end + 100vh viewport = 600vh */
  height: 600vh; 
  background: var(--bg);
  z-index: 10;
}

.process-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.process-header-absolute {
  position: absolute;
  top: clamp(80px, 12vh, 160px);
  left: var(--page-pad);
  z-index: 20;
}

.process-scroll-indicator {
  position: absolute;
  bottom: clamp(60px, 10vh, 120px);
  left: var(--page-pad);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--secondary);
  font-family: var(--font-sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 20;
  opacity: 1;
  transition: opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium);
  animation: bounceIndicator 2.5s infinite ease-in-out;
}

.process-scroll-indicator.is-hidden {
  opacity: 0;
  transform: translateY(15px);
  pointer-events: none;
}

@keyframes bounceIndicator {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.scroll-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(8,8,8,0.15);
  font-size: 12px;
  color: var(--primary);
}

.process-scroll-container {
  display: flex;
  width: 400vw; /* 4 full-width panels */
  height: 100%;
  will-change: transform;
  position: relative;
}

/* The Connecting Wavy Trail Line */
.process-wavy-track {
  position: absolute;
  top: clamp(60px, 12vh, 140px); /* Push down in sync with content */
  left: 50vw; /* Starts exactly at the center of Panel 1 */
  width: 300vw; /* Reaches exactly the center of Panel 4 */
  height: 100vh; /* Fills the whole vertical space so the wave can span up and down */
  z-index: 0; /* Behind the text */
  pointer-events: none;
}

.process-wavy-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wavy-path {
  /* JS will manipulate stroke-dasharray and stroke-dashoffset to draw it */
}

.process-wavy-arrow {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Crucial for perfect alignment: 
     The arrowhead tip is exactly at x=19, y=12 inside the 24x24 SVG box.
     We set the origin there, then translate back so this exact point aligns with JS top/left! */
  transform-origin: 19px 12px;
  /* Will be translated and rotated by JS dynamically */
  will-change: transform, left, top;
}

.process-panel {
  width: 100vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--page-pad);
  position: relative;
}

.process-panel-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 800px;
  width: 100%;
  position: relative;
  top: clamp(60px, 12vh, 140px); /* Physically push down */
}

.process-huge-num {
  font-family: var(--font-display);
  font-size: clamp(140px, 20vw, 360px);
  font-weight: 900;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 3px rgba(8, 8, 8, 0.15); /* Increased thickness and opacity */
  margin-bottom: clamp(16px, 4vw, 40px);
}

.process-name {
  font-family: var(--font-sans);
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin-bottom: 20px;
}

.process-desc {
  font-size: clamp(14px, 1.5vw, 18px);
  color: var(--secondary);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto;
}

/* Bottom Progress Bar */
.process-progress-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: rgba(8, 8, 8, 0.05);
  z-index: 20;
}

.process-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  will-change: width;
}

/* =========================================================
   TESTIMONIALS SECTION
   ========================================================= */
.testimonials {
  padding: 0 var(--page-pad);
  padding-bottom: clamp(80px, 10vw, 160px);
  position: relative;
  overflow-x: clip;
}

.testimonials-canvas {
  position: relative;
  width: 100%;
  height: clamp(600px, 80vh, 1000px);
  margin-top: clamp(60px, 8vw, 120px);
  overflow: hidden; 
  border-radius: 24px;
  background: rgba(8, 8, 8, 0.02); /* Extremely faint dark box to ground the constellation */
}

.testi-web {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.testi-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(8, 8, 8, 0.06);
  border-radius: 20px;
  padding: 20px;
  z-index: 1;
  /* Will be controlled by JS transform3d */
  transform: translate3d(50vw, 400px, 0) translate(-50%, -50%) scale(0);
  opacity: 0;
  box-shadow: 
    0 12px 24px -12px rgba(0, 0, 0, 0.08),
    0 4px 12px -4px rgba(0, 0, 0, 0.04);
  /* The explosion opacity and initial scale is handled here */
  transition: opacity 0.6s var(--ease-premium);
}

.testi-card.is-active {
  opacity: 1;
}

/* Card internals */
.testi-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.testi-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}

.testi-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testi-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--primary);
  letter-spacing: -0.01em;
}

.testi-stars {
  font-size: 11px;
  color: #F5A623;
  letter-spacing: 2px;
}

.testi-msg {
  font-size: 13px;
  line-height: 1.6;
  color: var(--secondary);
  font-style: italic;
}

@media (max-width: 768px) {
  .testi-card {
    /* Slightly smaller on mobile to prevent massive overlap */
    width: 220px;
    padding: 16px;
  }
  .testi-msg {
    font-size: 12px;
  }
}

/* =========================================================
   CONTACT SECTION & FOOTER
   ========================================================= */
.contact {
  background: var(--primary);
  color: var(--bg);
  padding: clamp(80px, 12vw, 160px) var(--page-pad) clamp(40px, 6vw, 80px);
}

.contact .projects-divider {
  background: rgba(255, 255, 255, 0.1);
}

.contact .projects-label {
  color: rgba(255, 255, 255, 0.5);
  margin-top: 40px;
}

.contact-hero {
  margin: clamp(80px, 10vw, 160px) 0;
  position: relative;
  /* Stacking context for the overlapping form */
}

.contact-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 11vw, 200px);
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 1440px) {
  .contact-title {
    font-size: clamp(48px, 7vw, 150px);
    padding-right: clamp(20px, 5vw, 440px); /* Add some breathing room if needed, though font size reduction alone fixes it */
  }
}

.contact-title-wrap {
  display: block;
  overflow: hidden;
}

.contact-title-line {
  display: block;
  transform: translateY(100%);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-title.is-revealed .contact-title-line {
  transform: translateY(0);
}

.contact-title-wrap:nth-child(1) .contact-title-line { transition-delay: 0.1s; }
.contact-title-wrap:nth-child(2) .contact-title-line { transition-delay: 0.2s; }
.contact-title-wrap:nth-child(3) .contact-title-line { transition-delay: 0.3s; }

.contact-title-italic {
  font-family: 'Dancing Script', cursive;
  font-style: normal;
  font-weight: 400;
  text-transform: lowercase;
  color: var(--bg);
  font-size: 1.1em;
  padding-left: clamp(8px, 2vw, 20px);
  display: inline-block;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* CONTACT FORM - WHITE OVERLAPPING CARD */
.contact-form {
  background: var(--bg);
  padding: clamp(32px, 4vw, 48px);
  border-radius: 20px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 440px;
  position: relative;
  z-index: 10;
  margin-top: 40px; /* Safely pushed down on mobile */
}

@media (min-width: 992px) {
  .contact-form {
    position: absolute;
    right: 0;
    bottom: -80px; /* beautifully overlaps the bottom right of the huge text */
    margin-top: 0;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--secondary);
}

.form-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(8, 8, 8, 0.15);
  padding: 12px 0;
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--primary);
  outline: none;
  transition: border-color 0.4s;
  border-radius: 0;
}

.form-input::placeholder {
  color: rgba(8, 8, 8, 0.3);
}

.form-input:focus {
  border-bottom-color: var(--primary);
}

.form-textarea {
  resize: vertical;
  min-height: 40px;
}

.form-submit {
  align-self: flex-start;
  background: var(--primary);
  border: none;
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  border-radius: 40px;
  margin-top: 10px;
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s;
  letter-spacing: 0.1em;
}

.form-submit:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.submit-arrow {
  font-size: 18px;
  transition: transform 0.4s var(--ease-premium);
}

.form-submit:hover .submit-arrow {
  transform: translate(4px, -4px);
}

/* PREMIUM FOOTER */
.footer {
  margin-top: clamp(120px, 18vw, 240px);
  padding-top: 80px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
}

@media (min-width: 600px) {
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-top {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-col-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}

.footer-link {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--bg);
  text-decoration: none;
  transition: opacity 0.4s;
}

.footer-link:hover {
  opacity: 0.6;
}

.footer-email {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--bg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: opacity 0.4s;
}

.footer-email:hover {
  opacity: 0.6;
}

.footer-middle {
  margin-top: clamp(100px, 12vw, 180px);
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-huge-text {
  font-family: var(--font-display);
  font-size: clamp(40px, 14.5vw, 320px);
  line-height: 0.8;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--bg);
  margin: 0;
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

.footer-huge-wrap {
  display: block;
  overflow: hidden;
}

.footer-huge-line {
  display: block;
  transform: translateY(100%);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-middle.is-revealed .footer-huge-line {
  transform: translateY(0);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    font-size: 12px;
  }
}

.back-to-top {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--bg);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.4s;
}

.back-to-top:hover {
  opacity: 0.6;
}

.back-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.6s var(--ease-premium), background 0.4s, border-color 0.4s, color 0.4s;
}

.back-to-top:hover .back-icon {
  transform: translateY(-4px);
  background: var(--bg);
  color: var(--primary);
  border-color: var(--bg);
}

/* =========================================================
   RESPONSIVE: LARGE DESKTOP
   ========================================================= */
@media (max-width: 1280px) {
  .hero-title {
    left: clamp(40px, 6vw, 100px);
  }

  .portrait-system {
    right: clamp(140px, 18vw, 280px);
    width: clamp(220px, 20vw, 320px);
    height: clamp(300px, 30vw, 460px);
  }

  .orbit {
    right: clamp(80px, 12vw, 200px);
    width: clamp(360px, 34vw, 520px);
    height: clamp(420px, 40vw, 620px);
  }
}

/* =========================================================
   RESPONSIVE: TABLET
   ========================================================= */
@media (max-width: 1024px) {
  .nav-availability { display: none; }

  .hero-title {
    left: var(--page-pad);
  }

  .hero-h1 {
    font-size: clamp(50px, 9vw, 110px);
  }

  .portrait-system {
    right: clamp(80px, 14vw, 180px);
    width: clamp(180px, 22vw, 260px);
    height: clamp(240px, 30vw, 380px);
  }

  .orbit {
    right: clamp(40px, 8vw, 130px);
    width: clamp(300px, 36vw, 440px);
    height: clamp(360px, 44vw, 540px);
  }

  .hero-microcopy-left {
    display: none;
  }

  .hero-bottom-info {
    display: none;
  }

  .scroll-indicator {
    right: calc(var(--page-pad) - 4px);
  }
}

/* =========================================================
   RESPONSIVE: MOBILE
   ========================================================= */
@media (max-width: 768px) {
  body {
    cursor: auto;
  }
  .custom-cursor { display: none; }

  .nav-inner {
    padding: 12px 16px;
  }

  .nav-logo {
    font-size: 16px;
  }

  .nav-right .nav-link { display: none; }
  .nav-divider-v { display: none; }

  .nav-arrow-btn {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  /* Hero: switch from absolute to stacked flow */
  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 100vh;
    height: auto;
    padding-top: 160px; /* Safely pushed below the navbar */
    padding-bottom: 60px;
    overflow: hidden; /* Fix horizontal scroll */
  }

  /* Headline */
  .hero-title {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin-bottom: 28px;
    z-index: 5;
    order: 1;
  }

  .hero-h1 {
    font-size: clamp(48px, 13vw, 80px);
    line-height: 0.92;
  }

  /* Microcopy */
  .hero-microcopy-left {
    position: relative;
    top: auto;
    left: auto;
    order: 2;
    margin-bottom: 24px;
    flex-direction: row;
    gap: 8px;
    font-size: 9px;
  }

  /* Portrait */
  .portrait-system {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 75%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 3 / 4;
    margin: 0 0 28px 0;
    z-index: 4;
    order: 3;
  }

  .portrait-offset--1 {
    transform: translate(6px, 6px);
  }
  .portrait-offset--2 {
    transform: translate(12px, 12px);
  }

  /* Orbit */
  .orbit {
    display: none;
  }

  /* Dot trail: this is a desktop-only decorative animation, layout
     is absolute-position-dependent, so it is hidden on mobile just
     like the orbit above. */
  .dot-trail {
    display: none;
  }

  /* On mobile, portrait reveals immediately (no dot-trail to trigger it) */
  .portrait-img-wrap {
    clip-path: inset(0 0 0 0);
  }
  .portrait-img {
    transform: scale(1);
  }

  /* Bottom Left */
  .hero-bottom-left {
    position: relative;
    bottom: auto;
    left: auto;
    order: 4;
    margin-bottom: 20px;
  }

  /* Bottom Info */
  .hero-bottom-info {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    order: 5;
    margin-bottom: 28px;
    justify-content: flex-start;
  }

  /* Scroll Indicator */
  .scroll-indicator {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    order: 6;
    margin-bottom: 20px;
  }

  .scroll-text {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 8px;
  }

  .scroll-track {
    width: 40px;
    height: 2px;
  }

  .scroll-track-fill {
    width: 20%;
    height: 100%;
  }

  /* Project Counter */
  .project-counter {
    position: relative;
    bottom: auto;
    right: auto;
    align-items: flex-start;
    order: 7;
  }

  /* Loader adjustments */
  .loader-content {
    width: min(320px, 85vw);
  }

  .loader-name {
    font-size: clamp(36px, 10vw, 56px);
  }

  .loader-top {
    font-size: 8px;
  }

  /* Next section */
  .next-section-title {
    font-size: clamp(36px, 10vw, 80px);
  }
}

/* =========================================================
   RESPONSIVE: SMALL MOBILE
   ========================================================= */
@media (max-width: 480px) {
  :root {
    --page-pad: 18px;
  }

  .nav-logo {
    font-size: 15px;
  }

  .hero {
    padding-top: 85px;
    padding-bottom: 48px;
  }

  .hero-h1 {
    font-size: clamp(38px, 12vw, 56px);
  }

  .portrait-system {
    width: 80%;
    max-width: 280px;
  }

  .hero-bottom-left {
    font-size: 9px;
  }

  .hero-bottom-info {
    font-size: 8px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .counter-numbers {
    font-size: 11px;
  }

  .counter-label {
    font-size: 8px;
  }
}

/* =========================================================
   RESPONSIVE: EXTRA SMALL
   ========================================================= */
@media (max-width: 390px) {
  :root {
    --page-pad: 16px;
  }

  .hero-h1 {
    font-size: 36px;
  }

  .nav-arrow-btn {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .portrait-system {
    width: 85%;
  }

  .hero-microcopy-left {
    font-size: 8px;
  }
}

@media (max-width: 375px) {
  .hero-h1 {
    font-size: 34px;
  }

  .hero-bottom-left {
    font-size: 8px;
    gap: 10px;
  }

  .bottom-left-pipe {
    font-size: 14px;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-line { transform: translateY(0) !important; }
  .portrait-img-wrap { clip-path: inset(0 0 0 0) !important; }
  .portrait-img { transform: scale(1) !important; }
  .orbit-path { stroke-dashoffset: 0 !important; }
  .dot-trail-path { stroke-dashoffset: 0 !important; transition: none !important; }
}