/* Cabinet Grotesk (OTF) */
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/CabinetGrotesk-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/CabinetGrotesk-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/CabinetGrotesk-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/CabinetGrotesk-Extrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/CabinetGrotesk-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

html { 
  font-family: "Cabinet Grotesk", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* ========== FADES (unchanged) ========== */
.fade-in{ opacity:0; transform:translateY(50px); transition:opacity .7s ease-out, transform .7s ease-out; }
.fade-in.visible{ opacity:1; transform:translateY(0); }
.fade-left{ opacity:0; transform:translateX(-30%); transition:opacity .7s ease-out, transform .7s ease-out; }
.fade-right{ opacity:0; transform:translateX(30%);  transition:opacity .7s ease-out, transform .7s ease-out; }
.fade-left.visible, .fade-right.visible{ opacity:1; transform:translateX(0); }

/* ========== IG SCROLLER (your old, working recipe + small boosts) ========== */


.ig-scroll {
  -ms-overflow-style: none;     /* IE/Edge */
  scrollbar-width: none;        /* Firefox */
  padding-left: 1rem; /* so first card is indented */
}
.ig-card:last-child { margin-right: 2rem; }

.ig-scroll::-webkit-scrollbar { display: none; }

/* cards & images */
.ig-card {
  flex: 0 0 auto;                 /* don’t shrink */
  width: clamp(240px, 28vw, 360px);
  aspect-ratio: 1 / 1;            /* square tiles; change to 4/5 if you prefer */
  border-radius: 0;               /* match your style */
  overflow: hidden;
  snap-align: start;
}
.ig-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
  pointer-events: none;
}

.ig-card, .ig-img { 
  user-select: none;
  -webkit-user-drag: none;
}
.ig-card:hover .ig-img { transform: scale(1.03); }

.no-snap { scroll-snap-type: none !important; } 
.cursor-grabbing { cursor: grabbing; cursor: -webkit-grabbing; } 

/* slow spin + glow */
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes pulse-glow {
  0%,100% { transform: scale(1);   box-shadow: 0 0 18px 4px rgba(39,227,156,.35); }
  50%     { transform: scale(1.15); box-shadow: 0 0 30px 8px rgba(39,227,156,.55); }
}
.animate-spin-slow { animation: spin-slow 1.4s linear infinite; }
.animate-pulse-glow { animation: pulse-glow 1.6s ease-in-out infinite; }

/* shimmer bar */
@keyframes shimmer-move { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.shimmer{
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%,
                                      rgba(255,255,255,.65) 50%,
                                      rgba(255,255,255,0) 100%);
  filter: blur(2px);
  animation: shimmer-move 1.1s ease-in-out infinite;
}

/* ambient blobs */
.blob{
  position:absolute; border-radius:9999px; filter: blur(40px); opacity:.45;
  transform: translate(-50%, -50%);
  animation: blob-morph 14s ease-in-out infinite alternate;
}
.blob-1{ width:38vw; height:38vw; left:12%; top:18%; background:#1f7a50; opacity:.35; animation-duration: 18s; }
.blob-2{ width:28vw; height:28vw; left:82%; top:22%; background:#295f3d; opacity:.28; animation-duration: 16s; }
.blob-3{ width:50vw; height:50vw; left:55%; top:80%; background:#0d3b2a; opacity:.22; animation-duration: 20s; }

@keyframes blob-morph {
  0%   { border-radius: 42% 58% 65% 35% / 47% 41% 59% 53%; transform: translate(-50%,-50%) scale(1); }
  100% { border-radius: 62% 38% 35% 65% / 37% 61% 39% 63%; transform: translate(-50%,-50%) scale(1.08); }
}

/* soft noise & vignette for depth */
.noise{
  position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend:soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.vignette{
  position:absolute; inset:-10%; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%);
}

/* reduced motion: flatten everything */
@media (prefers-reduced-motion: reduce){
  .blob, .shimmer, .animate-spin-slow, .animate-pulse-glow { animation: none !important; }
  .blob { display:none; }
}