/*! Núcleo · Screenshots — mockup ecrã + telemóvel (CSS puro, sem imagens de moldura) · Daniel Jesus & DOTEC */
.shots{
  --shots-surface:var(--surface,#10151c);
  --shots-surface-2:var(--surface-2,#151b24);
  --shots-line:var(--line-2,#2b3542);
  --shots-fg:var(--fg,#e9eef3);
  --shots-muted:var(--muted,#8592a1);
  --shots-accent:var(--accent,#7cff6b);
  --shots-radius:clamp(8px,1.1cqi,14px);
  --shots-font:var(--f-mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  --shots-shadow:0 2px 4px rgb(0 0 0 / .12),0 24px 48px -18px rgb(0 0 0 / .45),0 60px 120px -40px rgb(0 0 0 / .55);
  --shots-dur:4s;--shots-back:.9s;
  container-type:inline-size;
  position:relative;margin:clamp(1.5rem,4vw,3rem) 0;padding:0;
}
.shots *,.shots *::before,.shots *::after{box-sizing:border-box}
.shots__stage{
  position:relative;display:block;isolation:isolate;color:inherit;text-decoration:none;
  padding:0 7.5% 7.5% 0;outline:none;border-radius:var(--shots-radius);
}
/* brilho subtil (cor de destaque do tema) por trás do conjunto */
.shots__stage::before{
  content:"";position:absolute;z-index:-1;inset:6% 4% 2% 6%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--shots-accent) 16%,transparent),transparent);
  filter:blur(28px);opacity:.75;pointer-events:none;transition:opacity .5s ease;
}
a.shots__stage:focus-visible{box-shadow:0 0 0 3px var(--shots-accent)}

/* ------------------------------------------------ janela do browser */
.shots__browser{
  position:relative;border-radius:var(--shots-radius);overflow:hidden;
  background:var(--shots-surface-2);
  border:1px solid color-mix(in srgb,var(--shots-line) 85%,transparent);
  box-shadow:var(--shots-shadow),inset 0 1px 0 rgb(255 255 255 / .06);
  transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s ease;
}
.shots__bar{
  display:flex;align-items:center;gap:clamp(6px,1.2cqi,14px);
  height:clamp(24px,3.4cqi,38px);padding:0 clamp(8px,1.4cqi,16px);
  background:linear-gradient(color-mix(in srgb,var(--shots-surface-2) 92%,var(--shots-fg)),var(--shots-surface-2));
  border-bottom:1px solid color-mix(in srgb,var(--shots-line) 80%,transparent);
}
.shots__dots{display:flex;gap:clamp(4px,.6cqi,7px);flex:0 0 auto}
.shots__dots i{display:block;width:clamp(7px,.95cqi,12px);aspect-ratio:1;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgb(0 0 0 / .18)}
.shots__dots i:nth-child(2){background:#febc2e}
.shots__dots i:nth-child(3){background:#28c840}
.shots__addr{
  flex:0 1 46%;min-width:0;margin-inline:auto;display:flex;align-items:center;justify-content:center;gap:6px;
  height:clamp(16px,2.2cqi,24px);padding:0 12px;border-radius:999px;
  background:color-mix(in srgb,var(--shots-surface) 70%,transparent);
  border:1px solid color-mix(in srgb,var(--shots-line) 60%,transparent);
  color:var(--shots-muted);font:500 clamp(9px,1.05cqi,12.5px)/1 var(--shots-font);letter-spacing:.01em;
}
.shots__host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shots__lock{flex:none;color:color-mix(in srgb,var(--shots-accent) 70%,var(--shots-muted))}
.shots__tools{display:flex;gap:5px;flex:0 0 auto;width:clamp(30px,4.6cqi,52px);justify-content:flex-end}
.shots__tools i{display:block;width:clamp(10px,1.3cqi,16px);height:2px;border-radius:2px;background:color-mix(in srgb,var(--shots-muted) 45%,transparent)}
.shots__screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--shots-surface)}
.shots__screen picture,.shots__display picture{display:block}
.shots__scroll{position:absolute;inset:0;will-change:transform;transition:transform var(--shots-back) cubic-bezier(.45,0,.2,1)}
.shots__screen .shots__img{display:block;width:100%;height:auto;max-width:none;margin:0;border:0;border-radius:0;transition:transform var(--shots-back) cubic-bezier(.45,0,.2,1)}
.shots:not(.shots--scroll) .shots__screen .shots__img{height:100%;object-fit:cover;object-position:top center}

/* scroll suave da página inteira no hover/foco — 100% da janela para baixo, -100% da imagem para cima = fundo alinhado */
.shots--len-1{--shots-dur:2s}
.shots--len-2{--shots-dur:3.2s}
.shots--len-3{--shots-dur:4.6s}
.shots--len-4{--shots-dur:6s}
.shots--len-5{--shots-dur:7.4s}
.shots--len-6{--shots-dur:8.8s}
.shots--scroll .shots__stage:is(:hover,:focus-visible) .shots__scroll{transform:translateY(100%);transition:transform var(--shots-dur) cubic-bezier(.45,0,.25,1) .15s}
.shots--scroll .shots__stage:is(:hover,:focus-visible) .shots__screen .shots__img{transform:translateY(-100%);transition:transform var(--shots-dur) cubic-bezier(.45,0,.25,1) .15s}
.shots__stage:is(:hover,:focus-visible) .shots__browser{transform:translateY(-3px)}
.shots__stage:is(:hover,:focus-visible)::before{opacity:1}

/* ------------------------------------------------ telemóvel */
.shots__phone{
  position:absolute;right:0;bottom:0;z-index:2;width:21.5%;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
  filter:drop-shadow(0 30px 34px rgb(0 0 0 / .42)) drop-shadow(0 6px 10px rgb(0 0 0 / .25));
}
.shots__stage:is(:hover,:focus-visible) .shots__phone{transform:translate(-2%,-4%) rotate(-1deg)}
.shots__device{
  position:relative;padding:4.2%;border-radius:17% / 8%;
  background:linear-gradient(150deg,#3a3f47 0%,#1a1d22 22%,#0c0e11 60%,#24282f 100%);
  box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .1),inset 0 0 0 4px #050608,0 0 0 1px rgb(0 0 0 / .5);
}
/* botões laterais */
.shots__device::before,.shots__device::after{content:"";position:absolute;width:1.6%;border-radius:2px;background:linear-gradient(90deg,#2a2e35,#14161a)}
.shots__device::before{left:-1.4%;top:19%;height:7%;box-shadow:0 260% 0 #1d2026}
.shots__device::after{right:-1.4%;top:26%;height:12%}
.shots__display{position:relative;overflow:hidden;border-radius:13.5% / 6.3%;aspect-ratio:390/844;background:#000;container-type:inline-size;display:flex;flex-direction:column}
.shots__display picture{flex:1 1 auto;min-height:0;position:relative}
.shots__display .shots__img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;object-fit:cover;object-position:top center}
/* barra de estado (hora, ilha dinâmica, rede, bateria) — o site começa por baixo, como num iPhone real */
.shots__status{
  position:relative;z-index:2;flex:none;height:12.6cqi;display:flex;align-items:center;justify-content:space-between;
  padding:1.2cqi 7.4cqi 0 10.5cqi;background:#000;color:#fff;
  font:600 4.1cqi/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;letter-spacing:.02em;
}
.shots__island{
  position:absolute;top:2.8cqi;left:50%;width:31cqi;height:9cqi;transform:translateX(-50%);
  border-radius:999px;background:#000;box-shadow:inset 0 0 0 .25cqi rgb(255 255 255 / .05);
}
.shots__island::after{content:"";position:absolute;right:9%;top:50%;width:4.4cqi;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 35% 35%,#34466a,#0a0d14 70%)}
.shots__icons{display:flex;align-items:center;gap:1.4cqi}
.shots__sig{display:block;width:4.6cqi;height:2.9cqi;clip-path:polygon(0 100%,100% 0,100% 100%);
  background:linear-gradient(90deg,#fff 0 20%,transparent 20% 27%,#fff 27% 47%,transparent 47% 54%,#fff 54% 74%,transparent 74% 81%,#fff 81%)}
.shots__bat{position:relative;display:block;width:6.6cqi;height:3.1cqi;padding:.45cqi;border:.3cqi solid rgb(255 255 255 / .45);border-radius:1cqi;background:#fff content-box;background-clip:content-box}
.shots__bat::after{content:"";position:absolute;right:-1cqi;top:30%;width:.6cqi;height:40%;border-radius:0 .5cqi .5cqi 0;background:rgb(255 255 255 / .45)}
/* reflexo do vidro */
.shots__display::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(118deg,rgb(255 255 255 / .14) 0%,rgb(255 255 255 / .04) 22%,transparent 38%);
}

/* ------------------------------------------------ legenda */
.shots__caption{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.35rem 1rem;
  margin-top:clamp(.75rem,2cqi,1.25rem);font-size:var(--fs-sm,.875rem);color:var(--shots-muted);line-height:1.45;
}
.shots__text{color:var(--fg-2,var(--shots-fg))}
.shots__date{font:400 var(--fs-xs,.75rem)/1.4 var(--shots-font);letter-spacing:.02em;margin-left:auto}

/* ------------------------------------------------ variantes */
.shots--desktop .shots__stage{padding:0}
.shots--mobile .shots__stage{padding:0;display:flex;justify-content:center}
.shots--mobile .shots__phone{position:relative;right:auto;bottom:auto;width:min(340px,62%)}
.shots--mobile .shots__stage:is(:hover,:focus-visible) .shots__phone{transform:translateY(-4px)}
.shots--mobile .shots__caption{justify-content:center;text-align:center}
.shots--mobile .shots__date{margin-left:0}
.shots--sm{max-width:560px}
.shots--md{max-width:820px}
.shots--lg{max-width:1120px}
.shots--sm,.shots--md,.shots--lg{margin-inline:auto}

/* contentor estreito (telemóvel, colunas): telemóvel mais pequeno e por baixo, a sobrepor só o fundo do ecrã */
@container (max-width:560px){
  .shots--duo .shots__stage{padding:0 0 24% 0}
  .shots--duo .shots__phone{width:26%;right:4%}
  .shots__addr{padding:0 8px}
  .shots__tools{display:none}
  .shots__caption{flex-direction:column;align-items:flex-start}
  .shots__date{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .shots__scroll,.shots__screen .shots__img,.shots__phone,.shots__browser,.shots__stage::before{transition:none!important}
  .shots--scroll .shots__stage:is(:hover,:focus-visible) .shots__scroll,
  .shots--scroll .shots__stage:is(:hover,:focus-visible) .shots__screen .shots__img,
  .shots__stage:is(:hover,:focus-visible) .shots__phone,
  .shots__stage:is(:hover,:focus-visible) .shots__browser{transform:none}
}
@media (hover:none){
  .shots__stage:hover .shots__phone,.shots__stage:hover .shots__browser{transform:none}
}
@media print{
  .shots__stage::before{display:none}
  .shots__phone{filter:none}
}