/* ============================================================================
   Dabil — Signature Opening: "The Confirmation Pulse"
   ----------------------------------------------------------------------------
   The Dabil mark is a receipt with a checkmark — the universal gesture of
   "done · paid · verified · confirmed." That idea scales to every industry
   Dabil will touch, so it is the soul of the open:

     1. A point of light IGNITES at center.
     2. It fires a PULSE ring outward — a confirmation ping.
     3. As the pulse passes, the logo materialises from soft focus.
     4. A calm heartbeat of pulses continues; a living NETWORK of nodes
        breathes around the mark; an aurora flows beneath.
     5. The whole scene DISSOLVES into the app.

   The "ignition -> pulse -> reveal -> orbiting halo" cadence is the signature.
   Engineering: animates transform / opacity / filter only. The node
   network runs on <canvas>. Honours prefers-reduced-motion.
   ============================================================================ */

:root {
  --blue:       #2F80ED;
  --blue-deep:  #1E63C7;
  --cyan:       #56CCF2;
  --ice:        #EAF1FF;
  --peri:       #D6E2FF;
  --violet:     #CDD2F7;
  --ink:        #0D141C;
  --muted:      #64748B;

  --ease-glide:  cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.30, .42, 1);

  --logo-h: clamp(48px, 11vw, 84px);
}

.dabil-splash *,
.dabil-splash *::before,
.dabil-splash *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- Stage --------------------------------------------------------------- */
.dabil-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:
    radial-gradient(140% 100% at 50% -10%, #FFFFFF 0%, #FBFDFF 38%, var(--ice) 78%, #E4ECFF 100%);
  animation: stage-in .4s ease-out both;
  transition: opacity .7s var(--ease-glide), visibility .7s var(--ease-glide);
}
.dabil-splash.is-dismissed { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes stage-in { from { opacity: 0; } to { opacity: 1; } }

/* Film grain: kills banding, adds a "real lens" finish. Pure CSS. */
.dabil-splash::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: .035;
  background-image:
    radial-gradient(circle at 25% 15%, #000 .5px, transparent .6px),
    radial-gradient(circle at 75% 65%, #000 .5px, transparent .6px),
    radial-gradient(circle at 50% 90%, #000 .5px, transparent .6px);
  background-size: 7px 7px, 11px 11px, 9px 9px;
  mix-blend-mode: multiply;
}

/* ---- Aurora -------------------------------------------------------------- */
.dabil-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(46px) saturate(112%);
  animation: aurora-in 1.2s ease-out both;
}
@keyframes aurora-in { from { opacity: 0; } to { opacity: 1; } }

.dabil-aurora span { position: absolute; border-radius: 50%; will-change: transform; }
.dabil-aurora .a1 { width: 70vw; height: 70vw; left: -14vw; bottom: -30vw;
  background: radial-gradient(circle, rgba(47,128,237,.34), rgba(47,128,237,0) 68%);
  animation: float-a 14s ease-in-out infinite alternate; }
.dabil-aurora .a2 { width: 62vw; height: 62vw; right: -16vw; bottom: -26vw;
  background: radial-gradient(circle, rgba(86,204,242,.30), rgba(86,204,242,0) 68%);
  animation: float-b 17s ease-in-out infinite alternate; }
.dabil-aurora .a3 { width: 56vw; height: 56vw; left: 18vw; bottom: 4vw;
  background: radial-gradient(circle, rgba(123,150,255,.22), rgba(123,150,255,0) 70%);
  animation: float-c 20s ease-in-out infinite alternate; }
.dabil-aurora .a4 { width: 60vw; height: 60vw; left: 50%; top: -34vw; translate: -50% 0;
  background: radial-gradient(circle, rgba(205,210,247,.40), rgba(205,210,247,0) 70%);
  animation: float-d 22s ease-in-out infinite alternate; }
@keyframes float-a { to { transform: translate(8vw, -6vw) scale(1.14); } }
@keyframes float-b { to { transform: translate(-7vw, -5vw) scale(1.18); } }
@keyframes float-c { to { transform: translate(6vw, -4vw) scale(1.10); } }
@keyframes float-d { to { transform: translate(0, 5vw) scale(1.12); } }

/* ---- Node network -------------------------------------------------------- */
.dabil-network {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: net-in 1.6s 1s ease-out forwards;
}
@keyframes net-in { to { opacity: 1; } }

/* ---- Center group: every layer shares one cell = one center ------------- */
.dabil-center {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
}
.dabil-center > * { grid-area: 1 / 1; }

/* Ignition spark */
.dabil-core {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0%, var(--cyan) 40%, rgba(47,128,237,0) 72%);
  filter: blur(1px);
  animation: core-flare 1.4s .1s var(--ease-glide) forwards;
  will-change: transform, opacity;
}
@keyframes core-flare {
  0%   { transform: scale(0);   opacity: 0;  }
  18%  { transform: scale(1.6); opacity: 1;  }
  60%  { transform: scale(1);   opacity: .5; }
  100% { transform: scale(1.2); opacity: 0;  }
}

/* Pulse rings: the confirmation heartbeat */
.dabil-pulse {
  width: calc(var(--logo-h) * 2.1);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(47,128,237,.55);
  opacity: 0;
  will-change: transform, opacity;
  animation: pulse-ring 3s var(--ease-glide) infinite;
}
.dabil-pulse.p2   { animation-delay: 1s; }
.dabil-pulse.p3   { animation-delay: 2s; }
.dabil-pulse.lead { animation-delay: .35s; animation-iteration-count: 1; border-width: 2px; }
@keyframes pulse-ring {
  0%   { transform: scale(.35); opacity: 0; }
  12%  { opacity: .7; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Halo: concentric rings with a rotating conic light arc */
.dabil-halo {
  border-radius: 50%;
  --thickness: 1.4px;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness)));
  opacity: 0;
  will-change: transform, opacity;
}
.dabil-halo.h1 {
  width: calc(var(--logo-h) * 3.0); aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(47,128,237,0) 200deg, rgba(47,128,237,.65) 320deg, rgba(86,204,242,.9) 350deg, transparent 360deg);
  animation: halo-in 1s 1s ease-out forwards, spin 9s linear 1s infinite;
}
.dabil-halo.h2 {
  width: calc(var(--logo-h) * 4.4); aspect-ratio: 1;
  --thickness: 1px;
  background: conic-gradient(from 180deg, transparent 0deg, rgba(123,150,255,0) 220deg, rgba(123,150,255,.5) 330deg, transparent 360deg);
  animation: halo-in 1.1s 1.15s ease-out forwards, spin 14s linear reverse 1.15s infinite;
}
@keyframes halo-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes spin    { to   { transform: rotate(360deg); } }

/* Luminous backing keeps the mark crisp above the network */
.dabil-backing {
  width: calc(var(--logo-h) * 3.4);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 38%, rgba(255,255,255,0) 70%);
  opacity: 0;
  animation: backing-in .9s .5s ease-out forwards;
}
@keyframes backing-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* ---- Logo: the hero. Iris-revealed by the pulse, then a confident spring - */
.dabil-logo {
  position: relative;
  z-index: 4;
  display: block;
  height: var(--logo-h);
  width: auto;
  max-width: 76vw;
  object-fit: contain;
  /* Materialise from soft focus: a smooth blur-up + fade + the gentlest
     scale settle. No clip-path, so it never "pops" out of a dot. */
  animation: logo-in 1.15s .5s var(--ease-glide) both;
  will-change: transform, opacity, filter;
}
@keyframes logo-in {
  0%   { opacity: 0; transform: scale(.965); filter: blur(7px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1);    filter: blur(0);   }
}

/* Sheen: one light glint, masked to the logo's exact silhouette */
.dabil-sheen {
  position: relative;
  z-index: 5;
  height: var(--logo-h);
  width: calc(var(--logo-h) * 2.425);
  pointer-events: none;
  background: linear-gradient(105deg,
              transparent 40%,
              rgba(255,255,255,.7) 49%,
              rgba(214,232,255,.45) 52%,
              transparent 61%);
  background-size: 220% 100%;
  background-position: 150% 0;
  mix-blend-mode: screen;
  -webkit-mask: var(--logo-src) center / contain no-repeat;
          mask: var(--logo-src) center / contain no-repeat;
  opacity: 0;
  animation: sheen-sweep 1.15s 1.35s var(--ease-glide) forwards;
  will-change: background-position, opacity;
}
@keyframes sheen-sweep {
  0%   { background-position: 150% 0; opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { background-position: -120% 0; opacity: 0; }
}

/* ---- Foreground motes ---------------------------------------------------- */
.dabil-motes { position: absolute; inset: 0; z-index: 5; pointer-events: none;
  opacity: 0; animation: net-in 1.6s 1.3s ease-out forwards; }
.dabil-mote {
  position: absolute; top: var(--y); left: var(--x);
  width: var(--size); height: var(--size); border-radius: 50%;
  background: radial-gradient(circle, rgba(120,162,224,.85), rgba(120,162,224,0) 70%);
  opacity: var(--opacity); filter: blur(.6px); will-change: transform;
  animation: mote-rise var(--duration) var(--delay) ease-in-out infinite alternate;
}
@keyframes mote-rise {
  0%   { transform: translate(0,0); }
  100% { transform: translate(var(--drift-x), var(--drift-y)); }
}

/* ---- Reduced motion: keep the scene rich, remove the movement ----------- */
@media (prefers-reduced-motion: reduce) {
  .dabil-aurora span,
  .dabil-pulse,
  .dabil-mote { animation: none !important; }
  .dabil-pulse.lead, .dabil-pulse.p2, .dabil-pulse.p3 { display: none; }
  .dabil-core { display: none; }
  .dabil-halo.h1 { animation: halo-in .8s .2s ease-out forwards; }
  .dabil-halo.h2 { animation: halo-in .9s .3s ease-out forwards; }
  .dabil-sheen { display: none; }
  .dabil-logo { animation: logo-fade .7s .15s ease-out both; }
  @keyframes logo-fade { from { opacity: 0; } to { opacity: 1; } }
}