/* Home: projects (patterns/home-projects.php). Stacked sticky cards (each one shrinks and dims a little as the next
   slides over it: assets/js/sections/hm-projects.js), a row of more project labels with a hover note, a next-step row. */
.hm-projects{
  --hm-projects-card-h:min(540px, 76vh);
  --hm-projects-step:18px;
  --hm-projects-shrink:.94; /* ds-ok: smallest scale of a card once the next one is over it */
  --hm-projects-dim-max:.35; /* ds-ok: strongest dim of a covered card */
  --hm-projects-shadow:0 -10px 40px var(--shadow);
  --hm-projects-site-w:460px;
  --hm-projects-site-shadow:0 -6px 24px var(--shadow);
  --hm-projects-phone-w:130px;
  --hm-projects-phone-h:230px;
  --hm-projects-phone-edge:5px;
  --hm-projects-phone-r:20px;
  --hm-projects-phone-img:60px;
  --hm-projects-stage-min:260px;
  --hm-projects-phone-lift:translateY(-14px) rotate(-2deg);
  --hm-projects-persp:900px;
  --hm-projects-glare-c:oklch(100% 0 0 / .22); /* ds-ok: white sheen on the drawn website, the same in every mode */
  --hm-projects-glare-r:320px;
  --hm-projects-hint-shadow:0 4px 12px var(--shadow);
  --hm-projects-chip-h:36px;
  --hm-projects-tip-w:200px;
  --hm-projects-tip-shadow:0 16px 32px var(--shadow);
  --hm-projects-tip-delay:200ms;
  --hm-projects-z-tip:6;
  --hm-projects-z-link:1;
  --hm-projects-z-btn:2;
  --hm-projects-z-dim:3;
  --hm-projects-chip-ls:.1em;
  padding-top:0;
  overflow-x:clip; /* a hover note can never widen the page; clip (not hidden) keeps the sticky cards working */
}
.hm-projects :is(.hm-projects__card,.hm-projects__info,.hm-projects__tag,.hm-projects__stage,.hm-projects__other,.hm-projects__tip) > *{margin:0}
.hm-projects .hm-projects__others{margin-top:var(--s-6)}

/* stacked cards */
.hm-projects__stack{--hm-projects-total:"";display:grid;gap:var(--s-6);margin:0;padding:0 0 var(--s-6);list-style:none;counter-reset:hm-projects}
.hm-projects__stack > li{--hm-projects-i:0;--hm-projects-sc:1;--hm-projects-dim:0;--hm-projects-top:calc(var(--admin-h) + var(--nav-h) + var(--s-6) + var(--hm-projects-i) * var(--hm-projects-step));position:sticky;top:var(--hm-projects-top);display:grid;min-height:var(--hm-projects-card-h);margin:0;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper);overflow:hidden;transform-origin:center top;transform:scale(var(--hm-projects-sc));box-shadow:var(--hm-projects-shadow);counter-increment:hm-projects}
.hm-projects__stack > li::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:var(--hm-projects-dim);pointer-events:none;z-index:var(--hm-projects-z-dim)} /* above the link layer and the button, so the whole card dims */
.hm-projects__card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}

.hm-projects__info{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:repeat(5,auto) 1fr;gap:var(--s-4) 0;align-content:stretch;padding:var(--s-7) var(--s-6);border-right:1px solid var(--rule)}
.hm-projects__info > *{grid-column:1 / -1}
/* "01 / 04": the number from a CSS counter, the total from the script */
.hm-projects__info::before,.hm-projects__info::after{grid-row:1;font:500 var(--t-s)/1 var(--font-mono)}
.hm-projects__info::before{content:counter(hm-projects, decimal-leading-zero);grid-column:1;color:var(--accent)}
.hm-projects__info::after{content:var(--hm-projects-total);grid-column:2;white-space:pre;color:var(--ink-3)}
.hm-projects .hm-projects__tag{gap:0} /* beats the core flex-layout gap; the separator below spaces the two parts like the design's " · " */
.hm-projects__tag > p:empty{display:none}
.hm-projects__tag > p + p::before{content:" · ";white-space:pre}
.hm-projects .hm-projects__name{font-size:var(--t-2xl)} /* beats the core/post-title global font size */
.hm-projects__name a{color:inherit;text-decoration:none}
.hm-projects__name a::after{content:"";position:absolute;inset:0;z-index:var(--hm-projects-z-link)} /* the whole card opens the project */
.editor-styles-wrapper .hm-projects__name a::after{display:none} /* keep the card's blocks selectable in the editor */
.hm-projects__desc{max-width:44ch;color:var(--ink-2)}
.hm-projects__info .dg-mlist__chip{min-height:0;padding:var(--s-1) var(--s-2);border-radius:var(--wp--preset--border-radius--radius-full);background:transparent;line-height:1.4;letter-spacing:var(--hm-projects-chip-ls);text-transform:uppercase}
.hm-projects__info .dg-mlist__chip.is-accent{border-color:var(--accent-fill);background:var(--accent-tint)}
/* "Xem chi tiết": ghost button pinned to the bottom of the text column */
.hm-projects__info .hm-projects__go{position:relative;z-index:var(--hm-projects-z-btn);grid-row:-2;align-self:end;justify-self:start;display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--ctl);padding:0 var(--s-5);border:1px solid var(--rule);border-radius:var(--r);color:var(--ink);text-decoration:none;font:600 var(--t-s)/1 var(--font-body);transition:border-color var(--dur) var(--ease-press)}
.hm-projects__info .hm-projects__go::after{content:"";width:var(--icon-s);height:var(--icon-s);background:currentColor;-webkit-mask:url(../../../icons/arrow.svg?ver=61b6bacd) center / contain no-repeat;mask:url(../../../icons/arrow.svg?ver=61b6bacd) center / contain no-repeat;transition:transform var(--dur) var(--ease-press)}
.hm-projects__info .hm-projects__go:hover{border-color:var(--ink-2)}
.hm-projects__info .hm-projects__go:hover::after{transform:translate(2px,-2px)}

/* website mock-up stage */
.hm-projects__stage{--dg-site-w:var(--hm-projects-site-w);--dg-phone-w:var(--hm-projects-phone-w);position:relative;display:flex;align-items:flex-end;justify-content:center;padding:var(--s-7) var(--s-6) 0;overflow:hidden;cursor:pointer}
.hm-projects__stage .dg-mock{width:100%}
.hm-projects__stage .dg-mock__stage{gap:var(--s-5)}
.hm-projects__stage .dg-site{--hm-projects-rx:0deg;--hm-projects-ry:0deg;--hm-projects-lift:0px;--hm-projects-gx:50%;--hm-projects-gy:0%;padding:var(--s-3) var(--s-4) var(--s-5);box-shadow:var(--hm-projects-site-shadow);transform:perspective(var(--hm-projects-persp)) rotateX(var(--hm-projects-rx)) rotateY(var(--hm-projects-ry)) translateY(var(--hm-projects-lift));transition:transform var(--dur-morph) var(--ease-out)}
.hm-projects__stage .dg-site--shot{padding:0} /* a screenshot fills the window under its bar */
.hm-projects__stage .dg-site::after{content:"";position:absolute;inset:0;background:radial-gradient(var(--hm-projects-glare-r) circle at var(--hm-projects-gx) var(--hm-projects-gy), var(--hm-projects-glare-c), transparent 60%);opacity:0;transition:opacity var(--dur-m) var(--ease-out);pointer-events:none}
.hm-projects__stack > li.is-tilting .dg-site::after{opacity:1}
/* the same sheen drawn by base.js dgLight once the pointer reaches the website (moved, never repainted) */
.hm-projects__stage .dg-site{--dg-light-on:0;--dg-light-inset:0px;--dg-light-pad:0px;--dg-light-r:var(--hm-projects-glare-r);--dg-light-c:var(--hm-projects-glare-c);--dg-light-stop:60%;--dg-light-shift:0px}
.hm-projects__stack > li.is-tilting .dg-site{--dg-light-on:1}
.hm-projects__stage .dg-site.dg-lit::after{content:none} /* the CSS sheen above stays only where no shadow light could be drawn */ /* sheen only while the pointer is over the drawn website */
.hm-projects__stack > li.is-tilting .dg-site{--hm-projects-lift:calc(var(--s-2) * -1)}
.hm-projects__stack > li:hover .dg-phone{transform:var(--hm-projects-phone-lift)}
/* the small phone of the design: no notch, no menu rows, a shorter picture */
.hm-projects__stage .dg-phone{height:var(--hm-projects-phone-h);aspect-ratio:auto;margin-bottom:calc(var(--s-6) * -1);border-width:var(--hm-projects-phone-edge);border-radius:var(--hm-projects-phone-r);transition:transform var(--dur-morph) var(--ease-out)}
.hm-projects__stage .dg-phone__screen{padding-top:var(--s-6)}
.hm-projects__stage :is(.dg-phone__island,.dg-phone__row){display:none}
.hm-projects__stage .dg-phone__img{height:var(--hm-projects-phone-img)}
/* eye badge, top right of the stage */
.hm-projects__stage::before,.hm-projects__stage::after{content:"";position:absolute;transition:background-color var(--dur) var(--ease-press),color var(--dur) var(--ease-press),transform var(--dur) var(--ease-press)}
.hm-projects__stage::before{will-change:transform;top:var(--s-7);right:var(--s-4);width:var(--ctl-s);height:var(--ctl-s);border:1px solid var(--rule);border-radius:50%;background:var(--card);box-shadow:var(--hm-projects-hint-shadow)}
.hm-projects__stage::after{top:calc(var(--s-7) + (var(--ctl-s) - var(--s-4)) / 2);right:calc(var(--s-4) + (var(--ctl-s) - var(--s-4)) / 2);width:var(--s-4);height:var(--s-4);color:var(--ink);background:currentColor;-webkit-mask:url(../../../icons/eye.svg?ver=64f97769) center / contain no-repeat;mask:url(../../../icons/eye.svg?ver=64f97769) center / contain no-repeat}
.hm-projects__stack > li:is(:hover,:focus-within) .hm-projects__stage::before{background:var(--accent-fill);transform:scale(1.08)}
.hm-projects__stack > li:is(:hover,:focus-within) .hm-projects__stage::after{color:var(--on-accent)}

.hm-projects__empty{padding:var(--gap-card);border:1px dashed var(--rule);border-radius:var(--r-card);color:var(--ink-2);text-align:center}

/* more projects: labels with a note above on hover / focus */
.hm-projects__others{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4)}
.hm-projects__others:not(:has(li)){display:none}
.hm-projects .hm-projects__others > *{margin:0}
.hm-projects .hm-projects__others-label{font-size:var(--t-s);color:var(--ink-2)}
.hm-projects__others-list{display:contents} /* the labels wrap in the same row as "Một số dự án khác:" */
.hm-projects__others-list > li{margin:0;list-style:none}
.hm-projects__other{--hm-projects-dx:0px;position:relative}
.hm-projects .hm-projects__other-name{font-size:var(--t-s)} /* the core/post-title global font size would make the line box taller than the label */
.hm-projects__other-name a{display:inline-flex;align-items:center;min-height:var(--hm-projects-chip-h);padding:0 var(--s-3);border:1px solid var(--rule);border-radius:var(--wp--preset--border-radius--radius-full);background:var(--paper);color:var(--ink);font-size:var(--t-s);text-decoration:none;transition:border-color var(--dur) var(--ease-press)}
.hm-projects__other-name a:hover{border-color:var(--accent-fill)}
.hm-projects__tip{position:absolute;bottom:calc(100% + var(--s-2));left:50%;z-index:var(--hm-projects-z-tip);width:var(--hm-projects-tip-w);padding:var(--s-3);border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--card);box-shadow:var(--hm-projects-tip-shadow);font-size:var(--t-xs);opacity:0;pointer-events:none;transform:translate(calc(-50% + var(--hm-projects-dx)), var(--s-1));transition:opacity var(--dur) var(--ease-press) var(--hm-projects-tip-delay),transform var(--dur) var(--ease-press) var(--hm-projects-tip-delay)}
.hm-projects .hm-projects__tip > .hm-projects__tip-title{margin-bottom:calc(var(--s-1) / 2);font:700 var(--t-s)/1.2 var(--font-display)}
.hm-projects__tip-desc p{margin:0}
.hm-projects__other:is(:hover,:focus-within) .hm-projects__tip{opacity:1;transform:translate(calc(-50% + var(--hm-projects-dx)), 0)}


/* The shrink and dim of a covered card run on the browser's own scroll timeline (no script writing values every frame,
   which repainted the cards): each card follows the next card's view timeline, from the next card one card-height
   below it to the next card reaching its sticky place. Wide screens only (narrow cards grow with their content);
   elsewhere, and in browsers without scroll timelines, hm-projects.js does it. Up to 8 cards. */
@supports (animation-timeline: view()) {
  @media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .hm-projects__stack{timeline-scope:--hm-projects-t2,--hm-projects-t3,--hm-projects-t4,--hm-projects-t5,--hm-projects-t6,--hm-projects-t7,--hm-projects-t8}
    .hm-projects__stack > li:nth-child(2){view-timeline:--hm-projects-t2 block}
    .hm-projects__stack > li:nth-child(1),.hm-projects__stack > li:nth-child(1)::after{animation-timeline:--hm-projects-t2}
    .hm-projects__stack > li:nth-child(3){view-timeline:--hm-projects-t3 block}
    .hm-projects__stack > li:nth-child(2),.hm-projects__stack > li:nth-child(2)::after{animation-timeline:--hm-projects-t3}
    .hm-projects__stack > li:nth-child(4){view-timeline:--hm-projects-t4 block}
    .hm-projects__stack > li:nth-child(3),.hm-projects__stack > li:nth-child(3)::after{animation-timeline:--hm-projects-t4}
    .hm-projects__stack > li:nth-child(5){view-timeline:--hm-projects-t5 block}
    .hm-projects__stack > li:nth-child(4),.hm-projects__stack > li:nth-child(4)::after{animation-timeline:--hm-projects-t5}
    .hm-projects__stack > li:nth-child(6){view-timeline:--hm-projects-t6 block}
    .hm-projects__stack > li:nth-child(5),.hm-projects__stack > li:nth-child(5)::after{animation-timeline:--hm-projects-t6}
    .hm-projects__stack > li:nth-child(7){view-timeline:--hm-projects-t7 block}
    .hm-projects__stack > li:nth-child(6),.hm-projects__stack > li:nth-child(6)::after{animation-timeline:--hm-projects-t7}
    .hm-projects__stack > li:nth-child(8){view-timeline:--hm-projects-t8 block}
    .hm-projects__stack > li:nth-child(7),.hm-projects__stack > li:nth-child(7)::after{animation-timeline:--hm-projects-t8}
    .hm-projects__stack > li:not(:last-child),.hm-projects__stack > li:not(:last-child)::after{animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-range:cover calc(100vh - var(--hm-projects-top) - var(--hm-projects-card-h)) cover calc(100vh - var(--hm-projects-top) - var(--hm-projects-step))}
    .hm-projects__stack > li:not(:last-child){animation-name:hm-projects-shrink}
    .hm-projects__stack > li:not(:last-child)::after{animation-name:hm-projects-dim}
  }
}
@keyframes hm-projects-shrink{to{transform:scale(var(--hm-projects-shrink))}}
@keyframes hm-projects-dim{to{opacity:var(--hm-projects-dim-max)}}

@media (max-width: 991px){
  .hm-projects__stack > li{min-height:0}
  .hm-projects__card{grid-template-columns:minmax(0,1fr)}
  .hm-projects__info{padding:var(--s-5);border-right:0;border-bottom:1px solid var(--rule)}
  .hm-projects__stage{min-height:var(--hm-projects-stage-min);padding:var(--s-5) var(--s-4) 0}
}
@media (max-width: 767px){
  .hm-projects{--hm-projects-step:10px}
  .hm-projects__stack > li{top:calc(var(--admin-h) + var(--nav-h) + var(--s-3) + var(--hm-projects-i) * var(--hm-projects-step))}
  .hm-projects .hm-projects__name{font-size:var(--t-xl)}
  .hm-projects__desc,.hm-projects__stage .dg-phone,.hm-projects__tip{display:none}
}
@media (prefers-reduced-motion: reduce){
  .hm-projects__stack > li{transform:none}
  .hm-projects__stage .dg-site,.hm-projects__stage .dg-site::after,.hm-projects__stage .dg-phone,.hm-projects__stage::before,.hm-projects__stage::after,.hm-projects__tip,.hm-projects__info .hm-projects__go::after{transition:none}
  .hm-projects__stack > li:is(:hover,:focus-within) .hm-projects__stage::before{transform:none}
  .hm-projects__stack > li:hover .dg-phone{transform:none}
}