/* Sprinto placeholder page. Warm cream from the picture, Telegram blue for the action. No fonts or scripts are loaded: it is fast and private. */
:root {
  --cream: #f7efe3;
  --ink: #1b2a4a;
  --muted: #6b6f7a;
  --blue: #2aabee;
  --blue-deep: #1a8fd0;
  --shadow: 0 30px 60px -28px rgba(45, 34, 12, .42), 0 12px 24px -16px rgba(45, 34, 12, .26);
  --frame-w: min(94vw, 1100px, calc((100dvh - 250px) * 1.5));   /* the picture never pushes the button or the note off the screen */
}
@media (prefers-color-scheme: dark) {
  :root { --cream: #111a2b; --ink: #f4ede2; --muted: #9aa3b5; --shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), 0 12px 24px -14px rgba(0, 0, 0, .5); }
}
* { box-sizing: border-box; }
html { background: var(--cream); }
body {
  margin: 0; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; justify-items: center;
  color: var(--ink); background: var(--cream);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* the page background is the picture itself, tiny, scaled up and blurred: it always matches the colours of the scene */
body::before {
  content: ""; position: fixed; inset: -10%; z-index: -2;
  background: url("/assets/backdrop.webp") center / cover no-repeat; filter: blur(40px) saturate(1.2); transform: scale(1.1);
}
body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 30%, rgba(247, 239, 227, .62), rgba(247, 239, 227, .86)); }
@media (prefers-color-scheme: dark) { body::after { background: radial-gradient(120% 90% at 50% 30%, rgba(17, 26, 43, .70), rgba(17, 26, 43, .92)); } }

.stage { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px 0 8px; }

.hero { display: flex; flex-direction: column; align-items: center; gap: 20px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.frame {
  position: relative; margin: 0; width: var(--frame-w); aspect-ratio: 3 / 2; border-radius: clamp(16px, 2.4vw, 30px); overflow: hidden;
  background: #e9dcc8; box-shadow: var(--shadow); outline: 1px solid rgba(255, 255, 255, .5); outline-offset: -1px;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s;
}
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* a soft pulse on the Telegram bubble of the picture (a layer on top of the picture, aligned to the bubble by percentages) */
.glow { position: absolute; left: 73.4%; top: 21%; width: 24.6%; height: 22.6%; border-radius: 42% / 50%; pointer-events: none; animation: pulse 2.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(42, 171, 238, .55); } 70%, 100% { box-shadow: 0 0 0 clamp(10px, 2vw, 22px) rgba(42, 171, 238, 0); } }

.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px;
  color: #fff; font-weight: 650; font-size: clamp(16px, 2.2vw, 18px); letter-spacing: .1px; white-space: nowrap;
  background: linear-gradient(180deg, #37b6f5, var(--blue-deep)); box-shadow: 0 14px 26px -12px rgba(26, 143, 208, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, filter .3s;
}
.cta .arrow { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }

@media (hover: hover) {
  .hero:hover .frame { transform: translateY(-5px) scale(1.008); box-shadow: 0 40px 70px -28px rgba(45, 34, 12, .5), 0 16px 30px -16px rgba(45, 34, 12, .3); }
  .hero:hover .cta { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 20px 32px -12px rgba(26, 143, 208, .85), inset 0 1px 0 rgba(255, 255, 255, .35); }
  .hero:hover .arrow { transform: translateX(4px); }
}
.hero:active .frame { transform: scale(.995); }
.hero:focus-visible { outline: none; }
.hero:focus-visible .cta { outline: 3px solid var(--ink); outline-offset: 4px; }
.hero:focus-visible .frame { outline: 3px solid var(--blue); outline-offset: 4px; }

.title { margin: 0; font-size: clamp(28px, 5vw, 44px); line-height: 1.15; text-align: center; }
.note { max-width: min(92vw, 560px); margin: 0; text-align: center; color: var(--muted); font-size: 15px; text-wrap: balance; }
.foot { padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 13px; text-align: center; opacity: .85; }

@media (max-width: 560px) { .stage { padding-top: 20px; gap: 14px; } .hero { gap: 16px; } .cta { padding: 0 22px; } }
@media (prefers-reduced-motion: reduce) { .glow { animation: none; } .frame, .cta, .cta .arrow { transition: none; } }