/* Daisy - Telegram landing page. "Lilac bloom": a slow aurora of lilac, lavender, blush and cream,
   a few floating daisies and a soft film grain behind an arched hero photo. Mobile first.
   Fonts are self-hosted (static/fonts, OFL); nothing is loaded from third parties.
   Motion uses transform/opacity only and is switched off for prefers-reduced-motion.
   <body class="bg-rich"> (default) or "bg-subtle" sets the background intensity (content/profile.json "background"). */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-latin.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
}

:root {
  --cream: #fcf7f4;
  --paper: #ffffff;
  --lilac: #b99ad8;
  --lilac-soft: #efe6f7;
  --lilac-deep: #7d5aa6;
  --blush: #f6c6da;
  --plum: #3b1d47;
  --plum-btn: #4a2257;
  --muted: #6c5878;
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ease-out: cubic-bezier(.2, .75, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font: 400 16px/1.5 var(--sans);
  color: var(--plum);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- background scene: aurora blobs, floating daisies, grain ---------- */
.scene {
  --sy: 0;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(130% 70% at 50% -10%, #f1e4fa 0%, rgba(241, 228, 250, 0) 65%),
    linear-gradient(180deg, #fbf3f8 0%, var(--cream) 55%, #f8f0f7 100%);
}
.blob {
  position: absolute;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  will-change: transform;
  animation: drift 26s ease-in-out infinite alternate;
}
.b1 { top: -38vmax; left: -36vmax; background: radial-gradient(closest-side, rgba(196, 160, 236, .75), rgba(196, 160, 236, 0)); }
.b2 { top: -12vmax; right: -44vmax; background: radial-gradient(closest-side, rgba(248, 186, 214, .7), rgba(248, 186, 214, 0)); animation-duration: 32s; animation-delay: -9s; }
.b3 { bottom: -46vmax; left: -20vmax; background: radial-gradient(closest-side, rgba(176, 168, 244, .55), rgba(176, 168, 244, 0)); animation-duration: 29s; animation-delay: -4s; }
.b4 { top: 30%; left: 20%; width: 60vmax; height: 60vmax; background: radial-gradient(closest-side, rgba(255, 226, 200, .6), rgba(255, 226, 200, 0)); animation-duration: 36s; animation-delay: -15s; }
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(8vmax, 6vmax, 0) scale(1.12); }
  100% { transform: translate3d(-6vmax, 10vmax, 0) scale(.94); }
}

.fl {
  position: absolute;
  width: 56px;
  height: 56px;
  opacity: .55;
  translate: 0 calc(var(--sy) * -.12px);
  filter: drop-shadow(0 6px 10px rgba(125, 90, 166, .18));
  animation: sway 11s ease-in-out infinite alternate;
}
.f1 { top: 7%;  left: 5%;   width: 44px; height: 44px; }
.f2 { top: 18%; right: 6%;  width: 30px; height: 30px; opacity: .45; animation-duration: 9s; animation-delay: -3s; translate: 0 calc(var(--sy) * -.2px); }
.f3 { top: 58%; left: -14px; width: 70px; height: 70px; opacity: .4; animation-duration: 14s; animation-delay: -6s; }
.f4 { top: 72%; right: 4%;  width: 40px; height: 40px; animation-duration: 12s; animation-delay: -2s; translate: 0 calc(var(--sy) * -.06px); }
.f5 { top: 2%; right: 9%; width: 22px; height: 22px; opacity: .35; animation-duration: 10s; animation-delay: -7s; }
.f6 { top: 86%; left: 7%;   width: 34px; height: 34px; opacity: .4; animation-duration: 13s; animation-delay: -5s; translate: 0 calc(var(--sy) * -.18px); }
@keyframes sway {
  0%   { transform: translate3d(0, 0, 0) rotate(-12deg); }
  100% { transform: translate3d(10px, -22px, 0) rotate(16deg); }
}

.grain {
  position: absolute;
  inset: 0;
  background: url("../img/grain.svg") repeat;
  background-size: 220px 220px;
  opacity: .16;
}

/* Subtle: paler aurora, fewer daisies, lighter grain. */
.bg-subtle .blob { opacity: .32; }
.bg-subtle .blob { animation-duration: 48s; }
.bg-subtle .halo { opacity: .55; animation: none; }
.bg-subtle .f2, .bg-subtle .f5, .bg-subtle .f6 { display: none; }
.bg-subtle .fl { opacity: .35; }
.bg-subtle .grain { opacity: .09; }

/* ---------- hero: arched photo with a turning glow ring, name, tagline, one button ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: max(22px, env(safe-area-inset-top)) 20px 30px;
  text-align: center;
  overflow-x: clip;                         /* the halo may spill past narrow screens; never scroll sideways */
}
.hero-frame {
  --w: min(calc(100vw - 48px), 380px);
  --arch: calc(var(--w) / 2);
  position: relative;
  width: var(--w);
  height: min(56vh, 520px);
  min-height: 320px;
  animation: rise-photo 1.1s var(--ease-out) both;
}
.halo {
  position: absolute;
  inset: -16% -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214, 170, 236, .7), rgba(248, 190, 216, .35) 55%, rgba(248, 190, 216, 0));
  animation: breathe 7s ease-in-out infinite alternate;
}
.ring {
  position: absolute;
  inset: -9px;
  border-radius: calc(var(--arch) + 9px) calc(var(--arch) + 9px) 39px 39px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);   /* Safari: clip the spinning child to the radius */
}
.ring::before {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: conic-gradient(from 0deg, #c9a6ec, #f7b9d4, #fff1e2, #b8b2f6, #e3c4f7, #c9a6ec);
  animation: spin 14s linear infinite;
}
.hero-photo {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--arch) var(--arch) 30px 30px;
  overflow: hidden;
  background: var(--lilac-soft);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 28px 50px -24px rgba(59, 29, 71, .55);
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;   /* keeps her face in frame at every crop */
}
.sticker {
  position: absolute;
  width: 66px;
  height: 66px;
  filter: drop-shadow(0 8px 12px rgba(91, 42, 110, .25));
  animation: twirl 18s linear infinite, pop .8s .9s var(--ease-out) both;
}
.s1 { top: 22%; right: -16px; }
.s2 { bottom: 14%; left: -12px; width: 40px; height: 40px; animation-direction: reverse, normal; animation-delay: 0s, 1.05s; }

.hero-text { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 440px; }
.name {
  margin: 6px 0 0;
  padding: 0 .06em .08em;
  font: 400 clamp(60px, 18vw, 92px)/1 var(--serif);
  letter-spacing: .005em;
  color: var(--plum);
  background: linear-gradient(105deg, #3b1d47 15%, #7b3a8e 52%, #c0659a 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rise .9s .2s var(--ease-out) both;
}
.tagline {
  margin: 6px 0 22px;
  font-size: 18px;
  letter-spacing: .01em;
  color: var(--muted);
  animation: rise .9s .35s var(--ease-out) both;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  min-height: 60px;
  padding: 14px 24px;
  border-radius: 999px;
  font: 600 18px/1.2 var(--sans);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--ease-out), filter .18s ease;
}
.btn-primary {
  isolation: isolate;
  color: #fff;
  background: var(--plum-btn);              /* replaced by the .shine gradient layer; kept as a fallback */
  box-shadow: 0 16px 30px -14px rgba(74, 34, 87, .85);
  animation: rise .9s .5s var(--ease-out) both;
}
.btn-primary::before {                      /* soft pulsing glow under the pill */
  content: "";
  position: absolute;
  inset: -4px -6px;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(90deg, #c9a6ec, #f5a9cc, #b8b2f6);
  filter: blur(14px);
  opacity: .55;
  animation: glow 3.2s ease-in-out infinite alternate;
}
.btn-primary::after {                       /* thin glassy rim */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(130deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .06) 40%, rgba(255, 200, 230, .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.shine {                                    /* the pill surface: gradient, shimmer and ripples, under the label */
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(120deg, #5a2a6d 0%, #43204f 45%, #74357f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.shine::before {                            /* shimmer sweep every few seconds */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .32), rgba(255, 255, 255, 0));
  transform: translateX(-120%) skewX(-18deg);
  animation: sweep 5.5s 1.6s ease-in-out infinite;
}
.ripple {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transform: scale(0);
  animation: ripple .7s ease-out forwards;
}
.btn-primary:hover { filter: brightness(1.08) saturate(1.05); }
.btn-primary:active { transform: scale(.965); filter: brightness(.96); }
.btn-primary:focus-visible { outline: 3px solid var(--lilac); outline-offset: 4px; }
.btn.is-disabled {
  color: var(--muted);
  background: var(--lilac-soft);
  box-shadow: none;
  cursor: not-allowed;
}
.tg-icon { flex: none; }

/* ---------- gallery: polaroid cards, swipeable on phones, overlapping pair on wide screens ---------- */
.gallery { padding: 18px 0 calc(40px + env(safe-area-inset-bottom)); }
.label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 16px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  color: var(--lilac-deep);
}
.label::before, .label::after {
  content: "";
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, rgba(125, 90, 166, 0), rgba(125, 90, 166, .6));
}
.label::after { transform: scaleX(-1); }
.reel {
  display: flex;
  gap: 18px;
  padding: 14px 28px 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 28px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }
.shot {
  flex: 0 0 70vw;
  max-width: 300px;
  margin: 0;
  padding: 9px 9px 34px;
  border-radius: 20px;
  scroll-snap-align: center;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 40px -22px rgba(59, 29, 71, .5), 0 2px 6px rgba(59, 29, 71, .06);
  transform: rotate(-2deg);
  transition: transform .5s var(--ease-out), box-shadow .5s ease;
}
.shot:nth-child(even) { transform: rotate(2.5deg) translateY(8px); }
.shot img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 13px;
  object-fit: cover;
  object-position: 50% 30%;
  background: var(--lilac-soft);
}

/* Scroll reveal (only added by fx.js for content below the fold; visible by default without JS). */
.reveal.pending { opacity: 0; transform: translateY(28px); }
.reveal.pending.in { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s var(--ease-out); }

@media (min-width: 600px) {
  .reel { justify-content: center; overflow: visible; }
  .shot { flex: 0 1 280px; }
  .shot:nth-child(even) { margin-left: -34px; }
  .shot:hover { transform: rotate(0) translateY(-6px) scale(1.03); z-index: 1; box-shadow: 0 30px 50px -24px rgba(59, 29, 71, .55); }
}

@media (min-width: 900px) {
  .hero {
    flex-direction: row;
    justify-content: center;
    gap: 96px;
    min-height: min(100vh, 860px);
    padding: 56px 32px 40px;
    text-align: left;
  }
  .hero-frame { --w: 440px; flex: none; height: min(76vh, 660px); }
  .s1 { width: 84px; height: 84px; right: -30px; }
  .s2 { width: 50px; height: 50px; left: -24px; }
  .hero-text { align-items: flex-start; max-width: 440px; }
  .name { margin-left: -.06em; font-size: 148px; }
  .tagline { font-size: 21px; margin-bottom: 30px; }
  .fl { opacity: .6; }
  .f5 {                                     /* large, faint daisy watermark behind the name */
    top: 4%; right: 2%; width: 440px; height: 440px; opacity: .2;
    filter: blur(1.5px) saturate(.45) drop-shadow(0 20px 40px rgba(125, 90, 166, .25));
    animation-duration: 40s;
  }
  .f1 { width: 70px; height: 70px; left: 8%; }
  .f3 { left: 3%; top: 64%; width: 96px; height: 96px; }
  .f4 { right: 9%; width: 60px; height: 60px; }
}

/* rise-photo starts at .02, not 0: fully transparent elements are skipped as LCP candidates. */
@keyframes rise       { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes rise-photo { from { opacity: .02; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pop        { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes spin       { to { transform: rotate(360deg); } }
@keyframes twirl      { to { transform: rotate(360deg); } }
@keyframes breathe    { from { opacity: .7; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
@keyframes glow       { from { opacity: .35; transform: scale(.97); } to { opacity: .75; transform: scale(1.03); } }
@keyframes sweep      { 0% { transform: translateX(-120%) skewX(-18deg); } 35%, 100% { transform: translateX(330%) skewX(-18deg); } }
@keyframes ripple     { to { transform: scale(26); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fl { translate: none; }
}