/* Sabahebat: About us. Loads after site.css and reuses its tokens, type, cards, tape, pen and
   highlighter, header, menu and footer. Its one extra token is the logo's own green (as on the
   Sustainability page). One short page: no pinned scenes; about.js plays each piece once, as it
   comes into view. Without .motion (reduced motion, ?static, no JS) everything shows as the final frame. */

.ab { --green: #143D2D; }

/* header and menu: site.css (the same on every page) */
/* this page starts with text, not a pinned scene, so the masthead sits in the flow above it */
.motion .ab .masthead { position: relative; }

/* ------------------------------------------------------------ the group: intro, the emblem, three branches */
.ab-group { position: relative; padding: 36px 0 80px; }
.ab-tree { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
.ab-tree-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.ab-tree-svg .stem { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ab-tree-svg .lf { fill: var(--green); }

.ab-intro { grid-column: 1 / span 7; position: relative; z-index: 2; }
.ab-h1 { font-size: clamp(88px, 10.4vw, 150px); line-height: .84; }
.ab-h1 .ln { display: block; transform-origin: 0 100%; }
.ab-lead { font-size: 24px; line-height: 1.5; margin-top: 22px; max-width: 30em; }

.ab-root { grid-column: 9 / span 4; align-self: center; justify-self: center; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ab-emblem { display: block; width: 220px; }
.ab-emblem-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ab-loc { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: var(--red); }
.ab-loc .sq { width: 10px; height: 10px; }
.ab-root .ab-loc { background: var(--card); padding: 6px 10px; box-shadow: 0 8px 12px -8px rgba(40, 25, 5, .5); rotate: -2deg; }

.ab-nodes { grid-column: 1 / -1; list-style: none; margin: 104px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; position: relative; z-index: 2; }
.ab-node { position: relative; display: flex; flex-direction: column; }
.ab-obj { position: relative; height: 150px; margin-bottom: -52px; z-index: 3; pointer-events: none; }
.ab-card { position: relative; padding: 64px 28px 30px; rotate: var(--r, 0deg); box-shadow: 0 22px 34px -14px rgba(40, 25, 5, .5), 0 2px 4px rgba(40, 25, 5, .2); transition: transform .15s steps(3, end); }
.ab-node:hover .ab-card { transform: translateY(-5px); }
.n1 { --r: -1deg; } .n2 { --r: .8deg; } .n3 { --r: -.6deg; }
.ab-p { font-size: 18px; line-height: 1.62; margin-top: 12px; }
.ab-p a { font-weight: 600; text-underline-offset: 3px; }

/* the objects each branch carries */
.o-agri .o-durian { position: absolute; left: calc(50% - 88px); top: 0; width: 118px; height: 141px; transform-origin: 50% 4%; }
.o-agri .o-ffb { position: absolute; left: calc(50% + 18px); top: 58px; width: 92px; height: 92px; }
.vtags { position: absolute; left: calc(50% + 40px); top: -6px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.vt { position: relative; display: block; padding: 5px 7px 4px 14px; background: var(--card); border: 1.5px solid var(--ink); font: 600 11px/1.1 var(--mono); white-space: nowrap; clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%); rotate: var(--r); transform-origin: 0 50%; box-shadow: 0 5px 8px -5px rgba(40, 25, 5, .5); }
.vt i { position: absolute; left: 5px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.2px var(--ink); }
.vt1 { margin-left: 0; } .vt2 { margin-left: 10px; } .vt3 { margin-left: 4px; }
.o-energy .o-drum { position: absolute; left: calc(50% - 60px); top: 0; width: 118px; height: 150px; transform-origin: 50% 100%; }
.o-ai .doc { position: absolute; left: calc(50% - 56px); top: 6px; width: 112px; height: 140px; background: #FBF8EF; box-shadow: 0 10px 14px -8px rgba(40, 25, 5, .5), 0 1px 2px rgba(40, 25, 5, .2); padding: 22px 12px 0 36px; display: flex; flex-direction: column; gap: 22px; }
.o-ai .doc.back { left: calc(50% - 44px); top: 0; rotate: 6deg; padding: 0; }
.o-ai .doc i { display: block; height: 6px; background: rgba(26, 24, 20, .16); }
.o-ai .doc i:nth-child(2) { width: 80%; } .o-ai .doc i:nth-child(3) { width: 92%; } .o-ai .doc i:nth-child(4) { width: 64%; }
.o-ai .ticks { position: absolute; left: 6px; top: 0; width: 28px; height: 140px; overflow: visible; }
.o-ai .ticks .pen { stroke-width: 3.4; }

/* ------------------------------------------------------------ the long view */
.ab-view { padding: 24px 0 96px; }
.ab-view-p { font-size: 34px; line-height: 1.42; max-width: 30em; border-top: 2px solid var(--ink); padding-top: 34px; }
.ab-view .sw { background-image: linear-gradient(var(--hl), var(--hl)); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em; margin: 0 -.06em; }

/* ------------------------------------------------------------ leadership (names as text, from src/data/leadership.json) */
.ab-leaders { padding: 96px 0 64px; border-top: 2px solid var(--ink); background-color: var(--paper); }
.ab-leaders .h2 { font-size: 96px; margin: 0; }
.ld-group { margin-top: 56px; }
.ld-h3 { font-size: 34px; line-height: 1; }
.ld-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 28px 32px; }
.ld-board .ld-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ld-management .ld-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ld-person { position: relative; padding-top: 18px; }
.ld-rule { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); transform-origin: 0 50%; }
.ld-name { font-size: 26px; line-height: 1.25; font-weight: 600; }
.ld-title { font-size: 14px; line-height: 1.4; margin-top: 8px; color: var(--ink); }

/* ------------------------------------------------------------ mid widths and phones: the tree runs down the left */
@media (max-width: 1100px) {
  .ab-lead { font-size: 22px; }
  .ab-emblem { width: 180px; }
  .ab-nodes { margin-top: 110px; gap: 24px; }
  .ab-card { padding: 60px 22px 26px; }
  .ab-p { font-size: 17px; }
  .ld-management .ld-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ab-tree { display: block; }
  .ab-h1 { font-size: clamp(64px, 17vw, 140px); }
  .ab-lead { font-size: 20px; max-width: none; }
  .ab-root { flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; width: fit-content; margin: 30px auto 0; }
  .ab-emblem { width: 104px; }
  .ab-nodes { margin: 40px 0 0 46px; grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .ab-obj { height: 118px; margin-bottom: -44px; }
  .o-agri .o-durian { left: auto; right: 116px; width: 96px; height: 115px; }
  .o-agri .o-ffb { left: auto; right: 34px; top: 44px; width: 76px; height: 76px; }
  .vtags { left: auto; right: -6px; top: -4px; }
  .o-energy .o-drum { left: auto; right: 30px; width: 92px; height: 117px; }
  .o-ai .doc { left: auto; right: 30px; width: 92px; height: 112px; padding: 18px 10px 0 30px; gap: 17px; }
  .o-ai .doc.back { left: auto; right: 20px; }
  .o-ai .ticks { height: 112px; width: 24px; left: 5px; }
  .ab-card { padding: 22px 20px 24px; }
  .ab-card .ab-loc { max-width: calc(100% - 150px); }
  .ab-view-p { font-size: 26px; }
  .ab-leaders .h2 { font-size: 72px; }
}
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  .ab-group { padding: 28px 0 64px; }
  .ab-lead { font-size: 18px; line-height: 1.55; margin-top: 16px; }
  .ab-emblem { width: 88px; }
  .ab-nodes { margin-left: 34px; gap: 40px; }
  .ab-obj { height: 100px; margin-bottom: -36px; }
  .o-agri .o-durian { right: 96px; width: 80px; height: 96px; }
  .o-agri .o-ffb { right: 26px; top: 38px; width: 62px; height: 62px; }
  .vt { font-size: 9.5px; padding: 4px 6px 3px 12px; }
  .o-energy .o-drum { right: 22px; width: 78px; height: 99px; }
  .o-ai .doc { right: 22px; width: 78px; height: 96px; padding: 15px 8px 0 26px; gap: 14px; }
  .o-ai .doc.back { right: 14px; }
  .o-ai .ticks { height: 96px; width: 20px; left: 4px; }
  .ab-card { padding: 20px 16px 20px; }
  .ab-card .ab-loc { max-width: calc(100% - 118px); font-size: 12.5px; }
  .ab-p { font-size: 16.5px; line-height: 1.58; }
  .ab-view { padding: 8px 0 72px; }
  .ab-view-p { font-size: 22px; padding-top: 24px; }
  .ab-leaders { padding: 72px 0 40px; }
  .ab-leaders .h2 { font-size: 56px; }
  .ld-group { margin-top: 40px; }
  .ld-h3 { font-size: 26px; }
  .ld-board .ld-list, .ld-management .ld-list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ld-name { font-size: 22px; }
  .ld-title { font-size: 13px; margin-top: 6px; }
}

/* ------------------------------------------------------------ one-shot moves (12fps paper, smooth pen) */
@keyframes aSlam { 0% { opacity: 0; transform: scale(1.26) rotate(-2.5deg) translateY(-14px); } 20% { opacity: 1; transform: scale(1.26) rotate(-2.5deg) translateY(-14px); } 40% { opacity: 1; transform: scale(.95) rotate(1deg) translateY(3px); } 60% { opacity: 1; transform: scale(1.02) rotate(-.4deg); } 80%, 100% { opacity: 1; transform: none; } }
@keyframes aRise { 0% { opacity: 0; transform: translateY(26px); } 25% { opacity: 1; transform: translateY(12px); } 50% { opacity: 1; transform: translateY(3px); } 75%, 100% { opacity: 1; transform: none; } }
@keyframes aDrop { 0% { transform: translateY(-120px) rotate(-8deg); } 17% { transform: translateY(-46px) rotate(-4deg); } 33% { transform: translateY(8px) rotate(1.5deg); } 50% { transform: translateY(-4px) rotate(-.8deg); } 67% { transform: translateY(1px); } 83%, 100% { transform: none; } }
@keyframes aLeaf { 0% { transform: scale(0) rotate(-24deg); } 25% { transform: scale(1.28) rotate(8deg); } 50% { transform: scale(.94) rotate(-2deg); } 75%, 100% { transform: none; } }
@keyframes aSwing { 0% { transform: translateY(-80px) rotate(-30deg); } 12% { transform: rotate(16deg); } 24% { transform: rotate(-10deg); } 36% { transform: rotate(6deg); } 48% { transform: rotate(-3.5deg); } 60% { transform: rotate(2deg); } 72% { transform: rotate(-1deg); } 84%, 100% { transform: none; } }
@keyframes aThud { 0% { transform: translateY(-150px); } 17% { transform: translateY(-70px); } 33% { transform: translateY(6px) scale(1.08, .88); } 50% { transform: translateY(-8px) scale(.97, 1.04); } 67% { transform: translateY(1px); } 83%, 100% { transform: none; } }
@keyframes aTag { 0% { transform: rotate(-40deg) scale(.4); opacity: 0; } 20% { transform: rotate(22deg); opacity: 1; } 40% { transform: rotate(-12deg); opacity: 1; } 60% { transform: rotate(6deg); opacity: 1; } 80%, 100% { transform: none; opacity: 1; } }
@keyframes aRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* the emblem prints itself (as the header logo does), then its stems grow into the tree */
.ab-emblem .lg-leaf path, .ab-emblem .lg-flame, .ab-emblem .lg-s { transform-box: fill-box; }
.motion .ab-root:not(.go) .ab-emblem, .motion .ab-root:not(.go) .ab-loc { visibility: hidden; }
.motion .ab-root.go .lg-stem { stroke-dasharray: 101 130; animation: drawOn 420ms cubic-bezier(.45, .05, .25, 1) both; }
.motion .ab-root.go .lg-leaf path { transform-origin: 50% 50%; animation: aLeaf 333ms steps(1, end) both; animation-delay: calc(160ms + var(--i) * 45ms); }
.motion .ab-root.go .lg-flame { transform-origin: 50% 100%; animation: ignite 417ms steps(1, end) 260ms both; }
.motion .ab-root.go .lg-s { transform-origin: 50% 50%; animation: stampS 250ms steps(1, end) 620ms both; }
.motion .ab-root.go .ab-loc { animation: aRise 333ms steps(1, end) 760ms both; }

.motion .ab-intro .ln { animation: aSlam 417ms steps(1, end) 80ms both; }
.motion .ab-lead { animation: aRise 333ms steps(1, end) 420ms both; }

.motion .ab-tree-svg .stem { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); }
.motion .ab-tree-svg .stem.on { stroke-dashoffset: 0; }
.ab-tree-svg .lf { transform-box: view-box; }
.motion .ab-tree-svg .lf:not(.on) { visibility: hidden; }
.motion .ab-tree-svg .lf.on { animation: aLeaf 333ms steps(1, end) both; }

.motion .ab-node:not(.in) .ab-card, .motion .ab-node:not(.in) .ab-obj { visibility: hidden; }
.motion .ab-node.in .ab-card { animation: aDrop 500ms steps(1, end) both; }
.motion .ab-node.in .o-durian { animation: aSwing 750ms steps(1, end) 120ms both; }
.motion .ab-node.in .o-ffb { animation: aThud 500ms steps(1, end) 260ms both; }
.motion .ab-node.in .vt { animation: aTag 417ms steps(1, end) both; animation-delay: calc(480ms + var(--d, 0ms)); }
.vt1 { --d: 0ms; } .vt2 { --d: 110ms; } .vt3 { --d: 220ms; }
.motion .ab-node.in .o-drum { animation: aThud 500ms steps(1, end) 120ms both; }
.motion .ab-node.in .o-ai .doc { animation: aRise 333ms steps(1, end) 120ms both; }
.motion .ab-node.in .o-ai .doc.back { animation-delay: 60ms; }
.motion .ab-node.in .tk { animation: drawOn 260ms cubic-bezier(.45, .05, .25, 1) both; }
.motion .ab-node.in .tk0 { animation-delay: 520ms; } .motion .ab-node.in .tk1 { animation-delay: 760ms; }
.motion .ab-node.in .tk2 { animation-delay: 1000ms; } .motion .ab-node.in .tk3 { animation-delay: 1240ms; }

.motion .ab-view:not(.in) .ab-view-p { opacity: 0; }
.motion .ab-view.in .ab-view-p { animation: aRise 333ms steps(1, end) both; }
.motion .ab-view:not(.in) .sw { background-size: 0% 100%; }
.motion .ab-view.in .sw { animation: sweep 420ms cubic-bezier(.6, 0, .2, 1) 380ms both; }

.motion .ab-leaders:not(.in) .ld-rule { transform: scaleX(0); }
.motion .ab-leaders.in .ld-rule { animation: aRule 520ms cubic-bezier(.45, .05, .25, 1) both; animation-delay: var(--dl, 0ms); }
.motion .ab-leaders:not(.in) .ld-name, .motion .ab-leaders:not(.in) .ld-title { opacity: 0; }
.motion .ab-leaders.in .ld-name, .motion .ab-leaders.in .ld-title { animation: aRise 333ms steps(1, end) both; animation-delay: calc(var(--dl, 0ms) + 160ms); }

@media (prefers-reduced-motion: reduce) {
  .ab-card { transition: none !important; }
}