/* Glass hero: inherits the portfolio's type, palette and layout. */
.morph-object { width: clamp(300px, 31vw, 460px); top: 17%; right: clamp(28px, 4vw, 80px); pointer-events: none; }
.morph-stage { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: transparent; cursor: default; -webkit-tap-highlight-color: transparent; }
.morph-stage:disabled { cursor: default; }
.morph-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: -20px; border-radius: 30px; }
.morph-fallback { position: absolute; width: 86%; height: auto; left: 7%; top: 0; pointer-events: none; }
.morph-canvas { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 240ms; pointer-events: none; }
.morph-canvas canvas { display: block; width: 100%; height: 100%; filter: drop-shadow(12px 20px 14px rgba(60,45,90,.14)); }
.morph-object[data-ready] .morph-canvas { opacity: 1; }
.morph-object[data-ready] .morph-fallback { visibility: hidden; }
@media (max-width: 1200px) and (min-width: 769px) {
  .morph-object { width: 300px; top: 140px; right: 18px; }
  .hero-object + .hero-inner { max-width: 62%; }
}
@media (max-width: 768px) {
  .hero:has(.morph-object) { padding-bottom: 280px; }
  .morph-object { width: 240px; right: calc(50% - 120px); top: auto; bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) { .morph-canvas { transition: none; } }