.header-actions { position: relative; flex-shrink: 0; }
.header-film {
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #513765;
}
.film-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 1px;
  border-radius: 8px;
  color: inherit;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}
.film-trigger:hover, .film-trigger:focus-visible { color: #361a4e; }
.film-mascot {
  position: relative;
  display: block;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  transform: rotate(-5deg);
  transition: transform .25s ease;
  filter: drop-shadow(0 3px 7px #24103a30);
}
.film-mascot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-mascot-hand { transform-origin: 84% 34%; }
.film-play-badge {
  position: absolute;
  right: -1px;
  bottom: 1px;
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  border: 1px solid #ffffffe6;
  border-radius: 50%;
  background: #fbf7ff;
  color: #755099;
  box-shadow: 0 1px 4px #34194c29;
}
.film-play-badge svg { width: 10px; height: 10px; fill: currentColor; }
.film-duration { margin-left: 5px; opacity: .7; font-size: 10px; font-variant-numeric: tabular-nums; }
.film-greeting {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  padding: 9px 12px;
  border: 1px solid #ffffff85;
  border-radius: 12px 3px 12px 12px;
  background: #fdf9ff;
  box-shadow: 0 4px 16px #25103520;
  color: #4c355d;
  font-size: 12px;
  text-shadow: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s, transform .18s, visibility .18s;
  pointer-events: none;
}
.film-trigger:focus-visible .film-greeting {
  opacity: 1; visibility: visible; transform: none;
}
.film-trigger:focus-visible .film-mascot-hand { animation: mag-film-wave .8s ease-in-out; }
@media (hover: hover) {
  .film-trigger:hover .film-greeting { opacity: 1; visibility: visible; transform: none; transition-delay: .12s; }
  .film-trigger:hover .film-mascot { transform: translateY(-2px) rotate(0); }
  .film-trigger:hover .film-mascot-hand { animation: mag-film-wave .8s ease-in-out; }
}
@keyframes mag-film-wave {
  0%, 100% { transform: rotate(0); }
  20%, 60% { transform: rotate(20deg); }
  40%, 80% { transform: rotate(-13deg); }
}
.footer-contact { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; gap: 8px; }
.landing-socials { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.site-footer .social-dot-link { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; color: #a98bda; transition: color .25s ease; }
.social-dot-link img, .social-dot-link .social-dot-mark { display: block; width: 32px; height: 32px; }
.social-dot-mark { overflow: visible; fill: currentColor; }
.social-dot { transition: transform .38s cubic-bezier(.2,.7,.2,1); transition-delay: var(--dot-delay); }
.site-footer .social-dot-link:focus-visible { color: #9470ce; }
.social-dot-link:focus-visible .social-dot { transform: translate(var(--scatter-x), var(--scatter-y)); }
@media (hover: hover) {
  .site-footer .social-dot-link:hover { color: #9470ce; }
  .social-dot-link:hover .social-dot { transform: translate(var(--scatter-x), var(--scatter-y)); }
}
.social-label { position: absolute; top: calc(100% + 4px); left: 50%; transform: translate(-50%, 3px); color: #513765; font-size: 11px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, transform .18s, visibility .18s; }
.social-dot-link:hover .social-label, .social-dot-link:focus-visible .social-label { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
html.film-open, html.film-open body { overflow: hidden; }
dialog.film-dialog {
  --film-ratio: 1.7777778;
  position: fixed;
  inset: 0;
  width: min(1120px, calc(100vw - 64px), calc((100dvh - 120px) * var(--film-ratio)));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fffbff;
  overflow: visible;
  box-shadow: none;
}
.film-dialog::backdrop { background: #21132ccc; backdrop-filter: blur(9px); }
.film-dialog[open] { animation: film-appear .22s ease-out both; }
.film-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.film-dialog .film-dialog-header h2 { margin: 0; font: 400 15px Aileron, Arial, sans-serif; letter-spacing: -.01em; }
.film-close { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 10px; margin-right: -10px; color: #fffbff; font-size: 12px; border-radius: 8px; }
.film-close:hover { color: white; background: #ffffff14; }
.film-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.film-stage { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 14px; background: #151017; box-shadow: 0 20px 100px #0f041660; }
.film-stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
.film-resume { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 14px 20px; border: 1px solid #ffffff80; border-radius: 999px; background: #fffafbf2; color: #513466; box-shadow: 0 4px 30px #2c0c3826; font-size: 14px; }
.film-resume svg { width: 20px; height: 20px; fill: currentColor; }
.film-error { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; gap: 12px; background: #201827f5; color: #fffbff; text-align: center; }
.film-error p { flex: 0 0 100%; margin: 0 0 6px; font-size: 15px; }
.film-error button, .film-error a { padding: 10px 14px; border: 1px solid #ffffff55; border-radius: 8px; font-size: 13px; color: #fffbff; }
@keyframes film-appear { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .header-film { top: calc(100% + 5px); }
  .film-trigger { gap: 5px; font-size: 11px; }
  .film-mascot { flex-basis: 30px; width: 30px; height: 30px; }
  .film-duration { margin-left: 4px; font-size: 9px; }
  .landing-socials { gap: 5px; }
  .social-dot-link img, .social-dot-link .social-dot-mark { width: 30px; height: 30px; }
  dialog.film-dialog { width: min(calc(100vw - 24px), calc((100dvh - 104px) * var(--film-ratio))); }
  .film-stage { border-radius: 9px; }
  .film-dialog-header { margin-bottom: 6px; }
  .film-dialog .film-dialog-header h2 { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-trigger *, .film-dialog[open], .social-dot-link * { animation: none !important; transition: none !important; }
  .social-dot-link .social-dot { transform: none !important; }
}