/* Gasket types: the 3D engine with its always-visible list. Same field, type and row language as the hero. */
.g3d{--g3-bg:#DDE1E5;--g3-ink:#0F1215;--g3-mute:#4B545C;--g3-line:rgba(15,18,21,.16);--g3-navy:#10305C;--g3-gold:#E3B341;--g3-gold-d:#A97C10;
  background:var(--g3-bg);color:var(--g3-ink);padding:44px 0 12px;position:relative}
/* the Gaskets link lands with the heading just under the header; an id, because section[id] sets its own offset */
@media (min-width:761px){#gaskets3d{scroll-margin-top:42px}}
.g3d-grid{display:grid;grid-template-columns:304px minmax(0,1fr);column-gap:44px;align-items:stretch}
.g3d-side{display:flex;flex-direction:column;min-width:0}
.g3d-main{display:flex;flex-direction:column;min-width:0}
/* the heading runs across both columns, in the hero's colours: THG's indigo and the red both brands share */
.g3d h2{grid-column:1/-1;color:#10305C;font-size:clamp(42px,4.1vw,60px);line-height:.96;margin:2px 0 8px;text-wrap:balance}
html[data-theme=silver] .g3d h2 .accent,.g3d h2 .accent{color:#E3101E;font-style:italic;font-weight:700}

/* the list: hero segment rows, stacked */
.g3d-list{display:flex;flex-direction:column;flex:1;border-top:1px solid var(--g3-line);border-bottom:1px solid var(--g3-line)}
.g3d-row{appearance:none;background:transparent;border:0;border-top:1px solid var(--g3-line);color:var(--g3-ink);
  display:flex;align-items:center;gap:12px;width:100%;flex:1 1 28px;min-height:28px;padding:0 12px;margin:0;text-align:left;cursor:pointer;
  font:500 17px/1.05 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--g3-ink);transition:background-color .22s ease-out,color .22s ease-out}
.g3d-row:first-child{border-top:0}
/* each row shows its own part, rendered from the same 3D model, in a wide slot with nothing behind it.
   On the navy row a flat gasket turns into a white outline so it stays visible; seals and the box keep their colour */
.g3d-th{width:72px;height:40px;flex:none;object-fit:contain}
.g3d-row[aria-pressed=true] .g3d-th--flat{filter:brightness(0) invert(1)}
.g3d-row:hover{background:rgba(16,48,92,.08)}
.g3d-row[aria-pressed=true]{background:var(--g3-navy);color:#fff;font-weight:600}
.g3d-row:focus-visible{outline:2px solid var(--g3-navy);outline-offset:-2px} .g3d-row[aria-pressed=true]:focus-visible{outline-color:#E3B341}

/* the stage: no box; the canvas background is the section colour */
.g3d .g3d-stage{position:relative;overflow:hidden;background:url(assets/g3d_poster.webp) center/contain no-repeat;height:max(340px,calc(100svh - 274px));max-height:860px}
.g3d .g3d-stage .e3d-canvas{touch-action:pan-y}
/* the ghost engine dissolves into the section at the stage edges instead of ending in a hard cut */
.g3d .g3d-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--g3-bg),rgba(221,225,229,0) 56px),linear-gradient(270deg,var(--g3-bg),rgba(221,225,229,0) 56px),linear-gradient(180deg,var(--g3-bg),rgba(221,225,229,0) 56px),linear-gradient(0deg,var(--g3-bg),rgba(221,225,229,0) 56px)}
.g3d .g3d-stage .e3d-co{z-index:2}
/* loading: off the engine, on the card's ink rule; the gold line is the progress (no total known: full width, text without a number) */
.g3d .g3d-stage .e3d-status{inset:auto 0 0 0;display:block;z-index:3;padding:0 0 9px;font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--g3-ink)}
.g3d .g3d-stage .e3d-status::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--g3-gold);transform-origin:0 50%;transform:scaleX(var(--p,1))}
/* neighbours on the picture: same callout, ink instead of gold */
.g3d .e3d-co-m{--co-gold:#4B545C}
/* callouts in the list's type. The part and what it does: navy tag, as its selected row. Neighbours stay quiet. */
.g3d .g3d-stage .e3d-co{--co-gold:#C9971F}
.g3d .g3d-stage .e3d-co .e3d-co-line .l{stroke-width:1.5px}
.g3d .g3d-stage .e3d-co .e3d-co-line .d{r:3.4px}
.g3d .g3d-stage .e3d-co .e3d-co-label{font:600 15px/1 var(--display);letter-spacing:.045em}
.g3d .g3d-stage .e3d-co .e3d-co-label span{background:var(--g3-navy);color:#fff;border:0;padding:6px 10px 5px}
.g3d .g3d-stage .e3d-co .e3d-co-label.e3d-co-m{font-weight:500;font-size:14px}
.g3d .g3d-stage .e3d-co .e3d-co-label.e3d-co-m span{background:rgba(221,225,229,.88);color:#39424A;padding:5px 8px 4px}
.g3d .g3d-stage .e3d-co.e3d-co-phone .e3d-co-label{font-size:13px;letter-spacing:.035em}
.g3d .g3d-stage .e3d-co.e3d-co-phone .e3d-co-label span{padding:4px 6px 3px}
.g3d .g3d-stage .e3d-co.e3d-co-phone .e3d-co-label.e3d-co-m{font-size:12px}
/* back to the whole engine; hidden there (visibility, so nothing shifts) */
.g3d-reset{position:absolute;left:0;top:10px;z-index:3;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 10px;background:var(--g3-bg);border:1px solid rgba(15,18,21,.3);font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--g3-ink);cursor:pointer;visibility:hidden;transition:background-color .18s ease-out,color .18s ease-out}
.g3d-reset.on{visibility:visible}
.g3d-reset svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;flex:none}
.g3d-reset:hover{background:var(--g3-navy);color:#fff;border-color:var(--g3-navy)}
.g3d-reset:focus-visible{outline:2px solid var(--g3-navy);outline-offset:2px}

/* the spec sheet: one strip under the stage. All cards share one cell, so the height never changes. Name, gold rule and description on the left, material tiles on the right. */
.g3d-cards{position:relative;display:grid;border-top:2px solid var(--g3-ink)}
.g3d-card{--tile:92px;grid-area:1/1;position:relative;display:grid;grid-template-columns:minmax(0,1fr) calc(var(--tile)*3 + 16px);grid-template-rows:auto 1fr;column-gap:clamp(24px,3.2vw,56px);align-items:start;padding:11px 0 0;
  opacity:0;visibility:hidden;transition:opacity .14s linear,visibility 0s linear .14s}
.g3d-card.on{opacity:1;visibility:visible;transition:opacity .2s ease-out}
/* the card's name is a heading like the others on the page: navy, and the resting card's lead word in the red italic */
.g3d-card h3{grid-column:1;grid-row:1;justify-self:start;position:relative;font:600 clamp(30px,2.7vw,40px)/.96 var(--display);letter-spacing:.008em;text-transform:uppercase;color:var(--g3-navy);margin:0;padding-bottom:9px}
.g3d-card h3 .accent{color:#E3101E;font-style:italic;font-weight:700}
.g3d-card h3::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--g3-gold);transform-origin:0 50%}
.g3d-card p{grid-column:1;grid-row:2;position:relative;font:400 15.5px/1.4 var(--body);color:var(--g3-ink);margin:9px 0 0;max-width:80ch;text-wrap:pretty}
.g3d-card p b{font-weight:600}
.g3d-card dl{grid-column:2;grid-row:1/-1;display:flex;flex-wrap:wrap;gap:0 8px;margin:0}
.g3d-card dt{flex:0 0 100%;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--g3-mute);margin:3px 0 7px}
.g3d-card dd{font:500 15px/1.35 var(--body);color:var(--g3-ink);margin:0}
/* a material tile: a real sample of the surface, the name under it */
.g3d-card .g3d-chip{width:var(--tile);font:500 12.5px/1.15 var(--body);white-space:nowrap}
.g3d-chip img{display:block;width:100%;height:auto;aspect-ratio:96/44;margin-bottom:5px;outline:1px solid rgba(15,18,21,.2);outline-offset:-1px}
.g3d-chip img.g3d-seal{object-fit:contain;background:#EEF1F4;outline:0}

/* reveal, timed to the camera. hold: the card waits for its gasket. rev: the gold scan crosses on the same clock as the light sweep on the part, and each piece arrives as it passes. --t0 is the start of that sweep. */
.g3d-card.hold h3,.g3d-card.hold p,.g3d-card.hold dt,.g3d-card.hold dd{opacity:0}
.g3d-card.hold h3::after{transform:scaleX(0)}
.g3d-card.rev h3{animation:g3d-rise .34s var(--ease) calc(var(--t0,0ms) + 30ms) both}
.g3d-card.rev h3::after{animation:g3d-rule .52s var(--ease) calc(var(--t0,0ms) + 160ms) both}
.g3d-card.rev p{animation:g3d-wipe .9s cubic-bezier(.45,.05,.55,.95) calc(var(--t0,0ms) + 90ms) both}
.g3d-card.rev dt{animation:g3d-rise .32s var(--ease) calc(var(--t0,0ms) + 500ms) both}
.g3d-card.rev dd{animation:g3d-tile .38s var(--ease) calc(var(--t0,0ms) + 560ms + var(--i,0)*85ms) both}
.g3d-card dd:nth-of-type(2){--i:1} .g3d-card dd:nth-of-type(3){--i:2}
@keyframes g3d-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* the description is uncovered by the scan line itself: --sw is the strip width, so the clip edge rides the line (a beat behind it) whatever the width of the text */
@keyframes g3d-wipe{from{clip-path:inset(-6px calc(100% - 0px) -6px 0)}to{clip-path:inset(-6px calc(100% - var(--sw,100%)) -6px 0)}}
@keyframes g3d-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes g3d-tile{from{opacity:.2;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.g3d-scan{position:absolute;inset:-2px 0 0;overflow:hidden;pointer-events:none;visibility:hidden}
.g3d-scan b{position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,rgba(227,179,65,0) calc(100% - 56px),rgba(227,179,65,.12) calc(100% - 2px),var(--g3-gold) calc(100% - 2px))}
.g3d-cards.scan .g3d-scan{visibility:visible}
.g3d-cards.scan .g3d-scan b{animation:g3d-scan .9s cubic-bezier(.45,.05,.55,.95) var(--t0,0ms) both}
@keyframes g3d-scan{0%{transform:translateX(-100%);opacity:1}90%{opacity:1}100%{transform:translateX(0);opacity:0}}

/* the gold line: from the lowest point of the part straight down to the card */
.g3d-main{position:relative}
.g3d-link{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2;visibility:hidden;transition:opacity .15s linear}
.g3d-link path{fill:none;stroke:var(--g3-gold);stroke-dasharray:1;stroke-dashoffset:1} .g3d-link .drop{stroke-width:1.25}
.g3d-link circle{fill:var(--g3-gold);transform-box:fill-box;transform-origin:center;transform:scale(0)}
.g3d-link.on{visibility:visible}
.g3d-link.on circle{transform:none;transition:transform .2s var(--ease)}
.g3d-link.on .drop{stroke-dashoffset:0;transition:stroke-dashoffset .26s cubic-bezier(.4,0,.6,1) .06s}
.g3d-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:1320px){.g3d .g3d-stage{height:max(340px,calc(100svh - 294px))}}
@media (max-width:1180px){
  .g3d-grid{grid-template-columns:264px minmax(0,1fr);column-gap:32px}
  .g3d-row{font-size:16px;padding:0 10px;gap:10px} .g3d-th{width:60px;height:34px}
  .g3d-card{--tile:86px} .g3d-card .g3d-chip{font-size:12px} .g3d-card h3{font-size:30px}
}
@media (max-width:960px){
  .g3d .g3d-stage{height:max(340px,calc(100svh - 388px))}
  .g3d-card{grid-template-columns:minmax(0,1fr);grid-template-rows:none} .g3d-card p{grid-row:auto} .g3d-card dl{grid-column:1;grid-row:auto;margin-top:10px}
}
/* phones: heading, engine edge to edge, card, then the whole list as two columns of tap targets */
@media (max-width:760px){
  .g3d{padding:44px 0 48px}
  .g3d-grid{display:flex;flex-direction:column}
  .g3d-side,.g3d-main{display:contents}
  .g3d h2{order:2;margin:0 0 18px;font-size:clamp(40px,11.4vw,48px)}
  .g3d .g3d-stage{order:3;height:min(76vw,46vh);min-height:260px;width:100vw;margin-left:calc(50% - 50vw);scroll-margin-top:112px}
  .g3d-cards{order:4}
  .g3d-list{order:5;display:grid;grid-template-columns:1fr 1fr;margin-top:18px;border-bottom:0}
  .g3d-row{min-height:54px;font-size:15px;padding:0 8px;gap:8px;border-top:0;border-bottom:1px solid var(--g3-line)} .g3d-th{width:54px;height:30px}
  .g3d-row:nth-child(odd){border-right:1px solid var(--g3-line)}
  .g3d-link{display:none}
  .g3d .g3d-stage .e3d-status{left:16px;right:16px}
  .g3d-reset{left:auto;right:16px;top:8px;height:44px;padding:0 14px 0 12px}
  /* only the open card takes up room, so a short card leaves no gap above the list */
  .g3d-card{grid-template-columns:minmax(0,1fr);grid-template-rows:none;align-content:start;padding-top:14px} .g3d-card:not(.on){position:absolute;left:0;right:0;top:0}
  .g3d-card h3{grid-column:1/-1;font-size:clamp(30px,8.6vw,36px)} .g3d-card p{grid-column:1;grid-row:2;margin-top:10px}
  .g3d-card dl{grid-column:1/-1;grid-row:3;margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px} .g3d-card dt{grid-column:1/-1} .g3d-card .g3d-chip{width:auto} .g3d-chip img{aspect-ratio:96/36;object-fit:cover} .g3d-chip img.g3d-seal{aspect-ratio:1;object-fit:contain}
}
@media (prefers-reduced-motion:reduce){.g3d-row,.g3d-th,.g3d-card,.g3d-card.on,.g3d-link *{transition:none!important}.g3d-card *,.g3d-card *::after,.g3d-scan b{animation:none!important}}