/* =========================================================
   WORK PAGE (work.html)
   - hero "on this page" links
   - SEC 01: drawing sheet around the #compare slider
   - SEC 02: CAD "blueprint lens" hover on gallery cards
   - SEC 03: plan → 3D → built cards that trace themselves
   Uses the tokens defined in css/style.css (:root).
   ========================================================= */

/* ---------- Shared keyframes ---------- */
@keyframes workRise { from { opacity: 0; transform: translateY(46px) scale(.97); } }
@keyframes workNudge { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes workPing { 0% { transform: scale(.82); opacity: .85; } 75%, 100% { transform: scale(1.55); opacity: 0; } }
@keyframes workMarch { to { stroke-dashoffset: -100; } }

/* Cards whose component sets its own `transition` lose the .reveal stagger
   (the shorthand resets transition-delay). Replay the reveal as an animation
   with `backwards` fill so hover transforms still work afterwards. */
.work__grid .work-card.reveal.is-in,
.p2k__card.reveal.is-in { animation: workRise 1.1s var(--spring) backwards; animation-delay: calc(var(--d, 0) * 110ms); }
.work__grid .work-card.reveal.is-in.is-pop { animation: cardPop .7s var(--spring); }
/* reduced motion: the global rule shortens durations but not delays, so drop the
   delayed replay (otherwise cards sit invisible for up to ~0.5s) */
@media (prefers-reduced-motion: reduce) {
  .work__grid .work-card.reveal.is-in, .p2k__card.reveal.is-in { animation: none; }
}

/* ---------- Hero: "on this page" links ----------
   Same pattern on work, services and partners (keep the three copies in sync,
   or promote to css/style.css as `.page-hero__aside a`). */
.work-hero .page-hero__aside a { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed rgba(27,42,58,.14); transition: color .3s, transform .45s var(--spring); }
.work-hero .page-hero__aside li:last-child a { border-bottom: 0; padding-bottom: 0; }
.work-hero .page-hero__aside a .mono { color: var(--muted); font-size: 11px; transition: color .3s; }
.work-hero .page-hero__aside a:hover { color: var(--copper-d); transform: translateX(5px); }
.work-hero .page-hero__aside a:hover .mono { color: var(--copper); }

/* =========================================================
   SEC 01 — the drawing sheet
   ========================================================= */
.compare-sec > .container { position: relative; z-index: 1; }
.compare-sec .blob--4 { left: auto; right: -220px; top: -160px; opacity: .2; }
.compare-sec .section-head--split .lead { max-width: 440px; }

.sheet {
  position: relative;
  padding: 50px 24px 24px 50px;
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  box-shadow: inset 0 0 0 1px rgba(158,195,230,.16), 0 60px 110px -60px rgba(0,0,0,.75);
}
.sheet__frame { position: relative; }
.sheet__frame::before { /* ruler origin */
  content: ""; position: absolute; left: -30px; top: -30px; width: 14px; height: 14px; border-radius: 5px;
  background: linear-gradient(135deg, var(--copper-2), var(--copper));
  box-shadow: 0 0 0 5px rgba(194,133,63,.16);
}
.sheet__ruler { position: absolute; pointer-events: none; color: rgba(158,195,230,.5); }
.sheet__ruler--x {
  left: 0; right: 0; top: -30px; height: 14px; border-right: 1px solid currentColor;
  background:
    linear-gradient(90deg, currentColor 1px, transparent 0) 0 100% / 10% 14px repeat-x,
    linear-gradient(90deg, currentColor 1px, transparent 0) 0 100% / 2% 6px repeat-x;
}
.sheet__ruler--y {
  top: 0; bottom: 0; left: -30px; width: 14px; border-bottom: 1px solid currentColor;
  background:
    linear-gradient(currentColor 1px, transparent 0) 100% 0 / 14px 10% repeat-y,
    linear-gradient(currentColor 1px, transparent 0) 100% 0 / 6px 2% repeat-y;
}
.sheet .compare { margin-bottom: 0; box-shadow: 0 40px 80px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(158,195,230,.14); }

/* handle: dimension carets + an inviting ping */
.compare__handle::before, .compare__handle::after {
  content: ""; position: absolute; left: 50%; width: 0; height: 0;
  border: 8px solid transparent; transform: translateX(-50%); pointer-events: none;
}
.compare__handle::before { top: 0; border-top-color: var(--copper-2); }
.compare__handle::after { bottom: 0; border-bottom-color: var(--copper-2); }
.compare__handle span::before {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(255,255,255,.75);
  animation: workPing 2.6s var(--ease) infinite;
}
.compare.is-drag .compare__handle span::before { animation: none; opacity: 0; }
.compare__handle:focus-visible { outline: none; }
.compare__handle:focus-visible span { box-shadow: 0 0 0 4px var(--cream), 0 0 0 7px var(--copper), 0 10px 30px rgba(0,0,0,.3); }

.sheet__foot {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px 28px;
  margin-top: 24px; color: rgba(250,246,238,.78); font-size: 15px;
}
.sheet__title { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.sheet__title .mono { color: var(--copper-2); font-size: 11px; }
.sheet__hint {
  justify-self: start; margin: 0; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 999px; font-size: 11px; color: var(--cream);
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(158,195,230,.2);
}
.sheet__hint svg { width: 18px; height: 18px; fill: none; stroke: var(--copper-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: workNudge 1.8s var(--ease) infinite; }
.sheet__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; }
.sheet__legend li { display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 5px; }
.sw--plan { background: #1E3A57; box-shadow: inset 0 0 0 1.5px var(--blueprint); }
.sw--real { background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--copper-2); }

/* =========================================================
   SEC 02 — gallery with a CAD "blueprint lens"
   (.glow-card gives each card live --mx / --my pointer coords)
   ========================================================= */
#gallery .section-head .lead { margin-top: 2px; }
.work__grid .work-card { cursor: crosshair; }
.work__grid .work-card figcaption { z-index: 2; }
.work__grid .work-card.glow-card::after { z-index: 3; }

/* full-length dashed crosshair (replaces the hidden spotlight layer) */
.work__grid .work-card.glow-card::before {
  z-index: 1;
  background:
    repeating-linear-gradient(180deg, rgba(255,253,248,.8) 0 6px, transparent 6px 12px) var(--mx, 50%) 0 / 1px 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(255,253,248,.8) 0 6px, transparent 6px 12px) 0 var(--my, 50%) / 100% 1px no-repeat;
  transition: opacity .3s;
}

/* the lens: the drawing "under" the photo, revealed around the pointer */
.work-card__lens {
  --R: 104px;
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .35s var(--ease);
  background:
    radial-gradient(circle var(--R) at var(--mx, 50%) var(--my, 50%), transparent calc(var(--R) - 3px), var(--copper-2) calc(var(--R) - 2px), var(--copper-2) calc(var(--R) - 1px), transparent var(--R)),
    radial-gradient(circle calc(var(--R) * .55) at var(--mx, 50%) var(--my, 50%), transparent calc(var(--R) * .55 - 1px), rgba(158,195,230,.55) calc(var(--R) * .55 - .5px), transparent calc(var(--R) * .55)),
    linear-gradient(var(--copper-2), var(--copper-2)) var(--mx, 50%) 0 / 1.5px 100% no-repeat,
    linear-gradient(var(--copper-2), var(--copper-2)) 0 var(--my, 50%) / 100% 1.5px no-repeat,
    linear-gradient(rgba(158,195,230,.42) 1px, transparent 0) 0 0 / 100% 20px,
    linear-gradient(90deg, rgba(158,195,230,.42) 1px, transparent 0) 0 0 / 20px 100%,
    rgba(30,58,87,.7);
  -webkit-mask: radial-gradient(circle var(--R) at var(--mx, 50%) var(--my, 50%), #000 calc(var(--R) - .5px), transparent var(--R));
          mask: radial-gradient(circle var(--R) at var(--mx, 50%) var(--my, 50%), #000 calc(var(--R) - .5px), transparent var(--R));
}
@media (hover: hover) and (pointer: fine) {
  .work__grid .work-card:hover .work-card__lens { opacity: 1; }
  /* opaque caption while the lens is on, so its backdrop blur doesn't smear the navy lens into a grey smudge */
  .work__grid .work-card:hover figcaption { background: var(--paper); }
}
@media (hover: none), (pointer: coarse) {
  .work-card__lens, .work__grid .work-card.glow-card::before { display: none; }
}
/* touch tablets can't hover, so show the full caption (type · location) like phones do */
@media (hover: none) {
  .work__grid .work-card figcaption { transform: none; }
}

/* filtered view: drop the mosaic spans so a partial set tiles cleanly */
.work__grid:has(> .work-card.is-hidden) > .work-card { grid-column: span 1; grid-row: span 1; }

/* "more on request" bar */
.gallery-note {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px;
  margin-top: clamp(28px, 4vw, 44px); padding: 16px 16px 16px 32px;
  border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-sm), var(--inset);
}
.gallery-note p { margin: 0; flex: 1 1 320px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.gallery-note p .mono { display: block; margin-bottom: 3px; color: var(--copper-d); font-size: 11px; }
.gallery-note .wa-ico { width: 20px; height: 20px; fill: currentColor; }

/* =========================================================
   SEC 03 — from plan to keys
   ========================================================= */
.p2k { display: grid; grid-template-columns: 1fr 64px 1fr 64px 1fr; align-items: stretch; }
.p2k__card { display: flex; flex-direction: column; padding: 14px 14px 30px; }
.p2k__art { position: relative; aspect-ratio: 26 / 15; border-radius: var(--r-md); overflow: hidden; transition: transform .7s var(--spring); }
.p2k__art svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.p2k__card:hover .p2k__art { transform: scale(.975); }

.p2k__art--plan {
  background: #1E3A57;
  background-image: linear-gradient(rgba(158,195,230,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(158,195,230,.12) 1px, transparent 1px);
  background-size: 16px 16px;
}
.p2k__art--model {
  background: var(--cream);
  background-image: linear-gradient(rgba(27,42,58,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(27,42,58,.06) 1px, transparent 1px);
  background-size: 16px 16px;
  box-shadow: inset 0 0 0 1px rgba(27,42,58,.06);
}
.p2k__art--space { background: radial-gradient(120% 90% at 45% 0%, #FFF7EA, #F1D9BC 70%, #E8C9A3); }

/* base drawing (faint) + copper trace that draws itself on hover */
.art-base { stroke: rgba(27,42,58,.38); }
.p2k__art--plan .art-base { stroke: rgba(158,195,230,.6); }
.art-trace { stroke: var(--copper); stroke-width: 2.4; stroke-linecap: butt; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1.1s var(--ease), opacity .3s 1s; }
.p2k__art--plan .art-trace { stroke: var(--copper-2); }
.p2k__art--space .art-trace { stroke: var(--copper-d); }
.p2k__card:hover .art-trace, .p2k__card:focus-within .art-trace { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 1.6s var(--ease), opacity .1s; }
.art-text { fill: rgba(158,195,230,.8); stroke: none; font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .14em; }
.art-orbit { stroke: rgba(194,133,63,.6); stroke-width: 1.4; stroke-dasharray: 4 6; animation: workMarch 6s linear infinite; }
.art-fill { opacity: .3; transition: opacity .8s var(--ease) .4s; }
.art-glow { opacity: .12; transition: opacity .9s var(--ease) .5s; }
.p2k__card:hover .art-glow, .p2k__card:hover .art-fill { opacity: 1; }

.p2k__body { padding: 0 14px; }
.p2k__card .p2k__meta { display: flex; justify-content: space-between; gap: 12px; margin: 24px 0 0; color: var(--copper-d); font-size: 11px; line-height: 1.4; }
.p2k__card .p2k__meta span + span { color: var(--muted); text-align: right; }
.p2k__card h3 { margin: 10px 0 10px; font-size: clamp(23px, 2.2vw, 28px); letter-spacing: -.01em; }

.p2k__arrow {
  align-self: center; justify-self: center; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper); color: var(--copper-d);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(194,133,63,.3);
}
.p2k__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: workNudge 1.8s var(--ease) infinite; }

/* touch: no hover, so trace + lights come on once the card is revealed */
@media (hover: none) {
  .sheet__keys { display: none; } /* touch tablets: no arrow keys to mention */
  .p2k__card.is-in .art-trace { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 1.8s var(--ease) .8s, opacity .1s .8s; }
  .p2k__card.is-in .art-glow, .p2k__card.is-in .art-fill { opacity: 1; transition-delay: 1.6s; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .work__grid .work-card--tall { grid-row: span 1; } /* 2-col mosaic: wides fill full rows, no gaps */
  .sheet__foot { grid-template-columns: 1fr auto; }
  .sheet__title { grid-column: 1 / -1; }

  .p2k { grid-template-columns: 1fr; gap: 14px; }
  .p2k__arrow { rotate: 90deg; }
  .p2k__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 0 26px; padding: 14px; }
  .p2k__body { padding: 8px 14px 8px 0; }
  .p2k__card .p2k__meta { margin-top: 0; }
}
@media (max-width: 680px) {
  .sheet { padding: 32px 12px 16px; border-radius: var(--r-lg); }
  .sheet__frame::before, .sheet__ruler--y { display: none; }
  .sheet__ruler--x { top: -20px; height: 10px; background-size: 10% 10px, 4% 5px; }
  .compare__label { top: 12px; left: 12px; padding: 6px 10px; font-size: 9.5px; }
  .compare__label--r { left: auto; right: 12px; }
  .compare__handle span { width: 52px; height: 52px; }
  .sheet__foot { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .sheet__keys { display: none; }

  /* all four filters fit inside the pill down to ~340px; narrower phones scroll it */
  .filters { width: 100%; gap: 2px; padding: 5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: 1 0 auto; padding: 10px 9px; font-size: 14px; }

  .gallery-note { border-radius: var(--r-lg); padding: 22px; }
  .gallery-note .btn { flex: 1 1 100%; }
  .work-hero .page-hero__actions .btn { flex: 1 1 100%; } /* same as the other inner-page heroes */

  .p2k__card { grid-template-columns: 1fr; padding: 12px 12px 26px; }
  .p2k__body { padding: 0 10px; }
  .p2k__card .p2k__meta { margin-top: 20px; }
}