/* MemoraOrbs portal — phone-first. Palette = the campaign film's:
   ink black, ember, gold, Purefoods cream. Purefoods red appears ONLY on the
   offer card (--pf-red) — nowhere else, by campaign rule. */

:root {
  --ink: #0A0705;
  --panel: #16110D;
  --panel-2: #1E1711;
  --ember: #E8A33D;
  --gold: #D4AF6A;
  --cream: #FFF1D7;
  --muted: #9C9289;
  --faint: #5A5149;
  --line: rgba(212, 175, 106, .16);
  --pf-red: #EE1C25;
  --pf-navy: #184995;
  --r: 14px;
  --speed: 1;
  --t: cubic-bezier(.16, .84, .28, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  color: var(--cream);
  font: 16px/1.45 "Avenir Next", "Segoe UI", system-ui, sans-serif;
  min-height: 100dvh;
  overflow-x: hidden;
}
.serif { font-family: Georgia, "Times New Roman", serif; }

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select {
  font: inherit;
  font-size: 16px; /* never smaller on mobile — iOS zooms on focus */
  color: var(--cream);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
}
input:focus, textarea:focus { outline: 1px solid var(--gold); }
img, video { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; }

/* ------------------------------------------------------------ scaffold */
.app {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(14px + var(--safe-t)) 18px calc(90px + var(--safe-b));
  min-height: 100dvh;
}
.view { animation: viewIn .45s var(--t); }
@keyframes viewIn { from { opacity: 0; transform: translateY(14px); } }

.kicker {
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 600;
}
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.center { text-align: center; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--ember);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .04em;
  width: 100%;
  transition: transform .18s var(--t), opacity .18s;
}
.btn:active { transform: scale(.97); }
.btn.ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--line);
  font-weight: 500;
}
.btn.quiet { background: var(--panel-2); color: var(--gold); font-weight: 600; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* orb motif — the one repeated shape */
.orb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ember);
  flex: 0 0 auto;
}
.orb.dim { background: var(--panel-2); border: 1px solid var(--gold); }

/* ------------------------------------------------------- reveal system
   (lifted from lynxfp theme.css — starting offsets must precede `.on`) */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   calc(.62s / var(--speed)) var(--t),
    transform calc(.62s / var(--speed)) var(--t),
    filter    calc(.62s / var(--speed)) var(--t);
  filter: blur(6px);
  will-change: opacity, transform;
}
[data-reveal][data-anim="rise"]  { transform: translateY(46px); }
[data-reveal][data-anim="fall"]  { transform: translateY(-30px); }
[data-reveal][data-anim="left"]  { transform: translateX(-46px); }
[data-reveal][data-anim="right"] { transform: translateX(46px); }
[data-reveal][data-anim="zoom"]  { transform: scale(.86); }
[data-reveal][data-anim="fade"]  { transform: none; }
[data-reveal].on,
[data-reveal][data-anim].on { opacity: 1; transform: none; filter: none; }

.reduce-motion [data-reveal] {
  transition-duration: .12s !important;
  filter: none !important;
  transform: none !important;
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition-duration: .12s !important; filter: none !important; transform: none !important; }
}

/* ------------------------------------------------------------ imagery */
.img-ph {
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(232, 163, 61, .18), transparent 60%),
    linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  align-items: flex-end;
  padding: 12px;
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 14px;
  min-height: 120px;
}

/* bokeh backdrop for hero moments */
.bokeh { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.bokeh i {
  position: absolute;
  border-radius: 50%;
  background: var(--ember);
  opacity: .07;
  filter: blur(2px);
}

/* ------------------------------------------------------------ home */
.home-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 58dvh;
  border: 1px solid var(--line);
}
.home-hero img, .home-hero .img-ph { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.home-hero .shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,7,5,.25) 0%, transparent 35%, rgba(10,7,5,.86) 88%);
}
.home-hero .over {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px;
}
.home-title { font-size: 34px; line-height: 1.04; }
.home-year { font-size: 15px; color: var(--gold); letter-spacing: .18em; margin-top: 6px; }

.actions { display: grid; gap: 12px; margin-top: 18px; }
.action {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  min-height: 60px;
  font-size: 17px;
  font-family: Georgia, serif;
  transition: transform .18s var(--t), border-color .18s;
  text-align: left;
  width: 100%;
}
.action:active { transform: scale(.98); border-color: var(--gold); }
.action .chev { margin-left: auto; color: var(--faint); }

/* ------------------------------------------------------------ timeline */
.tl { display: grid; gap: 4px; margin-top: 14px; }
.tl-day { margin: 18px 0 8px; }
.tl-item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; }
.tl-time { color: var(--gold); font-size: 13px; padding-top: 4px; text-align: right; }
.tl-body {
  border-left: 1px solid var(--line);
  padding: 0 0 26px 16px;
  position: relative;
}
.tl-body::before {
  content: "";
  position: absolute; left: -5px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ember);
}
.tl-cap { font-family: Georgia, serif; font-size: 17px; }
.tl-by { color: var(--faint); font-size: 12px; margin-top: 3px; }
.tl-media { margin-top: 10px; border-radius: 12px; overflow: hidden; }
.tl-media img { width: 100%; }
.tl-story {
  margin-top: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: Georgia, serif;
  color: var(--cream);
  font-style: italic;
}
.tl-voice {
  margin-top: 10px;
  display: flex; align-items: center; gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.tl-voice .play {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ember); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; font-size: 15px;
}
.wave { display: flex; gap: 3px; align-items: center; height: 26px; flex: 1; }
.wave i { width: 3px; border-radius: 2px; background: var(--gold); opacity: .7; }

/* ------------------------------------------------------------ nav */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: rgba(10, 7, 5, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-around;
  padding: 8px 6px calc(8px + var(--safe-b));
  z-index: 40;
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--faint);
  font-size: 10.5px;
  letter-spacing: .05em;
  min-width: 56px;
  min-height: 44px;
  justify-content: center;
}
.tab.on { color: var(--ember); }
.tab svg { width: 22px; height: 22px; }

.topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 44px; }
.topbar .back { min-width: 44px; min-height: 44px; display: flex; align-items: center; color: var(--gold); font-size: 22px; }
.topbar h2 { font-size: 22px; }

/* ------------------------------------------------------------ misc */
.toast {
  position: fixed; left: 50%; bottom: calc(90px + var(--safe-b));
  transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid var(--gold);
  color: var(--cream);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  z-index: 90;
  animation: viewIn .3s var(--t);
  max-width: 90vw;
  text-align: center;
}
.sheet-veil {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 60;
  animation: fadeIn .25s;
}
@keyframes fadeIn { from { opacity: 0; } }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--panel);
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--line);
  padding: 20px 18px calc(24px + var(--safe-b));
  max-height: 86dvh;
  overflow-y: auto;
  animation: sheetUp .34s var(--t);
}
@keyframes sheetUp { from { transform: translateY(60%); opacity: .4; } }

.spin {
  width: 26px; height: 26px;
  border: 2px solid var(--line);
  border-top-color: var(--ember);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 700px) {
  body { background: radial-gradient(140% 100% at 50% 0%, #120C08, var(--ink)); }
  .app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}