/* Light product scene: card and app move; text and controls remain at normal scale. */
:root {
 --mc-card-float-duration:8s;
 --mc-site-card-arrival:800ms;
 --mc-site-scene-transition:700ms;
 --mc-site-product-shadow:0 20px 24px #27295c24;
}
.digital { background:var(--mc-site-scene-surface); padding-block:clamp(3rem,5vw,5rem); }
.digital-grid { display:grid; grid-template-columns:1fr 1.1fr; grid-template-areas:"intro visual" "controls visual" "detail visual"; grid-template-rows:max-content max-content 1fr; column-gap:3.5rem; row-gap:1.75rem; align-items:start; }
.digital-heading { grid-area:intro; margin:0; }
.digital-heading h2 { font-size:clamp(2.25rem,3.4vw,3.5rem); }
.experience-controls { grid-area:controls; gap:1rem; margin:0; border-bottom-color:var(--mc-border-str); }
.experience-controls button { padding-bottom:.75rem; min-height:60px; }
.experience-controls button span { font-size:1rem; }
.experience-detail { grid-area:detail; min-height:220px; padding:0; }
.experience-detail h3 { font-size:clamp(1.65rem,2.3vw,2.2rem); }
.experience-caption { min-height:0; margin-block:1rem .5rem; }
.experience-detail .mc-button { text-align:left; justify-content:flex-start; }
.experience-stage.card-stage { grid-area:visual; display:block; width:100%; min-width:0; min-height:0; padding:0; margin:0; align-self:center; }
.card-scene { width:100%; height:430px; position:relative; isolation:isolate; perspective:1200px; }
.experience-stage.card-stage[data-stage] .experience-card { position:absolute; z-index:2; width:min(80%,440px); max-width:100%; margin:0; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-2deg); transform-origin:50% 50%; transition:transform var(--mc-site-scene-transition) var(--mc-ease); pointer-events:none; }
.experience-stage.card-stage[data-stage=app] .experience-card { transform:translate(-78%,-64%) scale(.5) rotate(-9deg); }
.experience-stage.card-stage[data-stage=next] .experience-card { transform:translate(-50%,-50%) rotate(2deg) scale(.94); }
.card-stage .card-entrance { perspective:1000px; }
.card-stage.card-entered .card-entrance { animation:moncard-arrive var(--mc-site-card-arrival) var(--mc-ease) both; }
.card-stage .card-float { filter:drop-shadow(var(--mc-site-product-shadow)); animation:moncard-float var(--mc-card-float-duration) ease-in-out infinite; animation-play-state:paused; }
.card-stage[data-in-view=true] .card-float { animation-play-state:running; }
.card-stage[data-stage=app] .card-float { animation-play-state:paused; }
.official-card-art { width:100%; aspect-ratio:257/164; overflow:hidden; border-radius:4% / 6.3%; }
.card-stage .official-card-art img { display:block; width:100%; height:auto; max-width:100%; position:static; object-fit:contain; border-radius:0; mix-blend-mode:normal; }
.card-scene-footer { display:flex; align-items:center; justify-content:center; gap:.5rem 1.5rem; flex-wrap:wrap; padding-top:.5rem; }
.card-scene-footer p { font-size:.875rem; color:var(--mc-text-2); }
.card-stage .card-motion-control { margin:0; padding:.5rem; min-height:44px; font-size:.875rem; color:var(--mc-brand-navy); border-color:var(--mc-border-str); }
.card-stage .card-motion-control:disabled { cursor:default; border-color:transparent; }
.experience-stage.card-stage .app-concept { position:absolute; z-index:1; top:50%; right:0; width:52%; max-width:290px; margin:0; padding:1.5rem; background:var(--mc-surface); border:1px solid var(--mc-border); border-radius:var(--mc-site-radius); box-shadow:var(--mc-site-shadow); opacity:0; visibility:hidden; pointer-events:none; transform:translate(32px,-45%) scale(.96); transition:opacity 350ms var(--mc-ease),transform var(--mc-site-scene-transition) var(--mc-ease),visibility 0s 700ms; }
.experience-stage.card-stage[data-stage=app] .app-concept { opacity:1; visibility:visible; pointer-events:auto; transform:translate(0,-50%) scale(1); transition-delay:0s; }
.card-stage .app-concept-top { margin-bottom:1.5rem; }
.card-stage .app-concept-top img { width:155px; height:auto; }
.card-stage .app-concept h3 { font-size:1.5rem; line-height:1.15; margin-bottom:1.5rem; }
.card-stage .app-concept>a { display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:48px; padding:.75rem 0; border-top:1px solid var(--mc-border); font-size:.9375rem; color:var(--mc-brand-navy); }
.card-stage .app-concept .illustrative { font-size:.75rem; margin-top:1.25rem; color:var(--mc-text-3); }
@keyframes moncard-arrive { from { opacity:.7; transform:translateY(16px) rotateY(-12deg); } to { opacity:1; transform:none; } }
@keyframes moncard-float { 0%,100% { transform:translateY(0) rotateZ(-.5deg); } 50% { transform:translateY(-8px) rotateZ(.5deg); } }
.motion-suspended .card-stage .card-float { animation-play-state:paused!important; }
@media(max-width:1100px) { .digital-grid { column-gap:2.5rem; } }
@media(max-width:800px) {
 .digital-grid { grid-template-columns:1fr; grid-template-areas:"intro" "controls" "visual" "detail"; grid-template-rows:auto; gap:1.5rem; }
 .experience-stage.card-stage { width:100%; max-width:580px; margin:auto; }
 .card-scene { height:360px; }
 .experience-stage.card-stage[data-stage] .experience-card { width:min(80%,380px); }
 .experience-detail { min-height:0; }
 .card-scene-footer { padding-top:0; }
}
@media(max-width:520px) {
 .digital-heading h2 { font-size:2.25rem; }
 .card-scene { height:290px; }
 .experience-stage.card-stage[data-stage=app] .card-scene { height:420px; }
 .experience-stage.card-stage[data-stage] .experience-card { width:min(88%,300px); }
 .experience-stage.card-stage[data-stage=app] .experience-card { transform:translate(-78%,calc(-50% - 156px)) scale(.45) rotate(-7deg); }
 .experience-stage.card-stage .app-concept { width:72%; max-width:270px; top:auto; bottom:0; padding:1.25rem; transform:translate(20px,8px) scale(.96); }
 .experience-stage.card-stage[data-stage=app] .app-concept { transform:none; }
 .card-stage .app-concept-top { margin-bottom:1.25rem; }
 .card-stage .app-concept-top img { width:135px; }
 .card-stage .app-concept h3 { font-size:1.3rem; margin-bottom:1rem; }
 .card-stage .app-concept>a { font-size:.875rem; }
 .card-stage .app-concept .illustrative { margin-top:1rem; }
 .experience-controls { gap:.75rem; }
 .experience-controls button span { font-size:.9375rem; }
 .card-scene-footer { gap:.25rem .75rem; margin-top:.75rem; }
}
/* Reduced motion uses normal document flow instead of positioned layers. */
.reduce-motion .card-scene { display:flex; flex-direction:column; align-items:center; height:auto!important; gap:1.5rem; padding-block:1rem; }
.reduce-motion .experience-stage.card-stage[data-stage] .experience-card { position:relative; inset:auto; width:min(80%,380px); transform:none!important; }
.reduce-motion .card-stage .card-entrance,.reduce-motion .card-stage .card-float { animation:none!important; transform:none!important; }
.reduce-motion .experience-stage.card-stage .app-concept { display:none; }
.reduce-motion .experience-stage.card-stage[data-stage=app] .app-concept { display:block; position:relative; inset:auto; width:100%; max-width:340px; opacity:1; visibility:visible; transform:none!important; }
@media(prefers-reduced-motion:reduce) {
 .card-scene { display:flex; flex-direction:column; align-items:center; height:auto!important; gap:1.5rem; padding-block:1rem; }
 .experience-stage.card-stage[data-stage] .experience-card { position:relative; inset:auto; width:min(80%,380px); transform:none!important; }
 .card-stage .card-entrance,.card-stage .card-float { animation:none!important; transform:none!important; }
 .experience-stage.card-stage .app-concept { display:none; }
 .experience-stage.card-stage[data-stage=app] .app-concept { display:block; position:relative; inset:auto; width:100%; max-width:340px; opacity:1; visibility:visible; transform:none!important; }
}
.text-200 .digital-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"intro" "controls" "visual" "detail"; grid-template-rows:auto; }
.text-200 .card-scene { display:flex; flex-direction:column; align-items:center; height:auto!important; gap:1.5rem; padding-block:1rem; }
.text-200 .experience-stage.card-stage[data-stage] .experience-card { position:relative; inset:auto; width:min(85%,380px); transform:none!important; }
.text-200 .experience-stage.card-stage .app-concept { display:none; }
.text-200 .experience-stage.card-stage[data-stage=app] .app-concept { display:block; position:relative; inset:auto; width:100%; max-width:none; opacity:1; visibility:visible; transform:none!important; }
.text-200 .experience-detail { min-height:0; }