/* Falah Enterprises - custom styles complementing Tailwind */

.product-scroller {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #C9A227 #f1ede3;
}
.product-scroller::-webkit-scrollbar { height: 6px; }
.product-scroller::-webkit-scrollbar-track { background: #f1ede3; border-radius: 3px; }
.product-scroller::-webkit-scrollbar-thumb { background: #C9A227; border-radius: 3px; }

/* Scroll-reveal: smoother easing + directional variants + per-item stagger (--rd) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); transition-delay: var(--rd, 0ms); will-change: opacity, transform; }
.reveal-left  { transform: translateX(-26px); }
.reveal-right { transform: translateX(26px); }
.reveal-scale { transform: scale(.94); }
.reveal-active { opacity: 1; transform: none; }

details summary::-webkit-details-marker { display: none; }

/* Logo-as-rising-sun in the hero */
.hero-sun {
  position: relative;
  display: inline-block;
  /* nudge right so it sits over the sun glow in the valley */
  transform: translateX(10%);
  animation: heroSunRise 7s ease-in-out infinite;
}
@media (min-width: 768px) { .hero-sun { transform: translateX(20%); } }
/* soft golden halo */
.hero-sun::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 320%; height: 320%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(246, 227, 168, 0.55) 0%,
    rgba(231, 196, 99, 0.30) 32%,
    rgba(201, 162, 39, 0.12) 55%,
    transparent 72%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  animation: heroSunGlow 6s ease-in-out infinite;
}
/* sun rays */
.hero-sun::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 260%; height: 260%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg,
    rgba(246, 227, 168, 0.22) 0deg 3deg,
    transparent 3deg 18deg);
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 40%, #000 46%, transparent 72%);
  mask: radial-gradient(circle, transparent 40%, #000 46%, transparent 72%);
  z-index: 0;
  pointer-events: none;
  animation: heroSunSpin 60s linear infinite;
}
.hero-sun-img {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 36px 6px rgba(246, 227, 168, 0.45),
              0 0 90px 24px rgba(201, 162, 39, 0.28);
  border: 2px solid rgba(248, 236, 192, 0.65);
}
@keyframes heroSunGlow { 0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)} }
@keyframes heroSunSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes heroSunRise { 0%,100%{ translate:0 0 } 50%{ translate:0 -6px } }
@media (prefers-reduced-motion: reduce) {
  .hero-sun, .hero-sun::before, .hero-sun::after { animation: none; }
}

.hero-pattern {
  background-color: #14331d;
  background-image:
    linear-gradient(rgba(16, 42, 24, 0.72), rgba(15, 42, 24, 0.55) 45%, rgba(20, 51, 29, 0.78)),
    url('../images/hero-bg.svg');
  background-size: cover, cover;
  background-position: center, center bottom;
  background-repeat: no-repeat, no-repeat;
}

/* prose styling for guidance/blog content */
.content-prose p { margin-bottom: 1rem; line-height: 1.75; }
.content-prose ul { list-style: disc; margin: 0 0 1rem 1.25rem; }
.content-prose li { margin-bottom: .35rem; }

/* Urdu (RTL) mode */
.lang-ur .content-prose, .lang-ur .ur-text,
.lang-ur article h1, .lang-ur article h2, .lang-ur article p, .lang-ur article li {
  font-family: 'Noto Nastaliq Urdu', 'Montserrat', serif;
  line-height: 2.1;
}
.lang-ur article, .lang-ur .ur-rtl { direction: rtl; text-align: right; }

/* Blog/article images rendered from markdown */
.content-prose img { max-width: 100%; height: auto; display: block; margin: 1.5rem auto; border-radius: 14px; box-shadow: 0 6px 24px rgba(15,42,24,0.12); }
.content-prose h2 { font-family: 'Cinzel', serif; color: #1F4D2B; font-size: 1.4rem; margin: 1.8rem 0 .6rem; }
.content-prose a { color: #1F4D2B; font-weight: 600; text-decoration: underline; }

/* ============================================================
   Subtle site-wide micro-interactions (tasteful, professional)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* gentle lift on cards/links */
  .card-hover { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
  .card-hover:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -22px rgba(15,42,24,.40); }

  /* image zoom inside a clipped frame */
  .img-zoom { overflow: hidden; }
  .img-zoom img { transition: transform .7s cubic-bezier(.2,.8,.2,1); will-change: transform; }
  .img-zoom:hover img,
  .card-hover:hover .img-zoom img { transform: scale(1.06); }

  /* buttons: feather + press */
  a[class*="rounded"], button { transition: transform .18s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease; }
  .btn-press:active, a[class*="bg-accent"]:active, a[class*="bg-primary"]:active, button:active { transform: scale(.97); }

  /* animated underline for inline links */
  .link-underline { position: relative; }
  .link-underline::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background: currentColor; transition: width .35s cubic-bezier(.2,.8,.2,1); }
  .link-underline:hover::after { width:100%; }
}

/* Respect reduced-motion for the reveal system too */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
}