/* ============================================================
   SERGE VASIL — Portfolio Design System
   Font: Rethink Sans (Google Fonts)
   Colors: #171717 (off-black) · #E8E0D4 (red)
   ============================================================ */

/* === LOADER — gray curtain that drops downward to reveal dark page === */
#loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 10000;
  /* Curtain drops: no fade, pure transform */
  transition: none;
}
#loader.dropping {
  transform: translateY(100%);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* Loader ring = same 60px as cursor ring, same lerp delay */
.loader-ring {
  position: fixed;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10002;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: none;
}
.loader-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.loader-ring.shrink svg { opacity: 0; }

#loader-pct {
  position: fixed;
  /* Independent follow position — set by JS with its own lerp (slight delay) */
  transform: translate(-50%, -50%);
  z-index: 10003;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 20px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  user-select: none;
  pointer-events: none;
}
#loader-pct.fade { opacity: 0; }

/* === LOCAL FONTS === */
@font-face {
  font-family: 'SDL';
  src: url('sdl.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SDLI';
  src: url('sdli.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mod';
  src: url('mod.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; }

/* === TEXT SELECTION === */
::selection { background: #171717; color: #E8E0D4; }

/* === DESIGN TOKENS === */
:root {
  --bg:           #E8E0D4;
  --text:         #171717;
  --inv:          #E8E0D4;
  --font:         'Mod', sans-serif;
  --font-display: 'Mod', sans-serif;
  --font-ui:      'Mod', sans-serif;
  --nav-pad:      40px;  /* lerped 40→20px by JS on scroll */
  --nav-h:        calc(var(--nav-pad) * 2 + 20px);  /* 100px at rest, 60px scrolled */
  --pad:          clamp(16px, 2.78vw, 80px);
  --vpad:         clamp(60px, 8.3vw, 120px);
  --vpad-sm:      clamp(40px, 5.5vw, 80px);
  --gap:          16px;
  --max-w:        1440px;
}

/* === NIGHT MODE === */
.night-mode {
  --bg:   #171717;
  --text: #E8E0D4;
  --inv:  #171717;
}
.night-mode ::selection { background: #E8E0D4; color: #171717; }
.night-mode #loader-pct { color: #E8E0D4; }

/* ── Night mode cursor — mirrors day mode with colours swapped ─────────────
   Day:   bg=#E8E0D4  text=#171717  →  dot/ring use #171717; grown/filled use #E8E0D4+diff
   Night: bg=#171717  text=#E8E0D4  →  dot/ring use #E8E0D4; grown/filled use #E8E0D4+diff
   ────────────────────────────────────────────────────────────────────────── */

/* Resting dot: already red via var(--text) — no override needed */

/* Resting ring: red outline, transparent interior, no blend */
.night-mode .cursor-ring {
  background:    transparent;
  border-color:  var(--text);
  mix-blend-mode: normal;
}

/* Grown dot (link hover / press): red + difference
   → near-red on dark bg; black over red text (inverts links) */
.night-mode .cursor-dot.grown {
  background:    var(--text);
  mix-blend-mode: difference;
}

/* Filled ring (link hover): red fill + difference
   → circle appears red on page; red text inside becomes black */
.night-mode .cursor-ring.filled {
  background:    var(--text);
  border-color:  transparent;
  mix-blend-mode: difference;
}

/* Over images: white + difference inverts image colours in both modes */
.night-mode .cursor-ring.card-hover {
  background:    #E8E0D4;
  border-color:  transparent;
  mix-blend-mode: difference;
}

/* === BASE === */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 900;
  overflow-x: hidden;
  cursor: auto;
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out; /* suppressed on load by html.no-transition */
}

a { color: inherit; text-decoration: none; cursor: pointer; }

/* Hide native cursor on interactive hover (JS adds .cursor-hidden to body) */
body.cursor-hidden,
body.cursor-hidden * { cursor: none !important; }
img { display: block; max-width: 100%; }
button, input { font-family: var(--font); font-weight: 900; }

/* === CUSTOM CURSOR — ryota-sato.com style: ring + dot === */
/* Small dot — tracks mouse directly */
.cursor-dot {
  position: fixed;
  width: 4px;
  height: 4px;
  background: var(--text);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Default ease-out for size-down; JS overrides transition for size-up (spring) */
  transition: width  0.3s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cursor-dot.active { opacity: 1; }
/* Grown state (hover/press/card): bg color + difference
   → circle appears as text color, content underneath inverts */
.cursor-dot.grown {
  background: var(--bg);
  mix-blend-mode: difference;
}
/* On-media state: dot + ring invert over images/videos */
.cursor-dot.on-media {
  background: #fff;
  mix-blend-mode: difference;
}
.cursor-ring.on-media {
  border-color: #fff;
  mix-blend-mode: difference;
}

/* Ring — follows cursor with lerp delay; size transitions via JS inline overrides */
.cursor-ring {
  position: fixed;
  width: 60px;
  height: 60px;
  border: 1px solid var(--text);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Default ease-out for size-down; JS overrides for size-up (spring) */
  transition: width  0.35s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cursor-ring.active { opacity: 1; }

/* Filled state: link hover, card hover, or pressed — no dot visible */
.cursor-ring.filled {
  background: #E8E0D4;
  border-color: transparent;
  mix-blend-mode: difference;
}
/* Icons inside ring (card hover state) */
.cursor-ring-icon {
  opacity: 0;
  transition: opacity 0.15s 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #171717; /* ring fill is always #E8E0D4 — icon must always be dark */
  width: 12px;
  height: 12px;
  overflow: hidden;
  display: block;
}
.cursor-ring-icon svg {
  display: block;
  width: 12px;
  height: 12px;
}
/* Ring card-hover: filled light, dot hidden.
   mix-blend-mode reset to normal so the icon renders at true 12px —
   difference blending causes stroke antialiasing to bleed outward,
   making the icon appear larger than the card header icon. */
.cursor-ring.card-hover {
  background: #E8E0D4;
  border-color: transparent;
  mix-blend-mode: difference;
}
/* Show correct icon based on card type */
.cursor-ring.card-hover.type-plus .cursor-ring-icon--plus { opacity: 1; }
.cursor-ring.card-hover.type-lock .cursor-ring-icon--lock { opacity: 1; }
.cursor-dot.card-hover { opacity: 0 !important; }
/* Card header icon fades out when card is hovered */
.project-card:hover .project-card__icon { opacity: 0; }

/* === TYPOGRAPHY === */
.t-label {
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 20px;
  letter-spacing: 0.1em;
  font-weight: 900;
  text-transform: uppercase;
}
/* Display / editorial */
.t-h2 {
  font-family: 'SDL', sans-serif;
  font-size: clamp(28px, 4vw, 58px);
  line-height: 1.1;
  letter-spacing: 0;
  font-weight: 300;
}
.t-display {
  font-family: var(--font-display);
  font-size: clamp(72px, 19.44vw, 280px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 900;
}

/* === NOISE TEXTURE === */
.noise-layer {
  position: absolute;
  inset: 0;
  height: 800px;
  background-image: url('https://www.figma.com/api/mcp/asset/7f631311-c15a-4345-b040-1b6b9292946a');
  background-size: 174px 174px;
  mix-blend-mode: soft-light;
  opacity: 0.16;
  pointer-events: none;
  z-index: 1;
}

/* === NAV — item 13: transparent, no black box === */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--nav-pad);
  background: transparent;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav.revealed { opacity: 1; }
.nav.nav--hidden { transform: translateY(-100%); }

/* ── Unified link style — ALL nav/footer links share one rule ───────────────
   .nav-link   = top-right nav links
   .nav-mode   = top-left night/day toggle button
   .hero-scroll = bottom-left scroll/back link
   .site-email  = bottom-right email link
   color: var(--text) = #171717 in day, #E8E0D4 in night — no blend mode so
   the colour is identical regardless of what content sits behind the element.
   ─────────────────────────────────────────────────────────────────────────── */
.nav-link,
.nav-mode,
.hero-scroll,
.site-email {
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 20px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Mode toggle — upper left, mirrors nav-right on the right */
.nav-left {
  position: absolute;
  left: var(--nav-pad);
  display: flex;
  align-items: center;
}
.nav-mode {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-mode-icon {
  font-size: 24px;
  line-height: 20px;
}
.nav-mode-icon::after {
  opacity: 0;
  transition: opacity 0s;
}
.nav-mode:hover .nav-mode-icon::after {
  opacity: 1;
}
.nav-mode:hover .nav-link-text {
  transform: translateY(-100%);
}

/* Logo — centered absolutely in the nav bar */
.nav-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: color 0.5s ease-in-out;
}
.nav-logo img { height: 14px; width: auto; }
.nav-logo svg { display: block; height: 14px; width: auto; }
.nav-logo svg path { fill: var(--text); transition: fill 0.5s ease-in-out; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 48px;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
}


/* Cuberto-style slide-up hover: overflow clip on inner wrap */
.nav-link-wrap {
  display: inline-block;
  overflow: hidden;
  height: 20px;
  vertical-align: middle;
  line-height: 20px;
}
.nav-link-text {
  display: block;
  position: relative;
  transition: transform 1.2s cubic-bezier(.19,1,.22,1);
}
.nav-link-text::after {
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
  pointer-events: none;
}
.nav-link:hover .nav-link-text {
  transform: translateY(-100%);
}

/* Active page dot */
.nav-link--active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

/* === PAGE WRAPPER — starts hidden, revealed after loader === */
.page {
  padding-top: var(--nav-h);
  position: relative;
  /* No max-width: content expands at all breakpoints */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.page.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* === PANEL PAGE TRANSITION === */
/* Full-screen overlay fades in/out between pages */
#sv-panel {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 8000;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
/* Flash prevention: head script sets data-sv-panel before first paint
   so the overlay is already fully visible on arrival */
html[data-sv-panel] #sv-panel {
  opacity: 1;
  pointer-events: all;
}

/* Page exit — legacy fallback (panel transition replaces this) */
.page.exiting {
  opacity: 0 !important;
  transform: translateY(-20px) !important;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important,
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.nav.exiting {
  opacity: 0 !important;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.hero-text-wrap {
  padding: calc(var(--vpad) * 0.5) clamp(16px, 11vw, 160px) calc(var(--vpad) * 0.5);
}

/* email link — fixed bottom-left, same style as nav & scroll links */
.site-email {
  position: fixed;
  bottom: calc((var(--nav-h) - 20px) / 2);
  left: var(--nav-pad);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.site-email.footer--hidden { transform: translateY(80px); }
.site-email:hover .nav-link-text {
  transform: translateY(-100%);
}

/* scroll/back link — fixed bottom-right, aligned with nav padding */
.hero-scroll {
  position: fixed;
  bottom: calc((var(--nav-h) - 20px) / 2);
  right: var(--nav-pad);
  transform: none;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-scroll.footer--hidden { transform: translateY(80px); }
.hero-scroll.active {
  opacity: 1;
  pointer-events: auto;
}
.hero-scroll-wrap {
  display: inline-block;
  overflow: hidden;
  height: 20px;
  vertical-align: middle;
  line-height: 20px;
}
.hero-scroll-text {
  display: block;
  position: relative;
  transition: transform 1.2s cubic-bezier(.19, 1, .22, 1);
}
.hero-scroll-text::after {
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
  pointer-events: none;
}
.hero-scroll:hover .hero-scroll-text {
  transform: translateY(-100%);
}

/* Icon — clip container + duplicate-reveal, mirrors text animation */
.hero-scroll-icon-clip {
  overflow: hidden;
  height: 11px;
  position: relative;
  top: -1px;
  width: 12px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-start;
  vertical-align: middle;
}
.hero-scroll-icon-slide {
  display: flex;
  flex-direction: column;
  transition: transform 1.2s cubic-bezier(.19, 1, .22, 1);
}
.hero-scroll:hover .hero-scroll-icon-slide {
  transform: translateY(-50%);
}
.hero-scroll-icon-svg {
  display: block;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* hero text — font style inherits from .t-h2 */
.hero-text-wrap p {
  color: var(--text);
  text-align: center;
}
.hero-libra {
  font-family: 'SDLI', sans-serif;
  font-style: italic;
  color: var(--text); /* explicit — avoids inheritance lag during mode transition */
}
.hero-text-wrap p .hero-line {
  display: inline;
  line-height: inherit;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-text-wrap p .hero-line.visible {
  opacity: 1;
  transform: translateY(0);
}


/* === PROJECT GRID — item 12: per-column precise gaps === */
.work-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 calc(var(--pad) * 0.55);
  padding-bottom: 248px;
  margin-top: clamp(32px, 4.4vw, 62px);
}

.work-col {
  flex: none; /* sized by card content, not stretching to fill */
  display: flex;
  flex-direction: column;
}

/* Column start offsets — left col starts slightly lower than right */
.work-col:nth-child(1) { margin-top: 64px; }
.work-col:nth-child(2) { margin-top: 0; }

/* Explicit card widths from Figma (at 1440px viewport) */
.work-col:nth-child(1) .project-card:nth-child(1) { width: 35.1vw; margin-bottom: 215px; margin-left: 80px; }
.work-col:nth-child(1) .project-card:nth-child(2) { width: 35.1vw; margin-left: 10.56vw; }
.work-col:nth-child(2) .project-card:nth-child(1) { width: 30.9vw; margin-bottom: 163px; }
.work-col:nth-child(2) .project-card:nth-child(2) { width: 35.1vw; margin-left: 7.43vw; }

/* Cards — clip-panel image reveal replaces card fade-in */
.project-card {
  position: relative;
  transition: opacity 0.5s cubic-bezier(0.42, 0, 0.58, 1),
              filter  0.5s cubic-bezier(0.42, 0, 0.58, 1);
}

.project-card__inner {
  will-change: transform;
  transform: scale(1);
  transition: transform 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}

/* Hover-blur + scale effect — non-hovered cards dim, blur, and shrink */
.work-grid.has-hover .project-card {
  opacity: 0.35;
  filter: blur(12px);
}
.work-grid.has-hover .project-card.is-hovered {
  opacity: 1;
  filter: blur(0);
}
.work-grid.has-hover .project-card:not(.is-hovered) .project-card__inner {
  transform: scale(1);
}
.work-grid.has-hover .project-card.is-hovered .project-card__inner {
  transform: scale(1);
}

/* Reveal panel — cover that slides up to reveal image on scroll.
   Used on homepage cards (.card-reveal-panel) and project pages (.img-reveal-panel).
   Background matches page bg so it's invisible before sliding away. */
.card-reveal-panel,
.img-reveal-panel {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 3;
  pointer-events: none;
  transition: transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.project-card__image.img-revealed .card-reveal-panel,
.img-revealed .img-reveal-panel {
  transform: translateY(-101%);
}

/* Card column parallax — each column gets subtle independent translate */
.work-col {
  will-change: transform;
}



.project-card__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
}
/* Two-line label block: name + descriptor stacked */
.project-card__label {
  display: flex;
  flex-direction: column;
}
.project-card__name {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 900;
}
.project-card__descriptor {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 900;
}
/* Sub text below the image */
.project-card__sub {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.04em;
  color: var(--text);
  font-weight: 900;
  margin-top: 16px;
  margin-bottom: 0;
}
.project-card__icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.project-card__icon svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.project-card__image {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  display: block;
}
.project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Per-card aspect ratios from Figma */
.work-col:nth-child(1) .project-card:nth-child(1) .project-card__image { aspect-ratio: 506 / 399; }
.work-col:nth-child(1) .project-card:nth-child(2) .project-card__image { aspect-ratio: 506 / 353; }
.work-col:nth-child(2) .project-card:nth-child(1) .project-card__image { aspect-ratio: 446 / 332; }
.work-col:nth-child(2) .project-card:nth-child(2) .project-card__image { aspect-ratio: 506 / 399; }


/* .project-card__footer / year / desc removed — new lockup has name above image, sub below */

.icon-lock, .icon-plus { width: 12px; height: 12px; }

/* === VIBE NOTE — fixed footer center, scroll-linked slide-up === */
.vibe-note {
  position: fixed;
  bottom: calc((var(--nav-h) - 20px) / 2);
  left: 50%;
  /* initial off-screen state set by JS on first scroll tick */
  transform: translateX(-50%) translateY(120px);
  z-index: 50;
  white-space: nowrap;
  /* same as .project-card__sub */
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--text);
  opacity: 0.4;
  margin: 0;
  padding: 0;
}
.vibe-note__logo {
  display: inline;
  height: 0.75em;
  width: auto;
  vertical-align: calc(-0.05em + 0.5px); /* optical baseline alignment */
}

/* === CTA SECTION === */
.cta-section {
  padding: var(--vpad-sm) var(--pad);
  text-align: center;
}
.cta-section a {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.33vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  font-weight: 900;
  display: inline-block;
}

/* === BACK TO TOP === */
.back-top {
  padding: var(--pad);
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}

/* === WORK PAGE === */
.work-page-header {
  position: relative;
  overflow: hidden;
  height: clamp(80px, 19.4vw, 280px);
  margin-top: clamp(32px, 4.4vw, 64px);
}

/* === PASSWORD PAGE === */
.password-wrap {
  min-height: calc(100vh - var(--nav-h));
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: var(--pad); gap: 32px;
}
.password-heading {
  font-family: 'SDL', sans-serif;
  font-size: clamp(28px, 3.33vw, 48px); line-height: 1.1;
  letter-spacing: 0; color: var(--text); text-align: center;
  font-weight: 300;
}
.password-sub {
  font-size: 12px; line-height: 18px; letter-spacing: 0.02em;
  color: var(--text); opacity: 0.6; text-align: center;
}
.password-form {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; width: 100%; max-width: 360px;
}
.password-input {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid rgba(232,224,212,0.3); padding: 12px 0;
  font-size: 12px; line-height: 18px; letter-spacing: 0.03em;
  color: var(--text); outline: none;
  text-align: center; transition: border-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.password-input::placeholder { color: var(--text); opacity: 0.3; letter-spacing: 0.03em; }
.password-input:focus { border-color: var(--text); }
.password-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; border: 1px solid rgba(232,224,212,0.3); color: var(--text);
  font-size: 12px; line-height: 18px; letter-spacing: 0.03em;
  padding: 10px 32px; border-radius: 30px; cursor: none;
  transition: background 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.password-submit:hover { background: var(--text); color: var(--inv); border-color: var(--text); }
.password-error {
  font-size: 12px; line-height: 18px; letter-spacing: 0.02em; color: var(--text);
  opacity: 0; transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); text-align: center;
}
.password-error.visible { opacity: 0.6; }

/* === 404 PAGE === */
.not-found-wrap {
  min-height: calc(100vh - var(--nav-h));
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: var(--pad); gap: 24px; text-align: center;
}
.not-found-number {
  font-size: clamp(80px, 19.4vw, 280px); line-height: 1;
  letter-spacing: -0.04em; color: var(--text);
  font-weight: 900; opacity: 0.15;
}
.not-found-title {
  font-size: clamp(20px, 3.33vw, 48px); line-height: 1.333;
  letter-spacing: -0.02em; color: var(--text); font-weight: 900;
}
.not-found-sub {
  font-size: 12px; line-height: 18px; letter-spacing: 0.02em;
  color: var(--text); opacity: 0.6; max-width: 320px;
}
.not-found-link {
  font-size: 12px; line-height: 18px; letter-spacing: 0.03em;
  color: var(--text);
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
}

/* === ICONS === */
svg.icon { display: inline-block; vertical-align: middle; overflow: visible; }

/* ============================================================
   NAV / FOOTER GRADIENT FADE
   Separates fixed nav and footer links from scrolling content.
   background-color + mask-image (instead of gradient background)
   allows background-color to transition smoothly on mode switch.
   ============================================================ */
body::before,
body::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 49;  /* above content, below footer links (50) and nav (100) */
  background-color: var(--bg);
  transition: background-color 0.5s ease-in-out; /* suppressed on load by html.no-transition */
}

body::before {
  top: 0;
  height: calc(var(--nav-h) + 48px);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

body::after {
  bottom: 0;
  height: calc(var(--nav-h) + 16px);
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
          mask-image: linear-gradient(to top, black 0%, transparent 100%);
}

/* ============================================================
   NO-TRANSITION — applied on initial page load to suppress all
   permanent colour transitions so the saved mode is applied
   instantly without any flash or animation.
   ============================================================ */
html.no-transition,
html.no-transition *,
html.no-transition *::before,
html.no-transition *::after {
  transition: none !important;
}

/* ============================================================
   SMOOTH MODE TRANSITION
   Temporarily applied by JS when user toggles day/night.
   Overrides all element transitions to animate only the
   colour-related properties, so nothing flashes.
   Removed after 0.5 s so hover / scroll animations resume.
   ============================================================ */
html.mode-transitioning,
html.mode-transitioning *,
html.mode-transitioning *::before,
html.mode-transitioning *::after {
  transition: color            0.5s ease-in-out,
              background-color 0.5s ease-in-out,
              border-color     0.5s ease-in-out,
              fill             0.5s ease-in-out,
              stroke           0.5s ease-in-out !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1023px) {
  .nav-right { gap: 32px; }
  .proj-page { padding-bottom: 100px; }
}

@media (max-width: 639px) {
  :root { --pad: 32px; --nav-pad: 32px; }
  .nav-about-suffix { display: none; }
  #navAbout .nav-link-text::after { content: "Info"; }
  body, body.cursor-hidden, body.cursor-hidden * { cursor: auto !important; }
  a { cursor: auto; }
  button { cursor: pointer; }
  .cursor-dot, .cursor-ring { display: none; }
  .hero { height: 100svh; }
  /* Logo 20% smaller on mobile */
  /* Disable blur effect on mobile (no hover on touch) */
  .work-grid.has-hover .project-card { filter: none !important; opacity: 1 !important; }

  .work-grid {
    flex-direction: column;
    align-items: stretch;
    padding: 0 var(--pad);
    gap: 0;
  }
  .work-col {
    display: flex;
    flex-direction: column;
    margin-top: 0 !important;
    width: 100%;
  }
  /* Reset all desktop vw widths and margins; cards fill column width */
  .work-col .project-card,
  .work-col:nth-child(1) .project-card:nth-child(1),
  .work-col:nth-child(1) .project-card:nth-child(2),
  .work-col:nth-child(2) .project-card:nth-child(1),
  .work-col:nth-child(2) .project-card:nth-child(2) {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 40px !important;
  }
  .work-col:last-child .project-card:last-child {
    margin-bottom: 100px !important;
  }

  /* Hero h1 20% larger on mobile */
  .t-h2 { font-size: 34px; }

  .nav-right { gap: 20px; }
  .hero-text-wrap {
    padding-left: var(--pad);
    padding-right: var(--pad);
  }

  /* Mobile: gradients fade with nav/footer on scroll */
  body::before,
  body::after {
    transition: background-color 0.5s ease-in-out,
                opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  body.nav-faded::before   { opacity: 0; }
  body.footer-faded::after { opacity: 0; }

  /* Mobile scroll-hide: shrink nav height (vertical pad collapses), never translate horizontally */
  .nav {
    overflow: hidden;
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .nav.nav--hidden {
    height: 0;
    transform: none;
  }

  /* Mobile footer: slide purely downward — use large enough value to clear viewport */
  .site-email.footer--hidden  { transform: translateY(120px); }
  .hero-scroll.footer--hidden { transform: translateY(120px); }

}

/* --pad is clamp(16px, 2.78vw, 80px) in :root — scales at all breakpoints */