/* Glass folder collections — ported from the "Glass Folder Cards" React component to plain CSS/JS
   and re-toned for Karat हेमा: marble back panel, warm milk glass, gold rim, product photos as the files.
   The folder is drawn at 340 × 272 and scaled with --k (set from JS to fit the column). */

.folders{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 34px;justify-items:center;align-items:end;margin-top:96px}
.folders-hint{text-align:center;margin:40px 0 0;font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

.gf{
  --k:1; --px:0; --py:0;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.36,.5,1);
  --hinge:0deg; --lift:42px; --spread:0px; --fan:0deg; --stack:15px;
  position:relative;width:100%;max-width:380px;height:calc(326px * var(--k));
  -webkit-tap-highlight-color:transparent;isolation:isolate
}
.gf:hover,.gf:focus-within{--hinge:-11deg;--lift:-34px;--spread:8px;--fan:1.4deg;--stack:10px}
.gf[data-open]{--hinge:-24deg;--lift:-96px;--spread:40px;--fan:5deg;--stack:30px;z-index:5}

.gf-stage{position:absolute;left:0;top:0;width:340px;height:272px;transform-origin:0 0;
  transform:translateY(calc(54px * var(--k))) scale(var(--k))}
.gf-tilt{position:absolute;inset:0;transition:transform .9s var(--ease);
  transform:perspective(1400px) rotateX(calc(var(--py) * -3deg)) rotateY(calc(var(--px) * 4deg))}

.gf-shadow{position:absolute;left:18px;right:18px;bottom:-6px;height:60px;border-radius:40px;background:rgba(60,34,12,.32);
  filter:blur(22px);transform:translateX(calc(var(--px) * -8px));transition:transform .9s var(--ease),opacity .9s var(--ease)}

/* back panel: marble + the collection's cover piece, softly */
.gf-back{position:absolute;inset:0;overflow:hidden;background:#F3E8D6 url(marble.jpg) center/cover;
  clip-path:path('M0 56A22 22 0 0 1 22 34L146 34C170 34 172 0 198 0L318 0A22 22 0 0 1 340 22L340 250A22 22 0 0 1 318 272L22 272A22 22 0 0 1 0 250Z')}
.gf-back img{position:absolute;left:-12px;top:-12px;width:364px;height:296px;max-width:none;object-fit:cover;opacity:.55;
  filter:saturate(.85) sepia(.15);mix-blend-mode:multiply;
  transform:translate(calc(var(--px) * -7px),calc(var(--py) * -6px)) scale(1.02);transition:transform 1.1s var(--ease)}
.gf-back::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,250,240,.35),rgba(255,250,240,0) 26%),radial-gradient(120% 80% at 80% 0%,rgba(255,240,210,.3),transparent 60%)}
.gf-rim{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;fill:none}
.gf-back-rim{width:340px;height:272px}
.gf-back-rim path{stroke:rgba(168,116,42,.55);stroke-width:1.2}

/* files = product photos */
.gf-files{position:absolute;inset:0;z-index:5;pointer-events:none;clip-path:inset(-400px -400px 10px -400px)}
.gf-sheet{all:unset;box-sizing:border-box;position:absolute;left:34px;top:96px;width:272px;height:184px;border-radius:14px;overflow:hidden;
  cursor:pointer;pointer-events:none;background:#2a1709;
  box-shadow:inset 0 0 0 1px rgba(255,240,210,.35),0 10px 26px -8px rgba(40,22,8,.45);
  transform-origin:50% 100%;
  transform:translate(calc(var(--jx) + var(--slot) * var(--spread)),calc(var(--lift) + var(--depth) * var(--stack) * -1))
            rotate(calc(var(--jr) + var(--slot) * var(--fan)));
  transition:transform .75s var(--spring) calc(var(--depth) * 40ms),box-shadow .4s var(--ease),translate .9s var(--ease),opacity .9s var(--ease)}
.gf[data-open] .gf-sheet{pointer-events:auto}
.gf[data-open] .gf-sheet:hover,.gf[data-open] .gf-sheet:focus-visible{
  transform:translate(calc(var(--jx) + var(--slot) * var(--spread)),calc(var(--lift) + var(--depth) * var(--stack) * -1 - 18px))
            rotate(calc(var(--slot) * var(--fan) * .6));
  box-shadow:inset 0 0 0 1px rgba(255,240,210,.6),0 22px 40px -12px rgba(40,22,8,.55);transition-delay:0s}
.gf-sheet:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gf-sheet img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gf-sheet::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(36,20,10,.72) 0%,rgba(36,20,10,0) 38%)}
.gf-sheet-head{position:absolute;left:14px;right:14px;top:11px;z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:10px;white-space:nowrap}
.gf-sheet-name{overflow:hidden;text-overflow:ellipsis;font:500 15px/1.1 var(--serif);color:#FFF6E6}
.gf-sheet-meta{flex:none;font:500 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-3)}

/* frosted front, hinged at the bottom */
.gf-front{position:absolute;left:0;top:74px;width:340px;height:198px;z-index:10;
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  clip-path:path('M0 22A22 22 0 0 1 22 0L118 0C144 0 146 32 172 32L318 32A22 22 0 0 1 340 54L340 176A22 22 0 0 1 318 198L22 198A22 22 0 0 1 0 176Z');
  transform-origin:50% 100%;transform:perspective(760px) rotateX(var(--hinge));
  transition:transform .8s var(--spring),translate 1s var(--ease),opacity 1s var(--ease)}
.gf-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,250,240,.18) 0%,rgba(252,246,236,.6) 42%,rgba(251,245,234,.95) 100%)}
.gf-spec{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.9;
  background:radial-gradient(260px 200px at calc(50% + var(--px) * 46%) calc(30% + var(--py) * 40%),rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}
.gf-front-rim{width:340px;height:198px}
.gf-front-rim path{stroke-width:2.2;transition:stroke-width .3s var(--ease)}
.gf-hit{all:unset;position:absolute;inset:0;z-index:1;cursor:pointer}
.gf-front:has(.gf-hit:focus-visible) .gf-front-rim path{stroke-width:4.5}
.gf-label{position:absolute;z-index:2;left:28px;bottom:26px;max-width:205px;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.gf-title{font:500 21px/1.1 var(--caps);letter-spacing:.14em;text-transform:uppercase;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.gf-meta{font:400 24px/1 var(--script);color:var(--gold)}

/* the key: view this collection in the shop */
.gf-key{all:unset;box-sizing:border-box;position:absolute;right:22px;bottom:22px;z-index:12;width:58px;height:58px;border-radius:18px;
  display:grid;place-items:center;cursor:pointer;color:#FFF3DC;
  background:radial-gradient(120% 90% at 50% 0%,#c8934a 0%,#8f5d24 55%,#5a3412 100%);
  box-shadow:inset 0 1px 0 rgba(255,236,200,.55),inset 0 -3px 8px rgba(40,20,4,.5),0 0 0 1px rgba(90,52,18,.8),0 14px 22px -8px rgba(60,34,12,.6);
  transition:transform .35s var(--spring),opacity .6s var(--ease) .7s,scale .7s var(--spring) .7s}
.gf-key:hover{transform:translateY(-2px)}
.gf-key:active{transform:scale(.93);transition-duration:.12s}
.gf-key:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.gf-key svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* entrance: the folder assembles itself the first time it scrolls into view */
.gf:not([data-entered]) .gf-back,.gf:not([data-entered]) .gf-back-rim{translate:0 22px;opacity:0}
.gf:not([data-entered]) .gf-sheet{translate:0 -120px;opacity:0}
.gf:not([data-entered]) .gf-front{translate:0 46px;opacity:0}
.gf:not([data-entered]) .gf-key{opacity:0;scale:.6}
.gf:not([data-entered]) .gf-shadow{opacity:0}
.gf-back,.gf-back-rim{transition:translate 1s var(--ease),opacity .9s var(--ease)}
.gf[data-entered] .gf-sheet{transition-delay:calc(var(--depth) * 40ms),0s,calc(.18s + var(--depth) * 90ms),calc(.18s + var(--depth) * 90ms)}
.gf[data-entered] .gf-front{transition-delay:0s,.42s,.42s}

@media (max-width:900px){
  .folders{grid-template-columns:1fr 1fr;gap:48px 24px}
  .folders .gf:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - 12px)}
}
@media (max-width:640px){
  .folders{grid-template-columns:1fr;gap:110px;margin-top:80px}
  .folders .gf:last-child:nth-child(odd){max-width:340px}
  .gf{max-width:340px}
}
@media (prefers-reduced-motion:reduce){
  .gf *,.gf *::before,.gf *::after{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}
  .gf-tilt{transform:none}
}