/* Sudharma Knits - HOME + GALLERY. Uses tokens.css variables only. */
.hm-root{overflow-x:clip}
.hm-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.hm-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none;box-shadow:var(--sh-glow);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.hm-btn:hover{transform:translateY(-2px)}
.hm-btn--ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:none;backdrop-filter:var(--blur)}
.hm-btn--line{background:transparent;color:var(--ink);border:1.5px solid var(--ink);box-shadow:none}
.hm-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hm-kick{font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--accent-deep,#8a7a3c);font-weight:600;margin:0 0 6px}
.hm-h2{font-family:var(--font-head);font-size:var(--fs-2xl);line-height:1.1;margin:0;color:var(--ink);letter-spacing:-.01em}
.hm-p{color:var(--ink-2);line-height:1.75;font-size:1.02rem;max-width:68ch}
.hm-sec{padding:var(--s8) 0}
.hm-sec-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:var(--s6)}
.hm-sec-h--c{justify-content:center;text-align:center;flex-direction:column;align-items:center}
.hm-more{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;text-decoration:none}
/* ---------- hero (pinned scroll story) ---------- */
.hm-hero{position:relative;height:300vh;background:#0e0d0b;color:#fff}
.hm-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hm-photo,.hm-stage,.hm-shade{position:absolute;inset:0}
/* real machine photo (owner, 15-Oct). .hm-photo-in = the "cover" box of the image, so the glints sit on the threads/cams at every size */
.hm-photo{overflow:hidden;container-type:size;opacity:calc(1 - clamp(0, (var(--hp, 0) - .4) * 8, 1))}
.hm-photo-in{position:absolute;width:max(100cqw, 150cqh);height:calc(max(100cqw, 150cqh) / 1.5);left:calc((100cqw - max(100cqw, 150cqh)) * .5);top:calc((100cqh - max(100cqw, 150cqh) / 1.5) * .45);transform-origin:50% 46%;transform:translate3d(0, calc(var(--hp, 0) * -6%), 0) scale(calc(1.04 + var(--hp, 0) * .55));will-change:transform}
.hm-photo picture,.hm-photo img{display:block;width:100%;height:100%}
.hm-photo img{object-fit:cover;filter:contrast(1.04) saturate(.94) brightness(.92)}
.hm-glint{position:absolute;pointer-events:none;mix-blend-mode:screen}
.hm-glint--threads{left:34%;top:20%;width:32%;height:26%;background:linear-gradient(105deg,transparent 42%,rgba(255,250,236,.28) 50%,transparent 58%) 0 0/260% 100% no-repeat;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 100%);animation:hm-sweep 6s linear infinite}
.hm-glint--lamps{left:35%;top:30%;width:31%;height:9%;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,224,160,.4),transparent 75%);animation:hm-hum 2.8s ease-in-out infinite}
.hm-glint--cams{left:35%;top:42%;width:31%;height:7%;background:linear-gradient(90deg,transparent 40%,rgba(255,255,255,.32) 50%,transparent 60%) 0 0/300% 100% no-repeat;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%);animation:hm-sweep 2.4s linear infinite}
@keyframes hm-sweep{from{background-position:100% 0}to{background-position:-60% 0}}
@keyframes hm-hum{0%,100%{opacity:.55}50%{opacity:1}}
/* Fabric + Garments stages: real photos only (owner 15-Oct: no 3D). The stages never overlap in time: fabric .42-.62, garments from .63. Cards are opaque and separated by a gap. */
.hm-stage{display:none;align-items:center;justify-content:flex-end;padding:0 4vw 96px 46%;pointer-events:none;opacity:0}
.hm-hero.is-live .hm-stage{display:flex;z-index:1} /* above .hm-shade so the cards are never dimmed or blended by the gradient */
.hm-hero.is-live .hm-stage--fabric{opacity:min(clamp(0, (var(--hp, 0) - .42) * 16, 1), clamp(0, (.62 - var(--hp, 0)) * 25, 1))}
.hm-hero.is-live .hm-stage--garments{opacity:clamp(0, (var(--hp, 0) - .63) * 16, 1)}
.hm-cards{display:grid;gap:18px;width:100%;max-width:820px}
.hm-cards--3{grid-template-columns:repeat(3,1fr);transform:scale(calc(.96 + clamp(0, var(--hp, 0) - .42, .2) * .4))}
.hm-cards--4{grid-template-columns:repeat(4,1fr);transform:translate3d(0, calc((.85 - clamp(.63, var(--hp, 0), .85)) * 18vh), 0)}
.hm-card{margin:0;background:#1b1a17;border:1px solid rgba(205,196,152,.22);border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.hm-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.hm-card--sq img{aspect-ratio:1/1}
.hm-card figcaption{padding:10px 12px;font-size:.85rem;color:#e7e3d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:761px){.hm-photo{left:22%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}}
.hm-shade{pointer-events:none;background:linear-gradient(90deg,rgba(14,13,11,.86) 0%,rgba(14,13,11,.55) 38%,rgba(14,13,11,0) 64%),linear-gradient(0deg,rgba(14,13,11,.7),transparent 30%)}
.hm-hero-in{position:relative;height:100%;display:flex;align-items:center}
.hm-copy{max-width:560px;padding-top:40px}
.hm-eyebrow{display:inline-block;font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:#e9e1bd;border:1px solid rgba(205,196,152,.45);padding:6px 12px;border-radius:999px;margin:0 0 18px;backdrop-filter:var(--blur)}
.hm-h1{font-family:var(--font-head);font-size:var(--fs-hero);line-height:1.04;margin:0;font-weight:700;letter-spacing:-.02em;color:#fff}
.hm-grad{background:linear-gradient(100deg,#f4ecc8 0%,#cdc498 45%,#9c8f55 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-lead{font-size:1.15rem;color:#e7e3d6;margin:18px 0 0;max-width:46ch}
.hm-steps{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;gap:8px;list-style:none;margin:0;padding:6px;border-radius:999px;background:rgba(20,19,16,.55);border:1px solid rgba(205,196,152,.25);backdrop-filter:var(--blur);max-width:calc(100% - 24px)}
.hm-steps li{padding:8px 16px;border-radius:999px;color:#bdb6a0;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);white-space:nowrap}
.hm-steps b{display:block;font-size:.9rem}.hm-steps span{display:block;font-size:.72rem;opacity:.85}
.hm-steps li.is-on{background:var(--accent);color:var(--accent-ink)}
.hm-scrollcue{position:absolute;right:28px;bottom:34px;width:22px;height:36px;border:2px solid rgba(255,255,255,.5);border-radius:12px}
.hm-scrollcue i{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#cdc498;animation:hm-cue 1.6s infinite}
@keyframes hm-cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
.hm-hero.is-static{height:auto}
.hm-hero.is-static .hm-pin{position:relative;height:auto;min-height:88vh}
.hm-hero.is-static .hm-hero-in{min-height:88vh}
.hm-hero.is-static .hm-steps,.hm-hero.is-static .hm-scrollcue{display:none}
/* ---------- stats ---------- */
.hm-stats{background:#14130f;color:#fff;padding:var(--s6) 0}
.hm-stats-g{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.hm-stat{text-align:center;padding:var(--s4);border-right:1px solid rgba(205,196,152,.2)}
.hm-stat:last-child{border-right:0}
.hm-stat b{display:block;font-family:var(--font-head);font-size:clamp(1.8rem,4vw,3rem);color:#cdc498}
.hm-stat span{color:#d8d3c4;font-size:.95rem}
/* ---------- about ---------- */
.hm-about-g{display:grid;grid-template-columns:5fr 7fr;gap:var(--s7);align-items:center}
.hm-about-i{margin:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);transform-style:preserve-3d}
.hm-about-i img{width:100%;height:auto;display:block}
/* ---------- cards ---------- */
.hm-seg-g{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.hm-segc,.hm-fabc{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:#fff;box-shadow:var(--sh-2);background:var(--surface);transform-style:preserve-3d;transition:box-shadow var(--dur) var(--ease)}
.hm-segc:hover,.hm-fabc:hover{box-shadow:var(--sh-3)}
.hm-segc-i img,.hm-fabc-i img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.hm-segc:hover img,.hm-fabc:hover img{transform:scale(1.05)}
.hm-segc-t{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:18px 20px;font-family:var(--font-head);font-size:1.3rem;font-weight:600;background:linear-gradient(0deg,rgba(14,13,11,.85),transparent)}
.hm-fab{background:var(--bg-2)}
.hm-fab-g{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.hm-fabc{color:var(--ink)}
.hm-fabc-t{display:block;padding:14px 16px;font-weight:600}
/* ---------- lookbook: CSS 3D ring ---------- */
.hm-ring-w{position:relative;height:520px;perspective:1600px;overflow:hidden;margin-top:-10px}
.hm-ring{--r:640px;position:absolute;left:50%;top:50%;width:260px;height:350px;margin:-175px 0 0 -130px;transform-style:preserve-3d;animation:hm-spin 48s linear infinite}
.hm-ring-w:hover .hm-ring{animation-play-state:paused}
.hm-ring-f{position:absolute;inset:0;margin:0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-3);transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r));backface-visibility:hidden;background:#222}
.hm-ring-f img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes hm-spin{to{transform:rotateY(-360deg)}}
/* ---------- brands ---------- */
.hm-brand-g{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s5)}
.hm-brand{display:block;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-2);background:#fff}
.hm-brand img{display:block;width:180px;height:auto}
/* ---------- export ---------- */
.hm-ex{position:relative;color:#fff;overflow:hidden;background:#0e0d0b}
.hm-ex-bg{position:absolute;inset:0}
.hm-ex-bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.hm-ex-in{position:relative}
.hm-ex .hm-h2{color:#fff}.hm-ex .hm-p{color:#e7e3d6}.hm-ex .hm-kick{color:#cdc498}
/* ---------- cta ---------- */
.hm-cta-c{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s5);padding:var(--s7);border-radius:var(--r-xl);background:linear-gradient(135deg,#1b1a15,#2b281e);color:#fff;box-shadow:var(--sh-3)}
.hm-cta-c .hm-h2{color:#fff}.hm-cta-c .hm-p{color:#d8d3c4}
/* ---------- gallery page ---------- */
.hm-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4);margin-top:var(--s5)}
.hm-gal-a{display:block;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-2);transform-style:preserve-3d}
.hm-gal-a img{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;display:block}
.hm-gal-more{margin-top:var(--s6);text-align:center}
.hm-lb{position:fixed;inset:0;z-index:200;background:rgba(10,10,8,.92);display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.hm-lb img{max-width:100%;max-height:100%;border-radius:var(--r-md)}
/* ---------- reveal ---------- */
.hm-js [data-hm-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hm-js [data-hm-reveal].is-in{opacity:1;transform:none}
@media (max-width:900px){
  .hm-about-g{grid-template-columns:1fr}
  .hm-fab-g{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .hm-hero{height:240vh}
  .hm-shade{background:linear-gradient(0deg,rgba(14,13,11,.94) 0%,rgba(14,13,11,.72) 38%,rgba(14,13,11,.1) 68%,rgba(14,13,11,.35) 100%)}
  /* phone photo = portrait crop 640x1024 (source x 448-1088): glints re-mapped to that crop */
  .hm-photo-in{width:max(100cqw, 62.5cqh);height:calc(max(100cqw, 62.5cqh) * 1.6);left:calc((100cqw - max(100cqw, 62.5cqh)) * .5);top:calc((100cqh - max(100cqw, 62.5cqh) * 1.6) * .3)}
  .hm-glint--threads{left:12%;top:20%;width:76%}.hm-glint--lamps,.hm-glint--cams{left:15%;width:73%}
  .hm-hero-in{align-items:flex-end;padding-bottom:120px}
  .hm-copy{padding-top:0}
  .hm-hero.is-live .hm-copy{opacity:clamp(0, (.44 - var(--hp, 0)) * 12, 1)}
  .hm-stage{align-items:center;justify-content:center;padding:64px 16px 72px}
  .hm-cards{gap:10px;max-width:360px}.hm-cards--3{grid-template-columns:1fr 1fr}.hm-cards--3 .hm-card:first-child{grid-column:1 / -1}.hm-cards--3 .hm-card:first-child img{aspect-ratio:16/9}
  .hm-cards--4{grid-template-columns:1fr 1fr}.hm-card figcaption{padding:6px 8px;font-size:.75rem}
  .hm-steps{gap:2px;bottom:16px}.hm-steps li{padding:6px 9px}.hm-steps span{display:none}.hm-steps b{font-size:.78rem}
  .hm-scrollcue{display:none}
  .hm-stats-g{grid-template-columns:1fr;gap:0}.hm-stat{border-right:0;border-bottom:1px solid rgba(205,196,152,.2)}
  .hm-seg-g{grid-template-columns:1fr}
  .hm-ring-w{height:400px}.hm-ring{--r:300px;width:180px;height:240px;margin:-120px 0 0 -90px}
  .hm-sec{padding:var(--s7) 0}
  .hm-cta-c{padding:var(--s5)}
  .hm-brand img{width:140px}
}
@media (prefers-reduced-motion:reduce){
  .hm-glint{animation:none;display:none}.hm-photo-in{transform:none}
  .hm-hero{height:auto}.hm-pin{position:relative;height:auto;min-height:88vh}.hm-hero-in{min-height:88vh}.hm-steps,.hm-scrollcue{display:none}
  .hm-ring-w{height:auto;perspective:none;overflow:visible}
  .hm-ring{position:static;margin:0 auto;width:auto;height:auto;max-width:var(--wrap);padding:0 var(--gutter);animation:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;transform:none}
  .hm-ring-f{position:relative;transform:none;aspect-ratio:3/4}
  .hm-js [data-hm-reveal]{opacity:1;transform:none}
}