/*
 * chitralekha-ux.css
 * Premium UX Enhancement Layer — Chitralekha Group
 * Announcement Bar · Campaign Modal · FAB · Scroll Reveals
 * Hero Enhancement · Image Lightbox
 */

/* ══ Announcement Bar ════════════════════════════════════ */

 /* visible: slides down below nav */

/* ══ Campaign Modal ══════════════════════════════════════ */
.cl-modal-bg{
  position:fixed;inset:0;
  background:rgba(14,13,11,.8);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:998;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.cl-modal-bg.cl-modal--in{opacity:1;pointer-events:all}
.cl-modal{
  background:var(--dark,#141410);
  border:1px solid rgba(184,156,110,.2);
  border-radius:6px;padding:56px 48px 48px;
  max-width:460px;width:100%;
  position:relative;text-align:center;
  transform:translateY(20px) scale(.98);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.cl-modal-bg.cl-modal--in .cl-modal{transform:translateY(0) scale(1)}
.cl-modal-rule{
  width:36px;height:1px;
  background:rgba(184,156,110,.4);
  margin:0 auto 28px;
}
.cl-modal-close{
  position:absolute;top:18px;right:22px;
  background:none;border:none;color:rgba(255,255,255,.28);
  cursor:pointer;padding:6px;line-height:1;
  transition:color .2s;display:flex;align-items:center;
}
.cl-modal-close:hover{color:rgba(255,255,255,.7)}
.cl-modal-eye{
  font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(184,156,110,.5);margin-bottom:22px;
}
.cl-modal-h{
  font-family:var(--fd,'Cormorant Garamond',Georgia,serif);
  font-size:clamp(30px,5vw,44px);
  font-weight:300;color:#fff;
  line-height:1.08;margin-bottom:18px;
}
.cl-modal-h em{font-style:italic;color:var(--gold-l,#d4bb8c)}
.cl-modal-p{
  font-size:13px;color:rgba(255,255,255,.42);
  line-height:1.75;margin-bottom:34px;
  max-width:340px;margin-left:auto;margin-right:auto;
}
.cl-modal-btns{display:flex;flex-direction:column;gap:10px}
.cl-modal-btn-p,.cl-modal-btn-s{
  display:block;padding:13px 24px;border-radius:3px;
  font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s;
}
.cl-modal-btn-p{
  background:var(--gold,#b89c6e);
  color:var(--dark,#141410)!important;border:1px solid transparent;
}
.cl-modal-btn-p:hover{background:var(--gold-d,#8a6f43);color:#fff!important}
.cl-modal-btn-s{
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.55)!important;
}
.cl-modal-btn-s:hover{border-color:rgba(255,255,255,.38);color:#fff!important}
@media(max-width:480px){
  .cl-modal{padding:44px 24px 36px}
}

/* ══ FAB — Floating Action System ════════════════════════ */
.cl-fab-wrap{
  position:fixed;
  bottom:86px;   /* above btt button */
  right:28px;
  z-index:620;   /* above gallery filter bar (600) and nav (500); below lightboxes (9000+) */
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .32s ease;
}
.cl-fab-wrap.cl-fab--hidden{
  transform:translateY(64px);opacity:0;pointer-events:none;
}
/* Menu items */
.cl-fab-menu{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  pointer-events:none;
  opacity:0;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease;
}
.cl-fab-wrap.cl-fab--open .cl-fab-menu{
  opacity:1;transform:translateY(0);pointer-events:all;
}
.cl-fab-item{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--dark,#141410);
  border:1px solid rgba(184,156,110,.22);
  color:rgba(255,255,255,.65)!important;
  text-decoration:none;
  padding:9px 16px 9px 12px;
  border-radius:40px;
  font-size:11px;font-weight:500;letter-spacing:.06em;
  white-space:nowrap;
  transition:all .18s ease;
  box-shadow:0 2px 14px rgba(0,0,0,.3);
}
.cl-fab-item::after{
  content:attr(data-label);
  font-size:11px;letter-spacing:.06em;
  color:rgba(255,255,255,.55);
}
.cl-fab-item svg{
  width:15px;height:15px;flex-shrink:0;
  color:var(--gold,#b89c6e);
}
.cl-fab-item:hover{
  background:rgba(184,156,110,.1);
  border-color:rgba(184,156,110,.45);
  color:#fff!important;
  transform:translateX(-2px);
}
.cl-fab-item:hover::after{color:rgba(255,255,255,.85)}
/* Stagger delays on open */
.cl-fab-item:nth-child(5){transition-delay:.04s}
.cl-fab-item:nth-child(4){transition-delay:.07s}
.cl-fab-item:nth-child(3){transition-delay:.10s}
.cl-fab-item:nth-child(2){transition-delay:.13s}
.cl-fab-item:nth-child(1){transition-delay:.16s}
/* Toggle button */
.cl-fab-toggle{
  width:46px;height:46px;border-radius:50%;
  background:var(--dark,#141410);
  border:1px solid rgba(184,156,110,.38);
  color:var(--gold,#b89c6e);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;
  box-shadow:0 4px 22px rgba(0,0,0,.38);
  position:relative;flex-shrink:0;
}
.cl-fab-toggle:hover{
  background:rgba(184,156,110,.1);
  border-color:rgba(184,156,110,.65);
}
/* ── FAB icon centering (spans + SVGs perfectly centered) ── */
.cl-fab-ico-open,
.cl-fab-ico-close{
  position:absolute;
  top:50%;left:50%;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  transition:opacity .22s ease, transform .32s cubic-bezier(.4,0,.2,1);
}
.cl-fab-ico-open svg,
.cl-fab-ico-close svg{
  width:17px;height:17px;display:block;flex-shrink:0;
}
/* Closed state: + centered, × hidden+rotated */
.cl-fab-ico-open{opacity:1;transform:translate(-50%,-50%) rotate(0deg)}
.cl-fab-ico-close{opacity:0;transform:translate(-50%,-50%) rotate(45deg)}
/* Open state: + rotates away, × rotates in */
.cl-fab-wrap.cl-fab--open .cl-fab-ico-open{opacity:0;transform:translate(-50%,-50%) rotate(45deg)}
.cl-fab-wrap.cl-fab--open .cl-fab-ico-close{opacity:1;transform:translate(-50%,-50%) rotate(0deg)}
@media(max-width:767px){
  .cl-fab-wrap{bottom:78px;right:16px}
  .cl-fab-toggle{width:42px;height:42px}
  .cl-fab-item{padding:8px 14px 8px 10px}
  .cl-fab-item::after{font-size:10px}
}
/* iOS safe area — prevents FAB hiding behind Safari bottom toolbar */
@supports(bottom:env(safe-area-inset-bottom)){
  .cl-fab-wrap{
    bottom:calc(86px + env(safe-area-inset-bottom,0px));
  }
  @media(max-width:767px){
    .cl-fab-wrap{
      bottom:calc(78px + env(safe-area-inset-bottom,0px));
    }
  }
}

/* ══ Hero Image Enhancement ══════════════════════════════ */
/* Gentle Ken Burns on hero reel images — no layout changes */
.hero-reel img{
  transform-origin:center center;
  will-change:transform;
}
.hero-reel img:nth-child(1){
  animation:cl-kb-a 14s ease-in-out infinite alternate;
}
.hero-reel img:nth-child(2){
  animation:cl-kb-b 18s ease-in-out infinite alternate;
}
.hero-reel img:nth-child(3){
  animation:cl-kb-a 16s ease-in-out infinite alternate-reverse;
}
@keyframes cl-kb-a{
  from{transform:scale(1)}
  to{transform:scale(1.05)}
}
@keyframes cl-kb-b{
  from{transform:scale(1.03) translateX(0)}
  to{transform:scale(1) translateX(1%)}
}

/* ══ Image Lightbox ══════════════════════════════════════ */
.cl-lb{
  position:fixed;inset:0;
  background:rgba(8,8,6,.96);
  z-index:1000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .28s ease;
}
.cl-lb--open{opacity:1;pointer-events:all}
.cl-lb-stage{
  max-width:min(92vw,1100px);
  max-height:88vh;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  position:relative;
}
.cl-lb-img{
  max-width:100%;max-height:82vh;
  object-fit:contain;
  border-radius:2px;
  transition:opacity .22s ease;
}
.cl-lb-img.cl-lb-loading{opacity:.4}
.cl-lb-cap{
  font-size:12px;color:rgba(255,255,255,.3);
  letter-spacing:.04em;text-align:center;
  min-height:18px;
}
.cl-lb-close{
  position:fixed;top:18px;right:24px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.55);cursor:pointer;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;z-index:2;
}
.cl-lb-close:hover{background:rgba(255,255,255,.14);color:#fff}
.cl-lb-prev,.cl-lb-next{
  position:fixed;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.55);cursor:pointer;
  width:44px;height:44px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.cl-lb-prev{left:20px}
.cl-lb-next{right:20px}
.cl-lb-prev:hover,.cl-lb-next:hover{
  background:rgba(255,255,255,.12);color:#fff;
}
.cl-lb-count{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  font-size:11px;color:rgba(255,255,255,.25);letter-spacing:.12em;
}
/* Gallery cursor hint */
.gallery img{cursor:zoom-in;transition:opacity .22s ease}
.gallery img:hover{opacity:.9}
@media(max-width:600px){
  .cl-lb-prev{left:8px}
  .cl-lb-next{right:8px}
}

/* ══ Rewards Nudge (footer/inline) ═══════════════════════ */
.cl-rewards-nudge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;color:rgba(255,255,255,.45);
  letter-spacing:.04em;text-decoration:none;
  transition:color .2s;
  padding:4px 0;
}
.cl-rewards-nudge:hover{color:var(--gold,#b89c6e)!important}
.cl-rewards-nudge svg{
  width:13px;height:13px;
  color:var(--gold,#b89c6e);flex-shrink:0;
}

/* ══ Skip Link ═══════════════════════════════════════════ */
.skip-link{
  position:absolute;top:-48px;left:16px;
  background:var(--gold,#b89c6e);color:#fff;
  padding:9px 16px;border-radius:0 0 4px 4px;
  font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  z-index:9999;transition:top .2s;text-decoration:none;
}
.skip-link:focus{top:0;outline:2px solid var(--gold-d,#8a6f43);outline-offset:2px}

/* ══ Reduced Motion ══════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .cl-modal,.cl-modal-bg,
  .cl-fab-wrap,.cl-fab-menu,.cl-fab-item,
  .hero-reel img,.cl-lb{
    transition:none!important;
    animation:none!important;
  }
  
  .cl-modal{transform:none!important}
  .cl-fab-wrap.cl-fab--hidden{display:none}
}

/* ── Performance & CLS prevention ────────────────────── */
img{content-visibility:auto}
img[loading="lazy"]{content-visibility:auto}
.hero-reel img,.ph-bg img{content-visibility:visible}
/* Prevent layout shift on images with known ratios */
.sc-img{aspect-ratio:4/3}
.tl-img{aspect-ratio:4/3}
.news-feat-img{aspect-ratio:16/9}
.about-img-main{aspect-ratio:4/3}
.brand-ph-img{aspect-ratio:4/3}
/* Image protection */
img{-webkit-user-drag:none;-moz-user-drag:none;user-drag:none}
.no-copy img{pointer-events:none}