/* ShotFlick premium page layer (16 Sep 2026) - the homepage's finish, shared by the public pages (Themes, Pricing).
   Made by Comfort Earning (comfortearningoffice@gmail.com)
   Motion is opacity, blur and transform on arrival only, and colour/shadow for the relay - nothing is re-laid out. */

/* header: stays on top, frosted, same as the homepage */
body > header.top { position: sticky; top: 0; z-index: 50; margin-inline: -20px; padding-inline: max(20px, calc((100vw - 1200px) / 2)); max-width: none; box-sizing: border-box;
  background: rgba(9, 9, 11, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .07); }
body > header.top > .brand, body > header.top > .signin { position: relative; }
html, body { overflow-x: clip; }

/* eyebrow between two equal gold rules */
.pp-cap { display: flex !important; align-items: center; justify-content: center; gap: 12px; }
.pp-cap::before, .pp-cap::after { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, rgba(245, 197, 66, .8)); }
.pp-cap::after { background: linear-gradient(90deg, rgba(245, 197, 66, .8), transparent); }

/* arrival: slide up out of a soft blur, one after another */
.pp-rv { opacity: 0; filter: blur(8px); transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), filter .9s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--pp-d, 0s); }
.pp-rv.pp-in { opacity: 1; filter: none; transform: none; }

/* relay: a gold edge passes from card to card without a pause - each card owns an equal slice of one loop */
.pp-relay { position: relative; }
.pp-relay::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1.5px rgba(255, 214, 92, .9), 0 0 26px rgba(245, 197, 66, .28); }
.pp-live .pp-relay::after { animation: var(--pp-anim, none) var(--pp-loop, 4s) linear infinite; animation-delay: var(--pp-rd, 0s); }   /* keyframes written by premium-page.js for the number of cards */

/* buttons get a light that crosses them on hover */
.pp-shine { position: relative; overflow: hidden; }
.pp-shine::before { content: ""; position: absolute; inset: 0; transform: translateX(-120%); pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.pp-shine:hover::before { transform: translateX(120%); }

@media (prefers-reduced-motion: reduce) {
  .pp-rv { opacity: 1; filter: none; transform: none; transition: none; }
  .pp-live .pp-relay::after { animation: none; }
}

/* an element marked hidden stays hidden, whatever display a page rule gives it (Pricing's "Open the app" showed before any payment) */
[hidden] { display: none !important; }