/* WeDominators — extras for web-design-portfolio-single.html (generated) */

/* ————— case study: media blocks (drop-in image areas) ————— */
.shot{margin:2.2rem 0;border-radius:20px;overflow:hidden;position:relative}
.shot .art{aspect-ratio:16/9}
.shot.tall .art{aspect-ratio:4/3}
.shot.wide .art{aspect-ratio:21/9}
.shot figcaption{padding:.85rem 1.1rem;font-size:.78rem;color:var(--ink2);border-top:1px solid var(--line)}
/* empty image slots read as deliberate placeholders, labelled with the export size */
.ph{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:.55rem;
  pointer-events:none;text-align:center;padding:1rem;
  font:600 .62rem/1.4 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.ph svg{opacity:.5}
.shot .art,.break .art,.gallery .art,.compare .art{position:relative;
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ink) 9%,transparent)}
.gallery{display:grid;gap:.85rem;margin:2.2rem 0}
.gallery.two{grid-template-columns:1fr 1fr}
.gallery.three{grid-template-columns:repeat(3,1fr)}
.gallery figure{border-radius:16px;overflow:hidden;position:relative}
.gallery .art{aspect-ratio:4/3}
.gallery figcaption{padding:.7rem .9rem;font-size:.74rem;color:var(--mute)}
.compare{position:relative;border-radius:20px;overflow:hidden;margin:2.2rem 0;aspect-ratio:16/9;
  touch-action:none;user-select:none;cursor:ew-resize;--x:50%}
.compare>.side{position:absolute;inset:0}
.compare>.side.after{clip-path:inset(0 0 0 var(--x))}
.compare .lbl{position:absolute;top:.75rem;z-index:4;padding:.32rem .65rem;border-radius:999px;
  font:600 .62rem/1 var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);
  background:var(--glass-deep);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.compare .lbl.a{left:.75rem}
.compare .lbl.b{right:.75rem}
.compare .bar{position:absolute;top:0;bottom:0;left:var(--x);width:2px;z-index:5;background:var(--accent);pointer-events:none}
.compare .bar::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:38px;height:38px;
  border-radius:50%;background:var(--accent);box-shadow:0 10px 26px -10px color-mix(in oklab,var(--accent) 85%,transparent)}
.compare .bar svg{position:absolute;top:50%;left:50%;translate:-50% -50%;color:#fff}
.compare:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.break{position:relative;border-radius:24px;overflow:hidden;margin:clamp(2rem,4vw,3rem) 0}
.break .art{aspect-ratio:21/9}
.facts{display:grid;grid-template-columns:1fr}
.facts>div{display:grid;gap:.2rem;padding:.62rem 0;border-bottom:1px solid var(--line);min-width:0}
.facts>div:last-child{border-bottom:0;padding-bottom:0}
.facts>div:first-child{padding-top:0}
.facts dt{font:600 .63rem/1 var(--font-b);letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.facts dd{margin:0;min-width:0;color:var(--ink);font:500 .88rem/1.45 var(--font-b);overflow-wrap:anywhere}
@media (max-width:820px){.gallery.three{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gallery.two,.gallery.three{grid-template-columns:1fr}}
/* ————— device mockups with hover-scrolling screenshots ————— */
.mockset{position:relative;max-width:1020px;padding-right:clamp(0px,11%,150px);
  margin:clamp(2.6rem,5.5vw,4.2rem) auto clamp(3.4rem,6.5vw,5.2rem)}
.mock{position:relative}
.mock-scroll{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.mock-page{display:block;width:100%;transform:translateY(0);will-change:transform;
  transition:transform 8s cubic-bezier(.33,0,.3,1)}
.mock-page .art{display:block;width:100%}
.mock-tag{position:absolute;z-index:6;left:.6rem;top:.6rem;padding:.3rem .6rem;border-radius:999px;
  font:600 .58rem/1 var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);
  background:var(--glass-deep);border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .35s}
.mock:hover .mock-tag{opacity:0}
.mock-hint{position:absolute;z-index:6;left:50%;bottom:1.15rem;translate:-50% 0;padding:.42rem .85rem;border-radius:999px;
  display:inline-flex;align-items:center;gap:.45rem;
  font:600 .62rem/1 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);
  background:var(--glass-deep);border:1px solid var(--line);pointer-events:none;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:opacity .35s,translate .35s}
.mock-hint svg{color:var(--accent);animation:hintBob 2.2s var(--ease-io) infinite}
@keyframes hintBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
.mock:hover .mock-hint,.mock:focus-within .mock-hint{opacity:0;translate:-50% 10px}
/* MacBook */
.mb{position:relative}
.mb-lid{position:relative;border-radius:17px;padding:10px 10px 12px;
  background:linear-gradient(160deg,color-mix(in oklab,var(--ink) 9%,var(--bg2)),var(--bg2));
  border:1px solid var(--line);box-shadow:var(--shadow),var(--glow)}
.mb-cam{position:absolute;top:4px;left:50%;translate:-50% 0;width:4px;height:4px;border-radius:50%;
  background:color-mix(in oklab,var(--ink) 32%,transparent)}
.mb-screen{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg)}
.mb-deck{position:relative;width:117%;margin-left:-8.5%;height:12px;border-radius:0 0 13px 13px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--ink) 14%,var(--bg2)),color-mix(in oklab,var(--ink) 27%,var(--bg2)));
  border:1px solid var(--line);border-top:0}
.mb-deck::after{content:"";position:absolute;left:50%;translate:-50% 0;top:0;width:82px;height:5px;
  border-radius:0 0 6px 6px;background:color-mix(in oklab,var(--ink) 30%,transparent)}
/* iPhone */
.ip{position:absolute;right:0;bottom:-1.8rem;z-index:4;width:clamp(128px,22%,228px)}
.ip-body{position:relative;aspect-ratio:9/19.3;padding:6px;border-radius:clamp(20px,3.6vw,34px);
  background:linear-gradient(160deg,color-mix(in oklab,var(--ink) 13%,var(--bg2)),var(--bg2));
  border:1px solid var(--line);box-shadow:var(--shadow),0 34px 64px -34px rgba(0,0,0,.65)}
.ip-screen{position:relative;height:100%;border-radius:clamp(15px,2.9vw,28px);overflow:hidden;
  background:var(--bg);border:1px solid var(--line)}
.ip-island{position:absolute;z-index:6;top:7px;left:50%;translate:-50% 0;width:34%;height:5.4%;min-height:11px;
  border-radius:999px;background:color-mix(in oklab,#000 72%,var(--bg2))}
.ip .mock-hint,.ip .mock-tag{display:none}
@media (max-width:820px){
  .mockset{padding-right:0;margin-bottom:clamp(2.4rem,5vw,3.4rem)}
  .ip{position:static;bottom:auto;width:min(236px,66%);margin:2rem auto 0}
}