/* ScribbleKeep — Under Construction (standalone) */

:root {
  --cream:    #FBF6E7;
  --cream-2:  #F4EAD0;
  --ink:      #1E2D3D;
  --ink-soft: #41505F;
  --gold:     #F4A623;
  --gold-deep:#D9851A;
  --gold-soft:#FFD777;
  --font-display: "Hoefler Text", "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Animated aurora background */
.aurora {
  position: fixed;
  inset: -25%;
  z-index: 0;
  background:
    radial-gradient(40% 40% at 20% 25%, rgba(255, 201, 77, .55), transparent 60%),
    radial-gradient(45% 45% at 82% 20%, rgba(244, 166, 35, .40), transparent 60%),
    radial-gradient(50% 50% at 70% 85%, rgba(255, 215, 119, .45), transparent 60%),
    radial-gradient(45% 45% at 15% 80%, rgba(217, 133, 26, .30), transparent 60%);
  filter: blur(10px);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.04); }
}

/* Floating idea sparks (added by JS) */
.sparks { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.spark {
  position: absolute;
  bottom: -20px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--gold-soft) 45%, var(--gold) 100%);
  box-shadow: 0 0 12px rgba(244, 166, 35, .8);
  opacity: 0;
  animation: rise linear infinite;
}
@keyframes rise {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .8; }
  100% { transform: translateY(-110svh) scale(1.1); opacity: 0; }
}

/* Content */
.wrap {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Larger bottom padding biases the content cluster slightly upward */
  padding: 32px 24px 12vh;
}

.con-logo {
  width: min(560px, 88vw);
  filter: drop-shadow(0 22px 40px rgba(30, 45, 61, .28));
  animation: floaty 6s ease-in-out infinite, fadeUp 1s ease both;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50%      { transform: translateY(-14px) rotate(.4deg); }
}

.con-eyebrow {
  display: inline-block;
  margin-top: 48px;
  font-weight: 700; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep);
  animation: fadeUp 1s ease .15s both;
}
.con-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin: .35rem 0 .5rem;
  color: var(--ink);
  animation: fadeUp 1s ease .25s both;
}
.con-text {
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.6;
  margin: 0 auto;
  animation: fadeUp 1s ease .35s both;
}

/* Animated progress */
.con-progress {
  width: min(400px, 84vw);
  margin: 40px auto 0;
  animation: fadeUp 1s ease .45s both;
}
.con-bar {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(30, 45, 61, .10);
  box-shadow: inset 0 1px 3px rgba(30, 45, 61, .16);
  overflow: hidden;
}
/* Growing, glowing, candy-striped fill */
.con-bar .fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 10%;
  border-radius: 999px;
  background:
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, .35) 0 9px,
      rgba(255, 255, 255, 0) 9px 22px),
    linear-gradient(90deg, var(--gold), var(--gold-deep));
  background-size: 30px 100%, 100% 100%;
  box-shadow: 0 0 14px rgba(244, 166, 35, .75);
  animation: fillGrow 3.4s ease-in-out infinite, stripes 1.1s linear infinite;
}
/* Glowing leading edge */
.con-bar .fill::after {
  content: "";
  position: absolute;
  top: 50%; right: 0;
  width: 14px; height: 14px;
  transform: translate(45%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff, var(--gold-soft) 55%, rgba(244,166,35,0) 75%);
  filter: blur(.3px);
}
@keyframes fillGrow {
  0%   { width: 8%; }
  55%  { width: 88%; }
  100% { width: 8%; }
}
@keyframes stripes {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 30px 0, 0 0; }
}

.con-progress-label {
  margin: 14px 0 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.con-progress-label .ell i {
  font-style: normal;
  opacity: .25;
  animation: blink 1.4s infinite both;
}
.con-progress-label .ell i:nth-child(2) { animation-delay: .2s; }
.con-progress-label .ell i:nth-child(3) { animation-delay: .4s; }
@keyframes blink {
  0%, 100% { opacity: .25; }
  40%      { opacity: 1; }
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }

/* Footer */
.con-footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 22px 20px;
  font-size: .85rem;
  color: var(--ink-soft);
}
.con-footer a { color: var(--gold-deep); font-weight: 600; text-decoration: none; }
.con-footer a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .aurora, .con-logo, .con-eyebrow, .con-title, .con-text,
  .con-progress, .con-bar .fill, .con-progress-label .ell i { animation: none; }
  .con-bar .fill { width: 62%; }
  .con-progress-label .ell i { opacity: 1; }
  .spark { display: none; }
}