/* ========================================================
   MY WIFE PHOTOPACK GALLERY - CUSTOM STYLES
   Neo-Brutalist Aesthetic, Animations & Carousel System
   Fully Responsive for All Devices (Mobile, Tablet, Desktop)
   ======================================================== */

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100%;
  position: relative;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: #fdf6f9;
  background-image: 
    linear-gradient(to right, rgba(230, 0, 126, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230, 0, 126, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  color: #121214;
  -webkit-tap-highlight-color: transparent;
  /* Add safe-area padding for mobile floating bottom bar */
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  body {
    padding-bottom: 0;
  }
}

.brutal-border {
  border: 2.5px solid #121214;
}

.brutal-border-3 {
  border: 3px solid #121214;
}

.brutal-btn {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
.brutal-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #121214;
}
.brutal-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px #121214;
}

/* Marquee Running Ticker */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 22s linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}

/* Carousel Track & Touch */
.carousel-track {
  display: flex;
  transition: transform 0.26s cubic-bezier(0.25, 1, 0.5, 1);
  user-select: none;
  touch-action: pan-y;
  -webkit-user-drag: none;
}

.post-card-item:hover .carousel-track,
.post-card-item:active .carousel-track {
  will-change: transform;
}

.post-card-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
  contain: layout style paint;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #fce7f3;
  border-left: 2px solid #121214;
}
::-webkit-scrollbar-thumb {
  background: #e6007e;
  border: 2px solid #121214;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #c20063;
}

/* Hide horizontal scrollbar in pills container with smooth touch momentum */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}

/* Double-tap Instagram Heart Burst */
@keyframes heartBurst {
  0% { transform: scale(0) rotate(-15deg); opacity: 0; }
  50% { transform: scale(1.35) rotate(0deg); opacity: 0.95; }
  80% { transform: scale(1.1) rotate(5deg); opacity: 0.9; }
  100% { transform: scale(0.9) rotate(0deg); opacity: 0; }
}
.heart-burst {
  animation: heartBurst 0.85s ease-out forwards;
}

/* Mobile specific touch friendliness */
@media (max-width: 640px) {
  .brutal-btn:active {
    transform: scale(0.97);
  }
}