/* ============================================================
   SHOTSBYZEESHAN — Services & Portfolio sections
   Cinematic scroll transitions (native CSS scroll-driven, JS-free)
   Reuses tokens.css + main.css (.btn) + about.css atoms (.a-*, .r-*)
   ============================================================ */

/* ---- cinematic scroll primitives (progressive enhancement) ----
   Base styles are the FINAL look; scroll-driven animation adds motion
   only where supported, so unsupported browsers still look right. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cine-zoom > img, img.cine-zoom {
      animation: cineZoom linear both; animation-timeline: view();
      animation-range: entry 0% cover 70%;
    }
    @keyframes cineZoom { from { transform: scale(1.16); } to { transform: scale(1.0); } }

    .cine-par { animation: cinePar linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes cinePar { from { transform: translateY(-5%); } to { transform: translateY(5%); } }

    .cine-wipe { animation: cineWipe linear both; animation-timeline: view(); animation-range: entry 6% cover 46%; }
    @keyframes cineWipe { from { clip-path: inset(0 0 100% 0); opacity:.2; } to { clip-path: inset(0 0 0% 0); opacity:1; } }

    .cine-rise { animation: cineRise linear both; animation-timeline: view(); animation-range: entry 2% cover 40%; }
    @keyframes cineRise { from { opacity:0; transform: translateY(38px); } to { opacity:1; transform:none; } }
  }
}

/* section shell */
.sec{ position:relative; padding:clamp(4.5rem,12vh,10rem) 0; }
.sec-wrap{ max-width:1280px; margin:0 auto; padding-inline:var(--gutter); }
.sec-hair{ height:1px; background:var(--line-soft); max-width:1280px; margin:0 auto; }
.sec-head h2{ font-family:var(--font-display); font-weight:600; color:var(--paper);
  font-size:clamp(2rem,1.2rem + 3vw,3.8rem); line-height:1.1; letter-spacing:.012em; margin-top:1rem; max-width:18ch; }
.sec-head h2 em{ font-style:normal; color:var(--gold-bright); }
.sec-head .a-body{ margin-top:1.3rem; max-width:52ch; }

/* ============================================================
   SERVICES · V1 — PINNED INDEX
   ============================================================ */
.svc1{ }
.svc1__grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr); gap:clamp(2rem,6vw,6rem);
  align-items:start; }
.svc1__aside{ position:sticky; top:calc(var(--letterbox) + 5.5rem); align-self:start; }
.svc1__aside h2{ font-family:var(--font-display); font-weight:600; color:var(--paper);
  font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem); line-height:1.1; letter-spacing:.012em; margin-top:1rem; }
.svc1__aside h2 em{ font-style:normal; color:var(--gold-bright); }
.svc1__aside .a-body{ margin-top:1.3rem; max-width:40ch; }
.svc1__menu{ margin-top:2.2rem; display:flex; flex-direction:column; }
.svc1__mi{ display:flex; align-items:baseline; gap:1rem; padding:.85rem 0; border-top:1px solid var(--line-soft);
  color:var(--paper-soft); transition:color .5s var(--ease-cine); }
.svc1__mi:last-child{ border-bottom:1px solid var(--line-soft); }
.svc1__mi.is-active{ color:var(--paper); }
.svc1__mi b{ font-family:var(--font-display); font-weight:500; font-size:.8rem; color:var(--gold); letter-spacing:.06em; min-width:2ch; }
.svc1__mi span{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.1rem,1rem + .4vw,1.35rem); letter-spacing:.01em; }
.svc1__panels{ display:flex; flex-direction:column; gap:clamp(3rem,8vh,6rem); }
.svc1__panel{ }
.svc1__fig{ position:relative; overflow:hidden; border:1px solid var(--line-gold); aspect-ratio:16/11;
  box-shadow:var(--shadow-print); }
.svc1__fig img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9) brightness(.86) contrast(1.03); }
.svc1__fig .ab-tick{ position:absolute; width:15px; height:15px; border:0 solid var(--gold); opacity:.85; z-index:2; }
.svc1__fig .tl{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.svc1__fig .br{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }
.svc1__no{ font-family:var(--font-display); color:var(--gold-bright); font-weight:500;
  font-size:clamp(1.4rem,1rem + 1.2vw,2rem); margin-top:1.4rem; }
.svc1__panel h3{ font-family:var(--font-display); font-weight:600; color:var(--paper);
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2.3rem); line-height:1.12; letter-spacing:.01em; margin-top:.3rem; }
.svc1__panel p{ color:var(--paper-dim); font-weight:300; line-height:1.66; margin-top:.9rem; max-width:48ch; font-size:var(--fs-lead); }

/* ============================================================
   SERVICES · V2 — EDITORIAL BENTO
   ============================================================ */
.svc2__bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.8rem,1.4vw,1.3rem);
  grid-auto-rows:minmax(180px,auto); margin-top:clamp(2.4rem,6vh,4rem); }
.svc2__tile{ position:relative; overflow:hidden; border:1px solid var(--line-gold); display:flex;
  min-height:100%; isolation:isolate; }
.svc2__tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  filter:saturate(.88) brightness(.62) contrast(1.03); transition:transform 1.1s var(--ease-expo); }
.svc2__tile::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(15,22,20,.15), rgba(15,22,20,.82)); }
.svc2__tile:hover img{ transform:scale(1.06); }
.svc2__tile .in{ margin-top:auto; padding:clamp(1.3rem,2vw,2rem); }
.svc2__tile .a-eyebrow{ font-size:.58rem; letter-spacing:.28em; margin-bottom:.7rem; }
.svc2__tile h3{ font-family:var(--font-display); font-weight:600; color:var(--paper);
  font-size:clamp(1.4rem,1rem + 1.4vw,2.2rem); line-height:1.1; letter-spacing:.01em; }
.svc2__tile p{ color:var(--paper-dim); font-weight:300; font-size:.94rem; line-height:1.6; margin-top:.7rem; max-width:40ch; }
.svc2__tile.lg{ grid-column:span 3; grid-row:span 2; }
.svc2__tile.md{ grid-column:span 3; }
.svc2__tile.sm{ grid-column:span 2; }
.svc2__tile.wide{ grid-column:span 6; }
/* plain (no image) accent tile */
.svc2__tile--plain{ background:var(--ink-1); }
.svc2__tile--plain::after{ display:none; }
.svc2__stat{ display:flex; flex-direction:column; gap:.4rem; padding:clamp(1.3rem,2vw,2rem); margin:auto 0; }
.svc2__stat b{ font-family:var(--font-display); font-weight:500; color:var(--gold-bright); font-size:clamp(1.8rem,1.2rem + 1.6vw,2.6rem); line-height:1; }
.svc2__stat span{ font-family:var(--font-ui); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-soft); }

/* ============================================================
   PORTFOLIO · shared image treatment
   ============================================================ */
.pf-fig{ position:relative; overflow:hidden; border:1px solid var(--line-gold); background:var(--ink-1); }
.pf-fig img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.9) brightness(.82) contrast(1.03); transition:transform 1s var(--ease-expo), filter .6s; }
.pf-fig:hover img{ transform:scale(1.05); filter:saturate(1) brightness(.95) contrast(1.03); }
.pf-fig figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.4rem 1.2rem .95rem;
  background:linear-gradient(transparent, rgba(15,22,20,.85)); opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease-cine), transform .5s var(--ease-cine); }
.pf-fig:hover figcaption{ opacity:1; transform:none; }
.pf-fig figcaption b{ display:block; font-family:var(--font-display); font-weight:500; color:var(--paper); font-size:1.02rem; }
.pf-fig figcaption span{ font-family:var(--font-ui); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }

/* ============================================================
   PORTFOLIO · V1 — FILTERABLE MASONRY
   ============================================================ */
.pf1__filter{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.2rem; }
.pf1__chip{ font-family:var(--font-ui); font-weight:400; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-dim); background:transparent; border:1px solid var(--line-gold); cursor:pointer;
  padding:.7rem 1.3rem; border-radius:2px 12px 2px 12px; transition:all .45s var(--ease-cine); }
.pf1__chip:hover{ color:var(--paper); border-color:var(--gold); }
.pf1__chip.is-active{ color:var(--ink); background:var(--paper); border-color:var(--paper); }
.pf1__grid{ margin-top:2.4rem; columns:3; column-gap:clamp(.8rem,1.4vw,1.3rem); }
.pf1__item{ break-inside:avoid; margin-bottom:clamp(.8rem,1.4vw,1.3rem); transition:opacity .5s var(--ease-cine), transform .5s var(--ease-cine); }
.pf1__item.is-hidden{ display:none; }
.pf1__item.is-out{ opacity:0; transform:scale(.96); }

/* ============================================================
   PORTFOLIO · V2 — CATEGORY REELS
   ============================================================ */
.pf2__row{ margin-top:clamp(2.6rem,6vh,4.2rem); }
.pf2__rowhead{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  max-width:1280px; margin:0 auto; padding-inline:var(--gutter); }
.pf2__rowhead h3{ font-family:var(--font-display); font-weight:600; color:var(--paper);
  font-size:clamp(1.4rem,1rem + 1.4vw,2.1rem); letter-spacing:.01em; }
.pf2__rowhead h3 em{ font-style:normal; color:var(--gold-bright); }
.pf2__rowhead .count{ font-family:var(--font-ui); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-soft); }
.pf2__reel{ display:flex; gap:clamp(.8rem,1.4vw,1.3rem); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:1.4rem var(--gutter); scrollbar-width:none; }
.pf2__reel::-webkit-scrollbar{ display:none; }
.pf2__reel .pf-fig{ scroll-snap-align:start; flex:0 0 clamp(260px,30vw,400px); aspect-ratio:3/4; }
.pf2__reel .pf-fig.land{ flex-basis:clamp(360px,44vw,600px); aspect-ratio:3/2; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .svc1__grid{ grid-template-columns:1fr; gap:2.4rem; }
  .svc1__aside{ position:static; }
  .svc1__menu{ display:none; }
  .svc2__tile.lg,.svc2__tile.md,.svc2__tile.sm,.svc2__tile.wide{ grid-column:span 6; grid-row:auto; }
  .pf1__grid{ columns:2; }
}
@media (max-width:560px){
  .pf1__grid{ columns:1; }
  .svc2__bento{ grid-auto-rows:minmax(150px,auto); }
}