/* ================================================================
   NESTOR ARAUJO — project.css
   Styles UNIQUE to project detail / case-study pages.
   Everything shared lives in global.css
   ================================================================

   ╔═════════════════════════════════════════╗
   ║  QUICK-FIND INDEX                       ║
   ║  [PROG]   Scroll progress bar           ║
   ║  [PHERO]  Project hero                  ║
   ║  [META]   Project meta bar              ║
   ║  [BRIEF]  Brief & overview              ║
   ║  [GAL]    Gallery layouts               ║
   ║  [PROC]   Process steps                 ║
   ║  [RES]    Results & impact              ║
   ║  [QUOTE]  Client testimonial            ║
   ║  [NEXT]   Next project bar              ║
   ║  [RESP]   Project-specific responsive   ║
   ╚═════════════════════════════════════════╝
*/

/* ──────────────────────────────── [PROG] ─── */
#scrollProgress {
  position: fixed;
  top: 0; left: 0; right: 0;          /* explicit right:0 — no width overflow quirks */
  height: 2px; width: 0%;
  background: linear-gradient(to right, var(--green-dark), var(--green));
  z-index: 9997;
  transition: width .08s linear;
  box-shadow: 0 0 8px var(--green-glow);
  transform: none;                     /* no stacking-context side-effects */
  pointer-events: none;
}

/* ──────────────────────────────── [PHERO] ─── */
.proj-hero {
  position: relative; height: 100vh; min-height: 640px;
  display: flex; align-items: flex-end;
  padding: 0 var(--px) 92px; overflow: hidden;
}
.proj-hero-bg { position: absolute; inset: 0; background: #111; }
.proj-hero-bg img, .proj-hero-bg video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: brightness(.4) saturate(.7);
  transform: scale(1.05); animation: heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom { from { transform: scale(1.05); } to { transform: scale(1); } }
.proj-hero-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 14% 82%, rgba(198,255,0,.08) 0%, transparent 55%),
    linear-gradient(to top, rgba(35,35,35,.94) 0%, rgba(35,35,35,.08) 52%, transparent 100%),
    linear-gradient(to right, rgba(35,35,35,.58) 0%, transparent 58%);
}
.proj-breadcrumb {
  position: absolute; top: calc(var(--nav-h) + 22px); left: var(--px); z-index: 2;
  display: flex; align-items: center; gap: 8px;
  background: rgba(35,35,35,.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(198,255,0,.14); border-radius: 100px; padding: 7px 18px;
  opacity: 0; animation: fadeIn 1s 1.1s forwards;
}
.proj-breadcrumb a, .proj-breadcrumb span {
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.48); transition: color .3s;
}
.proj-breadcrumb a:hover { color: var(--green); }
.proj-breadcrumb .sep { opacity: .3; }
.proj-breadcrumb .cur { color: var(--white); }
.proj-hero-tag {
  display: flex; align-items: center; gap: 9px; margin-bottom: 18px;
  opacity: 0; animation: fadeUp .9s .3s forwards;
}
.proj-hero-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.proj-hero-tag span { font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--green); }
.proj-hero-title {
  font-size: clamp(50px, 8vw, 108px); font-weight: 800;
  line-height: .9; letter-spacing: -.04em; color: var(--white);
  opacity: 0; animation: fadeUp 1s .5s forwards; position: relative; z-index: 2;
}
.proj-hero-title em { font-style: normal; color: var(--green); }

/* ──────────────────────────────── [META] ─── */
.proj-meta {
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  padding: 34px var(--px);
  display: grid; grid-template-columns: repeat(5,1fr); gap: 20px;
  opacity: 0; animation: fadeUp .9s .7s forwards;
}
.meta-label { font-size: 9.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; display: block; }
.meta-val   { font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.78); }

/* ──────────────────────────────── [BRIEF] ─── */
.proj-brief { background: var(--bg); padding: var(--py) var(--px); }
.brief-grid { display: grid; grid-template-columns: 1fr 1.65fr; gap: 96px; align-items: start; }
.brief-sticky { position: sticky; top: calc(var(--nav-h) + 28px); }
.brief-label { font-size: 10px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--green); display: block; margin-bottom: 14px; }
.brief-heading { font-size: clamp(28px, 3.8vw, 50px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.brief-heading em { font-style: normal; color: var(--green); }
.brief-div { height: 1px; background: var(--border); margin: 26px 0; }
.brief-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.brief-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.12); border-radius: 100px; padding: 6px 15px;
  background: rgba(255,255,255,.04); transition: border-color .3s, color .3s;
}
.brief-tag:hover { border-color: var(--green); color: var(--green); }
.brief-body p { font-size: 15px; line-height: 1.85; color: rgba(255,255,255,.6); margin-bottom: 20px; }
.brief-body p em { font-style: italic; color: rgba(198,255,0,.78); }
.brief-body p strong { font-weight: 600; color: rgba(255,255,255,.88); }

/* ──────────────────────────────── [GAL] ─── */
.gal-full { width: 100%; position: relative; overflow: hidden; background: var(--bg-2); }
.gal-full img, .gal-full video {
  width: 100%; height: 66vh; min-height: 400px; object-fit: cover;
  filter: brightness(.88) saturate(.8); transition: transform 1.2s var(--ease), filter .8s;
}
.gal-full:hover img, .gal-full:hover video { transform: scale(1.03); filter: brightness(.96) saturate(.94); }
.gal-caption {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 20px var(--px);
  background: linear-gradient(to top, rgba(35,35,35,.72) 0%, transparent 100%);
  font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(198,255,0,.6);
}
.gal-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.gal-pair-item { overflow: hidden; }
.gal-pair-item img, .gal-pair-item video {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  filter: brightness(.84) saturate(.8);
  transition: transform .85s var(--ease), filter .6s;
}
.gal-pair-item:hover img, .gal-pair-item:hover video { transform: scale(1.05); filter: brightness(.94) saturate(.94); }
.gal-offset { padding: 72px var(--px); background: var(--bg-2); display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
.gal-offset-main img, .gal-offset-main video { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 14px; filter: brightness(.88) saturate(.8); }
.gal-offset-side { padding-top: 72px; }
.gal-offset-side img, .gal-offset-side video { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 14px; filter: brightness(.88) saturate(.8); }

/* ──────────────────────────────── [PROC] ─── */
.proc-section { background: var(--bg); padding: var(--py) var(--px); }
.proc-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 52px; }
.proc-card {
  border: 1px solid var(--border); border-radius: 14px; padding: 32px 28px;
  background: var(--bg-card); position: relative; overflow: hidden;
  transition: border-color .4s, transform .45s var(--ease);
}
.proc-card:hover { border-color: rgba(198,255,0,.28); transform: translateY(-4px); }
.proc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(198,255,0,.38), transparent); opacity: 0; transition: opacity .4s; }
.proc-card:hover::before { opacity: 1; }
.proc-num { font-size: 58px; font-weight: 800; letter-spacing: -.04em; color: rgba(198,255,0,.1); line-height: 1; margin-bottom: 18px; display: block; }
.proc-title { font-size: 19px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 10px; }
.proc-desc { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.5); }

/* ──────────────────────────────── [RES] ─── */
.res-section { background: var(--bg-card); padding: var(--py) var(--px); border-top: 1px solid var(--border); }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; margin-top: 52px; }
.res-visual { border-radius: 18px; overflow: hidden; aspect-ratio: 16/10; }
.res-visual img, .res-visual video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.86); transition: transform 1s var(--ease); }
.res-visual:hover img, .res-visual:hover video { transform: scale(1.04); }
.res-list { display: flex; flex-direction: column; gap: 22px; }
.res-item {
  padding: 26px 28px; border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 22px;
  transition: border-color .4s;
}
.res-item:hover { border-color: rgba(198,255,0,.28); }
.res-num { font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--green); flex-shrink: 0; line-height: 1; }
.res-copy { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.58); }
.res-copy strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--white); margin-bottom: 3px; }

/* ──────────────────────────────── [QUOTE] ─── */
.proj-quote { background: var(--bg-2); padding: var(--py) var(--px); }
.quote-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.quote-mark { font-size: 96px; font-weight: 800; line-height: 1; color: rgba(198,255,0,.14); margin-bottom: -20px; display: block; user-select: none; }
.quote-text { font-size: clamp(20px, 3vw, 34px); font-weight: 700; line-height: 1.42; letter-spacing: -.02em; color: var(--white); margin-bottom: 32px; }
.quote-text em { font-style: normal; color: var(--green); }
.quote-source { display: inline-flex; align-items: center; gap: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
.quote-source::before { content: ''; width: 34px; height: 1px; background: var(--green); }
.quote-role { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* ──────────────────────────────── [NEXT] ─── */
.next-proj {
  background: var(--bg); border-top: 1px solid var(--border);
  padding: 68px var(--px);
  display: flex; align-items: center; justify-content: space-between;
  transition: background .4s; position: relative; overflow: hidden;
}
.next-proj::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(198,255,0,.04) 0%, transparent 70%);
  opacity: 0; transition: opacity .6s; pointer-events: none;
}
.next-proj:hover::before { opacity: 1; }
.next-label { font-size: 10px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.next-title { font-size: clamp(26px, 4vw, 50px); font-weight: 800; letter-spacing: -.03em; transition: color .3s; }
.next-proj:hover .next-title { color: var(--green); }
.next-arrow {
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--green); flex-shrink: 0;
  transition: border-color .3s, background .3s, transform .4s var(--ease), box-shadow .3s;
}
.next-proj:hover .next-arrow { border-color: var(--green); background: var(--green); color: var(--bg); transform: translateX(7px); box-shadow: 0 0 24px var(--green-glow); }

/* ──────────────────────────────── [RESP] ─── */
@media (max-width: 860px) {
  .proj-meta   { grid-template-columns: 1fr 1fr; }
  .brief-grid  { grid-template-columns: 1fr; gap: 44px; }
  .brief-sticky { position: static; }
  .gal-pair    { grid-template-columns: 1fr; }
  .gal-offset  { grid-template-columns: 1fr; }
  .gal-offset-side { padding-top: 0; }
  .proc-steps  { grid-template-columns: 1fr; }
  .res-grid    { grid-template-columns: 1fr; gap: 36px; }
  .next-proj   { flex-direction: column; align-items: flex-start; gap: 26px; }
}
@media (max-width: 540px) {
  .proj-meta   { grid-template-columns: 1fr; }
  .quote-mark  { font-size: 68px; }
}