/* Shared pieces for the round 2 concepts. Each page sets the --isl-*, --dev-* tokens. */

[hidden] { display: none !important; }

/* ---------- Dynamic Island menu ---------- */
.island { position: fixed; z-index: 30; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; translate: -50% 0;
  height: 52px; width: var(--w, 520px); max-width: calc(100vw - 24px); border-radius: 99px; overflow: hidden;
  background: var(--isl-bg, #0a0a10); color: var(--isl-fg, #fff); font-size: 14px;
  box-shadow: 0 16px 40px rgb(0 0 0 / .28), inset 0 0 0 1px rgb(255 255 255 / .08);
  transition: width .75s cubic-bezier(.32,.72,0,1); }
.isl-nav, .isl-live { position: absolute; inset: 0; display: flex; align-items: center; white-space: nowrap; transition: opacity .35s, filter .35s, transform .5s cubic-bezier(.32,.72,0,1); }
.isl-nav { gap: 2px; padding: 0 6px 0 14px; width: max-content; }
.isl-nav a { color: rgb(255 255 255 / .72); text-decoration: none; padding: 9px 12px; border-radius: 99px; }
.isl-nav a:hover { color: #fff; background: rgb(255 255 255 / .08); }
.isl-nav a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.isl-nav .isl-mark { color: #fff; display: flex; align-items: center; gap: 7px; font-weight: 600; padding-left: 4px; margin-right: 8px; }
.isl-nav .isl-go { background: #fff; color: #0a0a10; font-weight: 600; }
.isl-nav .isl-go:hover { background: #fff; color: #0a0a10; }
.isl-live { justify-content: space-between; padding: 0 12px 0 10px; opacity: 0; filter: blur(4px); transform: scale(.92); pointer-events: none; }
.island.busy .isl-nav { opacity: 0; filter: blur(4px); transform: scale(.92); pointer-events: none; }
.island.busy .isl-live { opacity: 1; filter: none; transform: none; }
.isl-app { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.isl-app i { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(140deg, #e8505b, #f7a35c); }
.isl-ring { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#34c759 var(--p, 0%), rgb(255 255 255 / .15) 0); }
.isl-ring::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--isl-bg, #0a0a10); }
@media (max-width: 760px) { .isl-nav a.hide { display: none; } .isl-nav .isl-mark span { display: none; } }

/* ---------- two-sided phone ---------- */
.dev-wrap { --dev-w: 280px; width: var(--dev-w); max-width: 100%; aspect-ratio: 1206 / 2622; perspective: 1600px; flex: none; }
.dev { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.dev.spin { animation: dev-spin .9s cubic-bezier(.65,0,.35,1); }
@keyframes dev-spin { to { transform: rotateY(360deg); } }
.face { position: absolute; inset: 0; border-radius: calc(var(--dev-w) * .16); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.front { background: #1c1c20; padding: calc(var(--dev-w) * .032);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .16), 0 50px 90px -30px rgb(5 8 30 / .6); }
.scr { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--dev-w) * .13); background: #0b0b0e; }
.scr img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.isl-dot { position: absolute; top: 2.2%; left: 50%; translate: -50% 0; width: 32%; height: 4.2%; border-radius: 99px; background: #000; }
.face.back { transform: rotateY(180deg); background: linear-gradient(150deg, #3a3b42, #1d1e23 60%, #2b2c32);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .14), 0 50px 90px -30px rgb(5 8 30 / .6); display: grid; place-items: center; }
.cam { position: absolute; top: 4%; left: 6%; width: 40%; aspect-ratio: 1; border-radius: 26%; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.cam i { position: absolute; width: 38%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #3b4a6b, #07080c 60%); box-shadow: 0 0 0 3px #26272c; }
.cam i:nth-child(1) { top: 8%; left: 8%; } .cam i:nth-child(2) { bottom: 8%; left: 8%; } .cam i:nth-child(3) { top: 31%; right: 8%; }

/* ---------- scroll reveal (visible at rest; animates where supported) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rv { animation: kit-rv linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes kit-rv { from { opacity: 0; transform: translateY(44px); filter: blur(8px); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}