/* ============================================================
   FLUID LAYER — new-gen motion & polish (Ghora Design)
   ============================================================ */

::selection { background: var(--accent); color: #14110d; }

/* Scroll progress bar */
#fluid-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 10002; pointer-events: none;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* Smart nav — hides on scroll down, returns on scroll up */
nav.top { transition: border-color 0.3s, padding 0.3s, transform 0.55s cubic-bezier(0.22,1,0.36,1), background 0.3s; }
nav.top.nav-hidden { transform: translateY(-110%); }

/* ---------- Tiles: clip-path reveal + inner zoom-out ---------- */
.tile {
  opacity: 1;
  transform: none;
  clip-path: inset(14% 8% 14% 8% round 14px);
  transition: clip-path 1.1s cubic-bezier(0.22,1,0.36,1);
}
.tile .tile-img {
  transform: scale(1.22);
  transition: transform 1.4s cubic-bezier(0.22,1,0.36,1), filter 0.6s;
}
.tile.in { clip-path: inset(0 0 0 0 round 3px); }
.tile.in .tile-img { transform: scale(1); }
.tile.in:hover .tile-img { transform: scale(1.06); }

/* ---------- Reveal: softer, with blur settle ---------- */
.reveal {
  opacity: 0;
  transform: translateY(46px);
  filter: blur(6px);
  transition:
    opacity 1.1s cubic-bezier(0.22,1,0.36,1),
    transform 1.1s cubic-bezier(0.22,1,0.36,1),
    filter 1.1s cubic-bezier(0.22,1,0.36,1);
}
.reveal.in { opacity: 1; transform: none; filter: blur(0); }

/* Section titles get a masked line rise */
.section-head .section-title { overflow: hidden; }
.section-head .section-title .tline {
  display: block;
  transform: translateY(110%);
  transition: transform 1.15s cubic-bezier(0.22,1,0.36,1);
}
.section-head.in .section-title .tline { transform: translateY(0); }

/* ---------- Parallax hosts get bleed so edges never show ---------- */
.hero-bg[data-plx] { inset: -10% 0; }
[data-plx] { will-change: transform; }

/* Hero content drifts + fades as you leave it */
.hero-inner, .scroll-cue { will-change: transform, opacity; }

/* ---------- Marquee reacts to scroll velocity ---------- */
.marquee-track { will-change: transform; }

/* ---------- Magnetic buttons ---------- */
[data-magnetic] {
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}

/* ---------- Page transition (route change) ---------- */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.project-page { animation: pageIn 0.8s cubic-bezier(0.22,1,0.36,1) both; }

/* ---------- Footer: giant wordmark ---------- */
.footer-giant {
  overflow: hidden;
  padding: 90px 0 0;
  user-select: none;
}
.footer-giant .fg-word {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(90px, 16.5vw, 320px);
  line-height: 0.8;
  letter-spacing: 0.02em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--ink) 34%, transparent);
  transform: translateY(34%);
  transition: transform 1.3s cubic-bezier(0.22,1,0.36,1), color 0.9s, -webkit-text-stroke-color 0.9s;
  white-space: nowrap;
}
.footer-giant.in .fg-word { transform: translateY(12%); }
.footer-giant .fg-word:hover {
  color: color-mix(in oklab, var(--accent) 82%, var(--ink));
  -webkit-text-stroke-color: transparent;
}
footer { border-top: none; position: relative; z-index: 1; }
footer .foot-rule { border-top: 1px solid var(--line); padding-top: 28px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-top {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
  background: none; border: none; cursor: pointer; padding: 0;
  transition: color 0.25s;
}
.foot-top:hover { color: var(--accent); }

/* ---------- Images: gentle luminance lift on hover ---------- */
.pg-item img { filter: brightness(0.96); }
.pg-item:hover img { filter: brightness(1.02); }

/* ---------- Cursor label ---------- */
#cursor-label {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #14110d; background: var(--accent);
  padding: 9px 16px; border-radius: 999px;
  opacity: 0; transition: opacity 0.25s;
  white-space: nowrap;
}
#cursor-label.on { opacity: 1; }
@media (pointer: coarse) { #cursor-label { display: none; } }

/* ---------- Before/After comparator ---------- */
.ba-wrap {
  position: relative; overflow: hidden;
  aspect-ratio: 21/10; border-radius: 4px;
  background: var(--bg-2);
  cursor: ew-resize; touch-action: pan-y;
  --ba: 50%;
}
@media (max-width: 700px) { .ba-wrap { aspect-ratio: 4/3; } }
.ba-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; user-select: none;
}
.ba-img.before { filter: grayscale(1) brightness(0.9) contrast(0.92); }
.ba-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--ba)) 0 0); pointer-events: none; }
.ba-line {
  position: absolute; top: 0; bottom: 0; left: var(--ba);
  width: 1px; background: rgba(245,236,224,0.85);
  pointer-events: none;
  box-shadow: 0 0 24px rgba(0,0,0,0.5);
}
.ba-knob {
  position: absolute; top: 50%; left: var(--ba);
  transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: #14110d;
  display: flex; align-items: center; justify-content: center;
  gap: 3px; font-size: 13px; font-weight: 700;
  pointer-events: none;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}
.ba-tag {
  position: absolute; bottom: 18px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #f2ede4; background: rgba(8,7,6,0.55);
  backdrop-filter: blur(6px);
  padding: 8px 14px; border-radius: 999px;
  pointer-events: none;
}
.ba-tag.left { left: 18px; }
.ba-tag.right { right: 18px; }

/* ---------- Reduced motion: neutralize the fluid layer ---------- */
@media (prefers-reduced-motion: reduce) {
  .tile, .tile.in { clip-path: none; }
  .tile .tile-img { transform: none; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .section-head .section-title .tline { transform: none; }
  .footer-giant .fg-word, .footer-giant.in .fg-word { transform: none; }
  .project-page { animation: none; }
  [data-magnetic] { transition: none; }
}