/* ===================== CANDLE LAND CRAFT: STYLES =====================
   Sab kuch .clc-root ke andar scoped hai taake theme par asar na pare.
   Design values original section jaise hi hain.
====================================================================== */
.clc-root{
  --clc-void:#07060C;
  --clc-wax:#C88FA1;
  --clc-ember:#FFB463;
  --clc-paper:#F4EBE8;
  --clc-line:rgba(244,235,232,.14);
  --clc-display:"Fraunces",Georgia,serif;
  --clc-sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --clc-gut:clamp(20px,5vw,72px);
  --clc-maxw:1440px;
  --clc-ease:cubic-bezier(.22,1,.36,1);
  --clc-steps:4;
  width:100%;
  overflow-x:clip;
}
.clc-root *,.clc-root *::before,.clc-root *::after{box-sizing:border-box}
.clc-root h2,.clc-root h3,.clc-root p{margin:0;padding:0}
.clc-root canvas{display:block}
.clc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* section: har step ke liye ~105vh scroll */
.clc-root .clc-craft{
  position:relative;background:var(--clc-void);color:var(--clc-paper);
  height:calc(var(--clc-steps) * 105vh);
  font-family:var(--clc-sans);font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.clc-root .clc-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:grid;align-content:center}
/* JS pin chal raha ho to CSS sticky band (dono ek saath takrate hain) */
.clc-root .clc-craft.is-pinned .clc-stage{position:relative;top:auto}

.clc-root .clc-inner{width:100%;max-width:var(--clc-maxw);margin-inline:auto;padding-inline:var(--clc-gut);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(24px,5vw,80px);align-items:center}

/* disc */
.clc-root .clc-disc{position:relative;justify-self:center;width:min(42vh,100%);aspect-ratio:1;border-radius:50%;
  overflow:hidden;background:radial-gradient(circle at 50% 44%,#1B1730,#0A0912 72%);
  box-shadow:0 0 0 1px rgba(244,235,232,.1),0 40px 120px -30px rgba(255,180,99,.35)}
.clc-root .clc-canvas{position:absolute;inset:0;width:100%;height:100%}
.clc-root .clc-glow{position:absolute;inset:-22%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(255,180,99,.24),transparent 62%)}

/* copy */
.clc-root .clc-copy{position:relative;display:grid;min-height:min(46vh,360px);align-content:center}
.clc-root .clc-step{grid-area:1/1;display:grid;gap:16px;justify-items:start;opacity:0;visibility:hidden;max-width:38ch}
.clc-root .clc-step[data-step="0"]{opacity:1;visibility:visible}
.clc-root .clc-step h3{font-family:var(--clc-display);font-weight:300;
  font-size:clamp(1.9rem,min(4.4vw,7vh),3.6rem);
  font-variation-settings:"SOFT" 40,"WONK" 1;line-height:1;letter-spacing:-.03em;text-transform:none;
  color:var(--clc-paper)!important}
.clc-root .clc-step h3 em{font-style:italic;font-weight:300;font-family:inherit}
.clc-root .clc-step p{font-family:var(--clc-sans);font-size:clamp(.9rem,1.1vw,1.02rem);line-height:1.75;
  color:rgba(244,235,232,.66)!important}
.clc-root .clc-num{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;line-height:1.6;
  color:var(--clc-wax)!important}

/* rail */
.clc-root .clc-rail{position:absolute;left:clamp(14px,2.2vw,34px);top:50%;transform:translateY(-50%);
  z-index:3;display:grid;gap:14px}
.clc-root .clc-rail b{display:block;width:1px;height:34px;background:var(--clc-line);position:relative;overflow:hidden}
.clc-root .clc-rail b i{position:absolute;inset:0;background:var(--clc-ember);transform:scaleY(0);
  transform-origin:0 0;transition:transform .5s var(--clc-ease)}
.clc-root .clc-rail b.on i{transform:scaleY(1)}

/* head */
.clc-root .clc-head{position:absolute;top:clamp(84px,12vh,130px);left:var(--clc-gut);right:var(--clc-gut);
  display:flex;justify-content:space-between;gap:20px;z-index:2;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,235,232,.4)}

/* ---- static layout: reduced motion ya JS na chale ---- */
@media (prefers-reduced-motion:reduce){
  .clc-root *,.clc-root *::before,.clc-root *::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.clc-root .clc-craft.is-static,
.clc-root .clc-craft:not(.is-js){height:auto!important}
.clc-root .clc-craft.is-static .clc-stage,
.clc-root .clc-craft:not(.is-js) .clc-stage{position:relative;top:auto;height:auto;min-height:0;overflow:visible;
  padding-block:clamp(104px,15vh,150px) clamp(44px,7vh,80px)}
.clc-root .clc-craft.is-static .clc-inner,
.clc-root .clc-craft:not(.is-js) .clc-inner{grid-template-columns:1fr}
.clc-root .clc-craft.is-static .clc-copy,
.clc-root .clc-craft:not(.is-js) .clc-copy{display:grid;gap:clamp(34px,5vw,56px);
  margin-top:clamp(30px,5vh,52px);min-height:0}
.clc-root .clc-craft.is-static .clc-step,
.clc-root .clc-craft:not(.is-js) .clc-step{grid-area:auto;position:relative;opacity:1!important;visibility:visible!important}
.clc-root .clc-craft.is-static .clc-disc,
.clc-root .clc-craft:not(.is-js) .clc-disc{width:min(38vh,320px)}
.clc-root .clc-craft.is-static .clc-rail,.clc-root .clc-craft.is-static .clc-head,
.clc-root .clc-craft:not(.is-js) .clc-rail,.clc-root .clc-craft:not(.is-js) .clc-head{display:none}

@media (max-width:820px){
  .clc-root .clc-craft{height:calc(var(--clc-steps) * 85vh)}
  .clc-root .clc-rail{display:none}
  .clc-root .clc-inner{grid-template-columns:1fr;gap:clamp(22px,5vw,40px);justify-items:center;text-align:center}
  .clc-root .clc-disc{width:min(34vh,62vw);order:-1}
  .clc-root .clc-step{justify-items:center;text-align:center}
  .clc-root .clc-copy{min-height:clamp(190px,34vh,260px)}
  .clc-root .clc-head{display:none}
}