/* Credit: author unconfirmed on 21st.dev (the demo cites vasnev.art) — portfolio-hero.
 * vph · Portfolio hero — hand-port of the Dragonfly library item `portfolio-hero`
 * (~/dragonfly-publisher/src/components/ui/portfolio-hero.tsx) to vanilla HTML/CSS/JS.
 * Same file in victor-paredes.com and vprd.es; each page re-skins it through the --vph-* vars.
 * Markup is static (works without JS: badges sit as a wrapped tag cloud); portfolio-hero.js adds
 * the Matter.js drop/throw and the carousel. Layout follows the CONTAINER width:
 * mobile < 768 < tablet < 1152, like the original.
 * Port changes: phone cards size to content (stretched to the tallest) instead of a fixed 510px;
 * the hint's hand waves (ease-in-out) instead of the original's looping bounce.
 */
.vph{
  --vph-bg:transparent;--vph-ink:#1C1C1E;--vph-muted:#727064;--vph-light:#9A9994;
  --vph-line:rgba(28,28,30,.12);--vph-card:#fff;--vph-soft:#FBF7EF;
  --vph-accent:#FFDD33;--vph-live:#CEFF7A;--vph-glow:rgba(255,221,51,.5);
  --vph-display:system-ui,sans-serif;--vph-body:system-ui,sans-serif;--vph-label:var(--vph-display);--vph-hand:var(--vph-body);
  --vph-name-weight:800;--vph-badge-weight:800;--vph-badge-size:15px;--vph-badge-case:uppercase;--vph-badge-track:-.02em;
  container-type:inline-size;position:relative;width:100%;overflow-x:clip;
  background:var(--vph-bg);color:var(--vph-ink);font-family:var(--vph-body);-webkit-font-smoothing:antialiased;
}
.vph *,.vph *::before,.vph *::after{box-sizing:border-box}
.vph :where(h1,h2,h3,p){margin:0}
.vph-main{position:relative;margin:0 auto;max-width:450px}

/* ---------- hero ---------- */
.vph-hero{position:relative;padding-top:440px}
.vph-glow{pointer-events:none;position:absolute;left:-120px;top:-160px;height:360px;width:420px;border-radius:50%;
  background:radial-gradient(closest-side,var(--vph-glow),transparent)}
.vph-zone{position:absolute;inset:0 0 auto;height:424px;overflow:hidden}
/* no-JS / reduced-data fallback: a settled tag cloud */
.vph-zone:not(.is-live){display:flex;flex-wrap:wrap;align-content:flex-end;justify-content:center;gap:8px;padding:16px 10px 12px}
.vph-zone:not(.is-live) .vph-badge{transform:rotate(var(--r,0deg))}
.vph-zone:not(.is-live) .vph-badge:nth-child(3n){--r:-4deg}
.vph-zone:not(.is-live) .vph-badge:nth-child(4n){--r:3deg}
.vph-zone.is-live .vph-badge{position:absolute;left:0;top:0;visibility:hidden;will-change:transform}

.vph-badge{display:flex;align-items:center;height:34px;padding:0 14px;white-space:nowrap;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  border:1.5px solid var(--vph-line);border-radius:12px;background:var(--vph-card);color:var(--vph-ink);box-shadow:0 2px 0 var(--vph-line);
  font:var(--vph-badge-weight) var(--vph-badge-size)/1 var(--vph-label);letter-spacing:var(--vph-badge-track);text-transform:var(--vph-badge-case)}
.vph-badge[data-c]{border-color:var(--vph-ink);box-shadow:0 2px 0 var(--vph-ink)}
.vph-badge.is-grabbed{cursor:grabbing}

.vph-hint{pointer-events:none;position:absolute;inset:64px 0 auto;z-index:2;display:flex;justify-content:center;padding:0 10px}
.vph-hint > span{display:flex;align-items:center;gap:8px;padding:6px 14px;border:1.5px solid var(--vph-line);border-radius:100px;
  background:color-mix(in srgb,var(--vph-card) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font:500 15px/1.2 var(--vph-hand);color:var(--vph-muted);opacity:0;transform:translateY(-8px);transition:opacity .5s ease,transform .5s ease}
.vph-hint.is-shown > span{opacity:1;transform:none}
.vph-hint svg{flex:none;transform-origin:65% 85%}
.vph-hint.is-shown svg{animation:vph-wave 1.8s ease-in-out infinite}
@keyframes vph-wave{0%,55%,100%{transform:rotate(0)}18%{transform:rotate(-14deg)}36%{transform:rotate(9deg)}}

.vph-intro{position:relative;padding:0 10px}
.vph-id{display:flex;align-items:center;gap:24px}
.vph-avatar{position:relative;flex:none;width:60px;height:80px;overflow:hidden;border:1.5px solid var(--vph-ink);border-radius:20px;background:var(--vph-card);box-shadow:0 2px 0 var(--vph-ink)}
.vph-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.vph-name{font:var(--vph-name-weight) 32px/1.2 var(--vph-display);letter-spacing:-.04em}
.vph-role{margin-top:2px;font-size:16px;line-height:1.4;color:var(--vph-muted)}
.vph-bio{margin-top:30px;font:700 26px/1.15 var(--vph-display);letter-spacing:-.035em;color:var(--vph-muted);text-wrap:balance}
.vph-bio b,.vph-bio strong{font-weight:inherit;color:var(--vph-ink)}
.vph-bio mark{color:var(--vph-ink);background:linear-gradient(104deg,transparent .9%,var(--vph-accent) 2.4%,var(--vph-accent) 97%,transparent 99%);
  border-radius:4px;padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.vph-links{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.vph-link{display:inline-flex;align-items:center;gap:6px;font-size:17px;font-weight:500;line-height:20px;color:var(--vph-ink);text-decoration:none}
.vph-link svg{flex:none;width:15px;height:15px;color:var(--vph-muted);transition:transform .2s ease}
.vph-link:hover svg{transform:translate(2px,-2px)}
.vph-link.is-pill{min-height:44px;padding:0 20px;border:2px solid var(--vph-ink);border-radius:100px;background:var(--vph-ink);color:var(--vph-soft);font-weight:700;transition:background .2s,color .2s,transform .15s}
.vph-link.is-pill svg{color:currentColor}
.vph-link.is-pill:hover{background:var(--vph-accent);color:var(--vph-ink);transform:translateY(-2px)}
.vph a:focus-visible,.vph button:focus-visible,.vph [tabindex]:focus-visible{outline:2px solid var(--vph-ink);outline-offset:2px}

/* ---------- cases carousel ---------- */
.vph-cases{container-type:inline-size;margin-top:80px;padding-bottom:96px}
.vph-cases-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 16px 20px}
.vph-cases-title{font:900 22px/1.2 var(--vph-display);letter-spacing:-.03em}
.vph-cases-sub{font:500 12px/1.2 var(--vph-label);letter-spacing:.12em;text-transform:uppercase;color:var(--vph-light)}
.vph-track{display:flex;align-items:stretch;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  padding:0 16px 4px;scroll-padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vph-track::-webkit-scrollbar{display:none}
.vph-track:focus-visible{outline-offset:4px}
.vph-card{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;gap:20px;overflow:hidden;
  height:auto;width:min(340px,calc(100cqw - 48px));
  border:1.5px solid var(--vph-line);border-radius:24px;background:var(--vph-card);box-shadow:0 2px 0 var(--vph-line);
  color:inherit;text-decoration:none;transition:opacity .45s ease,border-color .2s}
.vph-cases.is-mobile .vph-card:not(.is-active){opacity:.5}
a.vph-card:hover{border-color:var(--vph-ink)}
.vph-cover{position:relative;flex:none;height:230px;overflow:hidden;border-radius:20px 20px 0 0;background:var(--c,var(--vph-soft));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
a.vph-card:active .vph-cover{transform:scale(.98)}
.vph-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vph-cover img.is-contain{object-fit:contain;padding:12%}
.vph-cover.is-type{display:flex;flex-direction:column;justify-content:space-between;padding:20px}
.vph-cover.is-type .g{font-size:34px;line-height:1}
.vph-cover.is-type strong{font:900 clamp(26px,9cqw,34px)/1 var(--vph-display);letter-spacing:-.045em;word-break:break-word}
.vph-tagbadge{position:absolute;left:12px;top:12px;z-index:1;display:flex;align-items:center;height:22px;padding:0 9px;border:1.5px solid var(--vph-ink);border-radius:100px;background:var(--vph-live);
  font:800 11px/1 var(--vph-label);letter-spacing:.04em;color:var(--vph-ink)}
.vph-cover.is-type .vph-tagbadge{left:auto;right:12px}
.vph-body{display:flex;min-height:0;flex:1;flex-direction:column;gap:16px;padding:0 16px 16px}
.vph-card h3{font:800 22px/1.25 var(--vph-display);letter-spacing:-.035em;text-wrap:balance}
.vph-tags{display:flex;flex-wrap:wrap;gap:6px}
.vph-tags span{height:24px;padding:2px 10px;border-radius:100px;background:var(--vph-soft);border:1px solid var(--vph-line);font-size:13px;line-height:18px;color:var(--vph-muted)}
.vph-card p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:15px;line-height:1.55;color:var(--vph-muted)}
.vph-cta{display:none;align-items:center;gap:8px;margin-top:-4px;font-weight:700;font-size:15px;color:var(--vph-ink)}
.vph-cta i{display:grid;place-items:center;width:20px;height:20px;border:1.5px solid var(--vph-ink);border-radius:50%;background:var(--vph-accent);font-style:normal;transition:transform .2s ease}
a.vph-card:hover .vph-cta i{transform:translateX(3px)}

.vph-nav{margin:20px 16px 0;display:flex;align-items:center;gap:14px}
.vph-arrow{display:none;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1.5px solid var(--vph-ink);border-radius:50%;background:var(--vph-card);color:var(--vph-ink);cursor:pointer;
  box-shadow:0 2px 0 var(--vph-ink);transition:background .2s,transform .15s,opacity .2s}
.vph-arrow:hover:not(:disabled){background:var(--vph-accent);transform:translateY(-2px)}
.vph-arrow:disabled{opacity:.3;cursor:default}
.vph-dots{flex:1;display:flex;justify-content:center;gap:6px}
.vph-dot{position:relative;width:6px;height:6px;padding:0;border:0;border-radius:3px;overflow:hidden;cursor:pointer;background:color-mix(in srgb,var(--vph-ink) 18%,transparent);
  transition:width .35s cubic-bezier(.2,.8,.2,1),background-color .35s}
.vph-dot::before{content:'';position:absolute;inset:-10px -4px}
.vph-dot[aria-selected="true"]{width:22px}
.vph-dot > span{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--vph-ink)}
.vph-dot.is-done > span{transform:scaleX(1);background:color-mix(in srgb,var(--vph-ink) 45%,transparent)}
.vph-dot.is-full > span{transform:scaleX(1)}

/* ---------- tablet ≥ 768 ---------- */
@container (min-width:768px){
  .vph-main{max-width:820px}
  .vph-intro{padding:0 32px}
  .vph-hint{top:220px}
}
@container (min-width:768px){
  .vph-cases-head,.vph-nav{margin-inline:0}
  .vph-track{gap:24px;padding-inline:0;scroll-padding-inline:0}
  .vph-card{height:auto;width:calc((100% - 24px)/2.15);gap:0;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
  .vph-cover{height:auto;aspect-ratio:16/10;border-radius:20px;border:1.5px solid var(--vph-line)}
  a.vph-card:hover .vph-cover{border-color:var(--vph-ink)}
  .vph-body{margin-top:20px;padding:0}
  .vph-card h3{font-size:26px}
  .vph-card p{-webkit-line-clamp:unset;color:color-mix(in srgb,var(--vph-ink) 78%,transparent)}
  .vph-cta{display:inline-flex}
  .vph-arrow{display:grid}
  .vph-dot{background:color-mix(in srgb,var(--vph-ink) 22%,transparent)}
  .vph-dot[aria-selected="true"]{background:var(--vph-ink)}
  .vph-nav{margin-top:28px}
}

/* ---------- desktop ≥ 1152 ---------- */
@container (min-width:1152px){
  .vph-main{max-width:1280px}
  .vph-hero{padding-top:480px}
  .vph-glow{left:-80px;top:-200px;height:620px;width:900px}
  .vph-zone{height:456px}
  .vph-hint{top:260px}
  .vph-intro{display:grid;grid-template-columns:380px 1fr;align-items:start;column-gap:80px;padding:0 48px}
  .vph-id{grid-column:1;grid-row:1}
  .vph-bio{grid-column:2;grid-row:1 / span 2;margin:0;max-width:820px;font-size:42px;line-height:1.08}
  .vph-links{grid-column:1;grid-row:2;margin-top:28px}
}
@container (min-width:1152px){
  .vph-card{width:calc((100% - 48px)/2.6)}
}
.vph-main > .vph-cases{padding-inline:0}
@container (min-width:768px){ .vph-main > .vph-cases{padding-inline:32px} }
@container (min-width:1152px){ .vph-main > .vph-cases{margin-top:120px;padding-inline:48px} }

@media (prefers-reduced-motion:reduce){
  .vph *{transition:none!important;animation:none!important}
  .vph-track{scroll-behavior:auto}
}