/* iPhone 18 Pro Max mockup, copied for the Vatar phone-in-phone (kit/phone.js).
   Source: 02 - Project Websites/Lagos Life/Final/2026-10-16-ui-revamp/motion/shared/iphone18.css + iphone18.html (our own mockup, built 16 Oct 2026).
   Change from the source: none in the rules; phone.css sets the screen to 412 x 866 (the app frame) through the --ip18-* properties. */

.ip18 {
  --ip18-screen-w: 440px; --ip18-screen-h: 956px;
  --ip18-screen-r: 62px;           /* display corner radius at 440pt width */
  --ip18-bezel: 7px;               /* thin black border around the display */
  --ip18-band: 4px;                /* titanium edge seen from the front */
  --ip18-w: calc(var(--ip18-screen-w) + (var(--ip18-bezel) + var(--ip18-band)) * 2);
  --ip18-h: calc(var(--ip18-screen-h) + (var(--ip18-bezel) + var(--ip18-band)) * 2);
  --ip18-r: calc(var(--ip18-screen-r) + var(--ip18-bezel) + var(--ip18-band));
  /* silver titanium */
  --ip18-m0: #b9bcbf; --ip18-m1: #e9ebed; --ip18-m2: #f7f8f9; --ip18-m3: #a6aaae; --ip18-m4: #d4d7da; --ip18-line: #8e9296;
  --ip18-btn0: #c3c6c9; --ip18-btn1: #eef0f2; --ip18-btn2: #9da1a5;
  position: relative; flex: none; box-sizing: border-box; width: var(--ip18-w); height: var(--ip18-h);
  border-radius: var(--ip18-r); isolation: isolate;
}
/* finishes: modifier classes (.ip18--silver | --black | --glacier | --burgundy) or data-finish="…" */
.ip18--silver, .ip18[data-finish="silver"] { /* the defaults above */ }
.ip18--black, .ip18[data-finish="black"] {
  --ip18-m0: #3b3c3f; --ip18-m1: #616367; --ip18-m2: #8c8f93; --ip18-m3: #1f2022; --ip18-m4: #4a4c50; --ip18-line: #17181a;
  --ip18-btn0: #404245; --ip18-btn1: #74777b; --ip18-btn2: #1e1f21; }
.ip18--glacier, .ip18[data-finish="glacier"] {
  --ip18-m0: #b2c2cc; --ip18-m1: #dde7ee; --ip18-m2: #f3f8fb; --ip18-m3: #94a5b0; --ip18-m4: #c8d5dd; --ip18-line: #7f8f99;
  --ip18-btn0: #bac9d2; --ip18-btn1: #e9f1f6; --ip18-btn2: #8e9fa9; }
/* deep wine red titanium: dark body, warm metallic sheen on the polished edges */
.ip18--burgundy, .ip18[data-finish="burgundy"] {
  --ip18-m0: #4e1a24; --ip18-m1: #8c3c4a; --ip18-m2: #c27a86; --ip18-m3: #2c0b12; --ip18-m4: #64242f; --ip18-line: #22080e;
  --ip18-btn0: #5a2029; --ip18-btn1: #a35664; --ip18-btn2: #2a0a10; }
.ip18--black .ip18-band::before, .ip18[data-finish="black"] .ip18-band::before,
.ip18--burgundy .ip18-band::before, .ip18[data-finish="burgundy"] .ip18-band::before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 8%, rgb(0 0 0 / 0.1) 50%, rgb(255 255 255 / 0) 92%, rgb(0 0 0 / 0.18)); }

/* soft contact shadow on the field (the long ambient shadow is on .ip18-band) */
.ip18::before { content: ""; position: absolute; z-index: -2; left: 6%; right: 6%; bottom: -1.2%; height: 6%; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgb(20 24 34 / 0.34), rgb(20 24 34 / 0) 70%); filter: blur(10px); }
/* titanium band: polished edge highlight + subtle gradient banding around the frame */
.ip18-band { position: absolute; inset: 0; border-radius: inherit;
  background:
    linear-gradient(90deg, var(--ip18-m3), var(--ip18-m1) 1.4%, var(--ip18-m2) 2.4%, var(--ip18-m0) 5%, var(--ip18-m4) 30%, var(--ip18-m1) 50%, var(--ip18-m4) 70%, var(--ip18-m0) 95%, var(--ip18-m2) 97.6%, var(--ip18-m1) 98.6%, var(--ip18-m3)),
    var(--ip18-m0);
  box-shadow:
    inset 0 0 0 0.5px rgb(255 255 255 / 0.65),          /* polished outer lip */
    inset 0 1.5px 0 0 rgb(255 255 255 / 0.55),           /* top catch-light */
    inset 0 -1.5px 0 0 rgb(0 0 0 / 0.12),
    0 0 0 0.5px rgb(0 0 0 / 0.18),
    0 50px 90px -30px rgb(20 24 34 / 0.38), 0 18px 34px -16px rgb(20 24 34 / 0.24); /* long ambient shadow on the field */ }
/* vertical banding (top/bottom light falloff) layered over the horizontal gradient */
.ip18-band::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.35), rgb(255 255 255 / 0) 9%, rgb(0 0 0 / 0.05) 50%, rgb(255 255 255 / 0) 91%, rgb(0 0 0 / 0.1)); }
/* antenna lines in the band */
.ip18-band::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(var(--ip18-line), var(--ip18-line)) 0 13% / var(--ip18-band) 2px no-repeat,
    linear-gradient(var(--ip18-line), var(--ip18-line)) 100% 13% / var(--ip18-band) 2px no-repeat,
    linear-gradient(var(--ip18-line), var(--ip18-line)) 0 87% / var(--ip18-band) 2px no-repeat,
    linear-gradient(var(--ip18-line), var(--ip18-line)) 100% 87% / var(--ip18-band) 2px no-repeat,
    linear-gradient(90deg, var(--ip18-line), var(--ip18-line)) 22% 0 / 2px var(--ip18-band) no-repeat,
    linear-gradient(90deg, var(--ip18-line), var(--ip18-line)) 78% 100% / 2px var(--ip18-band) no-repeat;
  opacity: 0.55; }

/* black glass bezel + display */
.ip18-bezel { position: absolute; inset: var(--ip18-band); border-radius: calc(var(--ip18-screen-r) + var(--ip18-bezel)); background: #050506;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06), 0 0 0 0.5px rgb(0 0 0 / 0.5); }
.ip18-screen { position: absolute; inset: var(--ip18-bezel); overflow: hidden; border-radius: var(--ip18-screen-r); background: #0b0d12; }
.ip18-screen > iframe, .ip18-screen > img, .ip18-screen > video { display: block; width: var(--ip18-screen-w); height: var(--ip18-screen-h); border: 0; }

/* Dynamic Island: 126 × 37 at 11px from the top of the display */
.ip18-island { position: absolute; z-index: 3; left: 50%; top: calc(var(--ip18-bezel) + 11px); width: 126px; height: 37px; translate: -50% 0; border-radius: 999px; background: #000; pointer-events: none;
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.04); }
.ip18-island::after { content: ""; position: absolute; right: 26px; top: 50%; width: 11px; height: 11px; translate: 0 -50%; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a3550 0 18%, #0d1220 40%, #05070c 70%); box-shadow: 0 0 0 1px #0c0d10; }

/* very subtle glare across the glass (never blocks taps) */
.ip18-glare { position: absolute; z-index: 4; inset: var(--ip18-bezel); border-radius: var(--ip18-screen-r); pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(118deg, rgb(255 255 255 / 0.075) 0%, rgb(255 255 255 / 0.03) 26%, rgb(255 255 255 / 0) 27%, rgb(255 255 255 / 0) 100%); }

/* side buttons, protruding ≈3px; positions follow Pro Max proportions */
.ip18-btn { position: absolute; z-index: -1; width: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ip18-btn2), var(--ip18-btn1) 40%, var(--ip18-btn0) 75%, var(--ip18-btn2));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -1px 0 rgb(0 0 0 / 0.2); }
.ip18-btn--action  { left: -3px; top: 18.5%; height: 3.6%; }
.ip18-btn--volup   { left: -3px; top: 25.8%; height: 6.6%; }
.ip18-btn--voldown { left: -3px; top: 34%;   height: 6.6%; }
.ip18-btn--power   { right: -3px; top: 27.5%; height: 10.4%; }
/* Camera Control: flush sapphire crystal in a metal surround, lower on the right */
.ip18-btn--camera  { right: -2px; top: 56.5%; height: 7.6%; width: 3px; border-radius: 1.5px;
  background: linear-gradient(90deg, #6d7176, #2c2f33 50%, #4a4e53); box-shadow: 0 0 0 0.75px var(--ip18-m3), inset 0 1px 0 rgb(255 255 255 / 0.25); }