/* Cover page styling */
#cover {
  position: fixed;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 76px);
  overscroll-behavior: none;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: 100;
}

/* Cover visibility states */
#cover.visible {
  opacity: 1;
}
#cover.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Profile avatar styling */
#avatar-frame {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: none;
  overflow: hidden;
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 2s ease-in-out, transform 2s ease-in-out;
  z-index: 20;
  box-shadow:
    inset 0 0 0.5px rgba(255,255,255,0.35),
    0 8px 24px rgba(0,0,0,0.18),
    0 2px 6px rgba(0,0,0,0.12);
  isolation: isolate;

  outline: 1px solid rgba(255,255,255,0.70);
  outline-offset: 2px;
  filter:
    drop-shadow(0 0 0.8px rgba(255,255,255,0.85))
    drop-shadow(0 0 1.2px rgba(0,0,0,0.75))
    drop-shadow(0 6px 22px rgba(0,0,0,0.22));
  box-shadow:
    inset 0 0 0.5px rgba(255,255,255,0.35),
    0 8px 24px rgba(0,0,0,0.18),
    0 2px 6px rgba(0,0,0,0.12),
    0 0 0 6px rgba(255,255,255,0.06),
    0 0 0 12px rgba(0,0,0,0.06);
  -webkit-backdrop-filter: saturate(1.05) contrast(1.02);
          backdrop-filter: saturate(1.05) contrast(1.02);
}

#avatar-frame::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 28deg,
      rgba(255,255,255,0.65),
      rgba(224,232,248,0.35),
      rgba(170,182,206,0.30),
      rgba(255,255,255,0.65)
    );
  filter: blur(0.28px);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
  z-index: -1;
  animation: ring-rotate 18s linear infinite;
  opacity: 0.9;

  -webkit-backdrop-filter: blur(2.2px) saturate(1.06);
          backdrop-filter: blur(2.2px) saturate(1.06);
}

#avatar-frame::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 20% 15%, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.04) 42%, rgba(255,255,255,0.0) 60%),
    radial-gradient(90% 90% at 80% 85%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.0) 70%);
  mix-blend-mode: screen;
  box-shadow:
    inset 0 0 1px rgba(255,255,255,0.45),
    inset 0 6px 12px rgba(0,0,0,0.10);
}

@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#avatar-frame.visible {
  opacity: 1;
  transform: translateY(0);
}

#avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text element styling */
#name,
#slogan {
  position: relative;
  z-index: 20;
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 2s ease-in-out, transform 2s ease-in-out;
  text-align: center;
  max-width: 90vw;
  word-break: break-word;
}

#name.visible,
#slogan.visible {
  opacity: 1;
  transform: translateY(0);
}

#name {
  font-family: "CygnetRound", "Great Vibes", cursive;
  font-size: 2em;
  letter-spacing: 1px;

  color: #f6f7fb;
  background: linear-gradient(180deg, #ffffff 0%, #eef2f8 55%, #e6ecf5 100%);
  -webkit-background-clip: text;
          background-clip: text;

  -webkit-text-stroke: 0.6px rgba(0,0,0,0.35);

  text-shadow:
    0 0 0.5px rgba(255,255,255,0.8),
    0 2px 6px rgba(0,0,0,0.28),
    0 0 18px rgba(120,170,220,0.35);
}

#slogan {
  font-family: "Allura", cursive;
  font-size: 2.5em;

  color: #f4f6fb;
  background: linear-gradient(180deg, #ffffff 0%, #f1f4fa 60%, #e8edf6 100%);
  -webkit-background-clip: text;
          background-clip: text;

  -webkit-text-stroke: 0.45px rgba(0,0,0,0.30);

  text-shadow:
    0 0 0.4px rgba(255,255,255,0.85),
    0 1.5px 5px rgba(0,0,0,0.24),
    0 0 14px rgba(0,0,0,0.12);
}

/* ------------------------------------
   Cover bottom arrow (adaptive contrast)
------------------------------------- */
#cover-scroll {
  position: absolute;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(18px);
  opacity: 0;
  z-index: 40;

  border: none;
  outline: none;
  background: transparent;
  padding: 10px 14px;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  -webkit-tap-highlight-color: transparent;
  user-select: none;

  overflow: visible;

  transition:
    opacity 1.6s ease,
    transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.35s ease;

  /* Default theme vars (dark background -> light arrow) */
  --arrow-stroke: rgba(245, 250, 255, 0.92);
  --arrow-sub: rgba(245, 250, 255, 0.86);
  --arrow-stroke-w: 2.6px;

  --arrow-ds-1: drop-shadow(0 2px 10px rgba(0,0,0,0.34));
  --arrow-ds-2: drop-shadow(0 0 18px rgba(170, 210, 255, 0.30));

  --chev-glow-1: drop-shadow(0 0 10px rgba(200, 230, 255, 0.28));
  --chev-glow-2: drop-shadow(0 0 20px rgba(120, 185, 255, 0.18));

  --sub-stroke: 0.35px;
  --sub-stroke-color: rgba(0,0,0,0.35);
  --sub-shadow-1: 0 1px 3px rgba(0,0,0,0.28);
  --sub-shadow-2: 0 0 14px rgba(150, 200, 255, 0.18);

  /* Halo (still no “底板”，只是光晕) */
  --halo-a: rgba(255,255,255,0.16);
  --halo-b: rgba(170,210,255,0.10);
  --halo-opacity: 0.78;
}

/* Bright background -> dark arrow + inverted glow */
#cover-scroll[data-contrast="dark"] {
  --arrow-stroke: rgba(12, 18, 28, 0.92);
  --arrow-sub: rgba(12, 18, 28, 0.82);
  --arrow-stroke-w: 2.85px;

  /* 双向阴影：既有暗边也有亮边，保证亮底也清晰 */
  --arrow-ds-1: drop-shadow(0 2px 12px rgba(255,255,255,0.22));
  --arrow-ds-2: drop-shadow(0 2px 10px rgba(0,0,0,0.32));

  --chev-glow-1: drop-shadow(0 0 10px rgba(0,0,0,0.22));
  --chev-glow-2: drop-shadow(0 0 16px rgba(255,255,255,0.18));

  --sub-stroke: 0.32px;
  --sub-stroke-color: rgba(255,255,255,0.32);
  --sub-shadow-1: 0 1px 3px rgba(255,255,255,0.20);
  --sub-shadow-2: 0 0 12px rgba(0,0,0,0.18);

  --halo-a: rgba(0,0,0,0.12);
  --halo-b: rgba(20,40,80,0.10);
  --halo-opacity: 0.70;
}

#cover-scroll.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#cover-scroll svg {
  width: 54px;
  height: 54px;
  overflow: visible;
  filter: var(--arrow-ds-1) var(--arrow-ds-2);
}

#cover-scroll .chev {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-width: var(--arrow-stroke-w);
  stroke: var(--arrow-stroke);

  stroke-dasharray: 56 220;
  stroke-dashoffset: 80;

  filter: var(--chev-glow-1) var(--chev-glow-2);
  opacity: 0.92;
}

#cover-scroll .c1 { animation: arrow-flow 1.55s ease-in-out infinite; }
#cover-scroll .c2 { animation: arrow-flow 1.55s ease-in-out infinite 0.14s; opacity: 0.78; }
#cover-scroll .c3 { animation: arrow-flow 1.55s ease-in-out infinite 0.28s; opacity: 0.62; }

@keyframes arrow-flow {
  0%   { stroke-dashoffset: 110; transform: translateY(-2px); }
  55%  { stroke-dashoffset: 10;  transform: translateY(3px); }
  100% { stroke-dashoffset: -90; transform: translateY(-2px); }
}

#cover-scroll::before {
  content: "";
  position: absolute;
  inset: -10px -16px;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 50% 40%,
      var(--halo-a) 0%,
      var(--halo-b) 30%,
      rgba(0,0,0,0) 70%);
  mix-blend-mode: screen;
  filter: blur(0.2px);
  opacity: var(--halo-opacity);
}

#cover-scroll:hover {
  filter: brightness(1.06);
}

#cover-scroll:active {
  filter: brightness(0.98);
}

#cover-scroll.pulse {
  animation: arrow-pulse 0.32s ease-out;
}

@keyframes arrow-pulse {
  0%   { transform: translateX(-50%) translateY(0) scale(1); }
  60%  { transform: translateX(-50%) translateY(0) scale(1.04); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

.cover-scroll-sub {
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--arrow-sub);

  -webkit-text-stroke: var(--sub-stroke) var(--sub-stroke-color);
  text-shadow:
    var(--sub-shadow-1),
    var(--sub-shadow-2);
}

/* ------------------------------------
   Stardust trail for cover arrow
------------------------------------- */
.cover-stardust {
  position: absolute;
  left: 50%;
  top: 42px; /* arrow below */
  width: 3px;
  height: 3px;
  border-radius: 50%;
  pointer-events: none;

  background: radial-gradient(
    circle,
    rgba(255,255,255,0.95) 0%,
    rgba(180,210,255,0.75) 40%,
    rgba(120,160,220,0.0) 70%
  );

  filter:
    blur(0.2px)
    drop-shadow(0 0 6px rgba(160,200,255,0.6));

  animation: stardust-float linear forwards;
}

@keyframes stardust-float {
  0% {
    transform:
      translateX(var(--x))
      translateY(0)
      scale(1);
    opacity: 0.9;
  }
  70% {
    opacity: 0.55;
  }
  100% {
    transform:
      translateX(calc(var(--x) * 1.8))
      translateY(42px)
      scale(0.3);
    opacity: 0;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cover-stardust {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* =========================================
   Cover responsiveness (mobile / short viewport)
   Keeps arrow + “Scroll” fully visible.
   ========================================= */
@media (max-width: 768px), (max-height: 680px) {
  #cover { gap: 14px; }

  #avatar-frame {
    width: 124px;
    height: 124px;
  }

  #name { font-size: 1.75em; }
  #slogan { font-size: 1.85em; }

  #cover-scroll svg {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 420px), (max-height: 600px) {
  #avatar-frame {
    width: 112px;
    height: 112px;
  }

  #name { font-size: 1.65em; }
  #slogan { font-size: 1.65em; }

  #cover-scroll svg {
    width: 44px;
    height: 44px;
  }
}