/* v5/thg8.css - #thg, "Lid On": one THG section. The carton's cyan and its printed streaks under the arc of the badge; the open tray, the set
   laid into it, the lid, the label. The field scrolls with the page; the tray and everything in it are drawn on one window-sized canvas that
   travels in a sticky surface (a render surface only: every object on it keeps moving with the page). Units: --u, a 1440-wide stage on desktop. */
.th8{--tu:calc(min(100vw,1720px) / 1440);--u:min(calc(var(--tu) * .9),calc(100svh / 900));--sh:1980;--k:.92;--py:1435;
  --cap:calc(min(100vw,1720px,var(--fit) * 1.5) * 1020 / 1440);
  --arc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1020' preserveAspectRatio='none'%3E%3Cpath d='M0 210.91A1500 1002 0 0 1 1440 83L1440 1020L0 1020Z'/%3E%3C/svg%3E");
  position:relative;z-index:5;isolation:isolate;margin-top:calc(-44 / 1440 * min(100vw,1720px));height:calc(var(--sh) * var(--u));margin-bottom:-6.25vw;overflow-x:clip;font:400 18px/1.5 var(--body)}
.th8-defs{position:absolute;width:0;height:0;overflow:hidden}
.th8-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the field: carton cyan one step deeper than the lid, cut by the badge's arc on top and the page's shared slant below */
.th8-bg{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;background:linear-gradient(10deg,#009AB8 0%,#00A4C2 46%,#08B1CD 100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6.25vw),0 100%);
  -webkit-mask:var(--arc) 0 0/100% var(--cap) no-repeat,linear-gradient(#000,#000) 0 calc(var(--cap) - 1px)/100% calc(100% - var(--cap) + 1px) no-repeat;
  mask:var(--arc) 0 0/100% var(--cap) no-repeat,linear-gradient(#000,#000) 0 calc(var(--cap) - 1px)/100% calc(100% - var(--cap) + 1px) no-repeat}
/* the field's print: THG's own liner card (the line globe and the upright words, row on row), large and tone on tone, scrolling with the page */
/* two steps of the print span the carton, so a whole badge shows either side of it and none is cut through its letters */
.th8-print{position:absolute;inset:0;background:url(../assets/v5/thg8/print.svg) calc(50% + 218 * var(--u)) calc(var(--cap) * .3)/calc(464 * var(--u)) auto;opacity:.24}
/* the carton's own streaks, three sheets of them down the section, drifting along their own line */
.th8-streaks{position:absolute;left:-9%;top:0;width:118%;height:100%;opacity:.5;transition:opacity .7s linear}
.th8.is-shut .th8-streaks{opacity:.85}
.th8-s{position:absolute;left:0;width:100%;height:var(--cap);display:block;overflow:visible;will-change:transform}
.th8-t1{top:0}
.th8-t2{top:calc(var(--cap) * .93);left:-23%}
.th8-t3{top:calc(var(--cap) * 1.86);left:14%}

/* the carton's white double rule (under FULL GASKET SET on the lid), along the slant into the next section */
.th8-rule{position:absolute;left:0;right:0;bottom:0;height:0;pointer-events:none}
.th8-rule::before,.th8-rule::after{content:"";position:absolute;left:-2%;width:104%;background:#fff;transform-origin:0 0;transform:skewY(-3.576deg)}
.th8-rule::before{height:8px;top:-30px}
.th8-rule::after{height:3px;top:-16px}

/* the badge's arc: white and indigo double rule, its meridians faint underneath */
.th8-cap{position:absolute;left:0;top:0;width:100%;height:var(--cap);z-index:2;display:block;pointer-events:none}
.th8-cap-m{display:none}

.th8-surface{position:sticky;top:0;z-index:3;width:100%;height:100vh;height:100lvh;margin-bottom:-100vh;margin-bottom:-100lvh;pointer-events:none;overflow:hidden}
.th8-surface canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* one band of light across the lid and on across the print, when the label is on */
.th8-sweep{position:absolute;inset:0;opacity:0;pointer-events:none}
.th8-sweep::before{content:"";position:absolute;inset:-10% -40%;
  background:linear-gradient(101deg,rgba(255,255,255,0) 43%,rgba(255,255,255,.07) 47%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.07) 53%,rgba(255,255,255,0) 57%);transform:translate3d(-62%,0,0)}
.th8.is-glint .th8-sweep{opacity:1}
.th8.is-glint .th8-sweep::before{animation:th8-sweep .95s cubic-bezier(.35,.05,.25,1) 1 both}
@keyframes th8-sweep{from{transform:translate3d(-62%,0,0)}to{transform:translate3d(62%,0,0)}}

/* the closed, labelled carton where the story ends: shown whenever the canvas is not live */
.th8-poster{position:absolute;z-index:3;left:50%;top:calc(var(--py) * var(--u));width:calc(1300 * var(--k) * var(--u));height:auto;transform:translate3d(-50%,-50%,0);pointer-events:none;display:block}
.th8[data-state="live"] .th8-poster{display:none}
.th8.is-static .th8-surface{display:none}
.th8.is-static .th8-streaks{opacity:.85}

@media (max-width:760px){
  .th8{margin-top:calc(-66 / 390 * min(100vw,520px));--tu:calc(min(100vw,520px) / 390);--u:var(--tu);--sh:1440;--k:.315;--py:1085;--cap:calc(min(100vw,520px) * 467 / 390);
    --arc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 467' preserveAspectRatio='none'%3E%3Cpath d='M0 122.01A300 200 0 0 1 390 122.01L390 467L0 467Z'/%3E%3C/svg%3E")}
  .th8-poster{transform:translate3d(-50%,-50%,0) rotate(-14deg)}   /* as thg8.js PHONE.roll */
  .th8-cap-d{display:none}
  .th8-cap-m{display:block}
  .th8-streaks{left:-30%;width:160%;transform:rotate(-14deg)}   /* the field's streaks run with the slanted carton's own */
  .th8-print{background-size:calc(270 * var(--u)) auto;background-position:calc(50% + 40 * var(--u)) calc(var(--cap) * .34);opacity:.2}
  .th8-rule::before{height:5px;top:-19px}
  .th8-rule::after{height:2px;top:-10px}
}
@media (prefers-reduced-motion:reduce){
  .th8-s{will-change:auto}
  .th8-streaks{transition:none}
  .th8-sweep{display:none}
}