/* Morpheus home – shared look (31 Oct 2026). Fonts and colours from the audit guide pill page. */
:root {
  --bg: #0c0e0b;
  --cream: #FAF6EE;
  --green: #4FA36B;
  --green-b: #3E9B5B;
  --red: #E04A2C;
  --hint: rgba(250,246,238,.62);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--cream); }
body { font-family: Inter, system-ui, sans-serif; overflow: hidden; }

/* Full screen, photo centred, edges fade into the background */
.screen { position: fixed; inset: 0; display: grid; place-items: center; }
.frame {
  position: relative;
  width: min(100svh, 78vw); aspect-ratio: 1 / 1;
  container-type: size;
}
.pic { position: absolute; inset: 0; animation: fade 1.6s ease-out both; }
.pic img {
  width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 52%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 66% at 50% 52%, #000 62%, transparent 100%);
}

/* Text next to each hand (same placement as the audit guide page) */
.side { position: absolute; top: 58%; width: 44cqw; z-index: 3; opacity: 0; animation: fade 1s ease-out 1s forwards; }
.side.l { right: 77cqw; text-align: right; }
.side.r { left: 77cqw; }
.caps { font-weight: 600; font-size: 1.45cqh; letter-spacing: .2em; text-transform: uppercase; }
.side.l .caps { color: var(--green); }
.side.r .caps { color: var(--red); }
.line { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 3.1cqh; line-height: 1.12;
        letter-spacing: -.02em; margin-top: 1.2cqh; white-space: nowrap; }
.tap { font-weight: 600; font-size: 1.3cqh; color: var(--hint); margin-top: 1.4cqh; letter-spacing: .01em; }

/* Click areas: pill + a big area around it (the whole hand) */
.hit { position: absolute; z-index: 4; border-radius: 40%; -webkit-tap-highlight-color: transparent; outline: none; }
.hit.g { left: 12%; top: 66%; width: 30%; height: 26%; }
.hit.r { left: 58%; top: 66%; width: 30%; height: 26%; }

/* The glow on each pill */
.glow { position: absolute; z-index: 2; width: 11%; height: 8%; transform: translate(-50%, -50%);
        pointer-events: none; mix-blend-mode: screen; }
.glow.g { left: 31.8%; top: 78.1%; --c: 34,224,107; }
.glow.r { left: 69.8%; top: 77.5%; --c: 255,52,60; }
.glow::before, .glow::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.glow::before { inset: 28%; background: radial-gradient(closest-side, rgba(var(--c),.95), rgba(var(--c),.35) 60%, transparent);
                animation: core 2.6s ease-in-out infinite; }
.glow::after  { background: radial-gradient(closest-side, rgba(var(--c),.5), transparent 72%);
                animation: halo 2.6s ease-in-out infinite; }
.glow.r::before, .glow.r::after { animation-delay: 1.3s; }
.pic:has(.hit.g:hover) .glow.g::before, .pic:has(.hit.g:hover) .glow.g::after,
.pic:has(.hit.r:hover) .glow.r::before, .pic:has(.hit.r:hover) .glow.r::after { animation-duration: .8s; }

@keyframes core { 0%,100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes halo { 0%,100% { opacity: .3; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (min-aspect-ratio: 4/5) { .choices { display: contents; } }

@media (prefers-reduced-motion: reduce) {
  .glow::before, .glow::after { animation: none; opacity: .85; }
  .pic, .side { animation: none; opacity: 1; }
}

/* ---------- Version B extras: who is this + real buttons ---------- */
.top { position: absolute; top: 3.5cqh; left: 50%; transform: translateX(-50%); z-index: 3; text-align: center;
       white-space: nowrap; opacity: 0; animation: fade 1s ease-out .6s forwards; }
.top .brand { font-weight: 600; font-size: 1.35cqh; letter-spacing: .32em; text-transform: uppercase; color: var(--hint); }
.top .ask { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 4.6cqh; letter-spacing: -.02em; margin-top: .6cqh;
            text-shadow: 0 2px 18px #000; }
.btn { display: inline-flex; align-items: center; gap: 1cqh; margin-top: 2cqh; padding: 1.3cqh 2.2cqh; border-radius: 99px;
       font-weight: 600; font-size: 1.55cqh; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.btn .cap { width: 2.6cqh; height: 1.3cqh; border-radius: 1cqh; flex: none; }
.btn.go { background: var(--green-b); color: #fff; box-shadow: 0 0 2.4cqh rgba(62,155,91,.6); animation: btnglow 2.6s ease-in-out infinite; }
.btn.go .cap { background: linear-gradient(90deg, #EFFFF3 50%, #9EE6B4 50%); }
.btn.no { color: #F0B4A8; border: 2px solid var(--red); animation: btnglowr 2.6s ease-in-out 1.3s infinite; }
.btn.no .cap { background: linear-gradient(90deg, #FFE3DD 50%, var(--red) 50%); }
.btn:hover { transform: translateY(-2px) scale(1.03); }
@keyframes btnglow  { 0%,100% { box-shadow: 0 0 1.2cqh rgba(62,155,91,.35); } 50% { box-shadow: 0 0 3.6cqh rgba(62,155,91,.85); } }
@keyframes btnglowr { 0%,100% { box-shadow: 0 0 0 rgba(224,74,44,0); }    50% { box-shadow: 0 0 2.8cqh rgba(224,74,44,.6); } }
.side.b { top: 54%; }
@media (prefers-reduced-motion: reduce) { .btn, .top { animation: none; opacity: 1; } }

/* ---------- Phone (redo 31 Oct, after Jaho's iPhone screenshot) ----------
   One screen, no scrolling. Photo on top fading softly into the background,
   each choice sits right under its own pill: green left, red right. */
@media (max-aspect-ratio: 4/5) {
  body { overflow: hidden; }
  .screen { position: fixed; inset: 0; display: block; }
  .frame { width: 100%; height: 100%; aspect-ratio: auto; container-type: normal; overflow: hidden;
           display: flex; flex-direction: column; justify-content: center; }
  .pic { position: relative; inset: auto; flex: none; width: 124vw; margin: -8vw 0 0 -12vw; aspect-ratio: 1 / 1; }
  .pic::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26%; z-index: 3; pointer-events: none;
                background: linear-gradient(to bottom, rgba(12,14,11,0), var(--bg) 85%); }
  .pic img { -webkit-mask-image: none; mask-image: none; }
  .hit { z-index: 4; }
  .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 12px 18px;
             margin-top: -13vw; position: relative; z-index: 5; }
  .side, .side.b { position: static; width: auto; text-align: center !important; padding: 0; }
  .caps { font-size: 11px; letter-spacing: .18em; }
  .line { font-size: 17px; line-height: 1.18; margin-top: 6px; white-space: normal; letter-spacing: -.01em; }
  .line br { display: none; }
  .btn { display: flex; width: 100%; justify-content: center; margin-top: 12px; padding: 12px 8px;
         font-size: 13.5px; gap: 6px; }
  .btn .cap { display: none; }
  .tap { font-size: 11.5px; line-height: 1.35; margin-top: 7px; }
}
/* Short screens (iPhone SE / mini, or Safari bars showing) */
@media (max-aspect-ratio: 4/5) and (max-height: 600px) {
  .pic { width: 108vw; margin: -6vw 0 0 -4vw; }
  .choices { margin-top: -11vw; }
  .line { font-size: 15.5px; }
  .btn { padding: 10px 6px; margin-top: 9px; }
}