/*
  Intro splash: plays "Click. Manage. Grow." while Flutter downloads.

  Every element's resting style is its FINISHED look. The keyframes only
  describe where an element starts from, applied with
  `animation-fill-mode: backwards`, so with `prefers-reduced-motion` (where all
  animation is switched off) the splash is just a static, complete frame.

  Timeline (seconds, scaled by --k):
    0.00  mark pops in, tiles follow
    0.55  cursor glides toward the mark
    1.15  CLICK   mark presses, rings ripple, tiles flash, "Click." appears
    1.75  MANAGE  "Manage." appears, "Click." settles to ink
    2.35  GROW    "Grow." appears, mark pulses outward
    2.90  sequence complete (the bar keeps shimmering if Flutter is still loading)
*/

@font-face {
  font-family: 'SplashPlex';
  src: url('assets/assets/fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: block;
}

#splash {
  --ink: #0b1220;
  --primary: #2350e8;
  --teal: #0fb5a4;
  --border: #e2e7f0;

  /* Time scale: 1 = full sequence, smaller = faster (repeat visits). */
  --k: 1;
  --t-cursor: calc(0.55s * var(--k));
  --t-click: calc(1.15s * var(--k));
  --t-manage: calc(1.75s * var(--k));
  --t-grow: calc(2.35s * var(--k));
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-pop: cubic-bezier(0.2, 0.9, 0.3, 1.3);

  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

#splash.splash--quick {
  --k: 0.4;
}

/* Leaving: fade out while the content drifts up and grows slightly. */
#splash.splash--exit {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---- Background: colour washes and a dot grid, matching the site hero ---- */

.splash__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(560px 560px at 10% 0%, rgba(15, 181, 164, 0.15), transparent 70%),
    radial-gradient(560px 560px at 92% 0%, rgba(35, 80, 232, 0.17), transparent 70%);
}

.splash__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(11, 18, 32, 0.11) 1.1px, transparent 1.6px);
  background-size: 28px 28px;
  background-position: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 25%, transparent 100%);
  animation: bg-in calc(0.9s * var(--k)) ease backwards;
}

/* ---- Stage ---- */

.splash__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
  padding: 24px;
  transition: transform 0.6s var(--ease-out);
}

#splash.splash--exit .splash__stage {
  transform: translateY(-10px) scale(1.06);
}

/* ---- Brand mark ---- */

.mark {
  position: relative;
  width: 92px;
  height: 92px;
}

.mark__box {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 24px);
  grid-template-rows: repeat(2, 24px);
  gap: 8px;
  place-content: center;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--primary), var(--teal));
  box-shadow:
    0 18px 44px -12px rgba(35, 80, 232, 0.5),
    0 0 0 0 rgba(35, 80, 232, 0);
  animation:
    mark-in calc(0.7s * var(--k)) var(--ease-pop) backwards,
    mark-press calc(0.45s * var(--k)) var(--t-click) ease-in-out,
    mark-grow calc(1.1s * var(--k)) var(--t-grow) ease-out;
}

.tile {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #fff;
  --i: 0;
  animation:
    tile-in calc(0.5s * var(--k)) calc(0.25s * var(--k) + var(--i) * 0.08s * var(--k)) var(--ease-pop) backwards,
    tile-flash calc(0.55s * var(--k)) calc(var(--t-click) + var(--i) * 0.07s * var(--k)) ease-in-out;
}
.tile:nth-child(2) { --i: 1; }
.tile:nth-child(3) { --i: 2; }
.tile:nth-child(4) { --i: 3; }

/* Two rings that spread out from the mark when the cursor clicks it. */
.mark::before,
.mark::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 2px solid var(--primary);
  opacity: 0;
  animation: ripple calc(1s * var(--k)) var(--t-click) var(--ease-out);
}
.mark::after {
  animation-delay: calc(var(--t-click) + 0.16s * var(--k));
}

.cursor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 30px;
  opacity: 0;
  transform-origin: 2px 2px;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
  animation: cursor-path calc(1.45s * var(--k)) var(--t-cursor) cubic-bezier(0.45, 0.05, 0.25, 1) backwards;
}

/* ---- Slogan ---- */

.slogan {
  display: flex;
  gap: 0.45em;
  direction: ltr;
  font: 700 clamp(28px, 7vw, 48px) / 1.1 'SplashPlex', 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

.word {
  position: relative;
  padding-bottom: 12px;
  color: var(--ink);
}
.w3 {
  color: var(--primary);
}

.word::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--primary);
  transform-origin: left center;
  opacity: 0;
}
.w3::after {
  opacity: 1;
}

/* Each word appears, wears the accent colour while it is the active phase,
   then settles to ink when the next phase begins. "Grow." stays lit. */
.w1 {
  animation:
    word-in calc(0.55s * var(--k)) var(--t-click) var(--ease-out) backwards,
    to-ink calc(0.35s * var(--k)) var(--t-manage) ease backwards;
}
.w2 {
  animation:
    word-in calc(0.55s * var(--k)) var(--t-manage) var(--ease-out) backwards,
    to-ink calc(0.35s * var(--k)) var(--t-grow) ease backwards;
}
.w3 {
  animation: word-in calc(0.55s * var(--k)) var(--t-grow) var(--ease-out) backwards;
}

.w1::after {
  animation: underline-run calc(0.8s * var(--k)) calc(var(--t-click) + 0.12s * var(--k)) var(--ease-out) backwards;
}
.w2::after {
  animation: underline-run calc(0.8s * var(--k)) calc(var(--t-manage) + 0.12s * var(--k)) var(--ease-out) backwards;
}
.w3::after {
  animation: underline-in calc(0.6s * var(--k)) calc(var(--t-grow) + 0.12s * var(--k)) var(--ease-out) backwards;
}

/* ---- Progress bar: fills one third per phase, then shimmers until ready ---- */

.bar {
  position: relative;
  width: min(240px, 60vw);
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--border);
  animation: fade-in calc(0.5s * var(--k)) calc(0.9s * var(--k)) ease backwards;
}

.bar i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--teal));
  transform-origin: left center;
  animation: bar-fill calc(1.75s * var(--k)) var(--t-click) linear backwards;
}

.bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  opacity: 0;
  animation: shimmer 1.3s calc(2.9s * var(--k)) linear infinite;
}

/* ---- Keyframes ---- */

@keyframes bg-in {
  from { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes mark-in {
  from { opacity: 0; transform: scale(0.55) rotate(-8deg); }
}

@keyframes mark-press {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(0.9); }
  70% { transform: scale(1.05); }
}

@keyframes mark-grow {
  0% {
    transform: scale(1);
    box-shadow: 0 18px 44px -12px rgba(35, 80, 232, 0.5), 0 0 0 0 rgba(35, 80, 232, 0.35);
  }
  45% { transform: scale(1.07); }
  100% {
    transform: scale(1);
    box-shadow: 0 18px 44px -12px rgba(35, 80, 232, 0.5), 0 0 0 34px rgba(35, 80, 232, 0);
  }
}

@keyframes tile-in {
  from { opacity: 0; transform: scale(0); }
}

@keyframes tile-flash {
  0%, 100% { transform: scale(1); opacity: 1; }
  40% { transform: scale(0.74); opacity: 0.55; }
  72% { transform: scale(1.12); opacity: 1; }
}

@keyframes ripple {
  0% { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.95); }
}

@keyframes cursor-path {
  0% { opacity: 0; transform: translate(130px, 95px) scale(1); }
  12% { opacity: 1; }
  42% { opacity: 1; transform: translate(6px, 8px) scale(1); }
  50% { opacity: 1; transform: translate(6px, 8px) scale(0.82); }
  58% { opacity: 1; transform: translate(6px, 8px) scale(1); }
  100% { opacity: 0; transform: translate(70px, 60px) scale(1); }
}

@keyframes word-in {
  from { opacity: 0; transform: translateY(18px); filter: blur(10px); }
}

@keyframes to-ink {
  from { color: var(--primary); }
}

@keyframes underline-run {
  0% { transform: scaleX(0); opacity: 1; }
  65% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

@keyframes underline-in {
  from { transform: scaleX(0); }
}

@keyframes bar-fill {
  0% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  31% { transform: scaleX(0.33); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  66% { transform: scaleX(0.66); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { transform: scaleX(1); }
}

@keyframes shimmer {
  from { opacity: 1; transform: translateX(-100%); }
  to { opacity: 1; transform: translateX(100%); }
}

/* ---- Reduced motion: a calm version ----------------------------------------
   No travel, scaling, blur, cursor or looping. The three words simply fade in
   one after another, so the slogan is still delivered in order.
   Adding `splash--motion` (from `?motion=full`, see splash.js) opts back in to
   the full sequence. */

@media (prefers-reduced-motion: reduce) {
  #splash:not(.splash--motion),
  #splash:not(.splash--motion) .splash__stage {
    transition-duration: 0.2s;
  }

  #splash:not(.splash--motion) *,
  #splash:not(.splash--motion) *::before,
  #splash:not(.splash--motion) *::after {
    animation: none !important;
  }

  #splash:not(.splash--motion) .mark__box { animation: fade-in 0.4s ease backwards !important; }
  #splash:not(.splash--motion) .w1 { animation: fade-in 0.35s 0.3s ease backwards !important; }
  #splash:not(.splash--motion) .w2 { animation: fade-in 0.35s 0.65s ease backwards !important; }
  #splash:not(.splash--motion) .w3 { animation: fade-in 0.35s 1s ease backwards !important; }
  #splash:not(.splash--motion) .bar { animation: fade-in 0.35s 0.2s ease backwards !important; }
  #splash:not(.splash--motion) .bar i { animation: bar-fill 1.2s 0.3s linear backwards !important; }
}