/* ===== Portfolio Page Styles (clean + compatible with global header/footer) ===== */
/* Notes:
   - Header/footer/base controls come from css/style.css (global).
   - This file only styles the Portfolio page sections.
   - Fixed var bug: use --orange2 (not --orange-2).
*/

/* ===== Base ===== */
:root{
  --orange:#ffa500;
  --orange2:#ffa500;

  /* Hero vars */
  --hr-bg-top:#fff6ef;
  --hr-bg-bot:#ffffff;
  --hr-ink:#0f172a;
  --hr-muted:#475569;
  --hr-orange: var(--orange);
  --hr-orange2: var(--orange2);

  /* Showcase vars */
  --sc-ink:#0f172a;
  --sc-muted:#475569;
  --sc-bg1:#ffffff;
  --sc-bg2:#fff8f2;

  /* Case study vars */
  --cse-ink:#0f172a;
  --cse-muted:#475569;
  --cse-bg1:#ffffff;
  --cse-bg2:#fff8f2;
  --cse-o1: var(--orange, #ffa500);
  --cse-o2: var(--orange2, #ffa500);
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#0f172a; background:#0d0f15; line-height:1.6;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
.container{ width:min(100% - 48px, 1180px); margin-inline:auto }

/* Page override: header logo size (tweak if needed) */
.site-header .brand__logo{ height:132px; width:auto; }

/* Optional: progress bar (if not styled in global) */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:1000; pointer-events:none }
.scroll-progress span{ display:block; height:100%; width:var(--p,0%); background:linear-gradient(90deg, var(--orange), var(--orange2)); }

/* ===== Hero — Reel ===== */
.pf-hero-reel{
  position:relative; isolation:isolate;
  background: linear-gradient(180deg, var(--hr-bg-top), var(--hr-bg-bot));
  color: var(--hr-ink);
  overflow:hidden;
  padding: clamp(84px, 14vh, 120px) 0;
}
.pf-hero-reel::before,
.pf-hero-reel::after{
  content:""; position:absolute; inset:auto; pointer-events:none; z-index:0; filter: blur(14px);
}
.pf-hero-reel::before{
  left:-16%; top:-24%; width:700px; height:520px;
  background: radial-gradient(320px 260px at 40% 40%, rgba(255,122,24,.20), transparent 65%);
}
.pf-hero-reel::after{
  right:-18%; bottom:-28%; width:760px; height:540px;
  background: radial-gradient(340px 260px at 60% 60%, rgba(255,84,0,.12), transparent 60%);
}
.pfhr-inner{ position:relative; z-index:1; display:grid; gap:12px; justify-items:start; text-align:left }
.pfhr-kicker{
  display:inline-block; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  background:linear-gradient(90deg, #ffa500, #ffdfc6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:14px; margin-bottom:6px; opacity:0; transform: translateY(-8px);
  animation: hrIn .5s ease .05s forwards;
}
.pfhr-title{ margin:0 0 8px; font-weight:900; line-height:1.05; font-size: clamp(32px, 5.2vw, 62px) }
.pfhr-title .w{
  display:inline-block; margin-right:.35ch; background-image: linear-gradient(90deg, #111, #444, #111);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%; background-position:0 0; opacity:0;
  transform:translateY(22px) scale(.96); filter:blur(4px);
  animation: hrWord .65s cubic-bezier(.2,.7,.2,1) forwards, hrShine 6s ease-in-out 1.2s infinite alternate;
  animation-delay: calc(var(--i,0) * 110ms + 120ms), 0s;
}
.pfhr-title .w:last-child{ margin-right:0 }
.pfhr-title::after{
  content:""; display:block; height:4px; width:0; margin-top:10px;
  background: linear-gradient(90deg, var(--hr-orange), var(--hr-orange2));
  border-radius:999px; box-shadow:0 10px 28px rgba(255,122,24,.35);
  animation: hrLine .8s ease .45s forwards;
}
.pfhr-sub{ margin:6px 0 10px; color:var(--hr-muted); max-width:820px; opacity:0; transform: translateY(10px); animation: hrIn .5s ease .55s forwards }
.pfhr-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:4px }
.pfhr-link{ display:inline-flex; align-items:center; gap:8px; font-weight:800; color:#0f172a; border-bottom:2px solid rgba(15,23,42,.2); transition:.25s; opacity:0; transform: translateY(8px); animation: hrIn .5s ease .68s forwards }
.pfhr-link:hover{ border-color:#0f172a }
.pfhr-tags{ list-style:none; padding:0; margin:10px 0 0; display:flex; gap:10px; flex-wrap:wrap }
.pfhr-tags li{
  padding:8px 12px; border-radius:999px; font-weight:800; font-size:12px; color:#0f172a;
  background:#fff; border:1px solid #e5e7eb; box-shadow:0 10px 26px rgba(0,0,0,.06);
  opacity:0; transform: translateY(8px) scale(.98); animation: hrIn .5s cubic-bezier(.22,.9,.35,1) forwards
}
.pfhr-tags li:nth-child(1){ animation-delay:.76s }
.pfhr-tags li:nth-child(2){ animation-delay:.86s }
.pfhr-tags li:nth-child(3){ animation-delay:.96s }
.pfhr-tags li:nth-child(4){ animation-delay:1.06s }

/* Reel rows */
.pfhr-reel{ width:100%; margin-top:16px }
.pfhr-reel .row{
  position:relative; overflow:hidden; height:140px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.pfhr-reel .row + .row{ margin-top:12px }
.pfhr-reel .track{ display:flex; gap:10px; width:max-content; padding:6px 10px; animation: scrollLeft 32s linear infinite }
.pfhr-reel .row-b .track{ animation: scrollRight 36s linear infinite }
.pfhr-reel .row:hover .track{ animation-play-state: paused }
.pfhr-reel img{
  width:220px; height:140px; object-fit:cover; flex:0 0 auto;
  border-radius:12px; border:1px solid #e5e7eb; box-shadow:0 8px 18px rgba(0,0,0,.06)
}

/* Hero animations */
@keyframes hrIn{ to{ opacity:1; transform:none } }
@keyframes hrWord{ to{ opacity:1; transform:none; filter:none } }
@keyframes hrShine{ to{ background-position: 100% 0 } }
@keyframes hrLine{ to{ width: 160px } }
@keyframes scrollLeft{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
@keyframes scrollRight{ from{ transform: translateX(-50%) } to{ transform: translateX(0) } }

@media (max-width:640px){
  .pfhr-reel .row{ height:110px }
  .pfhr-reel img{ width:160px; height:110px }
}

/* ===== Showcase (Filters + Mosaic) ===== */
.pf-showcase{
  background: linear-gradient(180deg, var(--sc-bg1) 0%, var(--sc-bg2) 100%);
  color: var(--sc-ink);
  padding: clamp(72px, 12vh, 110px) 0;
}
.pf-head{ text-align:center; margin-bottom:16px }
.pf-heading{ margin:0 0 6px; font-weight:900; font-size: clamp(26px, 4.4vw, 44px); display:inline-block; position:relative }
.pf-heading::after{
  content:""; display:block; height:4px; width:140px; margin:10px auto 0;
  background: linear-gradient(90deg, var(--orange), var(--orange2));
  border-radius:999px; box-shadow:0 8px 22px rgba(255,122,24,.25)
}
.pf-lead{ margin:0; color:var(--sc-muted) }
.pf-controls input{ position:absolute; opacity:0; pointer-events:none }
.pf-tabs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin: 10px 0 16px }
.pf-tabs .chip{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:999px; font-weight:900; cursor:pointer; user-select:none;
  border:1px solid #e5e7eb; color:#0f172a; background:#fff; box-shadow:0 8px 18px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease
}
.pf-tabs .chip:hover{ transform: translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.10) }
#cat-all:checked      ~ .pf-tabs label[for="cat-all"],
#cat-branding:checked ~ .pf-tabs label[for="cat-branding"],
#cat-web:checked      ~ .pf-tabs label[for="cat-web"],
#cat-social:checked   ~ .pf-tabs label[for="cat-social"],
#cat-digital:checked  ~ .pf-tabs label[for="cat-digital"]{
  color:#111; background: linear-gradient(90deg, var(--orange), var(--orange2)); border-color: transparent; box-shadow:0 14px 30px rgba(255,122,24,.30)
}
.pf-wrap{
  display:grid; gap:14px; margin-top:8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 8px; grid-auto-flow: dense; min-height: 200px
}
@media (max-width: 1200px){ .pf-wrap{ grid-template-columns: repeat(4, 1fr) } }
@media (max-width: 820px){  .pf-wrap{ grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 560px){  .pf-wrap{ grid-template-columns: repeat(2, 1fr) } }

.tile{
  --w:1; --h:26;
  grid-column: span var(--w); grid-row: span var(--h);
  position:relative; display:block; overflow:hidden; border-radius:16px; background:#fff; border:1px solid #e5e7eb; color:inherit; text-decoration:none; box-shadow:0 12px 28px rgba(0,0,0,.06)
}
.media{ position:absolute; inset:0; background:#f5f7fb }
.media img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  transform: scale(1.02); transition: transform 6s ease, filter .35s ease
}
.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(75deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 60%);
  transform: translateX(-120%); transition: transform .8s ease
}
.meta{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 90%);
  color:#fff; transform: translateY(10px); opacity:.0; transition: transform .35s ease, opacity .35s ease
}
.cat{ font-weight:900; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#ffd7bd }
.name{ margin:2px 0 0; font-size:14px; font-weight:900; line-height:1.25 }
.desc{ margin:0; font-size:12px; opacity:.9 }
@media (hover:hover) and (pointer:fine){
  .tile:hover .media img{ transform: scale(1.08); filter: saturate(110%) contrast(104%) }
  .tile:hover::after{ transform: translateX(120%) }
  .tile:hover .meta{ transform: translateY(0); opacity:1 }
}
/* Filter logic */
#cat-branding:checked ~ .pf-wrap .tile:not(.branding){ display:none }
#cat-web:checked      ~ .pf-wrap .tile:not(.web){ display:none }
#cat-social:checked   ~ .pf-wrap .tile:not(.social){ display:none }
#cat-digital:checked  ~ .pf-wrap .tile:not(.digital){ display:none }
@media (max-width:560px){ .tile{ --w:1; --h:26 } }

/* ===== Case Study Template (sticky summary, animated) ===== */
.cse{
  background: linear-gradient(180deg, var(--cse-bg1), var(--cse-bg2));
  color: var(--cse-ink);
  padding: clamp(72px, 12vh, 110px) 0;
}
.cse-grid{
  display:grid; gap:22px;
  grid-template-columns: 1.12fr .88fr;
}
@media (max-width: 960px){
  .cse-grid{ grid-template-columns:1fr }
}

/* Head */
.cse-kicker{
  display:inline-block; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  background:linear-gradient(90deg, #ff9a56, #ffdfc6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:13px; margin-bottom:6px; opacity:0; transform: translateY(-8px);
  animation: cseIn .5s ease .05s forwards;
}
.cse-title{
  margin:0 0 8px; font-weight:900; font-size: clamp(26px, 4.2vw, 40px); line-height:1.15; position:relative;
  opacity:0; transform: translateY(12px); animation: cseIn .55s ease .12s forwards;
}
.cse-title::after{
  content:""; display:block; height:4px; width:0; margin-top:10px;
  background: linear-gradient(90deg, var(--cse-o1), var(--cse-o2));
  border-radius:999px; box-shadow:0 8px 22px rgba(255,122,24,.28);
  animation: cseLine .8s ease .3s forwards;
}
@keyframes cseLine{ to{ width: 160px } }

.cse-meta{
  margin:6px 0 0; padding:0; list-style:none; display:flex; gap:14px; flex-wrap:wrap;
  color:#334155; font-weight:800;
  opacity:0; transform: translateY(8px); animation: cseIn .5s ease .2s forwards;
}
.cse-meta strong{ color:#0f172a }

/* Blocks */
.cse-block{ margin-top:16px }
.cse-h3{
  margin:0 0 8px; font-weight:900; font-size:18px; color:#0f172a;
}
.cse-list{
  margin:0; padding-left:18px; color:var(--cse-muted); font-weight:700;
}
.cse-chips{
  margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:10px;
}
.cse-chips li{
  padding:8px 12px; border-radius:999px; font-weight:900; font-size:12px; color:#111;
  background:#fff; border:1px solid #e5e7eb; box-shadow:0 10px 26px rgba(0,0,0,.06);
}

/* Gallery */
.cse-gallery{
  margin-top:16px;
  display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 900px){
  .cse-gallery{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 560px){
  .cse-gallery{ grid-template-columns: 1fr }
}
.cse-shot{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.06);
  transform: translateY(14px); opacity:0; animation: cseIn .55s ease .26s forwards;
}
.cse-shot img{ width:100%; height:220px; object-fit:cover; display:block }
.cse-shot figcaption{ padding:8px 10px; font-weight:800; color:#0f172a }

/* Sticky aside card */
.cse-aside{ position:relative }
.cse-aside .card{
  position:sticky; top:90px; background:#fff; border:1px solid #e5e7eb;
  border-radius:16px; padding:16px; box-shadow:0 12px 28px rgba(0,0,0,.08);
  opacity:0; transform: translateY(14px); animation: cseIn .55s ease .18s forwards;
}
@media (max-width:960px){ .cse-aside .card{ position:static } }

.card-title{ margin:0 0 10px; font-size:16px; font-weight:900; color:#0f172a }
.card-list{ margin:0 0 10px; padding:0; }
.card-list > div{ display:grid; grid-template-columns: 90px 1fr; gap:10px; padding:6px 0; border-bottom:1px solid #f1f5f9 }
.card-list dt{ font-weight:900; color:#0f172a }
.card-list dd{ margin:0; color:#475569; font-weight:700 }

.card-actions{ display:grid; gap:10px; margin-top:10px }
.card-link{
  display:inline-flex; align-items:center; gap:8px; font-weight:900; color:#0f172a;
  border-bottom:2px solid rgba(15,23,42,.2); width:max-content;
}
.card-link:hover{ border-color:#0f172a }

/* Animations */
@keyframes cseIn{ to{ opacity:1; transform:none } }

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce){
  .pfhr-kicker,
  .pfhr-title .w,
  .pfhr-title::after,
  .pfhr-sub,
  .pfhr-link,
  .pfhr-tags li,
  .cse-kicker,
  .cse-title,
  .cse-title::after,
  .cse-meta,
  .cse-shot,
  .cse-aside .card{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .pfhr-reel .track{ animation: none !important }
  .media img{ transition-duration: .3s !important }
}