/* PT. Anugerah Cahaya Cakrawala - hover / focus / tap micro-interactions and a gentle scroll reveal.
   Navy theme: navy #0B1F4D, mid #163A8A, red #D91610, yellow #F5D90A (accents only).
   Only transform / opacity / colour / shadow are animated, so nothing shifts the layout.
   Hover effects apply only on devices with a real hover (mouse/trackpad); keyboard focus gets the same effect;
   touch devices get a light pressed state instead. Everything is disabled under prefers-reduced-motion.
   The reveal hidden state exists only under html.ix-reveal-on, a class added by js/interactions.js, so without JS
   (and for crawlers that do not run it) all content is visible. */
:root{--ix-ease:cubic-bezier(.22,.61,.36,1);--ix-pop:cubic-bezier(.34,1.56,.64,1);--ix-dur:.3s;--ix-navy:#0B1F4D;--ix-mid:#163A8A;--ix-red:#D91610;--ix-yellow:#F5D90A}

/* ---------- 1. numbered step / process cards ---------- */
.operations-steps article,.about-work-card{position:relative;overflow:hidden;transition:transform var(--ix-dur) var(--ix-ease),box-shadow var(--ix-dur) var(--ix-ease),border-color var(--ix-dur) var(--ix-ease)}
/* red accent line that draws across the top of the card */
.operations-steps article::after,.about-work-card::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--ix-red),#E8473F);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ix-ease)}
/* the number: a badge (navy pill behind the digits) that pops in */
.operations-steps article>b,.about-work-card>span,.about-value .about-numeral,.advantage-item>span:first-child{position:relative;z-index:0;display:inline-block;width:fit-content;max-width:none;justify-self:start;align-self:start;text-align:center;transform-origin:50% 50%;transition:color .25s var(--ix-ease),transform .35s var(--ix-pop)}
.operations-steps article>b::before,.about-work-card>span::before,.about-value .about-numeral::before,.advantage-item>span:first-child::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:2.15em;height:2.15em;margin:0;border-radius:50%;background:var(--ix-navy);box-shadow:0 6px 14px rgba(11,31,77,.28);transform:translate(-50%,-50%) scale(0);transition:transform .35s var(--ix-pop),background-color .25s var(--ix-ease)}
/* the badge circle is centred on the number itself (left/top 50% + translate -50%), for every numbered-card variant */

.operations-steps h3,.about-work-card h3,.about-value h3,.advantage-item h3{transition:color .25s var(--ix-ease)}
/* about "values" columns: their top rule redraws in red */
.about-value{position:relative}
.about-value::after{content:"";position:absolute;left:0;top:-3px;width:100%;height:3px;background:var(--ix-red);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ix-ease)}
/* advantage rows (01-03 list): arrow nudges up-right */
.advantage-arrow{display:inline-block;transition:transform .3s var(--ix-ease),color .25s var(--ix-ease)}

/* the shared "active" look, used by hover (mouse), keyboard focus and the touch pressed state below */
.operations-steps article.ix-on,.about-work-card.ix-on{transform:translateY(-6px);box-shadow:0 18px 38px rgba(11,31,77,.16),0 3px 8px rgba(11,31,77,.08);border-color:#C9D3EA}
.operations-steps article.ix-on::after,.about-work-card.ix-on::after,.about-value.ix-on::after{transform:scaleX(1)}

@media (hover:hover) and (pointer:fine){
  .operations-steps article:hover,.about-work-card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(11,31,77,.16),0 3px 8px rgba(11,31,77,.08);border-color:#C9D3EA}
  .operations-steps article:hover::after,.about-work-card:hover::after,.about-value:hover::after{transform:scaleX(1)}
  .operations-steps article:hover>b,.about-work-card:hover>span,.about-value:hover .about-numeral,.advantage-item:hover>span:first-child{color:#fff;transform:scale(1.18)}
  .operations-steps article:hover>b::before,.about-work-card:hover>span::before,.about-value:hover .about-numeral::before,.advantage-item:hover>span:first-child::before{transform:translate(-50%,-50%) scale(1)}
  .operations-steps article:hover h3,.about-work-card:hover h3,.about-value:hover h3,.advantage-item:hover h3{color:var(--ix-mid)}
  .advantage-item:hover .advantage-arrow{transform:translate(3px,-3px);color:var(--ix-red)}
}
/* keyboard: cards that contain a focused control (and anything given .ix-on) */
.ix-on>b,.about-work-card.ix-on>span,.about-value.ix-on .about-numeral,.advantage-item.ix-on>span:first-child{color:#fff;transform:scale(1.18)}
.ix-on>b::before,.about-work-card.ix-on>span::before,.about-value.ix-on .about-numeral::before,.advantage-item.ix-on>span:first-child::before{transform:translate(-50%,-50%) scale(1)}
.operations-steps article.ix-on h3,.about-work-card.ix-on h3,.about-value.ix-on h3,.advantage-item.ix-on h3{color:var(--ix-mid)}
.advantage-item.ix-on .advantage-arrow{transform:translate(3px,-3px);color:var(--ix-red)}
/* /more is dark navy: the badge turns red there so it stays visible */
.more-page .advantage-item>span:first-child::before{background:var(--ix-red)}
.more-page .advantage-item:hover h3,.more-page .advantage-item.ix-on h3{color:#fff}
.more-page .advantage-item:hover .advantage-arrow,.more-page .advantage-item.ix-on .advantage-arrow{color:#9DBBFF}

/* ---------- 2. product cards, info cards, buttons and links ---------- */
#produk .material-card,.hero-information,.cred-card,.about-feature svg,.quality-card{transition:transform var(--ix-dur) var(--ix-ease),box-shadow var(--ix-dur) var(--ix-ease)}
#produk .material-art,.hero-information .hero-photo{overflow:hidden}
#produk .material-art{transition:box-shadow var(--ix-dur) var(--ix-ease),border-color var(--ix-dur) var(--ix-ease)}
#produk .material-art img,.hero-information .hero-photo>img{transition:transform .6s var(--ix-ease)}
#produk .material-card h3{transition:color .25s var(--ix-ease)}
.material-card .material-index{transition:color .25s var(--ix-ease)}
/* small arrow nudge on links / secondary buttons (arrows wrapped in .ix-arrow by the JS, or already in a <span>) */
.ix-arrow,.btn>span:last-child,.text-link>span:last-child{display:inline-block;transition:transform .3s var(--ix-ease)}
.btn,.city-cta,section.area,ul.chips li{transition:transform .25s var(--ix-ease),box-shadow .25s var(--ix-ease),background-color .25s var(--ix-ease),border-color .25s var(--ix-ease),color .25s var(--ix-ease)}

@media (hover:hover) and (pointer:fine){
  #produk .material-card:hover{transform:translateY(-6px)}
  #produk .material-card:hover .material-art{box-shadow:0 18px 34px rgba(11,31,77,.18);border-color:#B9C4DD}
  #produk .material-card:hover .material-art img{transform:scale(1.05)}
  #produk .material-card:hover h3{color:var(--ix-mid)}
  .hero-information:hover{transform:translateY(-6px);box-shadow:0 30px 64px rgba(11,31,77,.2),0 4px 10px rgba(11,31,77,.08)}
  .hero-information:hover .hero-photo>img{transform:scale(1.04)}
  .cred-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(11,31,77,.14)}
  .about-feature:hover svg{transform:translateY(-4px) scale(1.08)}
  .quality-card:hover{transform:translateY(-4px)}
  a:hover>.ix-arrow,a:hover .ix-arrow,.btn:hover>span:last-child,.text-link:hover>span:last-child{transform:translateX(4px)}
  a:hover>.ix-arrow.ix-up,.btn:hover>span.ix-up:last-child,.text-link:hover>span.ix-up:last-child{transform:translate(3px,-3px)}
  .btn-dark:not([href^="/contact"]):hover,.btn-outline:hover,.btn:not([href^="/contact"]):hover{transform:translateY(-2px)}
  /* server-rendered pages (product / area / city) */
  section.area:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(11,31,77,.12);border-color:#C3CDE4}
  ul.chips li:hover{transform:translateY(-1px)}
  .city-cta:hover{transform:translateY(-2px)}
}
/* keyboard focus = hover */
#produk .material-card:has(:focus-visible){transform:translateY(-6px)}
#produk .material-card:has(:focus-visible) .material-art{box-shadow:0 18px 34px rgba(11,31,77,.18);border-color:#B9C4DD}
#produk .material-card:has(:focus-visible) .material-art img{transform:scale(1.05)}
#produk .material-card:has(:focus-visible) h3{color:var(--ix-mid)}
.hero-information:has(:focus-visible){transform:translateY(-6px);box-shadow:0 30px 64px rgba(11,31,77,.2)}
.hero-information:has(:focus-visible) .hero-photo>img{transform:scale(1.04)}
a:focus-visible .ix-arrow,.btn:focus-visible>span:last-child,.text-link:focus-visible>span:last-child{transform:translateX(4px)}
a:focus-visible .ix-arrow.ix-up,.btn:focus-visible>span.ix-up:last-child,.text-link:focus-visible>span.ix-up:last-child{transform:translate(3px,-3px)}

/* touch screens (no hover): a light pressed state while the finger is down, nothing sticky */
@media (hover:none){
  #produk .material-card:active .material-art,.hero-information:active,.operations-steps article:active,.about-work-card:active,section.area:active{transform:scale(.985)}
  #produk .material-card:active .material-art{box-shadow:0 8px 18px rgba(11,31,77,.14)}
  .operations-steps article:active>b::before,.about-work-card:active>span::before,.about-value:active .about-numeral::before,.advantage-item:active>span:first-child::before{transform:translate(-50%,-50%) scale(1)}
  .operations-steps article:active>b,.about-work-card:active>span,.about-value:active .about-numeral,.advantage-item:active>span:first-child{color:#fff}
  .btn:active,.city-cta:active{transform:scale(.97)}
  #produk .material-art{transition:transform .15s var(--ix-ease),box-shadow .15s var(--ix-ease)}
}

/* ---------- 3. scroll reveal (only when JS has switched it on) ---------- */
html.ix-reveal-on .ix-reveal{opacity:0;transform:translateY(22px)}
html.ix-reveal-on .ix-reveal.ix-in{opacity:1;transform:none;transition:opacity .6s var(--ix-ease),transform .6s var(--ix-ease);transition-delay:var(--ix-delay,0ms)}
@media print{html.ix-reveal-on .ix-reveal{opacity:1!important;transform:none!important}}

/* ---------- 4. reduced motion: no movement at all ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .operations-steps article:hover,.about-work-card:hover,#produk .material-card:hover,.hero-information:hover,.cred-card:hover,.quality-card:hover,.btn:hover,.city-cta:hover,section.area:hover,ul.chips li:hover,
  .operations-steps article.ix-on,.about-work-card.ix-on,#produk .material-card:has(:focus-visible),.hero-information:has(:focus-visible){transform:none!important}
  #produk .material-card:hover .material-art img,.hero-information:hover .hero-photo>img,#produk .material-card:has(:focus-visible) .material-art img{transform:none!important}
  html.ix-reveal-on .ix-reveal{opacity:1!important;transform:none!important}
}
/* wrapped arrows must not inherit parent ">span" underline styles */
a>span.ix-arrow,.home-area-link>span.ix-arrow{border-bottom:0}
/* .about-value has no left padding: nudge its number right (transform only) so the badge circle stays inside the column */
@media (hover:hover) and (pointer:fine){.about-value:hover .about-numeral{transform:translateX(.8em) scale(1.18)}}
.about-value.ix-on .about-numeral{transform:translateX(.8em) scale(1.18)}
@media (hover:none){.about-value:active .about-numeral{transform:translateX(.8em)}}
@media (prefers-reduced-motion:reduce){.about-value:hover .about-numeral,.about-value.ix-on .about-numeral{transform:translateX(.8em)}}