/* The shared controller owns entrances; existing logo motion keeps its own transforms. */
html.js:not(.motion-off) .reveal,html.js:not(.motion-off) .reveal.is-visible{opacity:1;transform:none;transition:none}
.a-logo-intro{position:fixed;inset:0;z-index:220;background:#fff;display:grid;place-items:center;pointer-events:none}
.a-logo-intro img{display:block;width:min(62vw,680px);height:auto;filter:invert(1)}
.intro-playing .u-motion,.intro-playing .motion-toggle{z-index:230}
html.motion-off .a-logo-intro{display:none}
/* B/C step numbers react alongside the existing dial; D retains its own progress line. */
html[data-design=b] .step-label>span:first-child,html[data-design=c] .step-label>span:first-child{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 8px;border:2px solid #777;border-radius:8px;font-size:18px;font-weight:900;transition:background .35s,color .35s,translate .35s}
html[data-design=b] .process-step.active .step-label>span:first-child,html[data-design=c] .process-step.active .step-label>span:first-child{background:#191919;border-color:#191919;color:#fff;translate:0 -3px}
@media(max-width:740px){.a-logo-intro img{width:72vw}}
@media(prefers-reduced-motion:reduce){html:not(.motion-on) .a-logo-intro{display:none}}
@media print{.a-logo-intro{display:none}html .reveal{opacity:1;transform:none}}

/* A slower shared cadence: allow the eye to settle before the next change. */
html[data-design=d] .d-object{animation-duration:32s}
html[data-design=d] .d-letter{animation-duration:4.4s;animation-delay:calc(var(--i)*.23s)}
html[data-design=c] .c-letter{transition:transform 1.6s cubic-bezier(.25,.46,.3,1)}
html[data-design=b] .step-label>span:first-child,html[data-design=c] .step-label>span:first-child,html[data-design=d] .step-label>span:first-child{transition:background 1.1s,color 1.1s,transform 1.1s,translate 1.1s}
html[data-design=d] .process-step::before{transition:transform 1.2s cubic-bezier(.25,.46,.3,1)}
html .step::before{transition:transform 1.2s cubic-bezier(.25,.46,.3,1)}
html .step .no,html .step .num{transition:background 1.1s,color 1.1s,transform 1.1s}
html .dial-progress,html .dial-dot{transition:transform 1.3s,stroke-dashoffset 1.3s}
html[data-design=c] .s-object{transition:transform 1.6s cubic-bezier(.25,.46,.3,1)}

.brand-opening{position:fixed;inset:0;z-index:220;display:grid;place-items:center;background:#fff;color:#191919;pointer-events:none;perspective:1100px;overflow:hidden}
.opening-object{position:relative;width:min(66vw,760px);transform-style:preserve-3d}
/* D starts at a depth-revealing angle, even before its rotation animation is attached. */
.opening-d .opening-object{transform:rotateX(18deg) rotateY(-26deg) scale(.94)}
.opening-face svg,.opening-depth svg{display:block;width:100%;height:auto}
.opening-face .s-letter{transform-box:fill-box;transform-origin:center}
.opening-c{background:#ededed;color:#191919}
.opening-sheen{position:absolute;inset:0;background:linear-gradient(110deg,transparent 32%,#fff 48%,transparent 64%);background-size:300% 100%;mask:url('/assets/caica-logo.svg') center/contain no-repeat;-webkit-mask:url('/assets/caica-logo.svg') center/contain no-repeat}
.opening-d{background:#ededed}.opening-depth{position:absolute;inset:0;transform:translateZ(var(--z));color:#737373}
.intro-playing .d-logo-panel *,.intro-playing .c-hero h1 *{animation-play-state:paused!important}
html.motion-off .brand-opening{display:none}
@media(max-width:740px){.opening-object{width:76vw}}
@media(prefers-reduced-motion:reduce){html:not(.motion-on) .brand-opening{display:none}}
@media print{.brand-opening{display:none}}

/* Content enters after the curtain clears; D overlaps its rotating logo fade with the exit. */
.opening-logo-exit{width:min(66vw,760px);perspective:1100px}
.opening-logo-exit .opening-object{width:100%}
.intro-playing body>main,.intro-playing body>header,.intro-playing body>.review-nav,.intro-playing body>footer,.intro-playing body>.skip-link,.intro-playing body>.u-skip{opacity:0}
@media(max-width:740px){.opening-logo-exit{width:76vw}}

/* Keep step badges at a constant luminance; progression uses position and lines. */
html[data-design=b] .step-label>span:first-child,html[data-design=c] .step-label>span:first-child,
html[data-design=b] .process-step.active .step-label>span:first-child,html[data-design=c] .process-step.active .step-label>span:first-child,
html[data-design=d] .step-label>span:first-child,html[data-design=d] .process-step.is-current .step-label>span:first-child,html[data-design=d] .process-step.is-passed .step-label>span:first-child{background:#e5e5e5;color:#191919;border-color:#777}
html .step.is-current .no,html .step.is-current .num{background:transparent;color:#ddd!important}

/* Preparation never changes layout. WAAPI takes over before this class is removed. */
html .motion-pending{opacity:0!important}
html.motion-off .motion-pending{opacity:1!important}
.hero h1 .line>span,.c-hero h1 .line>span{display:block}
.intro-playing .s-mark *{animation-play-state:paused!important}
.intro-playing body>.side-nav,.intro-playing body>.lang-switch{opacity:0}

/* English legacy entrances now use the shared sequence, including no-script fallback. */
html[data-motion-managed] #intro,html[data-motion-managed] #open{display:none!important}
html[data-motion-managed] .rv,html[data-motion-managed] .st,
html[data-motion-managed] .step,html[data-motion-managed] .cycle,
html[data-motion-managed] .hero h1 .l,html[data-motion-managed] .hero p{
  opacity:1;transform:none;animation:none;transition:none;
}
html[data-motion-managed] .hero-line{animation:none;width:72px}
.english-motion{position:fixed;right:16px;bottom:16px;z-index:230;border:1px solid #999;border-radius:12px;padding:12px 18px;background:#fff;color:#191919;font:700 14px/1.5 sans-serif;cursor:pointer}
.english-motion:focus-visible{outline:2px solid #191919;outline-offset:4px}
@media(prefers-reduced-motion:reduce){html:not(.motion-on) .motion-pending{opacity:1!important}}
@media print{html .motion-pending{opacity:1!important}.english-motion{display:none}}

/* C only: match the selected card's baseline rhythm without enlarging the wordmark. */
html[data-design=c] .opening-face svg,
html[data-design=c] .c-wordmark,
html[data-design=c] .s-face svg{overflow:visible}
html[data-design=c] :is(.c-letter,.s-face .s-letter){
 transform-box:fill-box;transform-origin:center;
 animation:c-card-rhythm 12s ease-in-out infinite;
}
html[data-design=c] :is(.c-letter,.s-face .s-letter):nth-child(1){--card-y:10px;--card-turn:-3deg}
html[data-design=c] :is(.c-letter,.s-face .s-letter):nth-child(2){--card-y:-45px;--card-turn:3deg}
html[data-design=c] :is(.c-letter,.s-face .s-letter):nth-child(3){--card-y:-105px;--card-turn:0deg}
html[data-design=c] :is(.c-letter,.s-face .s-letter):nth-child(4){--card-y:60px;--card-turn:-3deg}
html[data-design=c] :is(.c-letter,.s-face .s-letter):nth-child(5){--card-y:-40px;--card-turn:3deg}
@keyframes c-card-rhythm{
 0%,100%{transform:translateY(var(--card-y)) rotate(var(--card-turn))}
 50%{transform:translateY(calc(var(--card-y) * -.45)) rotate(calc(var(--card-turn) * -.6))}
}
html[data-design=c].motion-off :is(.c-letter,.s-face .s-letter){animation:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
 html[data-design=c]:not(.motion-on) :is(.c-letter,.s-face .s-letter){animation:none!important;transform:none!important}
}
@media print{html[data-design=c] :is(.c-letter,.s-face .s-letter){animation:none!important;transform:none!important}}

/* A single height animation owns all FAQ disclosures, including interrupted closes. */
.faq li.disclosure-managed .a{transition:none!important}
.faq .a>div{min-height:0}

/* Disclosure content is revealed only by the shared height animation. */
html main details[open] > :is(.detail-content,.a-business-body,.publications-content){
 animation:none!important;opacity:1;transform:none;
}
html main details{
 transition:background-color .65s ease,border-color .65s ease;
}
html main details > summary{
 -webkit-tap-highlight-color:transparent;
 transition:background-color .65s ease,color .65s ease;
}
html main .faq button{-webkit-tap-highlight-color:transparent}
@media(prefers-reduced-motion:reduce){
 html:not(.motion-on) main details,html:not(.motion-on) main details > summary{transition:none}
}