/* Premium polish: light, CSS-first micro interactions (2026-11) */

/* Smaller logo with a soft glow on hover */
.header .header-wrapper .header-logo img { height: 32px; transition: filter .3s ease, transform .3s ease; }
.header .header-wrapper .header-logo a:hover img { filter: drop-shadow(0 0 10px rgba(176, 98, 255, .55)); transform: translateY(-1px); }
@media (max-width: 767.98px) { .header .header-wrapper .header-logo img { height: 28px; } }

/* Text selection and focus in brand colors */
::selection { background: rgba(155, 61, 255, .45); color: #fff; }
:focus-visible { outline: 2px solid #b062ff; outline-offset: 3px; }

/* Buttons: light sheen sweep, purple edge glow, press feedback */
.button, .button-circle {
  background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  background-size: 250% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: background-position .7s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, transform .15s ease;
}
.button:hover, .button-circle:hover {
  background-position: -30% 0;
  box-shadow: inset 0 0 0 1px rgba(176, 98, 255, .55), 0 8px 26px -10px rgba(123, 19, 255, .7);
}
.button:active, .button-circle:active { transform: scale(.97); }
.button-white { background-image: linear-gradient(110deg, transparent 35%, rgba(123, 19, 255, .16) 50%, transparent 65%); }

/* Cards: cursor spotlight (position set by premium.js) and gentle lift */
.fancy-box, .pkg-card, .suw-box {
  background-image: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(155, 61, 255, .13), transparent 60%);
}
.pkg-card.pkg-feat {
  background-image: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(155, 61, 255, .16), transparent 60%), linear-gradient(180deg, rgba(123, 19, 255, .16), #181a1c 55%);
}
.pkg-card { transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.pkg-card:hover { box-shadow: 0 24px 48px -28px rgba(123, 19, 255, .6); }

/* Featured package: slow rotating gradient border */
@property --pm-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.pkg-card.pkg-feat::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--pm-ang), rgba(255, 130, 243, .9), rgba(123, 19, 255, .2) 30%, rgba(123, 19, 255, .2) 70%, rgba(255, 130, 243, .9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: pm-spin 8s linear infinite;
}
@keyframes pm-spin { to { --pm-ang: 360deg; } }

/* Blog cards: image lift */
.blog-post-box .blog-post-img { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
.blog-post-box:hover .blog-post-img { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(123, 19, 255, .75); }

/* Article links: animated gradient underline */
.post-body a:not(.button) {
  text-decoration: none;
  background-image: linear-gradient(90deg, #ff82f3, #9b3dff);
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .25s ease, color .2s ease;
  padding-bottom: 1px;
}
.post-body a:not(.button):hover { background-size: 100% 2px; color: #fff; }

/* Reading progress bar on articles (scroll-driven, no JS; ignored by older browsers) */
@supports (animation-timeline: scroll()) {
  body:has(.post-body)::before {
    content: ""; position: fixed; top: 0; left: 0; z-index: 9999; height: 2px; width: 100%;
    background: linear-gradient(90deg, #ff82f3, #7b13ff);
    transform-origin: 0 50%; transform: scaleX(0);
    animation: pm-progress linear both; animation-timeline: scroll(root);
  }
  @keyframes pm-progress { to { transform: scaleX(1); } }
}

/* Reveal on scroll (only below-the-fold items get .pm-hide from premium.js) */
.pm-hide { opacity: 0; transform: translateY(18px); }
.pm-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  .pkg-card.pkg-feat::after, body:has(.post-body)::before { animation: none; }
  .pm-hide { opacity: 1; transform: none; }
  .button, .button-circle, .pkg-card, .blog-post-box .blog-post-img { transition: none; }
}

/* Footer legal links + form privacy note */
.legal-links { margin: -6px 0 0; font-size: .8rem; color: rgba(255, 255, 255, .45); }
.legal-links a { color: rgba(255, 255, 255, .55); transition: color .2s ease; }
.legal-links a:hover { color: #fff; }
.legal-links span { margin: 0 8px; }
.form-note { margin: 14px 0 0; font-size: .8rem; color: rgba(255, 255, 255, .5); }
.form-note a { color: rgba(255, 255, 255, .75); text-decoration: underline; text-underline-offset: 3px; }
.legal-body h2 { font-size: 1.35rem !important; margin-top: 36px !important; }