/* custom.css — font variable wiring + a few interaction rules.
   Everything visual (tokens, glass, utilities) comes from site.css, which is
   the exact compiled stylesheet of the original Next.js app. */

:root {
  --font-geist-sans: 'Geist';
  --font-geist-mono: 'Geist Mono';
  --font-hind-siliguri: 'Hind Siliguri';
}

/* ---------- scroll reveal (same feel as framer-motion Reveal) ---------- */
.reveal, .anim-rise, .anim-fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.21, 0.47, 0.32, 0.98), transform 0.65s cubic-bezier(0.21, 0.47, 0.32, 0.98);
}
.anim-fade { transform: none; }
.anim-fade.scale-in { transform: scale(0.8); }
.reveal.in-view, .anim-rise.in-view, .anim-fade.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------- animated skill bars ---------- */
.skill-bar { transition: width 1s ease-out; }

/* ---------- journey period digits ---------- */
[data-period] { white-space: nowrap; }

/* ---------- skill level slider (dashboard) ---------- */
input[type='range'].mss-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.5rem;
  background: transparent;
  cursor: pointer;
}
input[type='range'].mss-range::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--secondary);
}
input[type='range'].mss-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -0.25rem;
  height: 1rem;
  width: 1rem;
  border-radius: 9999px;
  border: 2px solid var(--primary);
  background: var(--background);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
input[type='range'].mss-range::-moz-range-track {
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--secondary);
}
input[type='range'].mss-range::-moz-range-thumb {
  height: 1rem;
  width: 1rem;
  border-radius: 9999px;
  border: 2px solid var(--primary);
  background: var(--background);
}

/* ---------- toasts (sonner-style, bottom-right) ---------- */
#toaster .toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  border-radius: 0.9rem;
  padding: 0.8rem 0.9rem;
  font-size: 0.875rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.3s cubic-bezier(0.21, 0.47, 0.32, 0.98);
  background: rgb(255 255 255 / 0.92);
  border: 1px solid rgb(255 255 255 / 0.7);
  box-shadow: 0 12px 40px rgb(31 41 55 / 0.12);
  backdrop-filter: blur(16px);
  color: var(--foreground);
}
.dark #toaster .toast {
  background: rgb(16 20 26 / 0.88);
  border-color: rgb(255 255 255 / 0.12);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.5);
}
#toaster .toast.shown { opacity: 1; transform: translateY(0); }
#toaster .toast .t-icon { flex-shrink: 0; margin-top: 1px; }
#toaster .toast.success .t-icon { color: oklch(0.72 0.19 149.6); }
#toaster .toast.error .t-icon { color: var(--destructive); }
#toaster .toast.info .t-icon { color: var(--primary); }
#toaster .toast .t-close {
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.5;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 2px;
  color: inherit;
}
#toaster .toast .t-close:hover { opacity: 1; }

/* lightbox image error fallback */
.img-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--secondary);
  color: var(--muted-foreground);
}

/* ---------- image skeletons + fast fade-in (same pulse feel as bg-accent animate-pulse) ---------- */
img.img-fade { transition: opacity 0.45s ease; }
img.img-pending { opacity: 0; }

.img-skel-host { position: relative; }
.img-skel-host::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--secondary);
  animation: mss-skel-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.img-skel-host > img { position: relative; z-index: 1; }
.img-skel-host.skel-done::before { display: none; }

@keyframes mss-skel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .img-skel-host::before { animation: none; }
}

/* ---------- hero animated photo (behind portrait, fades out before the name) ---------- */
.hero-photo-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(56vh, 540px);
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.9) 40%, transparent 89%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.9) 40%, transparent 89%);
}
.hero-photo-bg .hero-bg-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  opacity: 0;
  transition: opacity 1.2s ease;
  filter: saturate(1.06) brightness(1.02);
  will-change: transform, opacity;
}
.hero-photo-bg .hero-bg-slide.is-active {
  opacity: 0.95;
  animation: hero-photo-drift 26s ease-in-out infinite alternate;
}
@keyframes hero-photo-drift {
  0%   { transform: scale(1.03) translate3d(0, 0, 0); }
  50%  { transform: scale(1.11) translate3d(-1.6%, 1.2%, 0); }
  100% { transform: scale(1.07) translate3d(1.6%, -1%, 0); }
}
.dark .hero-photo-bg .hero-bg-slide { filter: saturate(1.05) brightness(0.82); }
@media (prefers-reduced-motion: reduce) {
  .hero-photo-bg .hero-bg-slide { transition: none; }
  .hero-photo-bg .hero-bg-slide.is-active { animation: none; }
}
/* mobile: content stacks taller — end the photo a bit higher, still before the name */
@media (max-width: 640px) {
  .hero-photo-bg {
    height: min(42vh, 380px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.88) 46%, transparent 92%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.88) 46%, transparent 92%);
  }
}

/* ---------- admin dashboard compatibility (utility classes the compiled CSS misses) ---------- */
.max-w-lg { max-width: 32rem; }
.max-w-3xl { max-width: 48rem; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
/* featured switch in the project form */
.data-\[state\=checked\]\:bg-primary[data-state="checked"] { background-color: var(--primary); }
.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] { background-color: var(--input); }
.dark .dark\:data-\[state\=unchecked\]\:bg-input\/80[data-state="unchecked"] { background-color: var(--input); }
.dark .dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"] { background-color: var(--foreground); }
.dark .dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"] { background-color: var(--primary-foreground); }
.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] { transform: translateX(calc(100% - 2px)); }
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] { transform: translateX(0); }
/* dialog open animation (fade + zoom) */
.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation: mss-dialog-in 0.2s ease-out both;
}
@keyframes mss-dialog-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* keep wheel scrolling inside the dashboard panel (no scroll-chaining to the page behind) */
#db-scroll { overscroll-behavior: contain; }