/* iPhone 15 Pro só em CSS, copiado de agstudio/css/aparelhos.css. */
.iphone {
  --ap-sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --ap-ic-claro: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='13' viewBox='0 0 70 13' fill='%23ffffff'%3E%3Crect x='0' y='8.2' width='3' height='3.8' rx='.9'/%3E%3Crect x='4.6' y='6' width='3' height='6' rx='.9'/%3E%3Crect x='9.2' y='3.6' width='3' height='8.4' rx='.9'/%3E%3Crect x='13.8' y='1.2' width='3' height='10.8' rx='.9'/%3E%3Cpath d='M28 12.6 25.38 9.98A3.7 3.7 0 0 1 30.62 9.98Z'/%3E%3Cpath d='M23.12 7.72A6.9 6.9 0 0 1 32.88 7.72M20.86 5.46A10.1 10.1 0 0 1 35.14 5.46' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round'/%3E%3Crect x='41.5' y='1' width='24' height='11' rx='3.4' fill='none' stroke='%23ffffff' stroke-opacity='.42' stroke-width='1'/%3E%3Crect x='43.4' y='2.9' width='20.2' height='7.2' rx='1.9'/%3E%3Cpath d='M66.6 4.7v3.6a1.8 1.8 0 0 0 0-3.6Z' fill-opacity='.45'/%3E%3C/svg%3E");
  --ap-ic-escuro: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='13' viewBox='0 0 70 13' fill='%23111111'%3E%3Crect x='0' y='8.2' width='3' height='3.8' rx='.9'/%3E%3Crect x='4.6' y='6' width='3' height='6' rx='.9'/%3E%3Crect x='9.2' y='3.6' width='3' height='8.4' rx='.9'/%3E%3Crect x='13.8' y='1.2' width='3' height='10.8' rx='.9'/%3E%3Cpath d='M28 12.6 25.38 9.98A3.7 3.7 0 0 1 30.62 9.98Z'/%3E%3Cpath d='M23.12 7.72A6.9 6.9 0 0 1 32.88 7.72M20.86 5.46A10.1 10.1 0 0 1 35.14 5.46' fill='none' stroke='%23111111' stroke-width='1.9' stroke-linecap='round'/%3E%3Crect x='41.5' y='1' width='24' height='11' rx='3.4' fill='none' stroke='%23111111' stroke-opacity='.42' stroke-width='1'/%3E%3Crect x='43.4' y='2.9' width='20.2' height='7.2' rx='1.9'/%3E%3Cpath d='M66.6 4.7v3.6a1.8 1.8 0 0 0 0-3.6Z' fill-opacity='.45'/%3E%3C/svg%3E");
}

.iphone {
  --status: 12.6cqw;
  --barra: #000;
  --barra-tinta: #fff;
  --icones: var(--ap-ic-claro);
  --indicador: rgba(255,255,255,.88);
  --ti-hl: #8d8a84;
  --ti-1: #4f4d49;
  --ti-2: #363431;
  --ti-3: #252422;
  --ti-4: #121211;
  container-type: inline-size;
  position: relative;
  aspect-ratio: 100 / 207.2;
  border-radius: 17% / 8.205%;
  /* aro de titânio escovado: reflexos que mudam à volta */
  background:
    linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,.08) 100%),
    conic-gradient(from 200deg, var(--ti-1), var(--ti-3) 10%, var(--ti-hl) 17%, var(--ti-2) 25%, var(--ti-4) 36%, var(--ti-2) 46%, var(--ti-1) 52%, var(--ti-3) 62%, var(--ti-hl) 69%, var(--ti-2) 77%, var(--ti-4) 88%, var(--ti-1));
}
.iphone.is-claro {
  --barra: #f5f4f1;
  --barra-tinta: #111;
  --icones: var(--ap-ic-escuro);
}
/* sombras, luz no rebordo exterior e (no .is-tilt) a espessura do telemóvel */
.iphone::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 .14cqw rgba(255,255,255,.2),
    inset 0 0 0 .5cqw rgba(0,0,0,.25),
    var(--espessura, 0 0 #0000),
    var(--sombra-extra, 0 0 #0000),
    0 4cqw 9cqw -2cqw rgba(0,0,0,.75),
    0 1cqw 2cqw rgba(0,0,0,.5);
}
/* botões laterais: ação + volume (esquerda), ligar (direita) */
.iphone::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -.55cqw;
  right: -.55cqw;
  pointer-events: none;
  --bt-e: linear-gradient(90deg, #0e0e0e, var(--ti-2) 35%, var(--ti-hl) 70%, var(--ti-3));
  --bt-d: linear-gradient(270deg, #0e0e0e, var(--ti-2) 35%, var(--ti-hl) 70%, var(--ti-3));
  background:
    var(--bt-e) 0 36.6cqw / .58cqw 9.5cqw no-repeat,
    var(--bt-e) 0 53.5cqw / .58cqw 15cqw no-repeat,
    var(--bt-e) 0 72.3cqw / .58cqw 15cqw no-repeat,
    var(--bt-d) 100% 59cqw / .58cqw 22.8cqw no-repeat;
  border-radius: .3cqw;
}

/* vidro da frente (moldura preta) */
.iphone__screen {
  position: absolute;
  inset: 1.45cqw;
  border-radius: 15.55cqw;
  overflow: hidden;
  background: #020202;
  box-shadow:
    0 0 0 .16cqw #0b0b0b,
    0 0 0 .42cqw rgba(255,255,255,.07);
}
/* barra de estado: hora, rede/wi-fi/bateria e a Dynamic Island */
.iphone__screen::before {
  content: "9:41";
  position: absolute;
  left: 2.65cqw;
  top: 2.65cqw;
  width: 91.8cqw;
  height: var(--status);
  box-sizing: border-box;
  padding: 4.95cqw 0 0 9.7cqw;
  border-radius: 12.9cqw 12.9cqw 0 0;
  font: 600 3.95cqw/1 var(--ap-sf);
  letter-spacing: -.01em;
  color: var(--barra-tinta);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  background:
    /* Dynamic Island: duas pontas redondas (a da direita com a câmara) + meio */
    radial-gradient(circle closest-side, #000 calc(100% - .7px), transparent) calc(50% - 10.38cqw) 2.57cqw / 8.64cqw 8.64cqw no-repeat,
    radial-gradient(circle closest-side, #161b26 0 11%, #090b11 22%, #020203 38%, #000 calc(100% - .7px), transparent) calc(50% + 10.38cqw) 2.57cqw / 8.64cqw 8.64cqw no-repeat,
    linear-gradient(#000, #000) 50% 2.57cqw / 20.8cqw 8.64cqw no-repeat,
    var(--icones) right 6.1cqw top 5.55cqw / auto 2.75cqw no-repeat,
    var(--barra);
}
/* reflexo do vidro + barra "home" */
.iphone__screen::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle closest-side, var(--indicador) calc(100% - .5px), transparent) calc(50% - 15.07cqw) calc(100% - 4.52cqw) / 1.17cqw 1.17cqw no-repeat,
    radial-gradient(circle closest-side, var(--indicador) calc(100% - .5px), transparent) calc(50% + 15.07cqw) calc(100% - 4.52cqw) / 1.17cqw 1.17cqw no-repeat,
    linear-gradient(var(--indicador), var(--indicador)) 50% calc(100% - 4.52cqw) / 30.14cqw 1.17cqw no-repeat,
    linear-gradient(120deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.028) 33%, rgba(255,255,255,.01) 33.3%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 14%);
}
/* o que aparece no ecrã: começa por baixo da barra de estado */
.iphone__screen > * {
  position: absolute;
  z-index: 1;
  left: 2.65cqw;
  top: calc(2.65cqw + var(--status));
  width: 91.8cqw;
  height: calc(199cqw - var(--status));
  max-width: none;
  margin: 0;
  border-radius: 0 0 12.9cqw 12.9cqw;
  overflow: hidden;
  background: #fff;
}
.iphone__screen > img, .iphone__screen > picture, .iphone__screen > video { object-fit: cover; object-position: top; }
.iphone__screen > picture > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.iphone__screen > :not(img, video) { container-type: inline-size; text-rendering: geometricPrecision; }

.iphone.is-tilt {
  transform: perspective(var(--perspetiva, 1500px)) rotateY(var(--ry, -17deg)) rotateX(var(--rx, 5deg)) rotateZ(.6deg);
}
/* espessura do telemóvel (o lado direito fica à vista) */
.iphone.is-tilt, .aparelhos-combo.is-tilt > .iphone {
  --espessura:
    .25cqw .07cqw 0 var(--ti-hl),
    .6cqw .17cqw 0 var(--ti-1),
    1cqw .28cqw 0 var(--ti-2),
    1.4cqw .4cqw 0 var(--ti-2),
    1.8cqw .5cqw 0 var(--ti-3),
    2.2cqw .62cqw 0 var(--ti-3),
    2.6cqw .73cqw 0 var(--ti-3),
    2.95cqw .83cqw 0 var(--ti-4),
    3.2cqw .9cqw 0 #0b0b0b;
}
/* de lado, só se vê o botão de ligar (na espessura) */
.iphone.is-tilt::after, .aparelhos-combo.is-tilt > .iphone::after {
  left: 0;
  right: -2.6cqw;
  background:
    linear-gradient(90deg, var(--ti-hl), var(--ti-1) 40%, var(--ti-3)) 100% 59.4cqw / 2.1cqw 22.8cqw no-repeat;
}
