/* Glass layer: living colour behind the hero, headline entrance, glass sheen on cards,
   magnetic buttons. Motion pieces are scoped under html.motion. */

/* Living colour mesh behind the hero */
.mesh {
  position: absolute; inset: -10% -10% 0; z-index: -2; pointer-events: none;
  filter: blur(70px) saturate(130%); opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 30%, transparent 75%);
}
.mesh span { position: absolute; border-radius: 50%; width: 38vw; height: 38vw; min-width: 280px; min-height: 280px; }
.mesh span:nth-child(1) { left: 12%; top: 28%; background: #6E8BFF; }
.mesh span:nth-child(2) { left: 46%; top: 18%; background: #B49BFF; }
.mesh span:nth-child(3) { left: 30%; top: 52%; background: #7FD8FF; }
.mesh span:nth-child(4) { left: 60%; top: 50%; background: #9FB4FF; }
.motion .mesh span:nth-child(1) { animation: drift-a 22s ease-in-out infinite alternate; }
.motion .mesh span:nth-child(2) { animation: drift-b 26s ease-in-out infinite alternate; }
.motion .mesh span:nth-child(3) { animation: drift-c 30s ease-in-out infinite alternate; }
.motion .mesh span:nth-child(4) { animation: drift-a 34s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate(18vw, -6vh) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-16vw, 10vh) scale(0.9); } }
@keyframes drift-c { to { transform: translate(10vw, -12vh) scale(1.2); } }

/* Headline starts frosted and clears as the page opens: private, then provably clean */
.hero__title .line { display: block; }
.hero__title .line > span { display: block; }
.motion .hero__title .line > span { animation: unfrost 1.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-delay: 0.35s; }
.motion .hero__title .line:nth-child(2) > span { animation-delay: 0.6s; }
.motion .rise { animation: rise 1s var(--ease) both; animation-delay: 1.15s; }
.motion .hero__actions.rise { animation-delay: 1.3s; }
@keyframes unfrost {
  from { filter: blur(26px); opacity: 0.5; transform: scale(1.03); }
  to { filter: none; opacity: 1; transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* Glass cards: tilt toward the cursor (glass.js) with a sheen that follows it */
[data-tilt] { position: relative; overflow: hidden; transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
[data-tilt].is-lit { transition: transform 0.12s linear, box-shadow 0.6s var(--ease); }
.sheen {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(110, 139, 255, 0.14), transparent 60%);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.report .sheen { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(140, 165, 255, 0.22), transparent 60%); mix-blend-mode: screen; }
[data-tilt].is-lit .sheen { opacity: 1; }
/* Card hairline border: neutral along the sides, a faint Alibi-blue/violet tint at two
   corners. One rule for every card; dark cards swap in a fill and edge tuned for black. */
.receipt, .tile, .report {
  --card-fill: linear-gradient(#fff, #fff);
  --card-edge: linear-gradient(140deg, rgba(43, 89, 255, 0.45), rgba(29, 29, 31, 0.1) 35%, rgba(29, 29, 31, 0.1) 65%, rgba(140, 110, 255, 0.4));
  border: 1px solid transparent;
  background: var(--card-fill) padding-box, var(--card-edge) border-box;
}
.tile--dark, .report {
  --card-edge: linear-gradient(140deg, rgba(110, 139, 255, 0.65), rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 0.1) 65%, rgba(160, 130, 255, 0.55));
}
.tile--dark { --card-fill: linear-gradient(#000, #000); }
.report { --card-fill: linear-gradient(180deg, #1C1C1E, #141416); }
.receipt { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 24px 64px -16px rgba(29, 29, 31, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.receipt.is-lit { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 40px 90px -20px rgba(43, 89, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.report { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.report.is-lit { box-shadow: 0 30px 80px -24px rgba(43, 89, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12); }

/* Magnetic buttons */
[data-magnet] { transition: transform 0.5s var(--ease), background-color 0.2s var(--ease); }
[data-magnet]:hover { transition: transform 0.15s linear, background-color 0.2s var(--ease); }

/* Privacy trail: frosted dots that blur whatever the mouse passes over (glass.js) */
.trail { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.trail span {
  position: absolute; left: 0; top: 0; width: 64px; height: 64px; border-radius: 50%;
  backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px);
  /* Feathered edge so overlapping dots melt into one smear instead of stacked rings */
  -webkit-mask-image: radial-gradient(circle, #000 45%, transparent 70%);
  mask-image: radial-gradient(circle, #000 45%, transparent 70%);
  opacity: 0; transform: translate(var(--x, -100px), var(--y, -100px));
  will-change: transform, opacity;
}
.trail span.is-live { animation: trail-melt 1.1s linear forwards; }
@keyframes trail-melt {
  0% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); }
  45% { opacity: 0.9; transform: translate(var(--x), var(--y)) scale(0.85); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.35); }
}

/* Pinpoint cursor (glass.js). Difference blending keeps it visible on white and black. */
.has-cursor, .has-cursor * { cursor: none; }
.has-cursor :is(input, textarea, select) { cursor: text; }
.cursor-dot, .cursor-ring {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
  border-radius: 50%; mix-blend-mode: difference; opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.cursor-ring::before {
  content: ""; position: absolute; left: -17px; top: -17px; width: 34px; height: 34px;
  border-radius: 50%; border: 1.5px solid #fff;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.cursor-on .cursor-dot, .cursor-on .cursor-ring { opacity: 1; }
.cursor-hover .cursor-ring::before { transform: scale(1.6); }
.cursor-hover .cursor-dot { opacity: 0; }
.cursor-press .cursor-ring::before { transform: scale(0.8); }
.cursor-hover.cursor-press .cursor-ring::before { transform: scale(1.45); }
.cursor-typing .cursor-dot, .cursor-typing .cursor-ring { opacity: 0; }

@media (max-width: 860px) {
  .mesh { opacity: 0.38; filter: blur(56px) saturate(120%); }
  .mesh span { width: 62vw; height: 62vw; min-width: 0; min-height: 0; }
}

/* Proof section grows from a card to full-bleed (clip-path set by motion.js) */
.motion #proof { will-change: clip-path; }