/* ── URBANO: JEDAN UREDJAJ KROZ CIJELU SEKCIJU ─────────────────────────────
   Sekcija ima jedan telefon. On stoji u ljepljivom sloju koji pokriva i scenu
   i korake, pa ne postoje dva uredjaja: isti ekran prvo nosi scenu, zatim
   case study, modul po modul, do asistenta.

   Polozaj, mjera i nagib idu kroz varijable koje postavlja urbano-tok.js.
   Ljepljivo, ne pinovano: ScrollTrigger pin uz Lenis pravi razmaknicu koja se
   lomi na promjenu visine, a position:sticky radi isto bez te cijene.
   ───────────────────────────────────────────────────────────────────────── */
.uv-sloj { position: relative }

.uv-drzac {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 4;
  pointer-events: none;
}
/* Prica se podvlaci pod drzac: negativna margina pusta je da krene od vrha
   sekcije, pored telefona. Ranije je prvi kadar sekcije bio sam telefon na
   praznoj podlozi, pa tek onda prica. Margina ide na pricu, ne na drzac:
   ljepljiv element sa negativnom donjom marginom smije izaci iz roditelja,
   pa bi telefon visio preko dijela ispod koraka. */
.uv-sloj > .uv-ulaz { margin-top: -100vh; margin-top: -100dvh; height: 260vh }

/* ── UREDJAJ ────────────────────────────────────────────────────────────────
   Crtan u HTML-u i CSS-u, ne u WebGL-u: tekst na ekranu ostaje ostar, nema
   modela od nekoliko megabajta i nema petlje koja crta svaki kadar.

   Sve mjere izlaze iz jedne: --pw, sirina tijela telefona. Proporcije su
   iPhone 16 Pro: ekran 19,5 : 9, metalni obod 1,2 %, crni okvir 2,6 %
   sirine, radijus ekrana oko 13,5 % njegove sirine. */
.uv {
  --pw: min(calc((100vh - 200px) / 2.078), 372px);
  --pw: min(calc((100dvh - 200px) / 2.078), 372px);
}
.uv-device {
  position: absolute;
  left: calc(50% + min(22vw, 300px));
  top: calc(50% + 28px);
  width: var(--pw);
  height: calc(var(--pw) * 2.078);
  /* The entrance (urbano-ulaz.js) moves and scales the whole device; at rest these are zero and one. */
  transform: translate(calc(-50% + var(--ix, 0px)), calc(-50% + var(--iy, 0px))) scale(var(--is, 1));
  z-index: 2;
  margin: 0;
}
.uv-podloga, .uv-detalj { opacity: var(--ul-ploca, 1) }

/* Tamnoplava ploca iza telefona: Urbanova boja, jedina u sekciji. Telefon
   izlazi iz nje vrhom, kao predmet na postolju. */
.uv-podloga {
  position: absolute;
  left: 50%;
  top: calc(var(--pw) * .62);
  width: calc(var(--pw) * 1.96);
  height: calc(var(--pw) * 1.6);
  transform: translateX(-50%);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(60% 46% at 50% 14%, #3b5f8c 0%, rgba(59, 95, 140, 0) 100%),
    linear-gradient(180deg, #1f3a5f 0%, #1a3050 52%, #14253e 100%);
}
/* Prstenovi mape, isti motiv koji je sekcija vec nosila, sada unutar ploce. */
.uv-podloga::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 22%;
  width: 190%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 calc(var(--pw) * .2 - 1px),
    rgba(255, 255, 255, .07) calc(var(--pw) * .2 - 1px) calc(var(--pw) * .2));
  -webkit-mask: radial-gradient(closest-side, #000 40%, transparent 100%);
          mask: radial-gradient(closest-side, #000 40%, transparent 100%);
}
.uv-podloga::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* Kontaktna sjena na podlozi. Siri se i blijedi kad se telefon naginje. */
.uv-sjena {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pw) * .01);
  width: calc(var(--pw) * 1.08);
  height: calc(var(--pw) * .16);
  transform: translateX(-50%) translateX(calc(var(--uv-ryl, 0) * -.9px)) scaleX(calc(1 + var(--uv-lift, 0) * .12));
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(5, 12, 24, .62), rgba(5, 12, 24, 0));
  filter: blur(6px);
  opacity: calc(1 - var(--uv-lift, 0) * .35);
}

.uv-phone {
  --rim: calc(var(--pw) * .012);
  --bez: calc(var(--pw) * .026);
  --r: calc(var(--pw) * .163);
  --t: calc(var(--pw) * .1);   /* debljina tijela: 8,25 mm na 71,5 mm sirine */
  position: absolute;
  inset: 0;
  display: block;
  border-radius: var(--r);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  /* Tamni titanijum: gotovo crn, sa svjetlijom ivicom tamo gdje obod hvata svjetlo. */
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0) 94%, rgba(255, 255, 255, .12)),
    linear-gradient(160deg, #ffb07a 0%, #f07a3c 14%, #d9591f 48%, #e46a2c 80%, #ffa36a 100%);
  box-shadow:
    0 0 0 .5px rgba(0, 0, 0, .7),
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    inset 0 1.5px 0 rgba(255, 255, 255, .28),
    0 1px 1px rgba(10, 16, 28, .12),
    0 4px 8px -2px rgba(10, 16, 28, .14),
    0 18px 30px -10px rgba(10, 16, 28, .26),
    0 46px 70px -24px rgba(10, 16, 28, .38),
    0 90px 120px -40px rgba(10, 16, 28, .34);
  transform: perspective(1500px)
    translate3d(calc(var(--uv-tx, 0) * 1px), calc(var(--uv-ty, 0) * 1px), 0)
    rotateX(calc(var(--uv-rx, 0) * 1deg))
    rotateY(calc(var(--uv-ry, 0) * 1deg))
    rotateZ(calc(var(--uv-rz, 0) * 1deg));
  transform-origin: 50% 50%;
  will-change: transform;
}
/* Prednja strana sjedi na prednjoj ravni tijela; sve na njoj se ne vidi s leđa. */
.uv-phone::before, .uv-screen { transform: translateZ(calc(var(--t) / 2)); backface-visibility: hidden }
.uv-3d { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none }
/* Bocne ivice: titanijumski pojas debljine tijela, okrenut za 90 stepeni. */
.uv-rub {
  position: absolute;
  top: calc(var(--r) * .55);
  bottom: calc(var(--r) * .55);
  width: var(--t);
  background: linear-gradient(90deg, #b8491a, #ff9a5c 45%, #e0672b 60%, #a94016);
}
.uv-rub--l { left: 0; transform-origin: 0 50%; transform: translateZ(calc(var(--t) / 2)) rotateY(90deg) }
.uv-rub--d { right: 0; transform-origin: 100% 50%; transform: translateZ(calc(var(--t) / 2)) rotateY(-90deg) }
/* Poleđina: mat staklo u titanijumskom obodu, sa ostrvom kamera. */
.uv-back {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  transform: translateZ(calc(var(--t) / -2)) rotateY(180deg);
  backface-visibility: hidden;
  background:
    radial-gradient(120% 70% at 30% 10%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, #f5874a 0%, #e0611f 55%, #ea7134 100%);
  box-shadow: inset 0 0 0 calc(var(--pw) * .012) #f08a4e, inset 0 0 0 calc(var(--pw) * .016) rgba(120, 40, 5, .35);
}
.uv-kamere {
  position: absolute;
  /* iPhone 17 Pro: the camera plateau runs the full width of the back. */
  left: 3%;
  right: 3%;
  top: 2.2%;
  height: 25%;
  border-radius: calc(var(--r) * .9) calc(var(--r) * .9) calc(var(--r) * .45) calc(var(--r) * .45);
  background: linear-gradient(170deg, #ffab74, #e5692a 60%, #d95d20);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 14px rgba(0, 0, 0, .45);
}
.uv-kamere i {
  position: absolute;
  width: 21%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3b4a66 0 12%, #0b0c10 32%, #16171b 56%, #3c3d41 58%, #1a1b1e 70%);
  box-shadow: 0 0 0 2px #c2531a, 0 0 0 3.5px #1a1a1c, 0 2px 6px rgba(0, 0, 0, .5);
}
.uv-kamere i:nth-child(1) { left: 6%;  top: 8% }
.uv-kamere i:nth-child(2) { left: 6%;  top: 52% }
.uv-kamere i:nth-child(3) { left: 30%; top: 30% }
.uv-kamere u { position: absolute; right: 10%; top: 20%; width: 6%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(#fff6d8, #b9a77a 60%, #5c5340) }
/* Crni okvir oko stakla. */
.uv-phone::before {
  content: "";
  position: absolute;
  inset: var(--rim);
  border-radius: calc(var(--r) - var(--rim));
  background: #050506;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

/* Bocne tipke: akcija, glasnoca gore i dole lijevo; napajanje desno. */
.uv-tipke i {
  position: absolute;
  width: calc(var(--pw) * .012);
  left: calc(var(--pw) * -.01);
  border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, #f59a62, #c9521c 70%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18);
}
.uv-tipke i:nth-child(1) { top: 17.5%; height: 3.8% }
.uv-tipke i:nth-child(2) { top: 24.5%; height: 7.4% }
.uv-tipke i:nth-child(3) { top: 34%;   height: 7.4% }
.uv-tipke i:nth-child(4) {
  left: auto; right: calc(var(--pw) * -.01); top: 28%; height: 11.5%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(270deg, #f59a62, #c9521c 70%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .18);
}

.uv-screen {
  position: absolute;
  inset: calc(var(--rim) + var(--bez));
  display: block;
  border-radius: calc(var(--r) - var(--rim) - var(--bez));
  overflow: hidden;
  background: var(--bar, #fdfeff);
  transition: background-color .45s ease;
  isolation: isolate;
}

/* Statusna traka: vrijeme, dinamicko ostrvo, signal, wi-fi, baterija. Snimci
   ekrana su rezani bez nje, pa ide iznad njih i gura ih nadolje. */
.uv-status {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--pw) * .127);
  padding: calc(var(--pw) * .012) calc(var(--pw) * .07) 0 calc(var(--pw) * .1);
  box-sizing: border-box;
  color: #0b0b0c;
}
.uv-status b {
  font: 600 calc(var(--pw) * .041)/1 -apple-system, "SF Pro Text", var(--sans, system-ui), sans-serif;
  letter-spacing: -.01em;
}
.uv-status svg { width: calc(var(--pw) * .17); height: auto; fill: currentColor }
.uv-otok {
  position: absolute;
  left: 50%;
  top: calc(var(--pw) * .026);
  width: calc(var(--pw) * .296);
  height: calc(var(--pw) * .087);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}
/* Kamera u ostrvu, jedva vidljiva kao na pravom uredjaju. */
.uv-otok::after {
  content: "";
  position: absolute;
  right: 18%;
  top: 50%;
  width: calc(var(--pw) * .026);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a3550, #0a0c12 60%);
}

.uv-ekrani {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--pw) * .127);
  bottom: 0;
  display: block;
}
.uv-screen img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .45s ease;
}
.uv-screen img.je-tu { opacity: 1 }

/* Staklo: tihi stalni odsjaj u uglu i traka svjetla koja prelazi preko
   ekrana. Njen polozaj prati nagib, a na promjenu ekrana jednom prode. */
.uv-odsjaj {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .26) 47%, rgba(255, 255, 255, .06) 53%, rgba(255, 255, 255, 0) 62%)
      calc(var(--uv-sjaj, .5) * 100%) 0 / 300% 100% no-repeat,
    linear-gradient(155deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 30%);
  mix-blend-mode: screen;
}
.uv-odsjaj.sijevne { animation: uvSijevne 1.1s cubic-bezier(.3, .7, .2, 1) }
@keyframes uvSijevne {
  from { background-position: 120% 0, 0 0 }
  to   { background-position: -20% 0, 0 0 }
}

/* Dokazna kartica: pravi isjecak ekrana koji je trenutno na telefonu,
   uvecan, kao lupa. Stoji lijevo i ulazi u prostor uredjaja. */
.uv-detalj {
  position: absolute;
  right: calc(100% - var(--pw) * .16);
  top: 58%;
  width: 0;
  height: 0;
}
.uv-detalj > span {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(var(--w) * var(--pw) / 372);
  opacity: 0;
  transform: translate3d(-14px, 10px, 0) scale(.97);
  transform-origin: 100% 0;
  transition: opacity .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}
.uv-detalj > span.je-tu { opacity: 1; transform: none }
.uv-detalj img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(4, 23, 43, .05), 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}
.uv-detalj em {
  position: absolute;
  left: 2px;
  bottom: calc(100% + 12px);
  font: 400 11px/1 var(--mono, monospace);
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta, #12110b);
  white-space: nowrap;
}
.uv-detalj em::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: #1d3557;
  vertical-align: middle;
}
/* U prici kartice nema: ona pripada koracima, gdje ima sta da pokaze. */
.uv:not(.u-koracima) .uv-detalj > span.je-tu { opacity: 0; transform: translate3d(-14px, 10px, 0) scale(.97) }

/* ── blok koraka: samo tekst, uredjaj dolazi iz sloja iznad ─────────────── */
.uvt { position: relative; color: var(--tinta, #12110b) }

.uvt-drzac {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: grid;
  align-content: center;
  overflow: hidden;
}

.uvt-scena {
  width: min(100%, 1340px);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.uvt-kopija { max-width: 34ch }

.uvt-brojac {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(20px, 3vh, 34px);
  font: 11px/1 var(--mono, monospace);
  letter-spacing: .12em;
  color: rgba(18,17,11,.52);
}
.uvt-brojac b { font-weight: 400; color: #12110b; font-variant-numeric: tabular-nums }
.uvt-traka {
  flex: 1;
  max-width: 150px;
  height: 1px;
  background: rgba(18,17,11,.14);
  position: relative;
  overflow: hidden;
}
.uvt-traka i {
  position: absolute;
  inset: 0;
  background: #1d3557;
  transform: scaleX(var(--tok, 0));
  transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* Naslov i recenica se mijenjaju po koraku, pa im visina mora biti mirna:
   svi koraci stoje jedan preko drugog u istoj celiji mreze. */
.uvt-slajdovi { display: grid }
.uvt-slajd {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .42s ease, transform .42s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.uvt-slajd.je-tu { opacity: 1; transform: none; pointer-events: auto }
.uvt-slajd h3 {
  margin: 0;
  font: 400 clamp(30px, 3.4vw, 52px)/1.06 var(--sans-d);
  letter-spacing: -.045em;
}
.uvt-slajd h3 em { font-family: var(--serif); font-style: italic; color: #1d3557 }
.uvt-slajd p {
  margin: clamp(14px, 2vh, 22px) 0 0;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.68;
  color: rgba(18,17,11,.64);
  max-width: 38ch;
}

.uvt-moduli {
  list-style: none;
  margin: clamp(26px, 4vh, 48px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  max-width: 34ch;
  font: 11px/1 var(--mono, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(18,17,11,.36);
}
.uvt-moduli li { transition: color .35s ease }
.uvt-moduli li.je-tu { color: #12110b }
.uvt-moduli li.je-tu::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: #1d3557;
  vertical-align: middle;
}

/* ── uski ekran ────────────────────────────────────────────────────────────
   Uredjaj stoji u gornjem dijelu kadra, a tekst koraka ide ispod njega, pa se
   ne preklapaju. Zato je i kadar poravnat na dno. */
@media (max-width: 1100px) {
  .uvt-drzac { align-content: end; padding-bottom: clamp(30px, 6vh, 60px) }
  .uvt-scena { text-align: center }
  .uvt-kopija { max-width: 34ch; margin-inline: auto }
  .uvt-slajd p { margin-inline: auto }
  .uvt-brojac { justify-content: center }
  .uvt-moduli { justify-content: center; margin-inline: auto }
  .uv { --pw: min(calc(46vh / 2.078), 220px); --pw: min(calc(46dvh / 2.078), 220px) }
  .uv-device { left: 50%; top: calc(64px + var(--pw) * 1.039 + 2vh) }
  .uv-detalj { display: none }
  .uv-podloga { width: min(calc(var(--pw) * 1.96), calc(100vw - 32px)); height: calc(var(--pw) * 1.5) }
}

@media (max-width: 720px) {
  /* Telefon uzima sve sto tekst koraka ispod njega ostavi slobodno. */
  .uv { --pw: min(calc((100vh - 370px) / 2.078), 236px); --pw: min(calc((100dvh - 370px) / 2.078), 236px) }
  .uvt-slajd h3 { font-size: clamp(26px, 7.4vw, 34px) }
  .uvt-slajd p { font-size: 14.5px; line-height: 1.6; max-width: 32ch }
  /* Spisak svih modula pravi cetiri reda sitnog verzala i gura tekst niz kadar. */
  .uvt-moduli { display: none }
}

@media (prefers-reduced-motion: reduce) {
  .uvt-slajd, .uv-screen img, .uvt-traka i, .uv-device, .uv-detalj > span, .uv-screen { transition: none }
  .uv-odsjaj.sijevne { animation: none }
}

/* Na uskom ekranu uredjaj je centriran, a ljepljiv je kroz cijeli sloj, pa u
   sceni stoji tacno preko price i tekst mu prolazi ispod. Zato ga u sceni
   nema: ulazi kad krenu koraci, gdje i jeste njegov posao. Na desktopu stoji
   desno od teksta, pa se ne dira. */
@media (max-width: 900px){
  .uv-drzac { opacity: 0; transition: opacity .5s ease }
  .uv.u-koracima .uv-drzac { opacity: 1 }
}
/* Bez pokreta petlja ne radi, pa klasa nikad ne stigne: uredjaj ostaje vidljiv. */
@media (max-width: 900px) and (prefers-reduced-motion: reduce){
  .uv-drzac { opacity: 1 }
}

/* Real 3D phone: the canvas replaces the CSS phone once the model is ready (urbano-model.js). */
.uv-3d-platno{position:absolute;left:50%;top:50%;width:190%;height:125%;transform:translate(-50%,-50%);pointer-events:none;z-index:3}
.uv-3d-ceka .uv-phone,.uv-3d-ceka .uv-sjena,.uv-3d-spreman .uv-phone,.uv-3d-spreman .uv-sjena{visibility:hidden}

/* ── ENTRANCE ──────────────────────────────────────────────────────────────
   Apple-style: the page dims, the phone comes toward you from far away turning face-on, settles low in the
   centre with the headline above it, then the light returns and it steps aside to its place in the story. */
.uv-mrak{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 70% 60% at 50% 70%,#141a24 0%,#07090d 70%);opacity:var(--ul-mrak,0);pointer-events:none}
.uv-ulaz-naslov{position:absolute;z-index:3;left:50%;top:13vh;margin:0;transform:translate(-50%,calc((1 - var(--ul-naslov,0)) * 30px));
  width:min(92vw,1100px);text-align:center;color:#f5f2ed;font-family:var(--sans-d);font-weight:400;font-size:clamp(40px,6.6vw,112px);line-height:.95;letter-spacing:-.05em;opacity:var(--ul-naslov,0)}
.uv-ulaz-naslov em{font-family:"Newsreader",Georgia,serif;font-style:italic;color:#ff5a3d}
.uv.u-ulazu .uv-drzac{opacity:1}
html.uv-tamno .nav{filter:invert(1) hue-rotate(180deg)}

/* Desktop view of the current module next to the phone: a browser frame that swings in from the left
   with each step and sits partly behind the phone. */
.uv-detalj > span[data-web]{width:calc(var(--pw) * 1.18);right:calc(var(--pw) * -.46);top:calc(var(--pw) * -.1);border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(4,23,43,.08),0 40px 60px -30px rgba(4,23,43,.45);transform-origin:100% 50%;
  transform:perspective(1400px) translate3d(-40px,16px,0) rotateY(14deg) scale(.94);transition:opacity .6s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.uv-detalj > span[data-web].je-tu{transform:perspective(1400px) rotateY(6deg)}
.uv-detalj > span[data-web] img{border-radius:0;box-shadow:none}
.uv-web-bar{display:flex;gap:5px;align-items:center;height:20px;padding:0 10px;background:#eef1f5;border-bottom:1px solid rgba(4,23,43,.08)}
.uv-web-bar b{width:6px;height:6px;border-radius:50%;background:rgba(4,23,43,.18)}
.uv-detalj > span[data-web] em{bottom:auto;top:calc(100% + 12px)}
.uv:not(.u-koracima) .uv-detalj > span[data-web].je-tu{opacity:0;transform:perspective(1400px) translate3d(-40px,16px,0) rotateY(14deg) scale(.94)}