/* ============================================================
   OASIS ORDER — iPhone ordering-app prototype
   Standalone page. Shares nothing with styles.css by design, so
   the desktop marketing site cannot be affected by edits here.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:radial-gradient(120% 80% at 50% 0%,#241236 0%,#130A1C 55%,#0C0612 100%);
  font-family:Manrope,system-ui,sans-serif;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  gap:26px; padding:44px 24px 60px;
}
a{ color:#FF2E88; text-decoration:none; }
a:hover{ color:#FFB627; }
button{ font-family:Manrope,system-ui,sans-serif; cursor:pointer; }
input,textarea{ font-family:Manrope,system-ui,sans-serif; }

@keyframes oasisPulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes oasisRise{ from{transform:translateY(14px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ---------- page chrome ---------- */
.ph{ display:flex; align-items:center; gap:14px; color:#F8F0E3; }
.ph__word{ font:800 22px/1 'Bricolage Grotesque',sans-serif; letter-spacing:-.03em; }
.ph__rule{ width:1px; height:22px; background:rgba(248,240,227,.25); }
.ph__lbl{
  font:700 11px/1.35 Manrope,sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color:#FF2E88;
}
.ph__lbl span{ color:rgba(248,240,227,.5); }
.ph__back{
  font:700 11px/1 Manrope,sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(248,240,227,.5); border:1px solid rgba(248,240,227,.2);
  padding:8px 13px; border-radius:999px;
}
.ph__back:hover{ color:#130A1C; background:#FFB627; border-color:#FFB627; }

/* ---------- device frame ---------- */
.device{
  width:402px; height:874px; flex:none; position:relative;
  border-radius:56px; padding:12px;
  background:#000;
  box-shadow:
    0 0 0 2px #3A3A3C,
    0 40px 90px -20px rgba(0,0,0,.9),
    0 0 60px -20px rgba(255,46,136,.35);
}
.device__screen{
  width:100%; height:100%; border-radius:44px; overflow:hidden;
  background:#130A1C; position:relative;
}
.device__notch{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:126px; height:35px; border-radius:999px; background:#000; z-index:60;
}
.device__home{
  position:absolute; bottom:9px; left:50%; transform:translateX(-50%);
  width:140px; height:5px; border-radius:99px; background:rgba(248,240,227,.35); z-index:60;
}
/* status bar */
.device__status{
  position:absolute; top:0; left:0; right:0; height:58px; z-index:55;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 30px 0; pointer-events:none;
  font:700 14px/1 Manrope,sans-serif; color:#F8F0E3;
}
.device__status i{ font-style:normal; letter-spacing:.5px; }

/* the scrolling app viewport */
#app{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  background:#130A1C; display:flex; flex-direction:column;
  -webkit-overflow-scrolling:touch;
}
#app::-webkit-scrollbar{ width:0; height:0; }
#app{ scrollbar-width:none; }
#app > div{ flex:1; }
#app *::-webkit-scrollbar{ width:0; height:0; }

/* screen transition */
.scr-in{ animation:oasisRise .28s cubic-bezier(.22,.9,.28,1) both; }

/* ---------- real phones: drop the frame, go full-bleed ---------- */
@media (max-width:900px){
  body{ padding:0; gap:0; display:block; background:#130A1C; }
  .ph{ display:none; }
  .device{
    width:100%; height:100dvh; border-radius:0; padding:0; box-shadow:none;
  }
  .device__screen{ border-radius:0; }
  .device__notch,.device__home{ display:none; }
  .device__status{ height:env(safe-area-inset-top,0px); padding:0; opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .scr-in{ animation:none; }
  [style*="oasisPulse"]{ animation:none !important; }
}

/* ---------- escape hatch to the desktop design (mobile only) ---------- */
.device__full{ display:none; }
@media (max-width:900px){
  .device__full{
    display:block; position:absolute; top:0; right:0; z-index:70;
    padding:11px 16px;
    font:700 11px/1 Manrope,sans-serif; letter-spacing:.1em; text-transform:uppercase;
    color:rgba(248,240,227,.5);
  }
  .device__full:active{ color:#FFB627; }
}