/* Dark Pipe Beer · My Little Green Friend
   Add after the site's existing styles.css. All component rules are scoped.
   The .seq class only opts into the site's existing section-color seams.
   The supplied animation already contains the desktop title and logo. */

.dp-mlgf.seq {
  --seq-bg: #080e0b;
  --seq-from: #150e0b;
  --mlgf-ink: #efe5d6;
  --mlgf-muted: #c0c3ae;
  --mlgf-accent: #a8b963;
  --mlgf-runway: 364svh;
  /* Where the bottle stands in the 1920-wide frame, so the banner crop keeps it
     however narrow the screen gets -- the same idea as --focus in styles.css. */
  --mlgf-focus: 27.4%;
  position: relative;
  height: auto;
  margin: 0;
  color: var(--mlgf-ink);
  background: var(--seq-bg);
  font-family: "TT Octosquares Medium", Arial, sans-serif;
  isolation: isolate;
}

.dp-mlgf *, .dp-mlgf *::before, .dp-mlgf *::after { box-sizing: border-box; }
.dp-mlgf [hidden] { display: none !important; }
.dp-mlgf button, .dp-mlgf a { -webkit-tap-highlight-color: transparent; }
/* Resets carry no class weight, so the component rules below win: at (0,1,1)
   `font: inherit` outranked .dp-mlgf__play's 10px and the phone play button
   came out at 16px, two lines tall, across a third of the picture. */
:where(.dp-mlgf) a { color: inherit; }
:where(.dp-mlgf) button { font: inherit; }

.dp-mlgf__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--seq-bg);
}

.dp-mlgf__picture {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}

.dp-mlgf__video, .dp-mlgf__poster, .dp-mlgf__cover, .dp-mlgf__bottle {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dp-mlgf__video { background: var(--seq-bg); }
.dp-mlgf__poster { z-index: 1; pointer-events: none; }
.dp-mlgf[data-ready="true"] .dp-mlgf__poster { visibility: hidden; }
/* A mock site header -- wordmark, green rule, hamburger -- is painted into the
   supplied frames, under the real one. It cannot be taken out in markup, so
   this covers those three corners with the forest that belongs behind them,
   rebuilt from their own surroundings. It is a full frame at the video's own
   1920x1080 and sits in the same box under the same object-fit, so it stays
   registered at every width. Drop it when a clean render arrives. */
.dp-mlgf__cover { z-index: 1; pointer-events: none; }
/* The brewery's own bottle, laid over the one painted into the frames.
   The camera never moves and nothing passes in front of it, so a single
   still holds for the whole scene -- built by tools/swap_mlgf_bottle.py,
   aligned on the label and graded to the scene. Drop it with the cover
   once the animation is re-rendered with the right bottle. */
.dp-mlgf__bottle { z-index: 1; pointer-events: none; }

.dp-mlgf__shade {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 13%;
  pointer-events: none;
}
.dp-mlgf__shade--top {
  top: 0;
  background: linear-gradient(var(--seq-from), transparent);
  opacity: var(--mlgf-top-fade, 1);
}
.dp-mlgf__shade--bottom {
  bottom: 0;
  background: linear-gradient(transparent, var(--seq-bg));
  opacity: var(--mlgf-bottom-fade, 1);
}

.dp-mlgf__skip {
  position: absolute;
  z-index: 8;
  top: 82px;
  left: 24px;
  padding: 13px 18px;
  color: var(--mlgf-ink);
  background: var(--seq-bg);
  border: 1px solid var(--mlgf-accent);
  text-decoration: none;
  transform: translateY(-200px);
}
.dp-mlgf__skip:focus { transform: none; }

.dp-mlgf__transport {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(4%, 22px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}
.dp-mlgf__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid rgba(168, 185, 99, .65);
  background: rgba(8, 14, 11, .88);
  color: var(--mlgf-ink);
  font-size: 10px;
  letter-spacing: .15em;
  line-height: 1.5;
  text-transform: uppercase;
  cursor: pointer;
}
.dp-mlgf__play:hover { background: #192219; border-color: var(--mlgf-accent); }
.dp-mlgf__play:disabled { opacity: .65; cursor: progress; }
.dp-mlgf__play svg { width: 12px; height: 12px; }
.dp-mlgf__play [data-mlgf-pause-icon] { display: none; }
.dp-mlgf[data-playing="true"] .dp-mlgf__play [data-mlgf-play-icon] { display: none; }
.dp-mlgf[data-playing="true"] .dp-mlgf__play [data-mlgf-pause-icon] { display: block; }

.dp-mlgf__status {
  position: absolute;
  z-index: 6;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(85%, 430px);
  margin: 0;
  padding: 9px 13px;
  font: 12px/1.5 Arial, sans-serif;
  text-align: center;
  background: rgba(8, 14, 11, .88);
  color: var(--mlgf-ink);
}
.dp-mlgf__status:empty { display: none; }

.dp-mlgf__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 6vw 54px;
  background: var(--seq-bg);
}
.dp-mlgf__accent { display: block; width: 34px; height: 2px; margin-bottom: 20px; background: var(--mlgf-accent); }
.dp-mlgf__title {
  margin: 0;
  font-family: "TT Octosquares Expanded Black", "Arial Black", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(29px, 5vw, 56px);
  line-height: .98;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.dp-mlgf__style { margin: 20px 0 7px; font-size: 11px; line-height: 1.6; letter-spacing: .17em; text-transform: uppercase; }
.dp-mlgf__abv { margin: 0; font-size: 11px; letter-spacing: .17em; color: var(--mlgf-muted); }
.dp-mlgf__divider { display: block; width: 34px; height: 2px; margin: 24px 0; background: var(--mlgf-accent); }
.dp-mlgf__place { margin: 0; font-size: 12px; line-height: 1.65; letter-spacing: .06em; text-transform: uppercase; }
.dp-mlgf__desc { margin: 12px 0 0; font-size: 13px; line-height: 1.8; letter-spacing: .05em; }
.dp-mlgf__details-link { margin-top: 26px; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 11px; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.dp-mlgf__details-link::after { content: "↓"; color: var(--mlgf-accent); font-size: 18px; }
.dp-mlgf__details-link:hover { text-decoration: underline; }
.dp-mlgf__a11y { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.dp-mlgf :focus-visible { outline: 2px solid var(--mlgf-accent); outline-offset: 6px; }

/* Same cinematic breakpoint as darkpipebeer.sk/main.js. */
@media (min-width: 1200px) and ((min-width: 1400px) or (pointer: fine)) {
  .dp-mlgf.seq[data-mode="scrub"] { height: var(--mlgf-runway); }
  .dp-mlgf[data-mode="scrub"] .dp-mlgf__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    aspect-ratio: auto;
  }
  /* Cover the stage, the way .seq__scene covers the viewport on the other three
     screens: min() fitted the 16:9 composition inside the window instead, which
     on anything but a 16:9 monitor left bars -- 45px of flat background above
     and below the picture at 1440x900. */
  .dp-mlgf[data-mode="scrub"] .dp-mlgf__picture { width: max(100%, 177.777778svh); }
  .dp-mlgf[data-mode="scrub"] .dp-mlgf__details {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .dp-mlgf[data-mode="scrub"] .dp-mlgf__details-link { display: none; }
  .dp-mlgf[data-mode="scrub"] .dp-mlgf__transport { display: none; }
  .dp-mlgf[data-mode="scrub"][data-error="true"] .dp-mlgf__transport { display: flex; }
}

.dp-mlgf[data-mode="manual"] .dp-mlgf__shade--top { opacity: 1; }
.dp-mlgf[data-mode="manual"] .dp-mlgf__shade--bottom { opacity: 1; }
.dp-mlgf[data-mode="manual"] .dp-mlgf__stage { max-height: none; }

/* Below the cinematic breakpoint the other three screens trade their full-bleed
   stage for a banner cropped to the bottle with the copy stacked underneath
   (.seq__scene / .seq__frame in styles.css). This screen follows them, instead
   of fitting the whole 16:9 composition into a strip a fifth of the height of
   the copy below it, bars down both sides. The four layers are all 1920x1080
   and share one box, one object-fit and one object-position, so cropping them
   cannot put the covers out of register with the frames. */
@media (max-width: 1199px), (max-width: 1399px) and (pointer: coarse) {
  .dp-mlgf__stage { aspect-ratio: 16 / 10; }
  .dp-mlgf__picture { width: 100%; height: 100%; aspect-ratio: auto; }
  .dp-mlgf__video, .dp-mlgf__poster, .dp-mlgf__cover, .dp-mlgf__bottle {
    object-fit: cover;
    object-position: var(--mlgf-focus) 50%;
  }
  /* styles.css drops .seq__fade here and carries the picture into the copy with
     a gradient inside the scene instead. Same two gradients, same job. */
  .dp-mlgf__shade--top { display: none; }
  .dp-mlgf__shade--bottom { height: 24%; opacity: 1; }

  .dp-mlgf__details { padding: 30px var(--gutter) 40px; }
  .dp-mlgf__title { margin: 0 0 16px; font-size: clamp(36px, 7.4vw, 66px); line-height: 1.04; letter-spacing: .1em; }
  .dp-mlgf__style { margin: 0 0 8px; font-size: 12px; letter-spacing: .24em; }
  .dp-mlgf__abv { font-size: 13px; letter-spacing: .14em; }
}

@media (max-width: 640px) {
  /* Taller crop: on a phone the bottle should fill the screen it arrives on. */
  .dp-mlgf__stage { aspect-ratio: 4 / 5; }
  .dp-mlgf__details { padding-bottom: 40px; }
  .dp-mlgf__transport { bottom: 10px; }
  .dp-mlgf__play { padding: 10px 14px; font-size: 9px; }
  .dp-mlgf__status { bottom: 63px; width: 86%; }
  .ftr.ftr--home { padding-top: 16px; }
  .ftr--home .ftr__grid { padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-mlgf.seq { height: auto !important; }
  /* No aspect-ratio here: it would outrank the banner's own and put the thin
     16:9 strip back on a phone. Without it the stage keeps whichever ratio its
     width earned -- 4/5, 16/10, or the base 16/9 on a desktop. */
  .dp-mlgf .dp-mlgf__stage { position: relative !important; height: auto !important; }
  .dp-mlgf .dp-mlgf__picture { width: 100% !important; }
}

/* Reuse the same type scale, text frame, icon row and cue as the other beers. */
.dp-mlgf__frame { display: none; }
.dp-mlgf .dc__accent, .dp-mlgf .dc__divider { background: var(--mlgf-accent); }
.dp-mlgf .dc__cue { --cue-line: var(--mlgf-accent); }
.dp-mlgf .dc__desc { white-space: normal; max-width: 31cqw; }
.dp-mlgf__details .dc__flavors { position: static; margin: 32px 0 24px; }
.dp-mlgf__details .dc__cue { position: relative; inset: auto; margin-top: 18px; }
@media (min-width: 1200px) and ((min-width: 1400px) or (pointer: fine)) {
  .dp-mlgf[data-mode="scrub"] .dp-mlgf__frame { display: block; }
  .dp-mlgf__frame .dc__copy, .dp-mlgf__frame .dc__flavors { opacity: var(--mlgf-copy-opacity, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .dp-mlgf .dp-mlgf__frame { display: none !important; }
}

.dp-mlgf__cue { text-decoration: none; }

@media (min-width: 1200px) and ((min-width: 1400px) or (pointer: fine)) {
  .dp-mlgf__frame .dc__copy { top: 12%; }
  .dp-mlgf__frame .dc__flavors { top: 43%; }
  .dp-mlgf__frame .dc__cue { top: 87.25%; }
}