/* ============================================================
   NUTSHELL — APP SHOWCASE PRO LAYER
   Photoreal device frames, native-feel app UI, ambient 3D scene.
   Loaded last; adds to nutshell-app.css without resizing devices.
   Transform/opacity animations only; killed by calm/reduced-motion.
   ============================================================ */

/* ---------------- Ambient 3D scene ---------------- */
.app { overflow: hidden; }
.app__scene {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  perspective: 900px; transform-style: preserve-3d;
}
.app__aurora {
  position: absolute; top: -30%; left: 8%; width: 84%; height: 80%;
  background:
    radial-gradient(38% 46% at 30% 40%, rgba(170,189,177,.34), transparent 70%),
    radial-gradient(30% 40% at 68% 30%, rgba(231,164,145,.20), transparent 70%),
    radial-gradient(26% 36% at 52% 68%, rgba(201,215,205,.28), transparent 70%);
  filter: blur(46px);
  animation: aurora-drift 36s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  from { transform: translate3d(-3%, 0, 0) rotate(-2deg) scale(1); }
  to   { transform: translate3d(3%, 4%, 0) rotate(2deg) scale(1.08); }
}
.app-leaf { position: absolute; display: block; will-change: transform; }
.app-leaf svg { width: 100%; height: 100%; display: block; }
.app-leaf svg path { fill: rgba(113,146,127,.16); }
.app-leaf svg .vein { stroke: rgba(92,125,105,.25); stroke-width: 1.6; stroke-linecap: round; }
.app-leaf--1 { width: 130px; height: 130px; top: 8%; left: 4%;  animation: leaf-float-a 26s ease-in-out infinite alternate; }
.app-leaf--2 { width: 88px;  height: 88px;  top: 62%; left: 12%; filter: blur(1.5px); opacity: .7; animation: leaf-float-b 32s ease-in-out infinite alternate; }
.app-leaf--3 { width: 150px; height: 150px; top: 12%; right: 6%; filter: blur(2.5px); opacity: .5; animation: leaf-float-b 40s ease-in-out infinite alternate-reverse; }
.app-leaf--4 { width: 70px;  height: 70px;  bottom: 6%; right: 16%; animation: leaf-float-a 30s ease-in-out infinite alternate-reverse; }
.app-leaf--2 svg path, .app-leaf--4 svg path { fill: rgba(217,118,101,.13); }
.app-leaf--2 svg .vein, .app-leaf--4 svg .vein { stroke: rgba(175,81,65,.22); }
@keyframes leaf-float-a {
  0%   { transform: translate3d(0, 0, 0) rotate(-8deg) rotateY(0deg); }
  50%  { transform: translate3d(26px, -30px, 60px) rotate(6deg) rotateY(24deg); }
  100% { transform: translate3d(-14px, 22px, 20px) rotate(-4deg) rotateY(-16deg); }
}
@keyframes leaf-float-b {
  0%   { transform: translate3d(0, 0, 0) rotate(10deg) rotateY(10deg); }
  50%  { transform: translate3d(-30px, 26px, -50px) rotate(-6deg) rotateY(-20deg); }
  100% { transform: translate3d(18px, -18px, 30px) rotate(12deg) rotateY(14deg); }
}
.app-orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.75), rgba(201,215,205,.32) 42%, rgba(113,146,127,.10) 74%, transparent 78%);
  box-shadow: inset 0 0 18px rgba(255,255,255,.35), 0 18px 34px rgba(92,125,105,.12);
  will-change: transform;
}
.app-orb--1 { width: 64px; height: 64px; top: 34%; left: 7%;  animation: orb-float 22s ease-in-out infinite alternate; }
.app-orb--2 { width: 34px; height: 34px; top: 74%; right: 9%; animation: orb-float 28s ease-in-out infinite alternate-reverse; }
.app-orb--3 { width: 22px; height: 22px; top: 20%; right: 22%; filter: blur(1px); opacity: .7; animation: orb-float 18s ease-in-out infinite alternate; }
@keyframes orb-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(20px, -34px, 0) scale(1.12); }
}

/* ---------------- Device realism: iPhone ---------------- */
.dev-phone__frame {
  position: relative;
  background: linear-gradient(155deg, #6b7174 0%, #3d4245 22%, #22272a 48%, #191d20 72%, #2c3134 100%);
  border-radius: 46px;
  padding: 8px;
  box-shadow:
    inset 0 0 0 1.5px rgba(214,222,224,.55),
    inset 0 0 0 3.5px rgba(20,24,26,.9),
    0 2px 5px rgba(10,16,14,.28),
    0 22px 44px rgba(10,20,16,.34),
    0 44px 90px rgba(10,20,16,.22);
}
/* side buttons — power (right), volume pair (left) */
.dev-phone__frame::before {
  content: ''; position: absolute; right: -2.5px; top: 26%;
  width: 3px; height: 13%; border-radius: 3px;
  background: linear-gradient(90deg, #565c5f, #2a2f32);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.28);
}
.dev-phone__frame::after {
  content: ''; position: absolute; left: -2.5px; top: 20%;
  width: 3px; height: 8%; border-radius: 3px;
  background: linear-gradient(90deg, #2a2f32, #565c5f);
  box-shadow: 0 34px 0 0 #3c4245, inset 0 1px 1px rgba(255,255,255,.24);
}
/* glass reflection sweep + home indicator */
.dev-phone__screen::before {
  content: ''; position: absolute; inset: 0; z-index: 26; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 18%, transparent 32%, transparent 78%, rgba(255,255,255,.05) 100%);
}
.dev-phone__screen::after {
  content: ''; position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  width: 36%; height: 4px; border-radius: 3px; z-index: 27; pointer-events: none;
  background: rgba(22,36,40,.85);
}
.dev-phone__island {
  box-shadow: 0 0 0 2.5px rgba(0,0,0,.35), inset 0 1px 2px rgba(255,255,255,.06);
}
.dev-phone__island::before {
  content: ''; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 26%; height: 42%; border-radius: 6px; background: #050708;
}

/* ---------------- Device realism: iPad Pro ----------------
   Thin uniform black bezel inside a machined aluminium rim,
   flat edges, top-edge buttons, recessed front camera. */
.dev-ipad__frame {
  position: relative;
  background: #101516;
  border-radius: 24px;
  padding: 7px;
  box-shadow:
    inset 0 0 0 1.5px rgba(216,224,226,.6),
    inset 0 0 0 2.5px rgba(90,98,100,.55),
    inset 0 0 0 4px rgba(12,16,18,.95),
    0 2px 4px rgba(10,16,14,.25),
    0 18px 40px rgba(10,20,16,.30),
    0 36px 72px rgba(10,20,16,.18);
}
/* top-edge power + volume buttons (device is tilted, top-right edge) */
.dev-ipad__frame::before {
  content: ''; position: absolute; top: -2.5px; right: 12%;
  width: 9%; height: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #6a7073, #2c3134);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3);
}
.dev-ipad__frame::after {
  content: ''; position: absolute; top: -2.5px; right: 24%;
  width: 13%; height: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #6a7073, #2c3134);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3);
}
.dev-ipad__view { position: relative; border-radius: 17px; }
.dev-ipad__view::before {
  content: ''; position: absolute; inset: 0; z-index: 26; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,.13) 0%, transparent 30%, transparent 80%, rgba(255,255,255,.05) 100%);
}
.dev-ipad__cam {
  width: 4px; height: 4px; top: 4.5px;
  background: #06090a;
  box-shadow: 0 0 0 1.5px rgba(70,78,80,.6), inset 0.5px 0.5px 1px rgba(120,160,200,.8);
}

/* ---------------- Device realism: laptop ---------------- */
.dev-laptop__screen {
  box-shadow:
    inset 0 0 0 1.5px rgba(210,218,220,.4),
    0 16px 38px rgba(10,20,16,.24);
}
.dev-laptop__view { position: relative; }
.dev-laptop__view::after {
  content: ''; position: absolute; inset: 0; z-index: 26; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.12) 0%, transparent 26%, transparent 82%, rgba(255,255,255,.06) 100%);
}
.dev-laptop__base {
  background: linear-gradient(180deg, #d4d9da 0%, #a9afb1 26%, #878d8f 60%, #6c7274 100%);
  box-shadow: 0 2px 3px rgba(255,255,255,.35) inset, 0 12px 24px rgba(10,20,16,.26);
}
.dev-laptop__notch { box-shadow: inset 0 1px 3px rgba(0,0,0,.3); }

/* soft floor shadow beneath the whole stage */
.app__stage::after {
  content: ''; position: absolute; left: 6%; right: 4%; bottom: -26px; height: 40px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(16,28,24,.22), transparent 72%);
  filter: blur(8px); z-index: -1;
}

/* ---------------- Native-feel app UI ---------------- */
.appscreen, .portal, .ipad-dash {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', var(--sans);
  letter-spacing: -0.01em;
}
.app-statusbar { font-variant-numeric: tabular-nums; }

/* photo avatars from brand photography — faces matched to roles:
   Amelia (carer)  → carer in the orange jacket, QX5A8811 far left
   Sarah  (family) → smiling family member, QX5A8811 centre        */
.app-hd__av, .app-visit__av, .app-msg__av, .app-profile__av {
  background-image: url('assets/QX5A8811.jpg');
  background-size: 620%;
  background-position: 24.5% 29.5%;
  color: transparent !important;
  text-shadow: none;
}
.app-hd__av { background-size: 640%; background-position: 51.5% 42%; }
.app-profile__av { background-size: 560%; background-position: 24.5% 28.5%; }

/* photo-update bubble — resident enjoying her morning (QX5A8813) */
.app-bubble--photo .ph--moment {
  background: url('assets/QX5A8813.jpg') 32% 32% / 300% no-repeat;
  min-height: 52px; border-radius: 8px;
}

/* message realism */
.app-msg-day {
  text-align: center; font-size: 7.5px; font-weight: 600;
  color: var(--ink-muted); margin: 2px 0 6px; letter-spacing: .02em;
}
.app-msg-time {
  display: inline-block; margin-left: 6px; font-size: 6.8px;
  color: var(--ink-muted); vertical-align: bottom;
}
.app-bubble--me {
  border-radius: 12px 4px 12px 12px;
  background: var(--moss-deeper); color: #fff; border: none;
}
.app-msg-time--me { color: rgba(255,255,255,.72); }
.app-msg-status {
  text-align: right; font-size: 6.8px; color: var(--ink-muted);
  margin: -4px 4px 6px 0; font-weight: 600;
}
.app-bubble--typing {
  display: inline-flex; gap: 3px; align-items: center;
  padding: 7px 10px; min-width: 0;
}
.tdot {
  width: 4.5px; height: 4.5px; border-radius: 50%;
  background: var(--ink-40); opacity: .4;
  animation: typing-bounce 1.3s ease-in-out infinite;
}
.tdot:nth-child(2) { animation-delay: .18s; }
.tdot:nth-child(3) { animation-delay: .36s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: none; opacity: .35; }
  30% { transform: translateY(-3px); opacity: .9; }
}

/* screen swap: subtle depth */
.app-phone__screens .appscreen { transform: translateX(18px) scale(.97); transition-duration: .8s; }
.app-phone__screens .appscreen.active { transform: none; }

/* ---------------- Section luxury polish ---------------- */
.app__badge-soon {
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(175,81,65,.16), 0 4px 14px rgba(175,81,65,.08);
}
/* shine sweep lives in the background layer, so the SOON ribbon that
   overhangs the corner is never clipped */
.store-badge {
  position: relative;
  background-image: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 190% 0;
  background-repeat: no-repeat;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-position .65s ease;
}
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(16,28,24,.3); background-position: -90% 0; }
.waitlist {
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px rgba(16,28,24,.10), inset 0 0 0 1px rgba(113,146,127,.10);
}

/* ---------------- Dark mode ---------------- */
html[data-theme="dark"] .app__aurora {
  background:
    radial-gradient(38% 46% at 30% 40%, rgba(120,150,120,.20), transparent 70%),
    radial-gradient(30% 40% at 68% 30%, rgba(201,123,99,.13), transparent 70%),
    radial-gradient(26% 36% at 52% 68%, rgba(80,110,95,.18), transparent 70%);
}
html[data-theme="dark"] .app-leaf svg path { fill: rgba(180,197,177,.10); }
html[data-theme="dark"] .app-leaf svg .vein { stroke: rgba(180,197,177,.18); }
html[data-theme="dark"] .app-leaf--2 svg path, html[data-theme="dark"] .app-leaf--4 svg path { fill: rgba(217,118,101,.10); }
html[data-theme="dark"] .app-orb {
  background: radial-gradient(circle at 32% 30%, rgba(234,240,234,.28), rgba(180,197,177,.12) 42%, rgba(180,197,177,.04) 74%, transparent 78%);
  box-shadow: inset 0 0 14px rgba(234,240,234,.14), 0 18px 34px rgba(0,0,0,.3);
}
html[data-theme="dark"] .app__stage::after { background: radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,.5), transparent 72%); }
html[data-theme="dark"] .app-msg-day, html[data-theme="dark"] .app-msg-status { color: var(--ink-muted); }
html[data-theme="dark"] .waitlist { box-shadow: 0 18px 44px rgba(0,0,0,.3), inset 0 0 0 1px rgba(180,197,177,.12); }

/* ---------------- Reduced motion / calm ---------------- */
@media (prefers-reduced-motion: reduce) {
  .app__aurora, .app-leaf, .app-orb, .tdot { animation: none !important; }
}
html.calm .app__aurora, html.calm .app-leaf, html.calm .app-orb, html.calm .tdot { animation: none !important; }

/* mobile/tablet: intro, then features + store badges + waitlist, THEN mockups */
@media (max-width: 920px) {
  .app__grid { display: flex; flex-direction: column; }
  .app__intro { order: 1; }
  .app__content { order: 2; }
  .app__stage { order: 3; margin-top: 28px; }
}