/* ═══════════════════════════════════════════════════════════
   HAIRCULES — Halaman Tentang. Motion-forward, editorial.
   Dibaca setelah main.css (pakai token yang sama).
   ═══════════════════════════════════════════════════════════ */

/* ---- bobot & label font (Cormorant + Oswald) ---- */
.t-hero h1,.equation .term,.tl-item .yr,.origin .pull,.vismisi .big,.tstats b,.commit blockquote,.marquee .v span{font-weight:600}
.tstats span,.equation .term small{font-family:var(--cond)}

/* ---- utilitas reveal (base, selalu terlihat kalau JS mati) ---- */
.r-up{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.r-up.in{opacity:1;transform:none}
.r-fade{opacity:0;transition:opacity 1.1s var(--ease)}
.r-fade.in{opacity:1}
@media(prefers-reduced-motion:reduce){.r-up,.r-fade{opacity:1 !important;transform:none !important;transition:none}}

/* ---- kinetic headline: kata demi kata naik dari balik mask ---- */
.kin{display:block}
.kin .w{display:inline-block;vertical-align:top}
.kin .w > span{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity .7s var(--ease),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*.07s)}
.kin.in .w > span{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.kin .w > span{opacity:1 !important;transform:none !important}}

/* ═══════════ HERO TENTANG ═══════════ */
.t-hero{position:relative;min-height:100vh;display:flex;align-items:center;background:var(--dark);color:var(--body-inv);overflow:hidden;padding:120px 0 80px}
.t-hero .ghost{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-family:var(--serif);font-size:26vw;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(201,159,98,.14);white-space:nowrap;pointer-events:none;z-index:0;will-change:transform}
.t-hero .aura{position:absolute;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(circle,var(--brass-glow),transparent 60%);top:-20%;right:-15%;pointer-events:none;z-index:0}
.t-hero .inner{position:relative;z-index:2;max-width:1000px}
.t-hero .eyebrow{margin-bottom:22px}
.t-hero h1{font-size:clamp(44px,8.5vw,120px);line-height:.98;color:var(--ink-inv);letter-spacing:-.01em;font-weight:400}
.t-hero h1 .accent{color:var(--brass-lt);font-style:italic}
.t-hero .sub{margin-top:30px;max-width:560px;font-size:clamp(16px,2vw,19px);color:var(--body-inv)}
.t-scrollcue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted-inv);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.t-scrollcue i{width:1px;height:46px;background:linear-gradient(var(--brass),transparent);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ═══════════ ORIGIN (awal mula) ═══════════ */
.origin{background:var(--cream);position:relative;overflow:hidden}
.origin .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
@media(max-width:860px){.origin .grid{grid-template-columns:1fr;gap:30px}}
.origin .pull{font-family:var(--serif);font-size:clamp(26px,3.6vw,44px);line-height:1.25;color:var(--ink)}
.origin .pull em{color:var(--brass);font-style:italic}
.origin .body p{margin-bottom:16px;color:var(--body);font-size:16px}
.origin .figure{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5}
.origin .figure img{width:100%;height:120%;object-fit:cover;will-change:transform}
.origin .tagx{position:absolute;left:-8px;bottom:24px;background:var(--brass);color:#fff;font-family:var(--serif);font-size:22px;padding:12px 22px;border-radius:0 8px 8px 0;box-shadow:0 14px 30px var(--brass-glow)}

/* ═══════════ FILOSOFI NAMA ═══════════ */
.namephil{background:var(--dark);color:var(--body-inv);text-align:center;overflow:hidden}
.equation{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,44px);flex-wrap:wrap;margin:10px 0 40px}
.equation .term{font-family:var(--serif);font-size:clamp(30px,6vw,80px);color:var(--ink-inv);line-height:1}
.equation .term small{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-lt);margin-top:12px;font-weight:600}
.equation .op{font-family:var(--serif);font-size:clamp(24px,4vw,54px);color:var(--brass)}
.equation .res{color:var(--brass-lt)}
.namephil .exp{max-width:680px;margin:0 auto;color:var(--body-inv);font-size:17px;line-height:1.8}
.namephil .exp b{color:var(--ink-inv)}

/* ═══════════ VISI & MISI ═══════════ */
.vismisi .big{font-family:var(--serif);font-size:clamp(28px,4.4vw,58px);line-height:1.2;color:var(--ink);max-width:1000px}
.vismisi .big .hl{background:linear-gradient(transparent 62%,rgba(201,159,98,.32) 62%)}
.misi{margin-top:56px;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:m}
@media(max-width:900px){.misi{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.misi{grid-template-columns:1fr}}
.misi li{position:relative;padding-top:22px;border-top:2px solid var(--line);font-size:14.5px;color:var(--body)}
.misi li::before{counter-increment:m;content:"0" counter(m);position:absolute;top:-14px;left:0;background:var(--cream);padding-right:10px;font-family:var(--serif);color:var(--brass);font-size:15px}
.misi li b{display:block;color:var(--ink);font-family:var(--sans);font-weight:600;margin-bottom:4px}

/* ═══════════ NILAI (marquee) ═══════════ */
.values{background:var(--dark);color:var(--ink-inv);padding-block:clamp(50px,7vw,90px);overflow:hidden}
.marquee{display:flex;gap:0;width:max-content;animation:scrollx 26s linear infinite}
.marquee:hover{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.marquee{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
.marquee .v{display:inline-flex;align-items:center;gap:26px;padding:0 34px}
.marquee .v span{font-family:var(--serif);font-size:clamp(30px,4vw,56px);color:var(--ink-inv);white-space:nowrap}
.marquee .v i{width:11px;height:11px;border-radius:50%;background:var(--brass);flex:none}
.marquee .v:nth-child(even) span{color:transparent;-webkit-text-stroke:1px var(--brass-lt)}
@keyframes scrollx{to{transform:translateX(-50%)}}
.values .cap{text-align:center;margin-bottom:36px}

/* ═══════════ TIMELINE PERJALANAN ═══════════ */
.journey{background:var(--cream);position:relative}
.journey .rail{position:relative;max-width:900px;margin:60px auto 0}
.journey .line{position:absolute;left:50%;top:0;transform:translateX(-50%);width:2px;height:100%;background:var(--line)}
.journey .line::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(var(--brass),var(--brass-lt));transform:scaleY(var(--tlp,0));transform-origin:top}
@media(max-width:720px){.journey .line{left:18px}}
.tl-item{position:relative;width:50%;padding:0 44px 70px;opacity:0;transform:translateY(50px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.tl-item.in{opacity:1;transform:none}
.tl-item:nth-child(odd){left:0;text-align:right}
.tl-item:nth-child(even){left:50%;text-align:left}
.tl-item .dot{position:absolute;top:6px;width:16px;height:16px;border-radius:50%;background:var(--cream);border:3px solid var(--brass);z-index:2;transition:transform .4s var(--ease),box-shadow .4s}
.tl-item.in .dot{box-shadow:0 0 0 6px rgba(201,159,98,.18)}
.tl-item:nth-child(odd) .dot{right:-8px}
.tl-item:nth-child(even) .dot{left:-8px}
.tl-item .yr{font-family:var(--serif);font-size:clamp(40px,6vw,78px);color:var(--brass);line-height:.9;opacity:.85}
.tl-item h3{font-size:22px;margin:8px 0 8px;color:var(--ink)}
.tl-item p{font-size:14.5px;color:var(--body);max-width:340px;display:inline-block}
@media(max-width:720px){
  .tl-item{width:100%;left:0 !important;text-align:left !important;padding:0 0 56px 52px}
  .tl-item .dot{left:11px !important;right:auto !important}
  .tl-item p{max-width:none}
}

/* ═══════════ KOMITMEN / closing ═══════════ */
.commit{background:var(--dark);color:var(--body-inv);text-align:center;position:relative;overflow:hidden}
.commit .mark{font-family:var(--serif);font-size:120px;color:var(--brass);line-height:.5;height:60px}
.commit blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3.6vw,44px);line-height:1.35;color:var(--ink-inv);max-width:900px;margin:0 auto 20px}
.commit cite{font-style:normal;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-lt)}

/* ---- count-up stat strip ---- */
.tstats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;max-width:900px;margin:56px auto 0}
@media(max-width:640px){.tstats{grid-template-columns:repeat(2,1fr);gap:34px 14px}}
.tstats b{font-family:var(--serif);font-size:clamp(34px,4.6vw,58px);color:var(--brass-lt);display:block;line-height:1}
.tstats span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-inv);margin-top:10px;display:block}