/*
 * Browser start-up loader — the first half of the one loading identity
 * (the second half is lib/shared_widgets/loading/ inside the app). Its
 * anatomy, tones and motion budget are fixed in
 * specs/015-landing-page-polish/contracts/loader-visual-spec.md.
 *
 * CSS-only 3D scene: no extra downloads or rendering dependencies. Colors come
 * from the generated brand-tokens.css (AppColors.loader*), so the loader and
 * the app's own loading display cannot drift apart. The backdrop is solid
 * navy because at start-up there is nothing rendered yet to blur.
 *
 * This is the start-up screen between the landing page and sign-in only; the
 * app's splash (AppSplashLoader) continues it with the same scene. Inside the
 * account, loading is the cube alone on a transparent layer (loader_scene.dart).
 */
#app-loading {
  --loader-bg: var(--brand-loader-navy);
  --loader-light: var(--brand-loader-accent);
  --loader-text: var(--brand-loader-text);
  --loader-muted: var(--brand-loader-muted);
  --cube-size: 100px;
  --cube-depth: 50px;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  overflow: auto;
  font-family: system-ui, "Segoe UI", Tahoma, sans-serif;
  background: radial-gradient(ellipse at 50% 42%, var(--brand-loader-glow) 0%, var(--loader-bg) 65%);
  color: var(--loader-text);
}

.workspace-loader {
  width: min(100%, 540px);
  padding: 32px 20px;
  text-align: center;
}

.loader-wordmark {
  display: inline-block;
  color: var(--loader-text);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 3px;
}

.loader-wordmark > span { color: var(--loader-light); }

.loader-scene {
  width: 320px;
  height: 270px;
  position: relative;
  margin: 28px auto 14px;
  perspective: 750px;
}

.loader-halo {
  position: absolute;
  inset: 15px 20px;
  border-radius: 50%;
  background: radial-gradient(circle, #84c7bb25, transparent 68%);
  animation: loader-breathe 4s ease-in-out infinite;
}

.loader-floor {
  position: absolute;
  width: 155px;
  height: 28px;
  bottom: 30px;
  left: 83px;
  border-radius: 50%;
  background: var(--brand-loader-cube-shadow);
  filter: blur(12px);
  opacity: .6;
  animation: loader-shadow 4.5s ease-in-out infinite;
}

.loader-cube-float {
  position: absolute;
  left: 110px;
  top: 83px;
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
  animation: loader-float 4.5s ease-in-out infinite;
}

.loader-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-16deg) rotateY(-28deg) rotateZ(-5deg);
  animation: loader-cube-turn 9s ease-in-out infinite;
}

.cube-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid #d7edb840;
  border-radius: 9px;
  backface-visibility: hidden;
}

.cube-front {
  background: linear-gradient(135deg, var(--brand-loader-cube-front), var(--brand-loader-cube-front-shade));
  transform: translateZ(var(--cube-depth));
  box-shadow: inset 0 0 18px #ffffff80;
}

#app-loading .cube-front img { border-radius: 12px; }
.cube-back { background: var(--brand-loader-cube-back); transform: rotateY(180deg) translateZ(var(--cube-depth)); }
.cube-right { background: linear-gradient(135deg, var(--brand-loader-cube-right), var(--brand-loader-cube-right-shade)); transform: rotateY(90deg) translateZ(var(--cube-depth)); }
.cube-left { background: linear-gradient(135deg, var(--brand-loader-cube-left), var(--brand-loader-cube-left-shade)); transform: rotateY(-90deg) translateZ(var(--cube-depth)); }
.cube-top { background: linear-gradient(135deg, var(--brand-loader-cube-top), var(--brand-loader-cube-top-shade)); transform: rotateX(90deg) translateZ(var(--cube-depth)); }
.cube-bottom { background: var(--brand-loader-cube-bottom); transform: rotateX(-90deg) translateZ(var(--cube-depth)); }
.cube-grid { width: 35px; height: 35px; border: 1px solid #d7edb880; border-radius: 7px; background: linear-gradient(90deg, transparent 47%, #d7edb850 48% 52%, transparent 53%), linear-gradient(transparent 47%, #d7edb850 48% 52%, transparent 53%); }

.loader-orbit {
  position: absolute;
  top: 55px;
  left: 25px;
  width: 270px;
  height: 170px;
  border: 1px solid #a8ceb74a;
  border-radius: 50%;
  transform-style: preserve-3d;
}

.loader-orbit-one { transform: rotateX(64deg) rotateZ(-22deg); animation: loader-orbit-one 12s linear infinite; }
.loader-orbit-two { border-color: #80afd73b; transform: rotateX(65deg) rotateY(40deg) rotateZ(52deg); animation: loader-orbit-two 16s linear infinite; }
.loader-orbit i { position: absolute; top: 16px; left: 37px; width: 8px; height: 8px; border-radius: 50%; background: var(--loader-light); box-shadow: 0 0 14px #d7edb880; }
.loader-orbit-two i { width: 5px; height: 5px; background: #83b6e9; }

.loader-tile {
  position: absolute;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid #c5dcc83b;
  background: linear-gradient(140deg, #416b74, #183b53);
  box-shadow: 5px 7px 0 #071b2f, 8px 15px 24px #020b1850, inset 1px 1px 0 #ffffff20;
}

.loader-tile .icon { width: 26px; height: 26px; color: var(--loader-light); }
.loader-tile-check { top: 52px; left: 35px; animation: loader-tile-check 5s ease-in-out infinite; }
.loader-tile-calendar { top: 145px; right: 15px; animation: loader-tile-calendar 6s ease-in-out infinite; }
.loader-tile-book { bottom: 25px; left: 50px; animation: loader-tile-book 5.5s ease-in-out infinite; }
.loader-spark { position: absolute; width: 4px; height: 4px; background: #d7edb8; border-radius: 50%; animation: loader-breathe 3s ease-in-out infinite; }
.loader-spark-one { top: 28px; right: 75px; }
.loader-spark-two { top: 125px; left: 16px; animation-delay: -1s; }
.loader-spark-three { bottom: 20px; right: 65px; animation-delay: -2s; }

#app-loading .loader-title { font-size: 24px; font-weight: 650; line-height: 1.6; margin: 0 0 10px; }
.loader-description { display: block; color: var(--loader-muted); font-size: var(--font-size-md); line-height: 1.9; }
.loader-track { width: 160px; height: 3px; margin: 28px auto 30px; background: #c3d2db20; border-radius: 4px; overflow: hidden; direction: ltr; }
.loader-track span { display: block; width: 55%; height: 100%; background: linear-gradient(90deg, transparent, var(--loader-light), transparent); animation: loader-progress 2.2s ease-in-out infinite; }
#app-loading .loader-return { display: inline-flex; gap: var(--space-10); align-items: center; color: var(--loader-muted); text-decoration: none; font-size: var(--font-size-sm); padding: var(--space-12); min-height: 44px; }
#app-loading .loader-return .icon { width: var(--icon-sm); height: var(--icon-sm); }
#app-loading .loader-return:hover { color: var(--loader-light); }
#app-loading .loader-return:focus-visible { outline: 2px solid var(--loader-light); outline-offset: 4px; border-radius: 4px; }
.loader-error .loader-scene *, .loader-error .loader-track span { animation-play-state: paused; }
.loader-error .loader-track { visibility: hidden; }

/* Shown only in the error / timed-out state. */
#app-loading .loader-retry {
  min-height: 44px;
  margin-block-end: var(--space-4);
  padding: var(--space-10) var(--space-24);
  border: 1px solid var(--loader-light);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--loader-light);
  font: inherit;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
}
#app-loading .loader-retry:hover { background: color-mix(in srgb, var(--loader-light) 14%, transparent); }
#app-loading .loader-retry:focus-visible { outline: 2px solid var(--loader-light); outline-offset: 4px; }

@keyframes loader-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes loader-shadow { 0%,100% { transform: scaleX(1); opacity: .6; } 50% { transform: scaleX(.75); opacity: .3; } }
@keyframes loader-cube-turn { 0%,100% { transform: rotateX(-16deg) rotateY(-28deg) rotateZ(-5deg); } 50% { transform: rotateX(-24deg) rotateY(28deg) rotateZ(5deg); } }
@keyframes loader-orbit-one { from { transform: rotateX(64deg) rotateZ(-22deg); } to { transform: rotateX(64deg) rotateZ(338deg); } }
@keyframes loader-orbit-two { from { transform: rotateX(65deg) rotateY(40deg) rotateZ(52deg); } to { transform: rotateX(65deg) rotateY(40deg) rotateZ(-308deg); } }
@keyframes loader-tile-check { 0%,100% { transform: translateY(0) rotate(-16deg); } 50% { transform: translateY(-10px) rotate(-6deg); } }
@keyframes loader-tile-calendar { 0%,100% { transform: translateY(-7px) rotate(12deg); } 50% { transform: translateY(6px) rotate(20deg); } }
@keyframes loader-tile-book { 0%,100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(8px) rotate(-16deg); } }
@keyframes loader-breathe { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes loader-progress { from { transform: translateX(-100%); } to { transform: translateX(280%); } }

@media (max-width: 380px) {
  .loader-scene { margin-top: 14px; margin-bottom: -6px; transform: scale(.85); transform-origin: center; width: 320px; left: calc((100% - 320px) / 2); }
  #app-loading .loader-title { font-size: 21px; }
}

@media (max-height: 600px) {
  .workspace-loader { padding-block: 16px; }
  .loader-scene { height: 220px; margin-block: 6px; transform: scale(.8); transform-origin: center; }
  .loader-floor { bottom: -10px; }
  .loader-track { margin-block: 16px; }
  .loader-wordmark { font-size: 13px; }
}

@media (max-height: 450px) {
  .workspace-loader { padding-block: 12px; }
  .loader-scene { height: 160px; margin: -8px auto 0; transform: scale(.6); }
  #app-loading .loader-title { font-size: 20px; margin-bottom: 6px; }
  .loader-track { margin-block: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .loader-scene *, .loader-track span { animation: none !important; }
  .loader-tile-check { transform: rotate(-12deg); }
  .loader-tile-calendar { transform: rotate(12deg); }
  .loader-tile-book { transform: rotate(-8deg); }
  .loader-track span { width: 100%; opacity: .6; }
}