/* ===================== CANDLE LAND LIBRARY: STYLES =====================
   Sab kuch .cll-root ke andar scoped hai taake theme par asar na pare.
   Design values original section jaise hi hain.
======================================================================== */
.cll-root{
  --cll-night:#0E0D18;
  --cll-magenta:#F76FA6;
  --cll-ember:#FFB463;
  --cll-wax:#C88FA1;
  --cll-paper:#F4EBE8;
  --cll-line:rgba(244,235,232,.14);
  --cll-display:"Fraunces",Georgia,serif;
  --cll-sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cll-gut:clamp(20px,5vw,72px);
  --cll-ease:cubic-bezier(.22,1,.36,1);
  width:100%;
}
.cll-root *,.cll-root *::before,.cll-root *::after{box-sizing:border-box}
.cll-root h2,.cll-root h3,.cll-root p,.cll-root dl,.cll-root dt,.cll-root dd{margin:0;padding:0}
.cll-root a{text-decoration:none!important;color:inherit!important;box-shadow:none}
.cll-root img{max-width:100%;display:block;border:0;box-shadow:none}

/* section */
.cll-root .cll-library{
  position:relative;overflow:hidden;
  background:var(--cll-night);color:var(--cll-paper);
  font-family:var(--cll-sans);font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.cll-root .cll-stage{
  height:100vh;height:100svh;
  display:grid;grid-template-rows:auto auto;grid-template-columns:100%;align-content:center;
  row-gap:clamp(22px,4vh,44px);
  padding-block:clamp(84px,12vh,150px) clamp(28px,5vh,60px);
}

/* head */
.cll-root .cll-head{min-width:0;display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding-inline:var(--cll-gut);flex-wrap:wrap}
.cll-root .cll-head h2{font-family:var(--cll-display);font-weight:300;font-size:clamp(1.7rem,3.6vw,3rem);
  line-height:1.1;text-transform:none;
  font-variation-settings:"SOFT" 40,"WONK" 1;letter-spacing:-.02em;color:var(--cll-paper)!important}
.cll-root .cll-prog{display:flex;align-items:center;gap:14px;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(244,235,232,.5)}
.cll-root .cll-prog span{color:rgba(244,235,232,.5)!important}
.cll-root .cll-num{font-variant-numeric:tabular-nums}
.cll-root .cll-prog i{display:block;width:clamp(70px,14vw,180px);height:1px;background:var(--cll-line);position:relative}
.cll-root .cll-prog i b{position:absolute;inset:0;background:var(--cll-ember);transform-origin:0 50%;transform:scaleX(0);display:block}

/* track */
.cll-root .cll-track{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);
  padding-inline:var(--cll-gut);width:max-content;will-change:transform;
  -webkit-user-select:none;user-select:none}
.cll-root .cll-library.is-drag .cll-track{cursor:grab}
.cll-root .cll-library.is-dragging .cll-track{cursor:grabbing}

/* card: chaurai screen ki height se bhi limit, taake laptop par card na kate */
.cll-root .cll-scent{
  position:relative;width:clamp(230px,min(29vw,50vh),410px);flex:none;
  border:1px solid var(--cll-line);border-radius:4px;overflow:hidden;
  background:linear-gradient(170deg,rgba(35,36,107,.34),rgba(14,13,24,.9));
  padding:clamp(16px,2vw,26px);display:grid;gap:clamp(10px,1.6vh,16px);align-content:start;
  transition:border-color .6s var(--cll-ease),background .6s var(--cll-ease);
}
.cll-root .cll-scent.on{border-color:rgba(247,111,166,.5);background:linear-gradient(170deg,rgba(35,36,107,.6),rgba(14,13,24,.92))}
.cll-root .cll-no{font-size:.66rem;letter-spacing:.2em;line-height:1.6;color:var(--cll-wax)!important;font-variant-numeric:tabular-nums}
.cll-root .cll-img{aspect-ratio:1;max-height:34vh;display:grid;place-items:center;position:relative}
.cll-root .cll-img::before{content:"";position:absolute;width:74%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,180,99,.3),transparent 66%);
  opacity:0;transition:opacity .7s var(--cll-ease)}
.cll-root .cll-scent.on .cll-img::before{opacity:1}
.cll-root .cll-img img{width:82%;height:100%;max-height:100%;object-fit:contain;position:relative;
  transition:transform .8s var(--cll-ease);pointer-events:none}
.cll-root .cll-scent.on .cll-img img{transform:translateY(-6px) scale(1.05)}
.cll-root .cll-scent h3{font-family:var(--cll-display);font-weight:400;font-size:clamp(1.2rem,1.8vw,1.6rem);
  line-height:1.2;text-transform:none;letter-spacing:normal;
  font-variation-settings:"SOFT" 50,"WONK" 1;color:var(--cll-paper)!important}
.cll-root .cll-notes{font-size:.8rem;line-height:1.65;color:rgba(244,235,232,.6)!important}
.cll-root .cll-more{max-height:0;overflow:hidden;transition:max-height .7s var(--cll-ease),opacity .5s;opacity:0}
.cll-root .cll-scent.on .cll-more{max-height:150px;opacity:1}
.cll-root .cll-more dl{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--cll-line)}
.cll-root .cll-more div{display:flex;justify-content:space-between;gap:12px;font-size:.74rem;
  letter-spacing:.04em;color:rgba(244,235,232,.56)}
.cll-root .cll-more dt{font-weight:300;color:var(--cll-wax)!important}
.cll-root .cll-more dd{margin:0;color:rgba(244,235,232,.86)!important}

.cll-root :focus-visible{outline:2px solid var(--cll-ember);outline-offset:4px;border-radius:2px}

/* ---- static layout: mobile, reduced motion, ya JS na chale ---- */
.cll-root .cll-library.is-static .cll-stage,
.cll-root .cll-library:not(.is-js) .cll-stage{height:auto}
.cll-root .cll-library:not(.is-js) .cll-track,
.cll-root .cll-library.is-static .cll-track{width:auto;flex-wrap:wrap;transform:none!important}
.cll-root .cll-library:not(.is-js) .cll-scent,
.cll-root .cll-library.is-static .cll-scent{width:min(100%,340px)}
.cll-root .cll-library:not(.is-js) .cll-img,
.cll-root .cll-library.is-static .cll-img{max-height:none}
.cll-root .cll-library:not(.is-js) .cll-more,
.cll-root .cll-library.is-static .cll-more{max-height:150px;opacity:1}
.cll-root .cll-library:not(.is-js) .cll-prog,
.cll-root .cll-library.is-static .cll-prog{display:none}

@media (prefers-reduced-motion:reduce){
  .cll-root *,.cll-root *::before,.cll-root *::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media (max-width:820px){
  .cll-root .cll-stage{height:auto;padding-block:clamp(60px,10vw,90px)}
  .cll-root .cll-track{width:auto;flex-direction:column;align-items:stretch;padding-top:34px;transform:none!important}
  .cll-root .cll-scent,
  .cll-root .cll-library.is-static .cll-scent,
  .cll-root .cll-library:not(.is-js) .cll-scent{width:100%}
  .cll-root .cll-img{max-height:none}
  .cll-root .cll-img img{height:auto}
  .cll-root .cll-more{max-height:150px;opacity:1}
  .cll-root .cll-scent{border-color:rgba(247,111,166,.28)}
  .cll-root .cll-prog{display:none}
}