/* =========================================================================
   CASE STUDY — IN PROGRESS PAGE
   This file only contains styles specific to the "case study in progress"
   layout. All design tokens, nav, footer, buttons, and resets come from
   index.css (loaded before this file). Replace this with real case-study
   layout styles when individual case studies are written.
   ========================================================================= */


/* ---------- SECTION ---------- */
.soon{
  position:relative;
  overflow:hidden;
  padding:max(140px, 18vh) 0 96px;
  /* Push footer to the bottom while keeping content vertically centered */
  min-height:calc(100vh - 140px);
  display:flex;
  align-items:center;
}

/* Soft accent ambient glow — matches the hero's bg-glow language */
.soon-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.soon-glow::before{
  content:"";
  position:absolute;
  width:min(900px, 90vw);
  aspect-ratio:1;
  background:radial-gradient(circle, var(--accent-soft) 0%, transparent 60%);
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  filter:blur(120px);
  opacity:.55;
}

.soon-inner{
  position:relative;
  z-index:1;
  max-width:880px;
  margin:0 auto;
  text-align:center;
}


/* ---------- STATUS CHIP ---------- */
.soon-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 18px 8px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:999px;
  font-family:'Geist',sans-serif;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg-2);
  margin-bottom:48px;
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
}
.soon-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px var(--accent-glow);
  animation:soonPulse 1.6s ease-in-out infinite;
}
@keyframes soonPulse{
  0%, 100%{opacity:1; box-shadow:0 0 12px var(--accent-glow)}
  50%{opacity:.4; box-shadow:0 0 4px var(--accent-glow)}
}


/* ---------- HEADLINE + LEAD ---------- */
.soon-title{
  font-size:clamp(40px, 7vw, 96px);
  letter-spacing:-.04em;
  line-height:1;
  font-weight:600;
  margin:0 0 28px;
  max-width:880px;
}
.soon-title em{
  font-family:'Instrument Sans', sans-serif;
  font-style:italic;
  color:var(--accent);
  font-weight:400;
}

.soon-lead{
  font-size:clamp(15px, 1.4vw, 18px);
  line-height:1.55;
  color:var(--fg-2);
  max-width:600px;
  margin:0 auto 56px;
}
.soon-lead em{
  font-family:'Instrument Sans', sans-serif;
  font-style:italic;
  color:var(--fg);
}


/* ---------- ANIMATED SWEEP (echo of preloader bar) ---------- */
.soon-bar{
  width:200px;
  height:1px;
  background:var(--line);
  position:relative;
  overflow:hidden;
  margin:0 auto 56px;
}
.soon-bar span{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  transform:translateX(-100%);
  animation:soonSweep 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes soonSweep{
  0%{transform:translateX(-100%)}
  60%, 100%{transform:translateX(100%)}
}


/* ---------- META GRID (2x2) ---------- */
.soon-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  max-width:640px;
  margin:0 auto 56px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:rgba(255, 255, 255, .02);
  text-align:left;
}
.soon-meta .row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  padding:18px 22px;
  font-family:'Geist', sans-serif;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg-3);
}
.soon-meta .row:nth-child(odd){border-right:1px solid var(--line)}
.soon-meta .row:nth-child(-n+2){border-bottom:1px solid var(--line)}
.soon-meta .row b{
  color:var(--fg);
  font-weight:500;
  font-family:'Geist', sans-serif;
  letter-spacing:-.01em;
  font-size:13px;
  text-transform:none;
  text-align:right;
}


/* ---------- CTAs ---------- */
.soon-ctas{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}


/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .soon{padding:130px 0 80px; min-height:calc(100vh - 120px)}
  .soon-title{font-size:clamp(36px, 8vw, 72px)}
  .soon-lead{margin-bottom:44px}
  .soon-meta{margin-bottom:44px}
}

@media (max-width:720px){
  .soon{padding:120px 0 64px; min-height:auto}
  .soon-chip{margin-bottom:32px; font-size:10px; letter-spacing:.16em; padding:7px 16px 7px 12px}
  .soon-title{font-size:clamp(32px, 9vw, 56px); margin-bottom:22px; letter-spacing:-.035em}
  .soon-lead{font-size:15px; margin-bottom:36px; line-height:1.5}
  .soon-bar{margin-bottom:36px; width:160px}
  .soon-meta{grid-template-columns:1fr; margin-bottom:36px; max-width:none}
  .soon-meta .row{padding:14px 18px}
  .soon-meta .row:nth-child(odd){border-right:0}
  .soon-meta .row:nth-child(-n+2){border-bottom:0}
  .soon-meta .row:not(:last-child){border-bottom:1px solid var(--line)}
  .soon-ctas{flex-direction:column; width:100%; max-width:300px; margin:0 auto}
  .soon-ctas .btn{width:100%; justify-content:center}
  .soon-glow::before{width:min(520px, 90vw); filter:blur(80px); opacity:.45}
}

@media (max-width:420px){
  .soon-title{font-size:clamp(28px, 10vw, 44px)}
}


/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .soon-dot{animation:none}
  .soon-bar span{
    animation:none;
    background:var(--accent);
    opacity:.5;
    transform:none;
  }
}