/* Phone-on-the-desk entrance */
body.intro-on { overflow: hidden; }
#intro { position: fixed; inset: 0; z-index: 100; background: var(--page); }
html.shot #intro, html.skip-intro #intro { display: none; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; }
#intro.ready #scene { opacity: 1; }
#intro.hover-phone #scene { cursor: pointer; }

#notifWrap { position: absolute; left: 0; top: 0; width: 300px; will-change: transform; }
#notif {
  position: relative; width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 12px; box-sizing: border-box; text-align: left;
  background: rgba(255,255,255,0.86); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(12,12,12,0.06); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20,20,40,0.06), 0 18px 40px -12px rgba(20,20,40,0.22);
  font-family: var(--body); color: var(--ink); cursor: pointer;
  opacity: 0; visibility: hidden; will-change: transform;
}
#notif:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.notif-icon { width: 42px; height: 42px; flex: none; object-fit: cover; border-radius: 10px; }
.notif-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.notif-app { font-size: 15px; font-weight: 700; }
.notif-time { font-size: 12px; color: var(--ink-muted); }
.notif-cta { position: relative; flex: none; padding: 10px 16px; border-radius: 6px; background: var(--highlight); font-size: 15px; font-weight: 600; color: var(--ink); transition: background .2s; }
.notif-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: ctaPulse 1.8s ease-out infinite; }
#notif:hover .notif-cta { background: var(--highlight-deep); }
#notif:hover { box-shadow: 0 1px 2px rgba(20,20,40,0.06), 0 24px 48px -12px rgba(20,20,40,0.28); }
#intro.ready #notif { animation: notifBob 2.6s ease-in-out infinite; }
@keyframes ctaPulse { 0% { box-shadow: 0 0 0 0 rgba(255,210,63,0.7); } 100% { box-shadow: 0 0 0 12px rgba(255,210,63,0); } }
@keyframes notifBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

.intro-ui { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; justify-content: space-between; pointer-events: none; }
.intro-ui button { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(12,12,12,0.14); background: rgba(255,254,252,0.8); font: 500 13px var(--body); color: var(--ink-muted); cursor: pointer; }
.intro-ui button:hover { color: var(--ink); border-color: var(--ink); }
.intro-ui .ico { display: block; flex: none; }
#soundBtn .ico-off, #soundBtn.muted .ico-on { display: none; }
#soundBtn.muted .ico-off { display: block; }
.intro-ui kbd { font: 500 11px var(--mono); padding: 2px 6px; border: 1px solid rgba(12,12,12,0.16); border-bottom-width: 2px; border-radius: 4px; background: #fff; color: var(--ink-muted); }