/* Общее оформление эффектов телефона — компьютер (src/index.html) и Mini App (mobile/): задняя крышка iPhone 17,
   включение с логотипом, вспышка скриншота, живой Dynamic Island. Размеры крышки — в точках экрана телефона. */
/* iPhone 17 (по фото Apple): матовое стекло пастельного цвета «в массе» — цвет проекта смягчаем до пастели, как Lavender/Sage/Mist Blue */
.pb-body { --pbl: color-mix(in oklab, var(--pb, #6679e2) 46%, #ecebf0); position: absolute; inset: 0; overflow: hidden; border-radius: 50px;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  background:
    radial-gradient(90% 50% at 25% 12%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(120% 60% at 100% 100%, color-mix(in oklab, var(--pbl) 82%, #000) 0%, transparent 70%),
    var(--pbl); }
/* зерно матового стекла (статичный слой, без режимов наложения) */
.pb-grain { position: absolute; inset: 0; pointer-events: none; opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* косой отсвет по стеклу: готовый слой, за курсором только сдвигается (transform — без перерисовки) */
.pb-glare { position: absolute; top: -10%; bottom: -10%; left: -60%; width: 220%; pointer-events: none; will-change: transform; transition: transform .18s ease-out;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.12) 46%, rgba(255,255,255,.18) 50%, transparent 60%); }
/* алюминиевая рамка: тонкая полированная фаска в цвет корпуса */
.pb-rim { position: absolute; inset: 0; border-radius: 50px; pointer-events: none; padding: 2.5px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--pbl) 40%, #fff), color-mix(in oklab, var(--pbl) 78%, #000) 40%, color-mix(in oklab, var(--pbl) 55%, #fff) 70%, color-mix(in oklab, var(--pbl) 72%, #000));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.pb-rim::after { content: ""; position: absolute; inset: 2.5px; border-radius: 47.5px; box-shadow: inset 0 1px 1px rgba(255,255,255,.4), inset 0 0 16px rgba(0,0,20,.1); }
/* камерное плато: вертикальная «таблетка» из того же стекла, чуть светлее и глаже, приподнята */
.pb-cam { position: absolute; left: 24px; top: 24px; width: 88px; height: 180px; border-radius: 44px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 7px 0; box-sizing: border-box;
  background: linear-gradient(165deg, rgba(255,255,255,.4), rgba(255,255,255,.1) 45%, rgba(0,0,30,.06)), color-mix(in oklab, var(--pbl) 90%, #fff);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,.75), inset 0 -1.5px 2px rgba(0,0,30,.14), 0 1px 1px rgba(0,0,30,.12), 0 8px 16px -8px rgba(0,0,30,.4); }
/* объектив: толстое анодированное кольцо в цвет корпуса (почти во всю ширину плато) → чёрная ступенька → тёмное стекло */
.pb-lens { position: relative; width: 74px; height: 74px; border-radius: 50%;
  background: conic-gradient(from 210deg, color-mix(in oklab, var(--pbl) 55%, #fff), color-mix(in oklab, var(--pbl) 80%, #000), color-mix(in oklab, var(--pbl) 35%, #fff), color-mix(in oklab, var(--pbl) 85%, #000), color-mix(in oklab, var(--pbl) 55%, #fff));
  box-shadow: 0 3px 6px -2px rgba(0,0,30,.45), inset 0 1px 1px rgba(255,255,255,.7), inset 0 -1px 1px rgba(0,0,30,.25); }
.pb-lens::before { content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #04050a 0 30%, #12131c 31% 36%, #050609 37% 62%, #1b1c26 63% 68%, #08090e 69% 90%, #2a2b33 91%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.9), 0 0 0 1.5px rgba(10,10,20,.85); }
.pb-lens::after { content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background:
    radial-gradient(circle at 37% 33%, rgba(220,225,255,.8) 0 3.5%, transparent 6%),
    radial-gradient(circle at 58% 62%, rgba(150,110,255,.38) 0 7%, transparent 14%),
    radial-gradient(70% 70% at 42% 40%, rgba(120,110,230,.3), transparent 62%),
    linear-gradient(140deg, rgba(255,255,255,.12), transparent 40%); }
/* вспышка — справа от нижнего объектива, микрофон — между объективами */
.pb-flash { position: absolute; left: 124px; top: 132px; width: 24px; height: 24px; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.4) 0 1px, transparent 1px 2.6px), radial-gradient(circle at 50% 45%, #fdfcf6 0 30%, #ece7d4 55%, #d2ccb6 80%, #b6af99 100%);
  box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--pbl) 70%, #000), 0 0 0 2.5px rgba(255,255,255,.45), inset 0 1px 2px rgba(0,0,0,.2); }
.pb-mic { position: absolute; left: 131px; top: 106px; width: 5px; height: 5px; border-radius: 50%; background: rgba(0,0,25,.5); box-shadow: 0 .5px 0 rgba(255,255,255,.5); }
/* Pixel 9 (Android): у спинки не вертикальное плато слева, а горизонтальный «остров» по центру — два объектива рядом,
   вспышка и микрофон внутри него справа; углы корпуса чуть меньше */
.phone-back.and .pb-body, .phone-back.and .pb-rim { border-radius: 42px; }
.phone-back.and .pb-rim::after { border-radius: 39.5px; }
.phone-back.and .pb-cam { left: 50%; top: 64px; width: 252px; height: 92px; margin-left: -126px; border-radius: 46px; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 0 9px; }
.phone-back.and .pb-flash { left: calc(50% + 78px); top: 98px; }
.phone-back.and .pb-mic { left: calc(50% + 58px); top: 107px; }
/* логотип — полированный, как яблоко на матовом стекле: зеркальный градиент + полоска отблеска, едет за курсором */
.pb-logo { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); overflow: hidden; opacity: .85;
  background: linear-gradient(125deg, color-mix(in oklab, var(--pbl, var(--pb)) 70%, #000), color-mix(in oklab, var(--pbl, var(--pb)) 40%, #fff) 45%, color-mix(in oklab, var(--pbl, var(--pb)) 55%, #fff) 60%, color-mix(in oklab, var(--pbl, var(--pb)) 72%, #000));
  -webkit-mask: var(--pb-logo) center / contain no-repeat; mask: var(--pb-logo) center / contain no-repeat; }
.pb-shine { position: absolute; top: -20%; bottom: -20%; left: 20%; width: 45%; will-change: transform; transition: transform .18s ease-out;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.9) 50%, transparent); transform: rotate(12deg); }
.pb-content { position: absolute; z-index: 2; left: 0; right: 0; top: 56%; display: flex; justify-content: center; }
.pb-ai { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #fff; font-size: 19px; font-weight: 600; letter-spacing: -.02em; text-shadow: 0 1px 3px rgba(20,30,100,.3); }
.pb-dots { display: flex; gap: 7px; }
.pb-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.85); animation: pb-dot 1.1s ease-in-out infinite; }
.pb-dots i:nth-child(2) { animation-delay: .15s; } .pb-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pb-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-5px); } }

.boot { position: absolute; inset: 0; z-index: 30; background: #000; display: grid; place-items: center; pointer-events: none; }
.boot svg { width: 24%; height: auto; opacity: 0; transform: scale(.94); transition: opacity .38s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.boot.logo svg { opacity: 1; transform: scale(1); }
.boot.logo-out svg { opacity: 0; transition: opacity .26s ease; }
.boot.wake { background: transparent; transition: background-color .55s ease; }
body.booting #phone { animation: boot-wake .65s ease-out; }
@keyframes boot-wake { from { filter: brightness(.25) blur(2px); } to { filter: none; } }

.fx-flash { position: absolute; inset: 0; z-index: 25; background: #fff; pointer-events: none; animation: fx-flash .45s ease-out forwards; }
@keyframes fx-flash { 0% { opacity: 0; } 14% { opacity: .85; } 100% { opacity: 0; } }

.fx-island { --k: .7; position: absolute; left: 50%; top: calc(11px * var(--k)); z-index: 26; transform: translateX(-50%); box-sizing: border-box;
  width: calc(126px * var(--k)); height: calc(37px * var(--k)); padding: 0 calc(12px * var(--k)); border-radius: 999px; background: #000; opacity: 0;
  display: flex; align-items: center; gap: calc(9px * var(--k)); overflow: hidden; pointer-events: none; white-space: nowrap;
  color: #fff; font: 600 calc(13.5px * var(--k)) / 1 -apple-system, "SF Pro Text", system-ui, sans-serif; letter-spacing: -.01em;
  transition: width .5s cubic-bezier(.3,1.35,.5,1), height .4s cubic-bezier(.3,1.35,.5,1), opacity .25s; }
.fx-island.open { opacity: 1; width: calc(236px * var(--k)); height: calc(42px * var(--k)); }
.fx-isl-ring { flex: none; width: calc(20px * var(--k)); height: calc(20px * var(--k)); }
.fx-isl-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 2.8; stroke-linecap: round; }
.fx-isl-ring circle { stroke: rgba(255,255,255,.22); }
.fx-isl-ring circle.p { stroke: #3b86ff; transition: stroke-dasharray .3s ease, stroke .2s; }
.fx-island.spin .fx-isl-ring svg { animation: fx-spin .9s linear infinite; }
.fx-island.done .fx-isl-ring circle.p { stroke: #34c77b; }
@keyframes fx-spin { to { transform: rotate(270deg); } }
.fx-isl-t { overflow: hidden; text-overflow: ellipsis; }