/**
 * chitralekha-motion.css — premium motion & polish layer
 *
 * Refined luxury-retail motion: soft entrances, scroll reveals, micro-
 * interactions. transform/opacity only (no layout properties), fully
 * disabled under prefers-reduced-motion, zero layout shift:
 *  - Hero entrance is pure CSS (works without JS, ends fully visible).
 *  - Scroll-reveal hidden states apply ONLY under html.cl-motion, which
 *    chitralekha-motion.js adds only when motion is allowed — no JS, no hiding.
 * Also contains the global logo-integrity rules (aspect ratio never forced).
 */

/* ════════════════════════════════════════════════════════════════════
   1. LOGO INTEGRITY — never stretch, squash, or crop a logo
   ════════════════════════════════════════════════════════════════════ */

/* Header / nav logos (overrides per-page inline CSS like `.logo img{height:38px}`
   which squashed the 2.16:1 logo against its width attribute) */
.nav-logo img,
.nav .logo img,
nav .logo img {
  width: clamp(118px, 16vw, 148px) !important;
  height: auto !important;
  max-height: 56px;
  object-fit: contain;
  object-position: left center;
  display: block;
  flex-shrink: 0;
}

/* Footer logos */
.footer img:first-child,
.footer-grid > div:first-child > img,
footer .footer-logo img {
  width: auto !important;
  height: auto !important;
  max-width: 160px;
  max-height: 44px;
  object-fit: contain;
  display: block;
}

/* Brand / partner / association logos — aspect-ratio-safe containers */
.brand-logo-item img,
.assoc-card img,
.brand-card img,
.partner-logo img,
.brand-logo img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Generic safety: any image inside an element flagged as a logo box */
[class*="logo"] img { object-fit: contain; }

/* Facade/store imagery may contain signage — keep cover but never upscale-blur */
.sc-img-panel, .sc-img { object-position: center 40%; }

/* ════════════════════════════════════════════════════════════════════
   2. HERO ENTRANCE — pure CSS, premium stagger (no JS dependency)
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  @keyframes clFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes clHeroZoom {
    from { transform: scale(1.045); }
    to   { transform: none; }
  }

  /* Title block stagger (covers both homepage hero and seo-page hero) */
  .hero .hero-eye, .hero .eyebrow      { animation: clFadeUp .7s cubic-bezier(.22,.61,.36,1) .10s both; }
  .hero h1                             { animation: clFadeUp .8s cubic-bezier(.22,.61,.36,1) .22s both; }
  .hero .hero-sub, .hero .sub          { animation: clFadeUp .8s cubic-bezier(.22,.61,.36,1) .38s both; }
  .hero .btns, .hero .hero-stats       { animation: clFadeUp .8s cubic-bezier(.22,.61,.36,1) .52s both; }

  /* Gentle settle of hero imagery — transform only, GPU composited */
  .hero .hero-bg, .hero-reel           { animation: clHeroZoom 2.2s cubic-bezier(.22,.61,.36,1) both; }

  /* Chat button: one soft pulse for first-time visitors (class set by JS once) */
  @keyframes clPulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,.25); }
    50%      { box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 0 0 10px rgba(184,156,110,.18); }
  }
  .cl-chat-btn.cl-pulse-once { animation: clPulse 2.4s ease-in-out 2; }
}

/* ════════════════════════════════════════════════════════════════════
   3. SCROLL REVEALS — hidden state only under html.cl-motion (JS-gated)
   ════════════════════════════════════════════════════════════════════ */
html.cl-motion .cl-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--cl-delay, 0ms);
  will-change: opacity, transform;
}
html.cl-motion .cl-reveal.cl-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ════════════════════════════════════════════════════════════════════
   4. MICRO-INTERACTIONS — buttons & cards (hover devices), tap feedback
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  .btn, .sc-btn, .offer-cta, .banner-btn, .nav-shop, .cl-form-submit, .cl-qr-btn {
    transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease,
                background-color .25s ease, border-color .25s ease, color .25s ease;
  }

  @media (hover: hover) {
    .btn:hover, .sc-btn:hover, .offer-cta:hover, .banner-btn:hover, .nav-shop:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(24, 24, 21, .12);
    }
    /* Subtle gold border-glow on primary CTAs — no loud shimmer */
    .btn.gold:hover, .btn-gold:hover, .offer-cta:hover {
      box-shadow: 0 8px 22px rgba(184, 156, 110, .32);
    }

    /* Cards lift gently; imagery zooms very subtly */
    .card, .sc, .assoc-card, .news-item, .news-feat, .gi {
      transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
    }
    .card:hover, .sc:hover, .assoc-card:hover, .news-item:hover, .news-feat:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 36px rgba(24, 24, 21, .10);
      border-color: var(--gold, #b89c6e);
    }
    .sc-img-panel, .sc-img, .gi-img img, .news-feat-img {
      transition: transform .6s cubic-bezier(.22,.61,.36,1);
    }
    .sc:hover .sc-img-panel.on, .sc:hover > .sc-img,
    .gi:hover .gi-img img, .news-feat:hover .news-feat-img {
      transform: scale(1.03);
    }
    /* Brand strip logos respond without distortion */
    .brand-logo-item img { transition: transform .3s ease; }
    .brand-logo-item:hover img { transform: scale(1.06); }
  }

  /* Tactile press feedback everywhere (touch + mouse) */
  .btn:active, .sc-btn:active, .offer-cta:active, .banner-btn:active,
  .cl-form-submit:active, .cl-qr-btn:active, .cl-quickbar a:active, .cl-quickbar button:active {
    transform: scale(.97);
    transition-duration: .1s;
  }

  /* Chat panel: smooth open/close (panel is display-toggled by class) */
  .cl-chat-panel {
    transition: opacity .28s cubic-bezier(.22,.61,.36,1), transform .28s cubic-bezier(.22,.61,.36,1);
  }
  .cl-chat-panel:not(.cl-chat--visible) { opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none; }
  .cl-chat-panel.cl-chat--visible       { opacity: 1; transform: none; }

  /* FAQ <details>: content eases in when opened */
  @keyframes clFaqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  details[open] > *:not(summary) { animation: clFaqIn .35s ease both; }
  details summary { transition: color .2s ease; cursor: pointer; }
}

/* ════════════════════════════════════════════════════════════════════
   5. SKELETON LOADING — dynamic sections while JSON loads
   ════════════════════════════════════════════════════════════════════ */
.cl-skeleton {
  min-height: 180px;
  border-radius: 10px;
  background: linear-gradient(100deg, #efece4 38%, #f7f4ee 50%, #efece4 62%);
  background-size: 220% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .cl-skeleton { animation: clShimmer 1.4s linear infinite; }
  @keyframes clShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
}

/* ════════════════════════════════════════════════════════════════════
   6. MOBILE QUICK ACTIONS BAR (≤767px) — Call · WhatsApp/Stores · Directions · Chat
   ════════════════════════════════════════════════════════════════════ */
.cl-quickbar { display: none; }

@media (max-width: 767px) {
  body.cl-has-quickbar .cl-quickbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9990;
    background: rgba(20, 20, 16, .97);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(184, 156, 110, .35);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .cl-quickbar a, .cl-quickbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 52px;
    background: none; border: 0; cursor: pointer;
    color: #e9e2d4; text-decoration: none;
    font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
    font-family: inherit;
  }
  .cl-quickbar .cl-qb-ico { font-size: 19px; line-height: 1; }
  .cl-quickbar .cl-qb-open  { color: #7ed09a; }
  .cl-quickbar .cl-qb-closed{ color: #e7a1a1; }

  /* Quickbar replaces the floating chat button on phones */
  body.cl-has-quickbar .cl-chat-btn { display: none !important; }
  body.cl-has-quickbar .cl-chat-panel {
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    max-height: 72svh !important;
  }
  /* Content never hides behind the bar */
  body.cl-has-quickbar { padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
}

/* ════════════════════════════════════════════════════════════════════
   7. PAGE TRANSITION — gentle fade between internal pages (JS-gated)
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  html.cl-motion body { transition: opacity .16s ease; }
  html.cl-leaving body { opacity: 0; }
}