/* ══════════════════════════════════════════
   YOUR WEDDING COMPANION — SHARED STYLES
   Mobile-first. Tablet-refined. Premium.
══════════════════════════════════════════ */

/* ── Cross-document View Transitions ── */
@view-transition {
  navigation: auto;
}

/* Nav bar stays stable across transitions */
::view-transition-group(bottom-nav) { animation-duration: 0ms; }
::view-transition-group(wordmark)   { animation-duration: 180ms; }

/* Page content fades and lifts */
::view-transition-old(root) {
  animation: 240ms cubic-bezier(.4,0,1,1) both wc-leave;
}
::view-transition-new(root) {
  animation: 300ms cubic-bezier(0,.8,.4,1) both wc-enter;
}
@keyframes wc-leave {
  to { opacity: 0; transform: translateY(6px) scale(.985); }
}
@keyframes wc-enter {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
}

/* Legacy fallback: used by motion-init.js when VT API unavailable */
body.wc-leaving {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

/* Named transition elements */
.bottom-nav   { view-transition-name: bottom-nav; }
.wordmark     { view-transition-name: wordmark; }

/* ── Skeleton loaders ── */
@keyframes sk-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.sk {
  background: linear-gradient(90deg,
    #F0E8DB 0%,
    #E8D9C4 35%,
    #F2EAE0 65%,
    #F7F0E6 100%
  );
  background-size: 400% 100%;
  animation: sk-shimmer 1.8s ease infinite;
  border-radius: 8px;
  display: block;
}
.sk-h12  { height: 12px; }
.sk-h14  { height: 14px; }
.sk-h18  { height: 18px; }
.sk-h24  { height: 24px; }
.sk-h40  { height: 40px; }
.sk-h80  { height: 80px; }
.sk-h120 { height: 120px; }
.sk-round{ border-radius: 999px; }
.sk-card { border-radius: 24px; }
.sk-w30  { width: 30%; }
.sk-w35  { width: 35%; }
.sk-w40  { width: 40%; }
.sk-w45  { width: 45%; }
.sk-w50  { width: 50%; }
.sk-w65  { width: 65%; }
.sk-w80  { width: 80%; }
.sk-w100 { width: 100%; }

/* Skeleton wrapper */
.skeleton-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: rgba(247,240,230,.6);
  border-radius: 24px;
  border: 1px solid rgba(226,213,195,.5);
  margin-bottom: 14px;
}

/* ── Floating card effect ── */
/* Hover: desktop only (mouse) */
@media (hover: hover) and (pointer: fine) {
  .float-card {
    transition: transform 380ms cubic-bezier(.34,1.56,.64,1),
                box-shadow  380ms ease;
    will-change: transform;
  }
  .float-card:hover {
    transform: translateY(-5px);
    box-shadow:
      0 20px 60px rgba(44,33,23,.12),
      0  6px 16px rgba(44,33,23,.06);
  }
}

/* Press state on all devices */
.float-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.float-card:active {
  transform: scale(.975) translateY(-1px) !important;
  transition: transform 90ms ease !important;
}

/* ── Ripple on tap ── */
.ripple-wrap {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
@keyframes ripple-burst {
  from { transform: translate(-50%,-50%) scale(0); opacity: .5; }
  to   { transform: translate(-50%,-50%) scale(3.5); opacity: 0; }
}
.ripple-dot {
  position: absolute;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(201,168,76,.22);
  pointer-events: none;
  animation: ripple-burst 520ms ease-out forwards;
  z-index: 0;
}

/* ── Touch targets ── */
.touch-lg { min-height: 44px; min-width: 44px; }
.touch-xl { min-height: 52px; min-width: 52px; }

/* ── Stagger entrance animations ── */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: none;
}
[data-stagger].wc-animated > * {
  animation: wc-stagger-in .44s cubic-bezier(.34,1.56,.64,1) both;
}
[data-stagger].wc-animated > *:nth-child(1) { animation-delay: .04s; }
[data-stagger].wc-animated > *:nth-child(2) { animation-delay: .10s; }
[data-stagger].wc-animated > *:nth-child(3) { animation-delay: .16s; }
[data-stagger].wc-animated > *:nth-child(4) { animation-delay: .22s; }
[data-stagger].wc-animated > *:nth-child(5) { animation-delay: .28s; }
[data-stagger].wc-animated > *:nth-child(6) { animation-delay: .33s; }
[data-stagger].wc-animated > *:nth-child(n+7){ animation-delay: .37s; }
@keyframes wc-stagger-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Micro: pulse glow ── */
@keyframes wc-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,.28); }
  50%      { box-shadow: 0 0 0 10px rgba(201,168,76,.0); }
}
.wc-pulse { animation: wc-pulse 2.6s ease-in-out infinite; }

/* ── Enhanced glassmorphism ── */
.glass {
  background: rgba(253,250,246,.72);
  backdrop-filter: blur(36px) saturate(1.5) brightness(1.02);
  -webkit-backdrop-filter: blur(36px) saturate(1.5) brightness(1.02);
  border: 1px solid rgba(255,255,255,.52);
}
.glass-warm {
  background: linear-gradient(135deg,
    rgba(255,252,248,.28) 0%,
    rgba(237,224,203,.20) 100%
  );
  backdrop-filter: blur(44px) saturate(1.4);
  -webkit-backdrop-filter: blur(44px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow:
    0 2px 0 rgba(255,255,255,.6) inset,
    0 20px 60px rgba(44,33,23,.09);
}

/* ── Subtle ambient gradients ── */
.grad-page {
  background: linear-gradient(168deg,
    #FDFAF6 0%,
    #F7F0E6 55%,
    #EDE0CB 100%
  );
}

/* ── Nav item as link ── */
a.nav-item {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* ══════════════════════════════════════════
   RESPONSIVE — Tablet & Desktop
══════════════════════════════════════════ */

/* ── Sidebar: hidden on mobile/tablet ── */
.wc-sidebar { display: none; }

/* ── Tablet (600px – 1023px): wider phone frame ── */
@media (min-width: 600px) and (max-width: 1023px) {
  body {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    background: #E8E2D8 !important;
    padding: 32px 16px !important;
    min-height: 100dvh;
  }
  .shell {
    max-width: 600px !important;
    border-radius: 40px !important;
    box-shadow:
      0 32px 80px rgba(44,33,23,.18),
      0 0 0 1px rgba(255,255,255,.6) !important;
    overflow: hidden !important;
    min-height: min(860px, 90dvh) !important;
    max-height: none !important;
  }
  .ambient {
    border-radius: 40px !important;
    max-width: 600px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 600px !important;
  }
}

/* ── Desktop (1024px+): sidebar + full layout ── */
@media (min-width: 1024px) {

  /* Page background */
  body {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    background: #E8E2D8 !important;
    padding: 0 !important;
    min-height: 100dvh;
  }

  /* ── Sidebar ── */
  .wc-sidebar {
    display: flex;
    flex-direction: column;
    width: 260px;
    flex-shrink: 0;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    background: rgba(253,250,246,.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid rgba(226,213,195,.7);
    padding: 36px 20px 28px;
    z-index: 200;
  }

  .wc-sb-brand {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(226,213,195,.6);
    margin-bottom: 28px;
  }
  .wc-sb-ring {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(145deg,#F7F0E6,#EDE0CB);
    border: 1px solid rgba(226,213,195,.8);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(44,33,23,.08);
  }
  .wc-sb-wordmark {
    font-family: 'Great Vibes', cursive;
    font-size: 20px;
    color: #2C2117;
    line-height: 1.15;
  }
  .wc-sb-tagline {
    font-size: 10px;
    font-weight: 300;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9E8E7E;
    margin-top: 4px;
  }

  /* Countdown pill */
  .wc-sb-countdown {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg,rgba(201,168,76,.1),rgba(201,168,76,.06));
    border: 1px solid rgba(201,168,76,.22);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 28px;
  }
  .wc-sb-cd-num {
    font-family: 'Cormorant', serif;
    font-size: 32px;
    font-weight: 300;
    color: #8B6B1A;
    line-height: 1;
  }
  .wc-sb-cd-lbl {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9E8E7E;
  }

  /* Nav links */
  .wc-sb-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .wc-sb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    text-decoration: none;
    color: #6B5B47;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
    transition: background 180ms ease, color 180ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .wc-sb-item:hover {
    background: rgba(237,224,203,.55);
    color: #2C2117;
  }
  .wc-sb-item.active {
    background: rgba(201,168,76,.13);
    color: #8B6B1A;
  }
  .wc-sb-item svg { opacity: .65; transition: opacity 180ms ease; }
  .wc-sb-item:hover svg { opacity: .9; }
  .wc-sb-item.active svg { opacity: 1; stroke: #8B6B1A; }

  /* Footer / sign out */
  .wc-sb-footer {
    border-top: 1px solid rgba(226,213,195,.6);
    padding-top: 20px;
  }
  .wc-sb-signout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border-radius: 14px;
    border: none;
    background: transparent;
    color: #9E8E7E;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
  }
  .wc-sb-signout:hover {
    background: rgba(192,57,43,.07);
    color: #C0392B;
  }

  /* Shell: override per-page phone-frame rules */
  .shell {
    margin-left: 260px !important;
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 100dvh !important;
    max-height: none !important;
    flex: 1 !important;
    overflow-x: hidden !important;
  }

  /* Ambient fills the right panel */
  .ambient {
    left: 260px !important;
    width: calc(100vw - 260px) !important;
    transform: none !important;
    border-radius: 0 !important;
    max-width: none !important;
  }

  /* Content: cap width, center in the wider panel */
  .content {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  /* Hide bottom nav */
  .bottom-nav { display: none !important; }
}

/* ── Accessibility: reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root)    { animation: none !important; }
  ::view-transition-old(bottom-nav),
  ::view-transition-new(bottom-nav) { animation: none !important; }
  [data-stagger] > *             { opacity: 1; transform: none; }
  [data-stagger].wc-animated > * { animation: none; }
  .float-card:hover              { transform: none !important; }
  .float-card:active             { transform: none !important; }
  .sk                            { animation: none; background: #EDE0CB; }
  .wc-pulse                      { animation: none; }
}

/* ── GPU hints ── */
.gpu { transform: translateZ(0); will-change: transform; }
.orb { will-change: transform; }