/* Shared surfaces for the approved interactive logo animations. */
.brand-stage.interactive-study{height:330px;isolation:isolate}
.study-surface{position:absolute;inset:0 0 48px;min-width:0}
.study-canvas{display:block;width:100%;height:calc(100% - 35px);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline:none;cursor:grab}
.study-canvas:active{cursor:grabbing}.study-canvas:focus-visible{outline:1px solid #81a6ba;outline-offset:2px}
.study-hint{position:absolute;bottom:0;left:0;right:0;margin:0!important;text-align:center;font:11px/1.5 Arial,Helvetica,sans-serif!important;color:#63717a;pointer-events:none}
.study-tools{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:12px;pointer-events:none}
.study-tools button{pointer-events:auto;border:0;border-bottom:1px solid #ccd7dc;background:#f9faf8de;color:#536a77;font:10px/1.2 Arial,Helvetica,sans-serif;padding:9px 6px;min-height:36px;cursor:pointer}
.study-tools button:hover,.study-tools button:focus-visible{color:#243039;border-color:#4c809f;outline-offset:2px}
.study-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){.brand-stage.interactive-study{height:320px}.study-hint{font-size:10px!important}.study-tools button{min-height:40px}.study-surface{bottom:50px}}

/* Approved effects use the original hero dimensions: no heading/banner jump. */
.brand-stage.interactive-study.playful-motion{height:205px}
.playful-motion .study-surface{inset:0}
.playful-motion .study-canvas{height:100%}
.playful-motion .study-hint{bottom:43px}
.playful-motion .logo-controls{z-index:2}
@media(max-width:700px){.brand-stage.interactive-study.playful-motion{height:175px}}