/* ═══════════════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #070B15;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  font-family: Inter, system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════════════════
   AMBIENT BACKGROUND  (desktop only — hidden on mobile)
   ─────────────────────────────────────────────────────────
   Shows the current card's image blurred behind the phone
   frame on desktop. Hidden on mobile — no wasted GPU layer.
   Never animate filter/blur. Only opacity can transition.
═══════════════════════════════════════════════════════════ */
.ambient-bg {
  display: none; /* mobile: off */
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; background: transparent;
}
.ambient-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(44px) brightness(0.20) saturate(0.6);
  transform: scale(1.1); /* hide blur edge artifacts */
  will-change: auto;     /* NEVER will-change on large images */
}
@media (min-width: 600px) {
  .ambient-bg { display: block; }
}

/* ═══════════════════════════════════════════════════════════
   REEL WRAPPER  — centers the phone frame on desktop
═══════════════════════════════════════════════════════════ */
.reel-wrap {
  position: fixed; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   PHONE CONTAINER
   ─────────────────────────────────────────────────────────
   Mobile:  full viewport (100% × 100dvh).
   Desktop: phone-like frame (≤420px × ≤900px) centered on
            screen with a subtle border + shadow.
   overflow: hidden clips the scroll feed and overlays.
═══════════════════════════════════════════════════════════ */
.reel-inner {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: transparent;
}
@supports not (height: 100dvh) {
  .reel-inner { height: 100vh; }
}
@media (min-width: 600px) {
  .reel-inner {
    width: min(420px, 100vw);
    height: min(100dvh, 900px);
    border-radius: 22px;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.07),
      0 32px 96px rgba(0,0,0,0.85);
  }
}

/* ═══════════════════════════════════════════════════════════
   CONTROLLED FEED PAGER  (absolute inside reel-inner)
   ─────────────────────────────────────────────────────────
   FeedPagerEngine owns movement, gestures and the small
   virtual DOM window. Native momentum is intentionally disabled.
═══════════════════════════════════════════════════════════ */
#geo-feed {
  position: absolute; inset: 0;
  overflow: hidden;
  overscroll-behavior-y: contain;
  touch-action: none;
  scrollbar-width: none;
}
#geo-feed::-webkit-scrollbar { display: none; }
.geo-feed-track {
  position: absolute;
  inset: 0;
  overflow: visible;
  contain: layout paint style;
}
.geo-feed-track.is-instant .geo-card {
  transition: none !important;
}

/* ═══════════════════════════════════════════════════════════
   REEL CARD  (height: 100% = height of #geo-feed = reel-inner)
═══════════════════════════════════════════════════════════ */
.geo-card {
  width: 100%; height: 100%;
  position: absolute;
  inset: 0;
  transition: transform 430ms cubic-bezier(.22,.9,.22,1);
  will-change: transform;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 18%, rgba(106, 69, 255, 0.34), transparent 34%),
    radial-gradient(circle at 74% 74%, rgba(29, 155, 240, 0.18), transparent 44%),
    linear-gradient(145deg, #050815 0%, #101532 52%, #070916 100%);
}

.geo-loading-card {
  background: transparent;
}
.geo-loading-stars {
  display: none;
}
.geo-loading-glow {
  display: none;
}
.geo-loading-content {
  top: 0;
  bottom: 0;
  padding: max(68px, env(safe-area-inset-top, 68px)) 28px max(52px, env(safe-area-inset-bottom, 52px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.geo-loading-content .geo-pill {
  margin-bottom: 16px;
}
.geo-loading-content .geo-title {
  font-size: clamp(34px, 9vw, 46px);
  max-width: 320px;
}
.geo-loading-content .geo-rule {
  margin-left: auto;
  margin-right: auto;
}
.geo-loading-content .geo-fact {
  max-width: 318px;
  font-size: 12.6px;
  line-height: 1.62;
  color: rgba(255,255,255,.72);
}
.geo-loading-icon {
  width: 78px;
  height: 78px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 20px 56px rgba(0,0,0,.38),
    0 0 38px rgba(16,185,129,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.geo-loading-icon img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  display: block;
}
.geo-loading-bar {
  width: min(240px, 72vw);
  height: 7px;
  margin-top: 24px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.24);
}
.geo-loading-fill {
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #10b981, #34d399, #86efac);
  box-shadow: 0 0 24px rgba(52,211,153,.38);
  animation: geoLoadingFill 1.55s ease-in-out infinite;
}
@keyframes geoLoadingFill {
  0% { transform: translateX(-120%) scaleX(.65); }
  45% { transform: translateX(78%) scaleX(1.2); }
  100% { transform: translateX(260%) scaleX(.65); }
}

/* ═══════════════════════════════════════════════════════════
   BACKGROUND IMAGE
   ─────────────────────────────────────────────────────────
   will-change: auto — never promote a full-bleed image.
   object-position: center 30% — keeps horizon visible.
═══════════════════════════════════════════════════════════ */
.geo-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  will-change: auto;
  display: block;
  opacity: 0;
  transition: opacity 220ms ease;
}
.geo-card.image-ready .geo-bg {
  opacity: 1;
}
.geo-card.image-failed .geo-bg {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   GRADIENT SCRIMS  (static, never animated)
═══════════════════════════════════════════════════════════ */
.geo-scrim-b {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.58) 28%,
    rgba(0,0,0,0.15) 56%,
    transparent      100%
  );
}
.geo-scrim-t {
  position: absolute; top: 0; left: 0; right: 0;
  height: 140px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.50) 0%, transparent 100%);
}

/* ═══════════════════════════════════════════════════════════
   TOPBAR  (absolute inside reel-inner — never scrolls)
   Shared across all cards. Only rendered once.
═══════════════════════════════════════════════════════════ */
.geo-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top, 18px)) 18px 0;
  pointer-events: none;
}
.geo-topbar > * { pointer-events: auto; }

.geo-back {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: background .2s ease, transform .15s ease;
}
.geo-back:active { transform: scale(0.88); background: rgba(0,0,0,0.52); }

.geo-brand {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

/* Debug counter: only visible when DEBUG = true */
.geo-debug {
  font-size: 10px; font-weight: 300;
  color: rgba(255, 220, 80, 0.75);
  background: rgba(0,0,0,0.45);
  padding: 2px 7px; border-radius: 4px;
  min-width: 40px; text-align: right;
}
.geo-spacer { min-width: 40px; } /* balances layout when debug off */

/* ═══════════════════════════════════════════════════════════
   RIGHT ACTION RAIL  (absolute inside reel-inner)
   ─────────────────────────────────────────────────────────
   Like / Save / Share — calm, not noisy.
   State classes (.liked, .saved) transition via CSS,
   no JS animation library needed.
═══════════════════════════════════════════════════════════ */
.reel-actions {
  position: absolute;
  right: 12px;
  bottom: max(96px, env(safe-area-inset-bottom, 96px));
  z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}

.action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: none; padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
.action-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.88);
  transition:
    background  .22s ease,
    border-color .22s ease,
    color        .22s ease,
    transform    .15s ease;
}
.action-btn:active .action-icon { transform: scale(0.86); }

.action-btn.liked .action-icon {
  color: #ff5252;
  border-color: rgba(255, 82, 82, 0.32);
  background: rgba(255, 82, 82, 0.10);
}
.action-btn[aria-busy="true"] {
  pointer-events: none;
}
.action-btn.saved .action-icon {
  color: #ffd246;
  border-color: rgba(255, 210, 70, 0.32);
  background: rgba(255, 210, 70, 0.08);
}
.action-btn.globe .action-icon {
  color: #76e5ff;
  border-color: rgba(118, 229, 255, 0.34);
  background: rgba(30, 144, 255, 0.12);
  box-shadow: 0 0 18px rgba(76, 180, 255, 0.16);
}

.action-label {
  font-size: 10px; font-weight: 300;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.action-count {
  min-width: 24px;
  min-height: 13px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,.82);
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
   OVERLAY CONTENT  (contentMode: "overlay")
   ─────────────────────────────────────────────────────────
   right padding = 68px to clear the action rail.
   CSS stagger reveal via is-active class (same as before).
═══════════════════════════════════════════════════════════ */
.geo-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 0 76px max(36px, env(safe-area-inset-bottom, 36px)) 20px;
}

/* Shared transition base */
.geo-pill,
.geo-title,
.geo-rule,
.geo-fact {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0s;
}

/* Staggered entrance */
.geo-card.is-active .geo-pill   { opacity:1; transform:none; transition-delay: 0.04s; }
.geo-card.is-active .geo-title  { opacity:1; transform:none; transition-delay: 0.13s; }
.geo-card.is-active .geo-rule   { opacity:1; transform:none; transition-delay: 0.22s; }
.geo-card.is-active .geo-fact   { opacity:1; transform:none; transition-delay: 0.31s; }

.geo-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,0.58);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 100px;
  padding: 4px 11px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.05);
  margin-bottom: 14px;
}
.geo-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(38px, 10vw, 52px);
  font-weight: 300;
  color: #fff;
  line-height: 1.02; letter-spacing: -0.025em;
  margin: 0 0 11px;
}
.geo-rule {
  width: 22px; height: 1px;
  background: rgba(255,255,255,0.28);
  margin-bottom: 13px;
}
.geo-fact {
  font-size: 13.5px; font-weight: 300;
  color: rgba(255,255,255,0.74);
  line-height: 1.74;
  max-width: 300px;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   BAKED MODE PILL  (contentMode: "baked")
   Small category label only — text is already in the image.
═══════════════════════════════════════════════════════════ */
.geo-baked-pill {
  position: absolute;
  top: max(70px, env(safe-area-inset-top, 70px));
  left: 20px;
  font-size: 9px; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  padding: 3px 10px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ═══════════════════════════════════════════════════════════
   SWIPE HINT  (first card only)
═══════════════════════════════════════════════════════════ */
.geo-hint {
  position: absolute;
  bottom: max(76px, env(safe-area-inset-bottom, 76px));
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease;
  transition-delay: 0s;
}
.geo-card.is-active .geo-hint {
  opacity: 1;
  transition-delay: 1.4s;
}
.geo-hint-icon {
  color: rgba(255,255,255,0.38);
  animation: geoHintBounce 1.8s ease-in-out infinite;
}
.geo-hint-label {
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,0.26);
}
@keyframes geoHintBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* ═══════════════════════════════════════════════════════════
   SHARE TOAST
═══════════════════════════════════════════════════════════ */
.share-toast {
  position: fixed;
  bottom: max(28px, env(safe-area-inset-bottom, 28px));
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(18,18,18,0.88);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  padding: 8px 18px;
  font-size: 12px; font-weight: 300;
  color: rgba(255,255,255,0.80);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  z-index: 200;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.share-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   DEBUG DOTS  (hidden unless DEBUG = true)
   Moved inside reel-inner so they respect the phone frame.
═══════════════════════════════════════════════════════════ */
#geo-dots {
  display: none; /* JS sets flex when DEBUG=true */
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  flex-direction: column; gap: 7px;
  z-index: 40; pointer-events: none;
}
.geo-dot {
  border-radius: 100px;
  background: rgba(255,255,255,0.24);
  width: 2px; height: 5px;
  transition: height .38s cubic-bezier(0.4,0,0.2,1),
              width  .38s cubic-bezier(0.4,0,0.2,1),
              background .38s ease;
}
.geo-dot.is-active { background: rgba(255,255,255,0.86); height: 20px; width: 3px; }

/* ═══════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .geo-pill, .geo-title, .geo-rule, .geo-fact {
    transform: none !important;
    transition-property: opacity !important;
  }
  .geo-hint-icon { animation: none; }
  .geo-loading-fill { animation: none; transform: none; width: 88%; }
}