/* ============================================================
   SAAD BIN SHAHBAZ ✲ PORTFOLIO
   Original implementation — interaction patterns inspired by
   spiral-style portfolio sites, rebuilt from scratch.
   ============================================================ */

:root {
  --font: "Switzer", "Helvetica Neue", Arial, sans-serif;

  --ink: #0b0b0c;
  --ink-20: rgba(11, 11, 12, 0.2);
  --paper: #f7f7f5;
  --paper-dim: rgba(247, 247, 245, 0.4);
  --grey: #e7e7e3;
  --pop: #9dff3f;
  --mint: #3df5c5;
  --butter: #ffd84d;

  --margin: 30px;
  --gutter: 16px;
  --radius-card: 14px;
  --radius-sheet: 26px;

  --spring: linear(0, 0.0046, 0.0192 1.4%, 0.0798 3%, 0.318 6.6%, 0.4972 9.2%,
    0.6573 11.9%, 0.7224, 0.7796, 0.8298, 0.8737 17.9%, 0.9122, 0.9445 21.5%,
    0.9595, 0.9722, 0.983, 0.992 25.8%, 1.0058 28.9%, 1.0117 31.7%, 1.0133 35.2%,
    1.0086 43.2%, 1.0014 53.6%, 0.9994 64.4%, 1 99.8%);
  --quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --expo: cubic-bezier(0.19, 1, 0.22, 1);
}

@media (max-width: 900px) {
  :root { --margin: 18px; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body.no-scroll, body.is-loading { overflow: hidden; height: 100dvh; }

/* project pages strip the chrome back, like the reference */
body.proj-mode .logo-wrap,
body.proj-mode .menu-btn,
body.proj-mode .menu-panel-bg,
body.proj-mode .reel { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.logo-wrap, .menu-btn, .menu-panel-bg, .reel { transition: opacity 0.3s ease; }

button {
  font-family: inherit;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
}
a { color: inherit; text-decoration: none; }
img { display: block; }

::selection { background: var(--pop); color: var(--ink); }

/* ------------------------------------------------ backdrop */

.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.backdrop-grid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.5;
}
.backdrop-grain {
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: grain 0.9s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 3%); }
  50% { transform: translate(3%, -2%); }
  75% { transform: translate(-1%, -3%); }
  100% { transform: translate(2%, 2%); }
}

/* ------------------------------------------------ chrome */

.chrome > * { position: fixed; z-index: 40; }

/* logo — top left */
.logo-wrap {
  top: var(--margin); left: var(--margin);
  width: 60px; height: 60px;
  display: block;
}
.logo {
  display: block; width: 100%; height: 100%;
  border-radius: 50%;
  transition: transform 0.2s ease-out;
  animation: logo-bob 5s ease-in-out infinite;
}
.logo svg { width: 100%; height: 100%; display: block; }
@keyframes logo-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-6deg); }
}
.logo-wrap:active .logo { transform: scale(0.88); animation-play-state: paused; }
.logo-tag {
  position: absolute;
  left: calc(100% + 10px); top: 4px;
  display: flex; align-items: center;
  opacity: 0;
  transform: scale(0.5) translateX(-12px);
  transform-origin: left center;
  transition: opacity 0.2s ease-out, transform 0.5s var(--spring);
  pointer-events: none;
}
.logo-tag-bubble {
  background: var(--paper); color: var(--ink);
  font-size: 15px; font-weight: 600;
  padding: 9px 16px;
  border-radius: 30px 30px 30px 6px;
  white-space: nowrap;
}
.logo-tag-star {
  position: absolute; top: -16px; right: -16px;
  width: 26px; height: 26px;
  fill: var(--butter);
  z-index: -1;
  animation: spin 7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  .logo-wrap:hover .logo-tag {
    opacity: 1;
    transform: scale(1) rotate(-6deg) translateX(0) translateY(-10px);
  }
}

/* view switch — top centre */
.switch {
  top: calc(var(--margin) + 14px); left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 18px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.switch.is-hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-8px); }
.switch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--paper); }
.switch-btn {
  font-size: 17px; font-weight: 500;
  color: var(--paper);
  opacity: 0.4;
  min-width: 56px;
  transition: opacity 0.3s ease-out;
}
.switch-btn:first-child { text-align: right; }
.switch-btn:last-of-type { text-align: left; }
.switch-btn.is-active { opacity: 1; }
.roll { display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
.roll span {
  display: block;
  transition: transform 0.35s var(--spring), opacity 0.3s ease;
}
.roll span:nth-child(2) {
  position: absolute; inset: 0;
  transform: translateY(-105%); opacity: 0;
}
@media (hover: hover) {
  .switch-btn:hover .roll span:first-child,
  .switch-btn.is-active .roll span:first-child { transform: translateY(105%); opacity: 0; }
  .switch-btn:hover .roll span:nth-child(2),
  .switch-btn.is-active .roll span:nth-child(2) { transform: translateY(0); opacity: 1; }
}

/* ------------------------------------------------ menu */

.menu-zone { top: 0; left: 0; width: 0; height: 0; }

.menu-btn {
  position: fixed;
  top: var(--margin); right: var(--margin);
  z-index: 46;
  background: var(--paper); color: var(--ink);
  font-size: 17px; font-weight: 500;
  height: 48px;
  padding: 0 26px 0 18px;
  border-radius: 100px;
  display: flex; align-items: center;
  user-select: none;
}
.menu-btn::after {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink);
  margin-left: 9px;
  transition: transform 0.3s var(--spring);
}
.menu-btn-text { display: inline-flex; }
.menu-btn-text .letter { display: inline-block; white-space: pre; }
.menu-btn.is-open { cursor: default; pointer-events: none; }
.menu-btn.is-open .menu-btn-text, .menu-btn.is-open::after {
  opacity: 0; transition: opacity 0.2s ease;
}
.menu-btn .menu-btn-text, .menu-btn::after { transition: opacity 0.25s ease 0.3s; }

.menu-close {
  position: fixed;
  z-index: 48;
  top: calc(var(--margin) + 18px); right: calc(var(--margin) + 18px);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transform: scale(0.12);
  transform-origin: top right;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.7s var(--spring), opacity 0.25s ease;
}
.menu-close svg { transition: transform 0.45s ease, opacity 0.3s ease; transform: rotate(-45deg); opacity: 0; }
.menu-close-text {
  position: absolute; right: calc(100% + 12px);
  color: var(--ink); font-size: 16px; font-weight: 500;
  opacity: 0; transform: translateX(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.menu-close.is-open {
  transform: scale(1); opacity: 1; pointer-events: auto;
}
.menu-close.is-open svg { transform: rotate(0deg); opacity: 1; }
.menu-close.is-open .menu-close-text { opacity: 1; transform: translateX(0); transition-delay: 0.25s; }
@media (hover: hover) { .menu-close:hover svg { transform: rotate(90deg); } }

.menu-panel-bg {
  position: fixed;
  top: var(--margin); right: var(--margin);
  width: 86px; height: 48px;
  background: var(--paper);
  border-radius: 24px;
  z-index: 44;
  transition: width 0.85s var(--spring), height 0.95s var(--spring), border-radius 0.85s ease;
}
.menu-panel-bg.is-open {
  width: min(460px, calc(100vw - var(--margin) * 2));
  height: calc(100dvh - var(--margin) * 2);
  border-radius: 18px;
}

.menu-panel {
  position: fixed;
  top: var(--margin); right: var(--margin);
  width: min(460px, calc(100vw - var(--margin) * 2));
  height: calc(100dvh - var(--margin) * 2);
  z-index: 45;
  display: flex; flex-direction: column; justify-content: center;
  padding: 24px 24px 24px 48px;
  color: var(--ink);
  pointer-events: none;
  visibility: hidden;
}
.menu-panel.is-open { pointer-events: auto; visibility: visible; }

.menu-links { display: flex; flex-direction: column; gap: 14px; }
.menu-link {
  position: relative;
  width: fit-content;
  font-size: clamp(44px, 5.6vw, 72px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  transition: padding-left 0.45s var(--spring);
  opacity: 0;
  transform: translateY(14px);
}
.menu-panel.is-open .menu-link {
  opacity: 1; transform: translateY(0);
  transition: padding-left 0.45s var(--spring), opacity 0.4s ease, transform 0.5s var(--spring);
}
.menu-panel.is-open .menu-link:nth-child(1) { transition-delay: 0.16s; }
.menu-panel.is-open .menu-link:nth-child(2) { transition-delay: 0.23s; }
.menu-panel.is-open .menu-link:nth-child(3) { transition-delay: 0.3s; }
.menu-link::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  transform: translateY(-50%) scale(0);
  transition: transform 0.45s var(--spring), opacity 0.45s var(--spring);
}
@media (hover: hover) {
  .menu-link:hover { padding-left: 38px; }
  .menu-link:hover::before { opacity: 1; transform: translateY(-50%) scale(1); }
}

.menu-foot {
  position: absolute;
  left: 0; bottom: 0; width: 100%;
  padding: 22px 22px 22px 48px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
}
.menu-email {
  font-size: 15px; font-weight: 500;
  opacity: 0; transform: translate(10px, -8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.menu-socials {
  display: flex;
  opacity: 0; transform: translate(10px, -8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.menu-panel.is-open .menu-email { opacity: 1; transform: translate(0, 0); transition: opacity 0.5s ease 0.32s, transform 0.5s ease 0.32s; }
.menu-panel.is-open .menu-socials { opacity: 1; transform: translate(0, 0); transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s; }
@media (hover: hover) { .menu-email:hover { text-decoration: underline; } }

.menu-socials .social { display: block; padding: 0 4px; }
.menu-socials .social:first-child { padding-left: 0; }
.menu-socials .social:last-child { padding-right: 0; }
.social-inner {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.social-inner svg { width: 17px; height: 17px; fill: currentColor; }
.menu-socials:has(.social:hover) .social:not(:hover) .social-inner {
  background: var(--grey); color: var(--ink); transform: scale(0.88);
}

/* ------------------------------------------------ reel (CV card) */

.reel {
  left: var(--margin); bottom: var(--margin);
  z-index: 30;
  width: 0; height: 0;
  display: block;
}
.reel-card {
  position: absolute;
  left: -120px; bottom: -50px;
  width: 250px; aspect-ratio: 16 / 9.5;
  display: block;
  transform: rotate(-15deg);
  transition: transform 0.35s var(--spring);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}
@media (hover: hover) {
  .reel:hover .reel-card { transform: rotate(-12deg) scale(1.06) translateY(-6px); }
}
.reel:active .reel-card { transform: rotate(-12deg) scale(0.98); }
.reel-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.reel-marquee { position: absolute; inset: -14px; pointer-events: none; }
.reel-marquee .rm-char {
  position: absolute; top: 0; left: 0;
  font-size: 16px; font-weight: 600;
  color: var(--paper);
  offset-path: inset(0 round 28px);
  offset-rotate: auto;
  offset-anchor: center;
  animation: rm-orbit 14s linear infinite;
}
@keyframes rm-orbit {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
@media (max-width: 900px) {
  .reel-card { width: 190px; left: -95px; bottom: -45px; }
}

/* ------------------------------------------------ sound button */

.sound {
  right: var(--margin); bottom: var(--margin);
  z-index: 30;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.sound-bg {
  position: absolute; inset: 0;
  background: var(--paper); border-radius: 50%;
  transition: transform 0.18s ease-out;
}
@media (hover: hover) { .sound:hover .sound-bg { transform: scale(0.9); } }
.sound-bars {
  position: relative;
  display: flex; align-items: center; gap: 2.5px;
  height: 15px;
}
.sound-bars i {
  width: 2.5px; height: 4px;
  background: var(--ink);
  border-radius: 2px;
  transition: height 0.3s ease;
}
.sound-bars i:nth-child(1) { height: 6px; }
.sound-bars i:nth-child(2) { height: 11px; }
.sound-bars i:nth-child(3) { height: 8px; }
.sound-bars i:nth-child(4) { height: 12px; }
.sound.is-on .sound-bars i { animation: eq 0.9s ease-in-out infinite alternate; }
.sound.is-on .sound-bars i:nth-child(1) { animation-delay: 0s; }
.sound.is-on .sound-bars i:nth-child(2) { animation-delay: 0.18s; }
.sound.is-on .sound-bars i:nth-child(3) { animation-delay: 0.36s; }
.sound.is-on .sound-bars i:nth-child(4) { animation-delay: 0.54s; }
@keyframes eq {
  from { height: 4px; }
  to { height: 15px; }
}

/* ------------------------------------------------ cursor pill */

.cursor-pill {
  position: fixed; left: 0; top: 0;
  z-index: 60;
  display: flex; align-items: center; gap: 12px;
  background: var(--paper); color: var(--ink);
  padding: 7px; padding-right: 22px;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 24px) scale(0.6);
  transform-origin: center bottom;
  transition: opacity 0.18s ease, transform 0.35s var(--spring);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.cursor-pill.is-on { opacity: 1; transform: translate(-50%, 14px) scale(1); }
/* touch: pinned bottom-center, follows the centered spiral card, not a cursor */
.cursor-pill.is-touch { left: 50%; top: auto; bottom: 9vh; translate: none; }
.cursor-pill-img { width: 52px; height: 36px; object-fit: cover; border-radius: 8px; }
.cursor-pill-text { font-size: 17px; font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------ views / spiral */

#view { position: relative; z-index: 1; }

.spiral-stage {
  position: fixed; inset: 0;
  perspective: 1100px;
  perspective-origin: 50% 50%;
  z-index: 1;
  overflow: hidden;
  /* claim the gesture so touch swipes drive the spiral instead of the
     browser canceling the pointer to scroll/zoom (which also ate taps) */
  touch-action: none;
}
.s-card {
  position: absolute;
  left: 50%; top: 50%;
  width: min(25vw, 430px);
  aspect-ratio: 16 / 9;
  margin: calc(min(25vw, 430px) * -0.281) 0 0 calc(min(25vw, 430px) * -0.5);
  border-radius: var(--radius-card);
  cursor: pointer;
  will-change: transform, filter, opacity;
}
.s-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}
.spiral-stage.is-leaving { transition: opacity 0.35s ease; opacity: 0; }
@media (max-width: 900px) {
  .s-card { width: 64vw; margin: calc(64vw * -0.281) 0 0 -32vw; }
}

/* list view */
.list-wrap {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 20vh 0 24vh;
  min-height: 100vh;
}
.list-item a { display: block; color: inherit; text-decoration: none; touch-action: manipulation; }
.list-item p {
  font-size: clamp(34px, 4.4vw, 62px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  padding: 10px 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
  animation: list-in 0.7s var(--expo) backwards;
}
@keyframes list-in {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (hover: hover) {
  .list-wrap:has(p:hover) .list-item p:not(:hover) { opacity: 0.35; }
}

/* ------------------------------------------------ project page */

.project-page { position: relative; z-index: 1; }

.sheet {
  position: relative;
  margin: var(--margin);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-sheet);
  overflow: clip;
  animation: sheet-in 0.7s var(--expo) backwards;
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(7vh); }
  to { opacity: 1; transform: translateY(0); }
}

.proj-hero { position: relative; height: min(92vh, 110vw); }
.proj-hero img { width: 100%; height: 100%; object-fit: cover; }

.proj-close {
  position: absolute; top: 22px; right: 22px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s var(--spring);
  z-index: 5;
}
.proj-close svg { transition: transform 0.4s ease; }
@media (hover: hover) {
  .proj-close:hover { transform: scale(1.08); }
  .proj-close:hover svg { transform: rotate(90deg); }
}

.proj-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--gutter);
  padding: clamp(40px, 7vw, 96px) clamp(24px, 8vw, 130px);
}
.proj-title {
  margin: 0;
  font-size: clamp(40px, 4.6vw, 76px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.proj-meta {
  margin-top: 22px;
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 14px; font-weight: 500;
}
.proj-meta span {
  border: 1px solid var(--ink-20);
  padding: 6px 14px;
  border-radius: 30px;
}
.proj-desc p {
  margin: 0 0 26px;
  font-size: 17px; line-height: 1.5; font-weight: 500;
  max-width: 44ch;
}
.pill-btn {
  display: inline-flex; align-items: center;
  background: var(--ink); color: var(--paper);
  font-size: 17px; font-weight: 500;
  padding: 15px 22px;
  border-radius: 50px;
  transition: transform 0.3s var(--spring);
}
.pill-btn::after {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--paper);
  margin-left: 9px;
}
@media (hover: hover) { .pill-btn:hover { transform: scale(1.05); } }

.proj-stats {
  display: flex; flex-wrap: wrap;
  gap: clamp(28px, 6vw, 90px);
  padding: 0 clamp(24px, 8vw, 130px) clamp(40px, 6vw, 80px);
}
.stat-num {
  font-size: clamp(40px, 4.5vw, 72px);
  font-weight: 600; letter-spacing: -0.04em;
  line-height: 1;
}
.stat-label {
  margin-top: 8px;
  font-size: 15px; font-weight: 500;
  opacity: 0.55;
  max-width: 22ch;
}

.proj-frames {
  display: flex; flex-direction: column;
  gap: clamp(56px, 9vw, 140px);
  padding: clamp(20px, 4vw, 60px) 0 clamp(70px, 10vw, 150px);
}
.frame {
  width: min(62%, 880px);
  border-radius: 18px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.7s var(--quad), transform 0.9s var(--spring);
  will-change: transform, opacity;
}
.frame.is-in { opacity: 1; transform: scale(1); }
.frame:nth-child(odd) { align-self: flex-start; margin-left: clamp(24px, 9vw, 150px); }
.frame:nth-child(even) { align-self: flex-end; margin-right: clamp(24px, 9vw, 150px); }
.frame img {
  width: 100%; border-radius: inherit;
  transform: scale(1.5);
  transition: transform 0.9s var(--spring);
  will-change: transform;
}
.frame.is-in img { transform: scale(1); }
@media (max-width: 900px) {
  .proj-head { grid-template-columns: 1fr; }
  .frame { width: 84%; }
}

/* dark zone under the sheet: next project */
.next-zone {
  position: relative;
  padding: 26px var(--margin) 16vh;
  text-align: center;
}
.back-home {
  display: inline-block;
  font-size: 15px; font-weight: 500;
  color: var(--paper-dim);
  margin-bottom: 9vh;
  position: relative;
}
.back-home::after {
  content: "";
  position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--paper);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.25s ease-in-out;
}
@media (hover: hover) {
  .back-home:hover { color: var(--paper); }
  .back-home:hover::after { transform: scaleX(1); transform-origin: left; }
}

.next-thumb-wrap {
  position: relative;
  width: min(46vw, 700px);
  margin: 0 auto;
  cursor: pointer;
}
.next-thumb-wrap img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 18px;
  transition: transform 0.25s ease-out;
  transform: scale(var(--ns, 1));
}
.sticker {
  position: absolute;
  font-size: clamp(15px, 1.6vw, 22px);
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 40px;
  white-space: nowrap;
  pointer-events: none;
}
.sticker.next-up {
  left: -7%; bottom: -4%;
  background: var(--paper); color: var(--ink);
  transform: rotate(-8deg);
}
.sticker.keep-scrolling {
  right: -6%; top: -6%;
  background: var(--mint); color: var(--ink);
  transform: rotate(5deg);
  animation: sticker-pulse 2.2s ease-in-out infinite;
}
@keyframes sticker-pulse {
  0%, 100% { transform: rotate(5deg) scale(1); }
  50% { transform: rotate(7deg) scale(1.05); }
}
.next-title {
  margin-top: 30px;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 600;
}
@media (max-width: 900px) {
  .next-thumb-wrap { width: 80vw; }
}

/* ------------------------------------------------ about page */

.about-page { position: relative; z-index: 1; }

.about-pin { height: 320vh; position: relative; }
.about-sticky {
  position: sticky; top: 0;
  height: 100dvh;
  display: flex; align-items: center; justify-content: center;
}
.about-text {
  width: min(900px, 84vw);
  margin: 0;
  text-align: center;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.about-text .w {
  color: var(--paper);
  opacity: 0.22;
  transition: opacity 0.25s ease;
}
.about-text .w.lit { opacity: 1; }
.about-chip {
  display: inline-block;
  width: 1.9em; height: 1.25em;
  border-radius: 8px;
  object-fit: cover;
  vertical-align: -0.28em;
  margin: 0 0.12em;
  opacity: 0.22;
  transition: opacity 0.25s ease, transform 0.4s var(--spring);
  transform: rotate(-4deg);
}
.about-chip.lit { opacity: 1; transform: rotate(3deg) scale(1.12); }

.about-facts {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(30px, 7vw, 110px);
  padding: 4vh var(--margin) 16vh;
  text-align: center;
}
.about-facts .stat-label { opacity: 0.45; }

.about-marquee { overflow: hidden; padding: 2vh 0 10vh; }
.marquee-row { display: flex; width: max-content; margin-bottom: var(--gutter); }
.marquee-track {
  display: flex; gap: var(--gutter);
  padding-right: var(--gutter);
  animation: marquee 38s linear infinite;
}
.marquee-row.rev .marquee-track { animation-direction: reverse; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.m-thumb {
  position: relative;
  width: clamp(240px, 24vw, 380px);
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
}
.m-thumb img { width: 100%; height: 100%; object-fit: cover; }
.m-thumb .m-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 11, 12, 0.55);
  color: var(--paper);
  font-size: 17px; font-weight: 600;
  opacity: 0;
  transition: opacity 0.25s ease;
}
@media (hover: hover) {
  .m-thumb:hover .m-overlay { opacity: 1; }
  .marquee-row:hover .marquee-track { animation-play-state: paused; }
}

.about-foot {
  padding: 0 var(--margin) 14vh;
  display: flex; flex-direction: column; align-items: center;
  gap: 5vh;
  text-align: center;
}
.about-socials { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.about-socials a {
  font-size: 16px; font-weight: 500;
  border: 1px solid rgba(247, 247, 245, 0.25);
  padding: 12px 24px;
  border-radius: 40px;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s var(--spring);
}
@media (hover: hover) {
  .about-socials a:hover {
    background: var(--paper); color: var(--ink);
    transform: scale(1.06) rotate(-2deg);
  }
}
.about-credits { font-size: 14px; opacity: 0.45; margin: 0; }

/* ------------------------------------------------ loader */

.loader {
  position: fixed; inset: 0;
  z-index: 100;
  background: var(--ink);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: transform 0.6s var(--quad);
}
.loader.is-done { transform: translateY(100%); }
.loader.is-done .loader-center, .loader.is-done .loader-pct, .loader.is-done .loader-nosound {
  opacity: 0; transition: opacity 0.3s ease-out;
}
.loader-center {
  display: flex; flex-direction: column; align-items: center;
  margin-top: -60px;
}
.loader-face { width: 86px; height: 86px; display: block; }
.loader-face svg { width: 100%; height: 100%; }
.loader-tag {
  margin: 34px 0 40px;
  font-size: 23px; font-weight: 500;
  text-align: center;
  line-height: 1.35;
  white-space: pre-line;
}
.loader-tag .line {
  display: block; overflow: hidden;
}
.loader-tag .line span {
  display: block;
  transform: translateY(110%);
  animation: line-up 0.8s var(--expo) forwards;
}
@keyframes line-up { to { transform: translateY(0); } }

.loader-enter {
  background: var(--paper); color: var(--ink);
  font-size: 18px; font-weight: 500;
  padding: 16px 26px;
  border-radius: 50px;
  display: inline-flex; align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 0.35s ease 0.15s, transform 0.45s var(--spring) 0.15s;
}
.loader.is-ready .loader-enter { opacity: 1; pointer-events: auto; transform: translateY(0); }
.enter-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); margin-left: 9px; }
.enter-label { display: inline-flex; }
.enter-label .letter { display: inline-block; white-space: pre; }

.loader-nosound {
  position: absolute;
  bottom: var(--margin); left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease 0.35s;
}
.loader.is-ready .loader-nosound { opacity: 0.65; pointer-events: auto; }
.loader-nosound::before {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--paper);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.18s ease-in-out;
}
@media (hover: hover) {
  .loader-nosound:hover::before { transform: scaleX(1); transform-origin: left; }
}
.loader-pct {
  position: absolute;
  left: var(--margin); bottom: var(--margin);
  margin: 0;
  font-size: 17px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* letter hop used by menu + enter buttons */
@keyframes letter-hop {
  0% { transform: translateY(0); }
  35% { transform: translateY(-6px) rotate(6deg); }
  100% { transform: translateY(0); }
}
.hop .letter { animation: letter-hop 0.45s ease both; }
.hop .letter:nth-child(2) { animation-delay: 0.03s; }
.hop .letter:nth-child(3) { animation-delay: 0.06s; }
.hop .letter:nth-child(4) { animation-delay: 0.09s; }
.hop .letter:nth-child(5) { animation-delay: 0.12s; }
.hop .letter:nth-child(6) { animation-delay: 0.15s; }
.hop .letter:nth-child(7) { animation-delay: 0.18s; }
.hop .letter:nth-child(8) { animation-delay: 0.21s; }
.hop .letter:nth-child(9) { animation-delay: 0.24s; }
.hop .letter:nth-child(10) { animation-delay: 0.27s; }
.hop .letter:nth-child(11) { animation-delay: 0.3s; }
.hop .letter:nth-child(12) { animation-delay: 0.33s; }
.hop .letter:nth-child(13) { animation-delay: 0.36s; }
.hop .letter:nth-child(14) { animation-delay: 0.39s; }
.hop .letter:nth-child(15) { animation-delay: 0.42s; }
.hop .letter:nth-child(16) { animation-delay: 0.45s; }

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