/* =========================================================
   HOME — "Our work" (2026-10-26), components/features/HomePortfolio.jsx.
   Loaded by that component only. Every class starts with hp-, so nothing else on
   the home page can be touched. The film frame matches the portfolio page's.
========================================================= */
.hp-work{overflow:hidden;padding:128px 0}
.hp-glow{position:absolute;inset:0;pointer-events:none;z-index:0}
.hp-glow span{position:absolute;border-radius:50%;filter:blur(80px)}
.hp-glow span:first-child{width:620px;height:620px;right:2%;top:4%;opacity:.42;
  background:radial-gradient(circle,var(--gold-hi),transparent 66%)}
.hp-glow span:last-child{width:520px;height:520px;right:28%;bottom:-18%;opacity:.3;
  background:radial-gradient(circle,var(--terra-hi),transparent 66%)}
.hp-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:72px;align-items:center}

/* Words */
.hp-copy h2{font-size:clamp(2.1rem,4.4vw,3.5rem)}
.hp-lead{margin-top:22px;font-size:1.15rem;color:var(--muted);max-width:480px}
.hp-feature{margin:30px 0 36px;padding:20px 22px;border-radius:18px;max-width:480px;
  background:rgba(255,252,246,.72);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(44,33,24,.04),0 18px 40px -26px rgba(147,113,44,.45)}
.hp-kind{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--gold-lo);margin-bottom:8px}
.hp-feature p{font-size:15.5px;line-height:1.65;color:var(--ink-soft)}

/* The film frame: a browser window lifted off the page */
.hp-media{position:relative}
.hp-frame{position:relative;border-radius:20px;overflow:hidden;background:#211912;
  box-shadow:0 0 0 1px rgba(28,24,19,.08),0 2px 4px rgba(44,33,24,.08),0 34px 70px -30px rgba(44,33,24,.55),0 60px 120px -60px rgba(184,90,56,.45);
  transform:rotate(.6deg);transition:transform .8s var(--spring)}
.hp-media:hover .hp-frame{transform:rotate(0) translateY(-6px)}
.hp-chrome{display:flex;align-items:center;gap:14px;height:38px;padding:0 16px;background:linear-gradient(#2E241B,#271E16);
  border-bottom:1px solid rgba(247,243,236,.06)}
.hp-dots{display:flex;gap:7px}
.hp-dots i{width:10px;height:10px;border-radius:50%;background:rgba(247,243,236,.16)}
.hp-dots i:first-child{background:var(--terra-hi);opacity:.75}
.hp-dots i:nth-child(2){background:var(--gold-hi);opacity:.75}
.hp-chrome-label{flex:1;max-width:340px;margin:0 auto;padding:4px 14px;border-radius:8px;background:rgba(247,243,236,.06);
  font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:rgba(247,243,236,.5);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateX(-30px)}
.hp-screen{position:relative;aspect-ratio:16/9;background:#15100B}
.hp-screen video{width:100%;height:100%;background:#000}

/* Before play: poster, silent preview, play button */
.hp-play-btn{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:none;overflow:hidden}
.hp-play-btn *{pointer-events:none}
.hp-play-btn:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.hp-poster,.hp-play-btn .pf-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease),opacity .7s var(--ease)}
.hp-play-btn .pf-preview{opacity:0}
.hp-play-btn .pf-preview.on{opacity:1}
.hp-play-btn:hover .hp-poster,.hp-play-btn:hover .pf-preview{transform:scale(1.035)}
.hp-tint{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(28,24,19,.6),rgba(28,24,19,0) 46%),linear-gradient(rgba(220,190,124,.10),rgba(220,190,124,.10));
  mix-blend-mode:multiply;transition:opacity .6s var(--ease)}
.hp-play-btn:hover .hp-tint{opacity:.55}
.hp-play{position:absolute;inset:0;display:grid;place-items:center}
.hp-play-disc{position:relative;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;padding-left:4px;
  color:var(--espresso);background:rgba(247,243,236,.92);
  box-shadow:0 12px 30px -8px rgba(0,0,0,.5),0 0 0 10px rgba(247,243,236,.16);
  transition:transform .6s var(--spring),background-color .35s,color .35s}
.hp-play-disc::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(247,243,236,.5);
  animation:hp-ring 2.6s var(--ease) infinite}
@keyframes hp-ring{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.45);opacity:0}}
.hp-play-btn:hover .hp-play-disc{transform:scale(1.1);background:var(--gold);color:#fff}
.hp-play-btn:active .hp-play-disc{transform:scale(.96)}
.hp-badge{position:absolute;left:18px;bottom:16px;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:100px;
  background:rgba(28,24,19,.62);backdrop-filter:blur(10px);border:1px solid rgba(247,243,236,.14);
  font-family:var(--mono);font-size:12px;color:var(--ivory)}

@media(max-width:980px){
  .hp-grid{grid-template-columns:1fr;gap:48px}
  .hp-frame{transform:none}
}
@media(max-width:560px){
  .hp-work{padding:84px 0}
  .hp-chrome{height:30px;padding:0 12px}
  .hp-dots i{width:8px;height:8px}
  .hp-chrome-label{transform:none;font-size:10px}
  .hp-play-disc{width:64px;height:64px}
  .hp-frame{border-radius:16px}
}
@media(prefers-reduced-motion:reduce){
  .hp-frame,.hp-media:hover .hp-frame,.hp-poster,.hp-play-btn .pf-preview,.hp-play-disc{transition:none;transform:none!important}
  .hp-play-disc::after{display:none}
}