/* =========================================================
   Dolce Vita — shared motion system.
   Two patterns only, reused everywhere:
     1. [data-reveal] — the baseline fade/rise-on-scroll.
     2. .sticky-narrative — the pinned-column narrative used
        on Services (Arc of an Occasion) and the Portfolio
        flagship case study. Built once, used twice, so any
        future page that wants this treatment just reuses it
        instead of a third bespoke implementation.
   ========================================================= */

:root{
  --transition-slow: 900ms cubic-bezier(.22,.61,.36,1);
  --transition-med: 550ms cubic-bezier(.22,.61,.36,1);
  --transition-fast: 260ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. Reveal on scroll ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }
[data-reveal="fade"]{ transform: none; }
[data-reveal="fade"].is-visible{ transform: none; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1 !important; transform: none !important; transition: none !important; }
  html{ scroll-behavior: auto; }
}

/* ---------- 2. Sticky narrative ----------
   Markup contract:
   <div class="sticky-narrative">
     <div class="sn-sticky">
       <div class="sn-progress"><div class="sn-progress-fill"></div></div>
       <span class="sn-num">01</span>
       <h3 class="sn-title">Phase Title</h3>
     </div>
     <div class="sn-content">
       <div class="sn-phase" data-index="0" data-num="01" data-title="Phase Title">
         <h3 class="sn-inline-heading"><span class="num">01</span>Phase Title</h3>
         ...phase content...
       </div>
       ...
     </div>
   </div>
*/
.sticky-narrative{ display:grid; grid-template-columns:320px 1fr; gap:76px; max-width:1240px; margin:0 auto; }

.sn-sticky{ position:sticky; top:130px; align-self:start; height:fit-content; padding-bottom:120px; }
.sn-progress{ position:relative; width:1px; height:240px; background:rgba(157,142,128,0.3); margin-bottom:32px; }
.sn-progress-fill{ position:absolute; top:0; left:0; width:100%; background:var(--gold); height:0%; transition:height var(--transition-med); }
.sn-num{ font-family:'Fraunces',serif; font-size:15px; letter-spacing:.1em; color:var(--gold); display:block; margin-bottom:14px; transition:opacity var(--transition-fast), transform var(--transition-fast); }
.sn-title{ font-family:'Fraunces',serif; font-weight:400; font-size:27px; transition:opacity var(--transition-fast), transform var(--transition-fast); }
.sn-num.is-fading, .sn-title.is-fading{ opacity:0; transform:translateY(6px); }

.sn-phase{ min-height:52vh; padding:40px 0 90px; }
.sn-phase:last-child{ padding-bottom:0; }
.sn-inline-heading{ display:none; align-items:baseline; gap:16px; font-family:'Fraunces',serif; font-size:23px; margin-bottom:20px; }
.sn-inline-heading .num{ font-family:'Fraunces',serif; font-size:14px; letter-spacing:.1em; color:var(--gold); }

@media (prefers-reduced-motion: reduce){
  .sn-progress-fill{ transition:none; }
  .sn-num, .sn-title{ transition:none; }
  .sticky-narrative{ grid-template-columns:1fr; gap:20px; }
  .sn-sticky{ display:none; }
  .sn-phase{ min-height:auto; }
  .sn-inline-heading{ display:flex; }
}

@media (max-width:900px){
  .sticky-narrative{ grid-template-columns:1fr; gap:20px; }
  .sn-sticky{ display:none; }
  .sn-phase{ min-height:auto; }
  .sn-inline-heading{ display:flex; }
}