/* "Now" section (AR first): vertical, present tense. Koki.sy and Apollo share one layout: photo + overlapping tile, lead text, details. Reuses .read/.mark and the dot-mask reveal from story.css. */
.nowsec{position:relative;padding:88px var(--m) 56px;background-image:radial-gradient(rgba(255,193,7,.1) 1.2px,transparent 1.5px);background-size:20px 20px;background-position:10px 10px} /* taste-skill-ignore: dot pattern, not a gradient fill */
.nowsec .dtitle{margin-bottom:22px}
/* the timeline's gold line turns downward and ends in a live node */
.vline{position:absolute;top:0;inset-inline-start:var(--m);width:2px;height:62px;background:var(--acc);display:block}
.vnode{position:absolute;bottom:-7px;inset-inline-start:-6px;width:14px;height:14px;border-radius:50%;background:var(--acc);display:block}
.vnode::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--acc);opacity:0;animation:live 2.2s var(--ease) 1s 3}
@keyframes live{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.blk{margin-bottom:52px}
/* photo + tile */
.kvis{position:relative}
.kvis .human{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--bg2)}
.tile{position:absolute;bottom:-16px;overflow:hidden;background:var(--bg2);border:5px solid var(--bg);transition:transform .5s var(--ease)}
.tile img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.phone{right:12px;width:32%;aspect-ratio:390/844;border-radius:20px;transform:rotate(3deg)}
.phone:hover{transform:rotate(0) translateY(-4px)}
.logo{left:12px;width:36%;aspect-ratio:500/448;border-radius:14px;transform:rotate(-3deg)}
.ktxt{margin-top:30px}
.role{display:inline-block;color:var(--acc);font-size:15px;margin-bottom:2px;direction:ltr}
.ktxt h3{font-size:clamp(40px,12vw,64px);line-height:1.15;color:var(--pri);margin-bottom:8px;direction:ltr;text-align:start}
html[lang=ar] .ktxt h3{direction:rtl}
.ktxt .read{margin-bottom:6px}
/* numbers: outline that fills with gold from the baseline as it counts. The ghost keeps the final width, so nothing shifts. */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:22px 14px;margin:24px 0 26px}
.st{min-width:0}
.cnt{display:grid;width:max-content;max-width:100%;direction:ltr;font:700 clamp(44px,13vw,62px)/1 'U',sans-serif;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cnt i{grid-area:1/1;font-style:normal;text-align:start}
.cnt .g{color:var(--acc)}
.js .cnt .g{visibility:hidden}
.cnt .o{color:transparent;-webkit-text-stroke:2px var(--acc)}
.cnt .f{color:var(--acc);clip-path:inset(100% 0 0 0)}
.st > span{display:block;margin-top:8px;font-size:14px;line-height:1.45;color:var(--txt)}
.ktxt .btn svg{width:18px;height:18px}
/* Apollo: what I do */
.q{font-size:clamp(24px,7vw,32px);line-height:1.3;color:var(--pri);margin:26px 0 14px;display:flex;align-items:center;gap:10px}
.q::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);flex:none}
.oplist{list-style:none;padding:0;margin:0;display:grid;gap:18px;font-family:'P','EB',sans-serif;font-weight:400}
.oplist li{display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:start;color:#cfcfd8}
.oplist li>i{font-style:normal;color:var(--acc);font-size:22px;line-height:1.5}
.oplist b{display:block;font:700 17px/1.5 'EB','P',sans-serif;color:var(--acc);margin-bottom:2px}
.oplist p{font-size:16px;line-height:1.85;margin:0}
.oplist li:last-child p::after{content:"";display:inline-block;width:9px;height:1.1em;margin-inline-start:6px;vertical-align:-.2em;background:var(--acc);animation:caret 1s steps(1) 2s 8}
@keyframes caret{50%{opacity:0}}
/* reading + listening */
.life{display:grid;gap:36px;margin-bottom:0}
.lab{display:block;font-size:14px;color:var(--acc);margin-bottom:4px}
.rd{display:grid;grid-template-columns:minmax(0,172px) 1fr;gap:22px;align-items:center}
.book3d{perspective:800px;direction:ltr;width:100%}
.bk{position:relative;transform-style:preserve-3d;transform:rotateY(-22deg) rotateX(4deg)}
.bk img{display:block;width:100%;height:auto;aspect-ratio:1000/1293;object-fit:cover;background:var(--bg2)}
.bk .spine{position:absolute;top:0;bottom:0;left:0;width:16px;background:#2c1a52;transform:rotateY(90deg) translateZ(-1px);transform-origin:left center}
.bk .pages{position:absolute;top:2px;bottom:2px;right:0;width:14px;background:#e9e4d4;transform:rotateY(90deg);transform-origin:right center}
.rdt h4{font:700 22px/1.25 'U',sans-serif;color:var(--pri);direction:ltr;text-align:start}
.rdt .sub{font:400 13.5px/1.5 'U',sans-serif;color:rgba(227,227,227,.8);direction:ltr;text-align:start;margin-top:4px}
.rdt .by{font:400 13px/1.4 'U',sans-serif;color:rgba(227,227,227,.65);direction:ltr;text-align:start;margin-top:4px}
/* player: a lazy facade; the real YouTube player loads only on tap */
.pl-btn{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;background:var(--bg2);overflow:hidden;cursor:pointer;border-radius:16px;color:var(--pri)}
.pl-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(.9);transition:transform .8s var(--ease),filter .6s}
.pl-btn:hover img{transform:scale(1.05);filter:brightness(.8)}
.pl-btn .play{position:absolute;inset-block-end:16px;inset-inline-start:16px;width:58px;height:58px;border-radius:50%;background:var(--bg);border:2px solid var(--acc);display:grid;place-items:center;transition:background .3s,transform .3s var(--ease)}
.pl-btn .play svg{width:24px;height:24px;fill:var(--acc);margin-inline-start:3px;transition:fill .3s}
.pl-btn:hover .play{background:var(--acc);transform:scale(1.08)}
.pl-btn:hover .play svg{fill:var(--bg)}
.pl-btn .disc{position:absolute;inset-block-start:14px;inset-inline-end:14px;width:46px;height:46px;border-radius:50%;background:var(--bg);border:2px solid rgba(255,193,7,.7)}
.pl-btn .disc::after{content:"";position:absolute;inset:16px;border-radius:50%;background:var(--acc)}
.player.on .pl-btn{padding:0;aspect-ratio:16/9;cursor:default}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pl-meta{margin-top:14px}
.sg b{font:700 20px/1.25 'U',sans-serif;direction:ltr;display:block;text-align:start;color:var(--pri)}
.sg span{font:400 14px/1.4 'U',sans-serif;color:rgba(227,227,227,.75);direction:ltr;display:block;text-align:start;margin-top:2px}
/* entrance (JS on): same language as the timeline. The attribute selectors beat the RTL hidden-state rule on specificity. */
.js .blk .read p{clip-path:inset(0 100% 0 0);opacity:0;transition:clip-path 1s var(--ease) calc(var(--k,0)*.1s + .25s),opacity .35s linear calc(var(--k,0)*.1s + .25s)}
html[dir=rtl].js .blk .read p{clip-path:inset(0 0 0 100%)}
html[dir].js .blk.seen .read p{clip-path:inset(0);opacity:1}
.js .blk .read p::before{transform:scale(.4);opacity:0;transition:transform .5s var(--ease) calc(var(--k,0)*.1s + .4s),opacity .4s var(--ease) calc(var(--k,0)*.1s + .4s)}
html[dir].js .blk.seen .read p::before{transform:none;opacity:1}
.blk.seen .read mark{background:rgba(255,193,7,.17)}
.js .kvis .human,.js .kvis .tile{--r:0px;-webkit-mask-image:radial-gradient(circle at center,#000 var(--r),transparent calc(var(--r) + .6px));mask-image:radial-gradient(circle at center,#000 var(--r),transparent calc(var(--r) + .6px));-webkit-mask-size:10px 10px;mask-size:10px 10px;filter:blur(5px) brightness(.55);transition:--r 1s var(--ease),filter 1.1s var(--ease)} /* taste-skill-ignore: dot mask reveal */
.js .kvis .tile{transition:--r 1s var(--ease) .35s,filter 1.1s var(--ease) .35s,transform .5s var(--ease)}
.js .blk.seen .kvis .human,.js .blk.seen .kvis .tile{--r:8px;filter:none}
.js .ktxt .role,.js .ktxt h3,.js .ktxt .stats,.js .ktxt .btn,.js .ktxt .q,.js .ktxt .oplist li{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) .3s,transform .7s var(--ease) .3s}
.js .ktxt .stats{transition-delay:.45s}.js .ktxt .btn{transition-delay:.6s}.js .ktxt .q{transition-delay:.7s}
.js .ktxt .oplist li{transition-delay:calc(var(--k,0)*.12s + .8s)}
.js .blk.seen .ktxt .role,.js .blk.seen .ktxt h3,.js .blk.seen .ktxt .stats,.js .blk.seen .ktxt .btn,.js .blk.seen .ktxt .q,.js .blk.seen .ktxt .oplist li{opacity:1;transform:none}
.js .lb{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease) .3s,transform .7s var(--ease) .3s}
.js .lb.player{transition-delay:.6s}
.js .blk.seen .lb{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.vnode::after,.oplist li:last-child p::after,.js .blk .read p,.js .kvis .human,.js .kvis .tile,.js .ktxt .role,.js .ktxt h3,.js .ktxt .stats,.js .ktxt .btn,.js .ktxt .q,.js .ktxt .oplist li,.js .lb{transition:none}}
@media (min-width:900px){
.nowsec{padding:130px var(--m) 80px;max-width:1240px;margin-inline:auto}
.koki{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:60px;align-items:start}
.kvis{grid-column:2}
.ktxt{grid-column:1;grid-row:1;margin-top:0}
.apollo .kvis{grid-column:1}
.apollo .ktxt{grid-column:2}
.life{grid-template-columns:1fr 1fr;gap:60px}
}

/* minor section titles inside the reading + listening block */
.lt{font-size:clamp(24px,7vw,30px);line-height:1.3;color:var(--pri);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.lt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);flex:none}

/* English / LTR: U for Latin text; the button arrow is drawn pointing left (forward in RTL), so mirror it */
html:not([lang=ar]) .oplist{font-family:'U',system-ui,sans-serif}
html[dir=ltr] .ktxt .btn svg{transform:scaleX(-1)}