.media-carousel { position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:10px; background:var(--surface-alt); }
.media-carousel .media-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .65s ease; pointer-events:none; }
.media-carousel .media-slide.is-active { opacity:1; }
.media-controls { position:absolute; z-index:2; left:12px; bottom:12px; display:flex; align-items:center; gap:8px; padding:4px 6px; background:#0f172abf; border-radius:24px; color:white; }
.media-controls button { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:white; cursor:pointer; font-size:18px; }
.media-controls button:hover { background:#ffffff24; }
.media-controls span { font-size:11px; min-width:34px; text-align:center; }
.project-research-photo { margin:0 0 16px; }
.project-research-title { display:flex; justify-content:space-between; gap:12px; color:var(--blue); font-size:14px; font-weight:600; line-height:1.5; margin-bottom:10px; }
.project-research-card .lab-hint { line-height:1.7; }
.news-gallery-card>.news-gallery-media { position:absolute; inset:0; border-radius:0; width:100%; height:100%; aspect-ratio:auto; }
.news-gallery-media .media-controls { display:none; }
.news-gallery-copy a { display:flex; align-items:center; justify-content:space-between; gap:12px; color:white; font-size:13px; text-decoration:none; }
.news-gallery-copy a span { font-size:23px; }
html.ces-motion-ready .ces-reveal { opacity:0; transform:translateY(20px); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1); transition-delay:var(--reveal-delay,0ms); }
html.ces-motion-ready .ces-reveal.is-revealed { opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce) { .media-carousel .media-slide { transition:none; } html.ces-motion-ready .ces-reveal { opacity:1; transform:none; transition:none; } }
.research-story__image>.media-carousel { width:100%; height:100%; aspect-ratio:auto; border-radius:0; }
.hero-word { display:block; }
html.ces-motion-ready .hero h1.ces-reveal { transition:none; transform:none; }
html.ces-motion-ready .hero h1.is-revealed .hero-word { animation:ces-hero-pop .85s cubic-bezier(.16,1,.3,1) both; }
html.ces-motion-ready .hero h1.is-revealed .hero-word:nth-child(2) { animation-delay:.13s; }
html.ces-motion-ready .hero h1.is-revealed .hero-word:nth-child(3) { animation-delay:.26s; }
html.ces-motion-ready .hero-copy.is-revealed>.values { animation:ces-hero-pop .7s cubic-bezier(.16,1,.3,1) .3s both; }
html.ces-motion-ready .hero-copy.is-revealed>h2 { animation:ces-hero-pop .8s cubic-bezier(.16,1,.3,1) .42s both; }
html.ces-motion-ready .hero-copy.is-revealed>p { animation:ces-hero-pop .8s cubic-bezier(.16,1,.3,1) .54s both; }
html.ces-motion-ready .hero-copy.is-revealed>.hero-link { animation:ces-hero-pop .8s cubic-bezier(.16,1,.3,1) .66s both; }
@keyframes ces-hero-pop { from { opacity:0; transform:translateY(24px) scale(.94); transform-origin:left center; } to { opacity:1; transform:translateY(0) scale(1); transform-origin:left center; } }
@media(prefers-reduced-motion:reduce) { .hero-word,.hero-copy>* { animation:none!important; } }
html.ces-motion-ready .ces-reveal { transform:translateY(30px); transition-duration:1.2s; }
html.ces-motion-ready .ces-reveal.is-revealed { transform:none; }
html.ces-motion-ready .hero h1.is-revealed .hero-word { animation-duration:1.25s; }
html.ces-motion-ready .hero-copy.is-revealed>* { animation-duration:1.2s; }
@media(prefers-reduced-motion:reduce) { html.ces-motion-ready .ces-reveal { transform:none; transition:none; } }
html.ces-motion-ready .hero h1.ces-reveal,html.ces-motion-ready .hero-copy.ces-reveal { transform:translateX(28px); transition:opacity .9s ease,transform .9s ease; }
html.ces-motion-ready .hero h1.ces-reveal.is-revealed,html.ces-motion-ready .hero-copy.ces-reveal.is-revealed { transform:none; }
html.ces-motion-ready .hero h1.is-revealed .hero-word { animation-name:ces-hero-left-reveal; animation-duration:1.6s; animation-timing-function:cubic-bezier(.16,1,.3,1); }
html.ces-motion-ready .hero h1.is-revealed .hero-word:nth-child(2) { animation-delay:.2s; }
html.ces-motion-ready .hero h1.is-revealed .hero-word:nth-child(3) { animation-delay:.4s; }
html.ces-motion-ready .hero-copy.is-revealed>.values { animation:none; }
html.ces-motion-ready .hero-copy.is-revealed>.values>span { display:inline-block; animation:ces-hero-left-reveal 1.5s cubic-bezier(.16,1,.3,1) .25s both; }
html.ces-motion-ready .hero-copy.is-revealed>.values>span:nth-child(2) { animation-delay:.4s; }
html.ces-motion-ready .hero-copy.is-revealed>.values>span:nth-child(3) { animation-delay:.55s; }
html.ces-motion-ready .hero-copy.is-revealed>h2,html.ces-motion-ready .hero-copy.is-revealed>p,html.ces-motion-ready .hero-copy.is-revealed>.hero-link { animation-name:ces-hero-left-reveal; animation-duration:1.6s; }
@keyframes ces-hero-left-reveal { from { opacity:0; transform:translateX(-42px); clip-path:inset(0 100% 0 0); } to { opacity:1; transform:translateX(0); clip-path:inset(0 0 0 0); } }
@media(prefers-reduced-motion:reduce) { html.ces-motion-ready .hero h1.ces-reveal,html.ces-motion-ready .hero-copy.ces-reveal { transform:none; transition:none; } .hero-copy .values>span { animation:none!important; } }
.lab-page .pv-charts .pv-chart,.jamur-page .lab-page .jamur-charts>.lab-card,#water-pump-app .pump-charts>.lab-card { border-top:1px solid var(--line)!important; background:var(--surface)!important; }
.digital-twin-page .dt-full-width-charts #tab-ac .panel,.digital-twin-page .dt-full-width-charts #tab-dc .grid>.panel,.digital-twin-page .dt-full-width-charts #tab-bms .dt-bms-charts .panel { border-top:1px solid var(--line)!important; background:var(--surface)!important; }
.hess-main .hess-trend-plots>.chart-clean,.hess-main .hess-vehicle-charts .chart-clean { border-top:1px solid var(--line)!important; background:var(--surface)!important; }
html.ces-motion-ready .hero h1.ces-reveal,html.ces-motion-ready .hero-copy.ces-reveal,html.ces-motion-ready .hero h1.ces-reveal.is-revealed,html.ces-motion-ready .hero-copy.ces-reveal.is-revealed { transform:none!important; transition:opacity 1.2s ease; }
html.ces-motion-ready .hero h1.is-revealed .hero-word { animation:ces-hero-mask-reveal 2.4s linear both; }
html.ces-motion-ready .hero h1.is-revealed .hero-word:nth-child(2) { animation-delay:.2s; }
html.ces-motion-ready .hero h1.is-revealed .hero-word:nth-child(3) { animation-delay:.4s; }
html.ces-motion-ready .hero-copy.is-revealed>.values>span { animation:ces-hero-mask-reveal 2.2s linear .25s both; }
html.ces-motion-ready .hero-copy.is-revealed>.values>span:nth-child(2) { animation-delay:.45s; }
html.ces-motion-ready .hero-copy.is-revealed>.values>span:nth-child(3) { animation-delay:.65s; }
html.ces-motion-ready .hero-copy.is-revealed>h2,html.ces-motion-ready .hero-copy.is-revealed>p,html.ces-motion-ready .hero-copy.is-revealed>.hero-link { animation-name:ces-hero-mask-reveal; animation-duration:2.4s; animation-timing-function:linear; }
@keyframes ces-hero-mask-reveal {
    from { opacity:0; transform:none; clip-path:none; mask-image:linear-gradient(to right,#000 0%,#000 45%,transparent 55%,transparent 100%); mask-size:240% 100%; mask-position:100% 0; mask-repeat:no-repeat; }
    to { opacity:1; transform:none; clip-path:none; mask-image:linear-gradient(to right,#000 0%,#000 45%,transparent 55%,transparent 100%); mask-size:240% 100%; mask-position:0 0; mask-repeat:no-repeat; }
}

.dashboard-team-list{display:grid;gap:0}.dashboard-team-list>div{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-bottom:1px solid var(--line,#e2e8f0)}.dashboard-team-list strong{font-size:14px;color:var(--ink)}.dashboard-team-list small{font-size:12px;color:var(--muted)}.dashboard-team-list .dashboard-team-lead strong{color:var(--primary,#0865b5)}.dashboard-team-lead{border-left:3px solid var(--primary,#0865b5);padding-left:12px!important}.team-card,.research-story,.project-research-card{transition:transform .4s ease,box-shadow .4s ease}.team-card:hover,.research-story:hover,.project-research-card:hover{transform:translateY(-5px);box-shadow:0 14px 30px #102c4912}.team-grid{grid-template-columns:repeat(auto-fill,minmax(140px,180px))!important;gap:16px!important}.team-card{padding:14px!important}.team-card .team-photo{width:64px!important;height:64px!important;aspect-ratio:1!important;object-fit:cover}.team-card h3{font-size:13px!important}.dt-bms-charts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px}.dt-bms-charts .chart-container{height:200px!important}@media(max-width:700px){.dt-bms-charts{grid-template-columns:1fr!important}}

.dt-bms-charts .panel>div{height:200px!important}

.ces-interactive{--pointer-x:50%;--pointer-y:50%;transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.7,.2,1),translate .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease,border-color .5s ease!important}
@media(hover:hover) and (pointer:fine){
.ces-interactive.is-pointer-near,.ces-interactive:focus-within{translate:0 -5px;box-shadow:0 16px 36px color-mix(in srgb,var(--blue,#0865b5) 15%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--blue,#0865b5) 32%,transparent);border-color:color-mix(in srgb,var(--blue,#0865b5) 45%,var(--line,#e2e8f0))}
.ces-interactive.is-pointer-near{background-image:radial-gradient(260px circle at var(--pointer-x) var(--pointer-y),color-mix(in srgb,var(--blue,#0865b5) 7%,transparent),transparent 75%)}
.ces-interactive img{transition:scale .85s cubic-bezier(.2,.7,.2,1),filter .85s ease}
.ces-interactive.is-pointer-near img{scale:1.035;filter:saturate(1.12)}
.home-team-lead.is-pointer-near,.team-supervisor.is-pointer-near{translate:0 -7px;box-shadow:0 20px 44px color-mix(in srgb,var(--blue,#0865b5) 20%,transparent),inset 4px 0 var(--blue,#0865b5)}
.ces-interactive a{transition:color .3s ease,text-decoration-color .3s ease}
.ces-interactive a:hover{text-decoration:underline;text-underline-offset:5px}
.ces-interactive canvas{transition:filter .5s ease}.ces-interactive.is-pointer-near canvas{filter:saturate(1.18)}
}
@media(prefers-reduced-motion:reduce){.ces-interactive,.ces-interactive img{transition:none!important}.ces-interactive.is-pointer-near,.ces-interactive:focus-within{translate:none}}

/* Revision before hosting: contain hover and repeat entrance. */
html.ces-motion-ready .ces-reveal.is-revealed{animation:ces-section-arrive 1.35s cubic-bezier(.2,.65,.2,1) both;animation-delay:var(--reveal-delay,0ms)}
@keyframes ces-section-arrive{from{opacity:0;transform:translateY(26px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
html.ces-motion-ready .hero-content .is-revealed{animation:none}
.research-story.ces-interactive{border-radius:16px;isolation:isolate;padding:14px;box-sizing:border-box;overflow:hidden}
.research-story.ces-interactive.is-pointer-near{translate:0 -3px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 30%,transparent)!important;background-color:color-mix(in srgb,var(--blue) 5%,var(--bg))}
.research-story__image{overflow:hidden;border-radius:12px;flex-shrink:0}
.team-supervisor{overflow:hidden;background:linear-gradient(115deg,color-mix(in srgb,var(--blue) 9%,var(--bg)),var(--bg))!important}
.lab-connection{background:transparent!important;box-shadow:none!important;border:0!important}
.digital-twin-page .tab-btn{transition:background-color .35s ease,box-shadow .35s ease,color .35s ease!important;border-radius:10px 10px 0 0}
.digital-twin-page .tab-btn:hover{background:color-mix(in srgb,currentColor 10%,transparent)!important;box-shadow:inset 0 -3px currentColor}
.footer-browser{font-size:11px;color:var(--muted);margin-left:auto;margin-right:24px}
#tentang{position:relative;border-radius:24px;background:radial-gradient(ellipse at 0% 15%,color-mix(in srgb,var(--blue) 11%,transparent),transparent 55%),radial-gradient(ellipse at 100% 95%,color-mix(in srgb,#168b88 9%,transparent),transparent 60%);border:1px solid color-mix(in srgb,var(--blue) 9%,transparent);padding-left:28px;padding-right:28px}
#tentang .tags span{background:color-mix(in srgb,var(--blue) 6%,var(--bg));transition:background .35s ease,color .35s ease,translate .35s ease}#tentang .tags span:hover{background:var(--blue);color:#fff;translate:0 -3px}
.pump-charts>.lab-card:nth-child(3) h2{color:#8b5bb5}.pump-charts>.lab-card:nth-child(4) h2{color:var(--chart-teal-text, #0f766e)}
@media(max-width:700px){.footer-browser{margin:0}.research-story.ces-interactive{padding:10px}#tentang{padding-left:18px;padding-right:18px}}
@media(prefers-reduced-motion:reduce){html.ces-motion-ready .ces-reveal.is-revealed{animation:none!important}}

/* Short mobile feedback keeps cards responsive without hiding live readings. */
@media(max-width:600px){
 html.ces-motion-ready .hero h1.is-revealed .hero-word,
 html.ces-motion-ready .hero-copy.is-revealed>.values>span,
 html.ces-motion-ready .hero-copy.is-revealed>h2,
 html.ces-motion-ready .hero-copy.is-revealed>p,
 html.ces-motion-ready .hero-copy.is-revealed>.hero-link{animation-duration:.8s!important}
 html.ces-motion-ready .lab-page .ces-reveal.is-revealed,
 html.ces-motion-ready .hess-main .ces-reveal.is-revealed{animation:ces-mobile-arrive .45s ease both!important;animation-delay:var(--reveal-delay,0ms)!important}
 details[open]>.mobile-card-content{animation:ces-mobile-open .22s ease both}
 .mobile-project-picker details[open]>.dropdown-menu,.mobile-nav[open]>.dropdown-menu{animation:ces-mobile-open .18s ease both}
 .ces-interactive:active{translate:0 1px}
 .lab-button,.lab-heading .lab-link,.header .mobile-nav summary,.research-search button{transition:background-color .18s ease,color .18s ease,scale .18s ease}
 .lab-button:active,.lab-heading .lab-link:active,.research-search button:active{scale:.98}
}
@keyframes ces-mobile-arrive{from{translate:0 8px}to{translate:0 0}}
@keyframes ces-mobile-open{from{opacity:.75;translate:0 3px}to{opacity:1;translate:0 0}}
@media(max-width:600px) and (prefers-reduced-motion:reduce){
 html.ces-motion-ready .lab-page .ces-reveal.is-revealed,
 html.ces-motion-ready .hess-main .ces-reveal.is-revealed,
 details[open]>.mobile-card-content,.dropdown-menu{animation:none!important}
 .ces-interactive,.lab-button,.lab-heading .lab-link,.mobile-card-toggle>.ces-ui-icon{transition:none!important;translate:none!important;scale:none!important}
}