/* ── Reset ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  background: radial-gradient(circle at center, #22211f 0%, #161514 65%, #0a0a09 100%);
  color: #f0f0f0;
}

/* ── Page wrapper — owns the stacking context ──────────────────────────────── */

.page {
  position: relative;
}

/* Sections cover the viewport but must NOT swallow clicks — the canvas
   underneath needs them for crystal drag/rotation. .card re-enables
   pointer events for its own interactive content. */
.hero, .next-section {
  position: relative;
  z-index: 1;
  /* svh stays inside the always-visible viewport even when the mobile URL bar
     is expanded — prevents the hero card from sitting under the home indicator
     on iOS Safari. */
  min-height: 100svh;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.hero {
  align-items: flex-end;
  padding: 1.5rem 1.5rem 5vh;
}
.next-section {
  align-items: center;
  padding: 6vh 1.5rem;
}
.card { pointer-events: auto; }

/* ── Language toggle ───────────────────────────────────────────────────────── */

.lang-toggle {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 10;
  padding: 0.38rem 0.85rem;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 12px rgba(0,0,0,.2);
  transition: background .2s, color .2s, border-color .2s;
}
.lang-toggle:hover {
  background: rgba(255,255,255,.13);
  color: #fff;
  border-color: rgba(255,255,255,.22);
}

/* ── Social links (fixed top-left, mirrors lang-toggle) ────────────────────── */

.social-links {
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 10;
  display: flex;
  gap: .5rem;
}
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 12px rgba(0,0,0,.2);
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.social-links a:hover {
  background: rgba(255,255,255,.13);
  color: #fff;
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}
.social-links svg { width: 15px; height: 15px; }

/* ── 3D crystal canvas (background) ────────────────────────────────────────── */

#crystal-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  touch-action: none;
  display: block;
}

/* ── Card ──────────────────────────────────────────────────────────────────── */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: 1.5rem 1.6rem 1.1rem;
  width: min(340px, 100%);
  border-radius: 26px;
  will-change: transform;

  background:
    linear-gradient(135deg,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.02) 50%,
      rgba(255,255,255,.06) 100%),
    rgba(0,0,0,.32);
  backdrop-filter: blur(24px) saturate(110%) brightness(.96);
  -webkit-backdrop-filter: blur(24px) saturate(110%) brightness(.96);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 32px 80px rgba(0,0,0,.45),
    0 0 0 .5px rgba(255,255,255,.06);
}

/* top glare line — moves via JS backgroundImage */
.card-glare {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-image: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  filter: blur(.4px);
  pointer-events: none;
}

/* ── Avatar ────────────────────────────────────────────────────────────────── */

.avatar-ring {
  width: 76px; height: 76px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg,
    rgba(230,235,245,.6) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(180,195,215,.55) 100%);
  box-shadow: 0 8px 32px rgba(120,140,180,.3), inset 0 1px 0 rgba(255,255,255,.45);
  flex-shrink: 0;
}
.avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ── Text ──────────────────────────────────────────────────────────────────── */

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}

.greeting {
  font-size: .75rem;
  font-weight: 400;
  color: rgba(255,255,255,.65);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

h1 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.025em;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.35);
}

.motto {
  font-size: .9rem;
  font-weight: 400;
  color: rgba(255,255,255,.82);
  letter-spacing: .03em;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}

/* ── Divider & coming soon ─────────────────────────────────────────────────── */

.divider {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

/* ── Scroll arrow (chevron) ────────────────────────────────────────────────── */

.scroll-arrow {
  display: block;
  margin: 0;
  padding: .35rem 1.4rem;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.45);
  transition: color .25s, transform .25s;
}
.scroll-arrow svg {
  display: block;
  width: 38px;
  height: auto;
  animation: chevron-bounce 2.4s ease-in-out infinite;
}
.scroll-arrow:hover {
  color: rgba(255,255,255,.92);
}
.scroll-arrow:hover svg {
  animation-play-state: paused;
  transform: translateY(3px);
}

/* Up variant — flipped chevron that nods upward instead of downward. */
.scroll-arrow.scroll-arrow-up svg {
  animation: chevron-bounce-up 2.4s ease-in-out infinite;
}
.scroll-arrow.scroll-arrow-up:hover svg {
  animation-play-state: paused;
  transform: scaleY(-1) translateY(3px);
}

@keyframes chevron-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@keyframes chevron-bounce-up {
  0%, 100% { transform: scaleY(-1) translateY(0); }
  50%      { transform: scaleY(-1) translateY(5px); }
}

/* ── Wide placeholder card (next section) ──────────────────────────────────── */

.card.card-wide {
  width: min(560px, 100%);
  padding: 1.9rem 1.6rem;
  gap: .75rem;
  border-radius: 28px;
}
.placeholder-label {
  font-size: .7rem;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.placeholder-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.placeholder-text {
  font-size: .92rem;
  font-weight: 400;
  color: rgba(255,255,255,.7);
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* ── Desktop bump (mobile-first: baseline above is the mobile layout) ──────── */

@media (min-width: 768px) {
  .hero { padding: 1.5rem 1.5rem 9vh; }
  .card {
    padding: 1.8rem 2.2rem 1.4rem;
    width: min(360px, 100%);
    border-radius: 30px;
    gap: .85rem;
  }
  .avatar-ring { width: 86px; height: 86px; }
  h1 { font-size: 1.45rem; }
  .card.card-wide { padding: 2.5rem 2.8rem; gap: .85rem; border-radius: 32px; }
  .placeholder-title { font-size: 1.5rem; }
}