/* ══════════════════════════════════════════
   VS Dev Studio — Skeleton Shimmer Loading
   Mirrors hero layout while fonts & scripts load.
   Dismissed on window.load + document.fonts.ready.
   ══════════════════════════════════════════ */

/* ── Shimmer sweep ── */
@keyframes sk-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ── Overlay ── */
#page-skeleton {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0D1117;
  display: flex;
  flex-direction: column;
  transition: opacity .42s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;
}

#page-skeleton.is-hiding {
  opacity: 0;
  pointer-events: none;
}

/* ── Base bone — dark-section shimmer ── */
.sk-bone {
  flex-shrink: 0;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.05) 25%,
    rgba(255,255,255,.13) 50%,
    rgba(255,255,255,.05) 75%
  );
  background-size: 400% 100%;
  animation: sk-shimmer 1.8s ease-in-out infinite;
}

/* Bones inside the phone render on #242a32 — brighter highlight needed */
.sk-ph-bone {
  flex-shrink: 0;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.07) 25%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.07) 75%
  );
  background-size: 400% 100%;
  animation: sk-shimmer 1.8s ease-in-out infinite;
}

/* ── Per-bone stagger delays ── */
.sk-eyebrow     { animation-delay:  .00s; }
.sk-h1-a        { animation-delay:  .07s; }
.sk-h1-b        { animation-delay:  .13s; }
.sk-h1-c        { animation-delay:  .19s; }
.sk-p-a         { animation-delay:  .24s; }
.sk-p-b         { animation-delay:  .28s; }
.sk-btn-primary { animation-delay:  .32s; }
.sk-btn-ghost   { animation-delay:  .37s; }

.sk-ph-topbar   { animation-delay:  .04s; }
.sk-ph-greeting { animation-delay:  .09s; }
.sk-ph-card     { animation-delay:  .14s; }
.sk-ph-label    { animation-delay:  .19s; }
.sk-ph-row-a    { animation-delay:  .24s; }
.sk-ph-row-b    { animation-delay:  .29s; }
.sk-ph-row-c    { animation-delay:  .34s; }
.sk-ph-nav-bone { animation-delay:  .40s; }

/* ─────────────────────────────────────────────
   HEADER BAR
───────────────────────────────────────────── */
.sk-header {
  height: 64px;
  padding: 0 clamp(20px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.sk-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sk-brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.sk-brand-name {
  width: 90px;
  height: 13px;
  border-radius: 4px;
}

.sk-lang {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
}

.sk-lang-btn {
  width: 34px;
  height: 26px;
  border-radius: 5px;
}

/* ─────────────────────────────────────────────
   HERO BODY
───────────────────────────────────────────── */
.sk-hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding: clamp(16px, 4vh, 40px) clamp(20px, 5vw, 64px);
}

.sk-layout {
  width: min(100%, 1080px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .72fr);
  align-items: center;
  gap: clamp(36px, 7vw, 88px);
}

/* ── Left: text column ── */
.sk-text {
  display: flex;
  flex-direction: column;
}

.sk-eyebrow {
  width: 118px;
  height: 10px;
  border-radius: 20px;
  margin-bottom: 26px;
}

.sk-h1 {
  height: clamp(32px, 5.2vw, 50px);
  border-radius: 8px;
  margin-bottom: 12px;
}
.sk-h1-a { width: 96%; }
.sk-h1-b { width: 78%; }
.sk-h1-c { width: 54%; margin-bottom: 26px; }

.sk-p {
  height: 15px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.sk-p-a { width: 91%; }
.sk-p-b { width: 63%; margin-bottom: 38px; }

.sk-btns {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.sk-btn-primary {
  width: 148px;
  height: 48px;
  border-radius: 50px;
}

.sk-btn-ghost {
  width: 166px;
  height: 48px;
  border-radius: 50px;
}

/* ── Right: phone column ── */
.sk-phone-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sk-phone-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(360px, 53vh, 540px);
  width: 100%;
  perspective: 1200px;
}

/* Decorative ring — matches .showcase-stage::before */
.sk-phone-stage::before {
  content: '';
  position: absolute;
  width: min(92%, 380px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 50%;
}

/* Phone frame — matches .showcase-phone geometry exactly */
.sk-phone {
  position: relative;
  width: clamp(205px, 19vw, 250px);
  aspect-ratio: 9 / 18.5;
  border-radius: 36px;
  padding: 9px;
  background: #242a32;
  box-shadow:
    18px 24px 50px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.12);
  transform: rotateX(4deg) rotateY(-12deg) rotateZ(2deg);
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Notch */
.sk-phone::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 16px;
  border-radius: 10px;
  background: #0D1117;
}

/* Status bar spacer */
.sk-ph-bar {
  height: 20px;
  flex-shrink: 0;
}

/* Content bones area */
.sk-ph-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 3px 0;
  overflow: hidden;
}

.sk-ph-topbar  { height: 28px; width: 100%; border-radius: 6px; }
.sk-ph-greeting{ height: 11px; width: 60%; }
.sk-ph-card    { height: 52px; width: 100%; border-radius: 8px; }
.sk-ph-label   { height: 8px;  width: 42%; margin-top: 4px; }

.sk-ph-row     { height: 28px; width: 100%; border-radius: 5px; }

/* Bottom nav bone */
.sk-ph-nav {
  flex-shrink: 0;
  padding: 4px 3px 2px;
}

.sk-ph-nav-bone {
  height: 30px;
  width: 100%;
  border-radius: 6px;
}

/* ─────────────────────────────────────────────
   ACCESSIBILITY
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sk-bone,
  .sk-ph-bone {
    animation: none;
    background-size: 100% 100%;
  }

  #page-skeleton {
    transition-duration: .01ms;
  }
}

/* ─────────────────────────────────────────────
   MOBILE — collapse phone, stack text
───────────────────────────────────────────── */
@media (max-width: 767px) {
  .sk-layout {
    grid-template-columns: 1fr;
  }

  .sk-phone-col {
    display: none;
  }

  .sk-hero {
    align-items: flex-start;
    padding-top: clamp(20px, 6vh, 48px);
  }
}