/* ============================ ABOUT //ADAPT ONE (NEW LOOK) ============================
   about/about2.php. The design's markup carries its own inline styles; this file holds what inline styles
   cannot: the animations, the hovers, the reveals and the rules for narrow or short screens (the design's
   own, keyed on its data-r names). From the Claude Design "ADAPT About" (59Dg21fzf6dGFMMncsfbJA).
   ========================================================================== */
.ab { font-family: 'Archivo', sans-serif; background: #0a0a0a; color: #f5f5f3; overflow-x: clip; }
.ab *, .ab *::before, .ab *::after { box-sizing: border-box; }
.ab h1, .ab h2, .ab h3, .ab p { margin: 0; }
.ab p { color: inherit; }
.ab a { color: inherit; text-decoration: none; }
.ab a:hover { color: #00FF50; }
.ab ::selection { background: #00FF50; color: #0a0a0a; }
.ab a:focus-visible { outline: 2px solid #00FF50; outline-offset: 3px; }

/* the design's hovers */
.ab .ab-h-g:hover { background: #00FF50 !important; color: #0a0a0a !important; border-color: #00FF50 !important; }
.ab .ab-h-ink:hover { background: #0a0a0a !important; color: #00FF50 !important; }
.ab .ab-h-paper:hover { background: #f5f5f3 !important; color: #0a0a0a !important; }
.ab .ab-h-line:hover { border-color: #00FF50 !important; }

/* reveals: shell.js adds .in; each one says how it arrives (--rv) and how late (--d) */
.hp-js .ab [data-rv="ab"] { transition: opacity 1s var(--d, 0ms) cubic-bezier(.2,.7,.2,1), transform 1s var(--d, 0ms) cubic-bezier(.2,.7,.2,1); }
.hp-js .ab [data-rv="ab"]:not(.in) { opacity: 0; transform: var(--rv, translateY(56px)); }

@keyframes abRise { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes abFade { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes abScroll { from { transform: translateY(-20px); } to { transform: translateY(60px); } }
@keyframes abSpin { to { transform: rotate(360deg); } }
@keyframes abPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* the pinned parts lie flat on a phone or without motion */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    .ab [data-pin] { height: auto !important; --p: 1 !important; }
    .ab [data-stick] { position: relative !important; height: auto !important; min-height: 0 !important; padding-bottom: 60px; --q: 1 !important; --done: 1 !important; }
    .ab [data-pv] { transform: none !important; }
    .ab [data-wordbox] { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 28px clamp(20px,4vw,56px) 24px; }
    .ab [data-wordbox] > svg { display: none !important; }
    .ab [data-word] { position: static !important; transform: none !important; }
    .ab [data-word] > div { white-space: normal !important; }
    .ab [data-htrack] { transform: none !important; flex-direction: column !important; width: auto !important; }
    .ab [data-hstage] { position: relative !important; height: auto !important; }
}
@media (prefers-reduced-motion: reduce) { .ab * { animation: none !important; } }
@media (max-width: 900px) {
    .ab [data-r="abwho"] { width: auto !important; height: 340px !important; }
    .ab [data-r="abjourney"] > span { left: 18px !important; }
    .ab [data-hide] { display: none !important; }
    .ab [data-r="abstep"] { grid-template-columns: 36px minmax(0,1fr) !important; min-height: 92px !important; }
    .ab [data-r="abstep"] > :nth-child(2) { grid-column: 1; grid-row: 1; place-items: center start !important; padding-left: 8px; }
    .ab [data-r="abstep"] > :nth-child(1), .ab [data-r="abstep"] > :nth-child(3) { grid-column: 2; grid-row: 1; text-align: left !important; }
    .ab [data-r="abchain"] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; row-gap: 28px !important; }
}
@media (max-height: 760px) and (min-width: 901px) {
    .ab [data-stick] h2 { font-size: clamp(34px,4.2vw,72px) !important; }
    .ab [data-stick] [data-r="abtwo"] { margin-bottom: 20px !important; }
    .ab [data-r="abfinal"] { bottom: 3% !important; }
    .ab [data-r="abfinal"] > div { font-size: clamp(26px,3.4vw,56px) !important; }
    .ab [data-r="abwho"] { height: 46vh !important; }
}
@media (max-width: 1200px) { .ab [data-r="ab5"] { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } }
@media (max-width: 900px) {
    .ab [data-r="abtwo"], .ab [data-r="abmis"] { grid-template-columns: minmax(0,1fr) !important; }
    .ab [data-r="ab5"] { grid-template-columns: minmax(0,1fr) !important; }
    .ab [data-r="abpanel"] { min-height: 300px !important; }
    .ab [data-r="abgridvis"] { height: 420px !important; }
    .ab [data-r="abhero"] { grid-template-columns: minmax(0,1fr) !important; }
    .ab [data-r="abfinal"] { position: relative !important; bottom: auto !important; padding: 0 20px; }
}

/* long words stay whole: the five panels' names and the chain's last link are sized to fit their column
   (the design let "//ACADEMY" and "OPPORTUNITY" break mid-word at desktop widths) */
.ab [data-r="abpanel"] > div:last-child > div:first-child { overflow-wrap: normal !important; }
@media (min-width: 1201px){ .ab [data-r="abpanel"] > div:last-child > div:first-child { font-size: clamp(24px, 2.1vw, 44px) !important; } }
.ab [data-r="abchain"] > div > span:last-child { overflow-wrap: normal !important; font-size: clamp(16px, 1.6vw, 34px) !important; }
@media (max-width: 900px){ .ab [data-r="abchain"] > div > span:last-child { font-size: clamp(18px, 5vw, 26px) !important; } }