/* The MarkTrack mark in glass (app/assets/images/brand/marktrack-glass-mark*.webp).

   Header: the flat three-bar logo turns into the glass render on hover or
   keyboard focus. Both marks turn the same way at once — the flat bars rotate
   toward the render's three-quarter angle and fade while the glass arrives from
   the flat angle — so the change reads as one object gaining depth rather than
   a swap. Transitions, not keyframes, drive it, so a hover that ends halfway
   reverses from wherever it got to. Transform and opacity only. The prefix is
   mk-brand, not mk-logo: the landing page's school-logo strip owns .mk-logo,
   and its `.mk-logo img` hover rules would grab the glass image.

   Contact page: the glass render floats on a soft halo. */

.mk-brand-mark { position: relative; display: block; flex-shrink: 0; width: 33.6px; height: 36px; }
.mk-brand-flat { display: block; width: 100%; height: 100%; overflow: visible; }
.mk-brand-glass { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; max-width: none; margin: -22px 0 0 -22px; opacity: 0; pointer-events: none; }
/* The blue light the glass throws on the header beneath it. */
.mk-brand-mark::before { content: ''; position: absolute; left: -35%; right: -35%; bottom: -16%; height: 44%; border-radius: 50%; background: radial-gradient(closest-side, rgba(59, 130, 246, .32), rgba(59, 130, 246, 0)); opacity: 0; pointer-events: none; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mk-brand-mark { perspective: 140px; }

  /* Resting state: these transitions run when the pointer leaves. The flat
     mark comes back first, then the glass goes, so the logo never dims. */
  .mk-brand-flat { transform-origin: 50% 60%; transition: opacity .2s ease, transform .5s cubic-bezier(.16, 1, .3, 1); }
  .mk-brand-bar { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
  .mk-brand-glass { transform: translateY(2px) scale(.72) rotateY(32deg); transition: opacity .24s ease .08s, transform .45s cubic-bezier(.16, 1, .3, 1); }
  .mk-brand-mark::before { transform: scale(.6); transition: opacity .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1); }

  /* Hovered: the glass arrives first and settles with a slight overshoot. */
  .mk-brand:hover .mk-brand-flat,
  .mk-brand:focus-visible .mk-brand-flat { opacity: 0; transform: rotateY(-28deg) scale(1.14); transition: opacity .22s ease .06s, transform .55s cubic-bezier(.16, 1, .3, 1); }
  .mk-brand:hover .mk-brand-bar,
  .mk-brand:focus-visible .mk-brand-bar { transform: scaleY(1.1); }
  .mk-brand:hover .mk-brand-bar:nth-child(2),
  .mk-brand:focus-visible .mk-brand-bar:nth-child(2) { transition-delay: .03s; }
  .mk-brand:hover .mk-brand-bar:nth-child(3),
  .mk-brand:focus-visible .mk-brand-bar:nth-child(3) { transition-delay: .06s; }
  .mk-brand:hover .mk-brand-glass,
  .mk-brand:focus-visible .mk-brand-glass { opacity: 1; transform: none; transition: opacity .24s ease, transform .6s cubic-bezier(.34, 1.32, .64, 1); }
  .mk-brand:hover .mk-brand-mark::before,
  .mk-brand:focus-visible .mk-brand-mark::before { opacity: 1; transform: scale(1); }
}

/* Reduced motion: the same change as a plain crossfade, nothing moves. */
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .mk-brand-flat, .mk-brand-glass { transition: opacity .2s ease; }
  .mk-brand:hover .mk-brand-flat,
  .mk-brand:focus-visible .mk-brand-flat { opacity: 0; }
  .mk-brand:hover .mk-brand-glass,
  .mk-brand:focus-visible .mk-brand-glass { opacity: 1; }
}

.contact-glass { position: relative; width: 136px; height: 136px; margin: -8px 0 26px -10px; }
.contact-glass-halo { position: absolute; inset: 4% -12% -8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(147, 197, 253, .5), rgba(219, 234, 254, .35) 62%, rgba(255, 255, 255, 0)); }
.contact-glass-ring { position: absolute; inset: 34% -30% 16%; border: 1px solid rgba(96, 165, 250, .35); border-radius: 50%; transform: rotate(-14deg); }
.contact-glass-float { position: relative; display: block; width: 100%; height: 100%; }
.contact-glass img { display: block; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.contact-glass:hover img { transform: translateY(-4px) rotate(-4deg) scale(1.05); }

@media (prefers-reduced-motion: no-preference) {
  .contact-glass-float { animation: contact-glass-float 6s ease-in-out infinite; }
  .contact-glass-ring { animation: contact-glass-ring 14s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-glass:hover img { transform: none; }
}
@media (max-width: 640px) {
  .contact-glass { width: 108px; height: 108px; margin: -4px 0 20px -8px; }
}

@keyframes contact-glass-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes contact-glass-ring { 0%, 100% { transform: rotate(-14deg) scaleY(1); } 50% { transform: rotate(-6deg) scaleY(.82); } }