/* מסך טעינה לפני Flutter — SYNC עם HorutBrandSplashSizing / HorutBrandSplashTiming (Dart). */
:root {
  --brand-primary: #80F2DC;
  --brand-secondary: #1B1136;
  --splash-logo-base: 156;
  --splash-wordmark-reveal-ms: 900;
  --splash-text-gap-ms: 100;
  --splash-signature-fade-ms: 580;
  --splash-text-stagger-ms: 80;
  --splash-tagline-fade-ms: 580;
  --splash-signature-delay-ms: calc(var(--splash-wordmark-reveal-ms) + var(--splash-text-gap-ms));
  --splash-tagline-delay-ms: calc(var(--splash-signature-delay-ms) + var(--splash-signature-fade-ms) + var(--splash-text-stagger-ms));
  --splash-hold-after-intro-ms: 2500;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--brand-secondary);
  overflow: hidden;
}

flt-glass-pane,
flt-scene-host,
flutter-view {
  background: var(--brand-secondary) !important;
}

@font-face {
  font-family: 'PlaypenSansHebrew';
  src: url('../fonts/PlaypenSansHebrew-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

#loading {
  background: var(--brand-secondary);
  position: absolute;
  inset: 0;
  z-index: 1;
  direction: rtl;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 36px);
}

.splash-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(100%, calc(var(--splash-logo-base) * 3.333px));
  transform: translateY(-2vh);
}

.signature {
  margin-bottom: clamp(20px, 4vh, 30px);
  opacity: 0;
  animation: splash-text-fade-in
    calc(var(--splash-signature-fade-ms) * 1ms)
    ease-in-out
    calc(var(--splash-signature-delay-ms) * 1ms)
    both;
}

.signature .line {
  font-family: 'PlaypenSansHebrew', 'Assistant', sans-serif;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72);
  line-height: 1.2;
}

.signature .line.top {
  font-size: clamp(22px, 5.5vw, 28px);
}

.signature .line.bottom {
  margin-top: 2px;
  font-size: clamp(17px, 4.2vw, 21px);
  color: rgba(255, 255, 255, 0.82);
}

.brand-splash {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(
    calc(var(--splash-logo-base) * 0.077px),
    3vw,
    calc(var(--splash-logo-base) * 0.128px)
  );
}

.tagline-wrap {
  margin-top: clamp(18px, 3.5vh, 24px);
  max-width: calc(var(--splash-logo-base) * 2.692px);
  opacity: 0;
  animation: splash-text-fade-in
    calc(var(--splash-tagline-fade-ms) * 1ms)
    ease-in-out
    calc(var(--splash-tagline-delay-ms) * 1ms)
    both;
}

.tagline-wrap .subtitle {
  margin: 0;
  font-family: 'Heebo', 'Assistant', sans-serif;
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.88);
}

.brand-splash::before {
  content: '';
  position: absolute;
  inset: -48px -64px;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    rgba(128, 242, 220, 0.28) 0%,
    rgba(128, 242, 220, 0.12) 42%,
    rgba(128, 242, 220, 0) 72%
  );
  filter: blur(18px);
  animation: glow-float 4.8s ease-in-out infinite;
  pointer-events: none;
}

.brand-logo-wrap {
  position: relative;
  z-index: 2;
  animation: heartbeat 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(128, 242, 220, 0.55))
          drop-shadow(0 0 28px rgba(128, 242, 220, 0.28));
}

.brand-logo {
  width: clamp(
    calc(var(--splash-logo-base) * 0.718px),
    30vw,
    calc(var(--splash-logo-base) * 1.077px)
  );
  height: clamp(
    calc(var(--splash-logo-base) * 0.718px),
    30vw,
    calc(var(--splash-logo-base) * 1.077px)
  );
  object-fit: contain;
  display: block;
}

.brand-wordmark-wrap {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.brand-wordmark-stack {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.brand-wordmark-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  display: block;
  pointer-events: none;
  z-index: 0;
  filter: blur(11px);
  opacity: 0.42;
  animation: wordmark-glow-pulse 2.8s ease-in-out infinite alternate;
}

.brand-wordmark {
  position: relative;
  z-index: 1;
  height: clamp(
    calc(var(--splash-logo-base) * 0.333px),
    13.5vw,
    calc(var(--splash-logo-base) * 0.474px)
  );
  width: auto;
  object-fit: contain;
  display: block;
  transform-origin: right center;
  animation: rtl-reveal-scale calc(var(--splash-wordmark-reveal-ms) * 1ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.sparkle {
  position: absolute;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 10px rgba(128, 242, 220, 0.8),
              0 0 18px rgba(128, 242, 220, 0.45);
  pointer-events: none;
  z-index: 3;
  left: 50%;
  top: 50%;
  margin-left: var(--sx, 0);
  margin-top: var(--sy, 0);
  animation: sparkle-orbit var(--orbit-dur, 3.4s) ease-in-out infinite;
  animation-delay: var(--orbit-delay, 0s);
}

.sparkle.one { --sx: calc(var(--splash-logo-base) * 0.436px); --sy: calc(var(--splash-logo-base) * -0.269px); width: calc(var(--splash-logo-base) * 0.038px); height: calc(var(--splash-logo-base) * 0.038px); --orbit-dur: 2.6s; --orbit-delay: 0s; }
.sparkle.two { --sx: calc(var(--splash-logo-base) * -0.551px); --sy: calc(var(--splash-logo-base) * -0.321px); width: calc(var(--splash-logo-base) * 0.058px); height: calc(var(--splash-logo-base) * 0.058px); --orbit-dur: 3.5s; --orbit-delay: -0.8s; }
.sparkle.three { --sx: calc(var(--splash-logo-base) * -0.385px); --sy: calc(var(--splash-logo-base) * 0.282px); width: calc(var(--splash-logo-base) * 0.045px); height: calc(var(--splash-logo-base) * 0.045px); --orbit-dur: 4.1s; --orbit-delay: -1.6s; }
.sparkle.four { --sx: calc(var(--splash-logo-base) * 0.269px); --sy: calc(var(--splash-logo-base) * 0.321px); width: calc(var(--splash-logo-base) * 0.032px); height: calc(var(--splash-logo-base) * 0.032px); --orbit-dur: 3s; --orbit-delay: -2.1s; }

@keyframes heartbeat {
  0%, 56%, 100% { transform: scale(1); }
  12% { transform: scale(1.14); }
  22% { transform: scale(1); }
  34% { transform: scale(1.08); }
  44% { transform: scale(1); }
}

@keyframes rtl-reveal-scale {
  from { transform: scaleX(0); opacity: 0.7; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes splash-text-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wordmark-glow-pulse {
  from { opacity: 0.32; filter: blur(9px); }
  to { opacity: 0.55; filter: blur(14px); }
}

@keyframes glow-float {
  0%, 100% {
    transform: translate(0, 0) scale(0.94);
    opacity: 0.65;
  }
  25% {
    transform: translate(18px, -14px) scale(1.08);
    opacity: 0.95;
  }
  50% {
    transform: translate(-16px, 12px) scale(1.02);
    opacity: 0.8;
  }
  75% {
    transform: translate(10px, 18px) scale(1.1);
    opacity: 1;
  }
}

@keyframes sparkle-orbit {
  0%, 100% { transform: translate(0, 0) scale(0.85); opacity: 0.55; }
  25%  { transform: translate(22px, -18px) scale(1.15); opacity: 1; }
  50%  { transform: translate(-20px, -8px) scale(0.9); opacity: 0.7; }
  75%  { transform: translate(-14px, 20px) scale(1.1); opacity: 0.95; }
}
