/* About — Damn Good Brands /about geometry, QULTR palette.
   Desktop: sticky 100vh ferris wheel. Mobile: stacked media + copy. */

.about-page .bar{
  background:transparent;border-bottom:0;backdrop-filter:none;
}
.about-page::after{opacity:.03}

.dgb-track{position:relative;height:100vh}
.dgb-stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  --unit:200vw;
}

.dgb-copy{
  position:absolute;inset:0 auto 0 0;width:50vw;height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:8vw;z-index:2;pointer-events:none;
}
.dgb-copy-frame,
.dgb-copy-stack{position:relative;width:100%;height:100%}
.dgb-slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  opacity:var(--opacity,0);
  z-index:var(--z-index,0);
  transition:opacity .3s ease;
  pointer-events:none;
}
.dgb-kicker{
  font-family:var(--head);font-weight:400;font-size:clamp(8px,1vw,16px);
  letter-spacing:.12em;text-transform:uppercase;color:var(--bone);
  margin:0 0 1.5vw;
}
.dgb-heading{
  font-family:var(--head);font-weight:800;
  font-size:2.25vw;line-height:1.05;letter-spacing:-.02em;
  color:var(--bone);margin:0;text-transform:none;
}
.dgb-heading .dgb-w{display:inline-block}
.dgb-heading .dgb-break{display:block;height:.7em}

/* Hand-drawn marks — DGB scribble, electric instead of #f00 */
.dgb-mark{position:relative;display:inline-block}
.dgb-line{
  position:absolute;left:-10px;top:100%;width:calc(100% + 20px);height:20px;
  overflow:visible;pointer-events:none;
  transform:translateY(-35%);
}
.dgb-line path{
  fill:none;stroke:var(--electric);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.dgb-ring{
  position:absolute;pointer-events:none;z-index:2;
  left:5%;top:-5%;width:80%;height:120%;
  transform:scale(1.75) rotate(-3deg);
  overflow:visible;
}
.dgb-ring path{
  fill:none;stroke:var(--electric);stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round;
}

/* Wheel — 200vw disc, laid on its side, hanging off the right */
.dgb-wheel-wrap{
  height:calc(var(--unit)*1);width:calc(var(--unit)*1);
  position:absolute;left:0;top:50%;z-index:1;
  transform:rotate(-90deg) translate(50%,25%);
  pointer-events:none;
}
.dgb-rotator{
  position:absolute;inset:0;border-radius:50%;
  will-change:transform;
}
.dgb-card{
  position:absolute;inset:0;
  display:flex;justify-content:center;
  transform-origin:50% 50%;
}
.dgb-media{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:calc(var(--unit)*.2);height:calc(var(--unit)*.2);
  margin:calc(var(--unit)*.1) 0 0;
  transform:translate(0,-50%) rotate(90deg);
  transform-origin:50% 50%;
  opacity:0;transition:opacity .3s ease;
  will-change:transform;
}
.dgb-media.is-on{opacity:1}
.dgb-media img,
.dgb-media video{
  display:block;width:100%;height:100%;
  object-fit:contain;object-position:center;
}
.dgb-media video{object-fit:cover}
.dgb-media.is-wide video{
  height:65%;width:auto;aspect-ratio:7/5;object-fit:cover;
}

.dgb-hint{
  position:absolute;left:50%;bottom:72px;z-index:3;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:.7;transition:opacity .4s var(--ease-out);
  pointer-events:none;color:var(--bone);
}
.dgb-hint.is-gone{opacity:0}
.dgb-hint svg{display:block}
@keyframes dgb-hint-bob{
  from{transform:translateY(0)} to{transform:translateY(7px)}
}
.dgb-hint svg{animation:dgb-hint-bob .9s var(--ease-out) infinite alternate}

/* Slim dock — last strip only, sits on the 100vh stage */
.about-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--pad) calc(16px + env(safe-area-inset-bottom));
  pointer-events:none;
}
.about-dock .sign,
.about-dock .mini,
.about-dock .foot-social{pointer-events:auto}
.about-dock .sign{
  margin:0;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);line-height:1;
}
.about-dock .foot-social{margin:0;gap:14px}
.about-dock .mini{display:flex;align-items:center;gap:18px}
.about-dock .mini span,
.about-dock .mini a{
  color:var(--faint);text-decoration:none;
  font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1;
  transition:color .16s var(--ease-out);
}
.about-dock .mini a:hover{color:var(--bone)}

@media (min-width:1000px){
  html:has(body.about-page),
  body.about-page{height:100%;overflow:hidden}
  .dgb-stack{display:none}
}

@media (max-width:999px){
  .dgb-track{height:auto}
  .dgb-stage{position:relative;height:auto;overflow:visible;padding:calc(var(--bar) + 48px) 20px 80px}
  .dgb-wheel-wrap,
  .dgb-hint{display:none}
  .dgb-copy{
    position:relative;width:100%;height:auto;padding:0;
    display:block;
  }
  .dgb-copy-frame{display:none}
  .dgb-stack{display:flex;flex-direction:column;gap:100px;max-width:1000px;margin:0 auto}
  .dgb-block{display:flex;flex-direction:column;gap:40px}
  .dgb-block .dgb-media{
    width:min(100%,520px);height:auto;aspect-ratio:1/1;margin:0 auto;
    transform:none;opacity:1;
  }
  .dgb-block .dgb-slide{
    position:relative;opacity:1;inset:auto;
  }
  .dgb-heading{font-size:clamp(22px,6.4vw,36px);line-height:1.12}
  .dgb-kicker{font-size:12px;margin-bottom:14px}
  .about-dock{
    position:relative;margin-top:48px;
    padding:22px 20px calc(22px + env(safe-area-inset-bottom));
    border-top:1px solid var(--edge);
  }
}

@media (prefers-reduced-motion:reduce){
  html:has(body.about-page),
  body.about-page{height:auto;overflow:auto}
  .dgb-track{height:auto}
  .dgb-stage{position:relative;height:auto;overflow:visible;padding:calc(var(--bar) + 64px) 8vw 80px}
  .dgb-wheel-wrap{display:none}
  .dgb-hint{display:none}
  .dgb-copy{position:relative;width:min(720px,100%);height:auto;padding:0}
  .dgb-copy-frame{display:none}
  .dgb-stack{display:flex;flex-direction:column;gap:80px}
  .dgb-block .dgb-media{transform:none;opacity:1;width:min(420px,100%);height:auto;aspect-ratio:1;margin:0}
  .dgb-block .dgb-slide{position:relative;opacity:1}
  .dgb-slide{transition:none}
  .dgb-heading{font-size:clamp(22px,3vw,36px)}
  .dgb-line path,
  .dgb-ring path{stroke-dashoffset:0 !important}
}