/* ==========================================================================
   Edukall Site — the Imago skin's own layer (SiteLook::SKIN_CSS)

   The tokens in edukall-site.css give a skin its colour, type, shape and depth; this
   layer is what the tokens alone cannot say: the same shared markup, dressed the way the
   school's home and programme pages already are — cards that rise off the page, the
   sign-in side on the deep gradient, and cards that arrive as the page scrolls. Loaded only with this skin, and scoped to it besides.
   Never markup, never a literal colour: only the skin's tokens.
   ========================================================================== */

[data-skin="imago"] {
    /* The deep, lit ground shared by the page bands and the sign-in side. */
    --s-deep-ground:
        radial-gradient(640px 380px at 92% -20%, color-mix(in srgb, var(--s-accent-2) 70%, transparent), transparent 70%),
        radial-gradient(560px 340px at 4% 135%, color-mix(in srgb, var(--s-highlight) 42%, transparent), transparent 70%),
        linear-gradient(135deg, var(--s-deep) 0%, var(--s-deep-3) 100%);
    --s-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── The top of a listing or a content page ──────────────────────────────────
   On the page's own ground, as on Edukall: the title's closing words in the accent face
   (site_heading()) are the school's mark here, not a dark band — which weighed on every
   listing and competed with what it heads. */

/* ── The other dark grounds: a landing's closing banner, an institution's cover ── */

[data-skin="imago"] .s-banner { background: var(--s-deep-ground); box-shadow: var(--s-lift); }
[data-skin="imago"] .s-partner__cover--plain { background: var(--s-deep-ground); }

/* ── Cards that rise off the page ─────────────────────────────────────────── */

[data-skin="imago"] :is(.s-pcard, .s-post, .s-agenda__row) {
    border-color: transparent;
    border-radius: 22px;
    box-shadow: var(--s-lift-sm);
    transition: transform .35s var(--s-ease), box-shadow .35s var(--s-ease);
}
[data-skin="imago"] :is(.s-pcard, .s-post, .s-agenda__row):hover { transform: translateY(-6px); box-shadow: var(--s-lift); }
[data-skin="imago"] :is(.s-pcard__media, .s-post__media) { overflow: hidden; }
[data-skin="imago"] :is(.s-pcard__media, .s-post__media) img { transition: transform .6s var(--s-ease); }
[data-skin="imago"] :is(.s-pcard, .s-post):hover :is(.s-pcard__media, .s-post__media) img { transform: scale(1.05); }
[data-skin="imago"] .s-pcard__foot { border-top-color: var(--s-tint-3); }
[data-skin="imago"] .s-site :is(.s-card-link, .s-course-mini) { transition: transform .35s var(--s-ease), box-shadow .35s var(--s-ease); }
[data-skin="imago"] .s-site :is(.s-card-link, .s-course-mini):hover { transform: translateY(-4px); box-shadow: var(--s-lift-sm); }

/* ── Where the buyer decides and pays: the order summary (cart, checkout, receipt) and the
   checkout's steps, dressed as the product pages' buy box — lifted, rounder, the brand's
   gradient along the top (a background layer, so it holds whatever each page's padding). */

[data-skin="imago"] .s-summary {
    border-color: transparent;
    border-radius: 26px;
    background: var(--s-gradient) top / 100% 5px no-repeat, var(--s-surface);
    box-shadow: var(--s-lift);
}
[data-skin="imago"] .s-co-step { border-color: transparent; border-radius: 22px; box-shadow: var(--s-lift-sm); }

/* ── The sign-in pages' side: the deep, lit ground ────────────────────────── */

[data-skin="imago"] .s-auth__aside { background: var(--s-deep-ground); color: var(--s-on-deep); }
[data-skin="imago"] :is(.s-banner, .s-partner__cover--plain, .s-auth__aside) { --s-focus: var(--s-focus-on-deep); }
[data-skin="imago"] .s-auth__eyebrow { color: var(--s-on-deep-faint); }

/* ── Cards that arrive as the page scrolls ───────────────────────────────────
   data-reveal="skin" marks what a skin may animate (edukall-site-motion.js reveals it);
   here it rises with `translate`, so the hover lift (`transform`) never waits on the stagger. */

[data-skin="imago"].ek-motion [data-reveal="skin"] {
    opacity: 0;
    translate: 0 28px;
    transition:
        opacity .8s var(--s-ease) var(--s-reveal-delay, 0s),
        translate .8s var(--s-ease) var(--s-reveal-delay, 0s),
        transform .35s var(--s-ease),
        box-shadow .35s var(--s-ease);
}
[data-skin="imago"].ek-motion [data-reveal="skin"].is-in { opacity: 1; translate: none; }
[data-skin="imago"].ek-motion [data-reveal="skin"]:nth-child(3n+2) { --s-reveal-delay: 80ms; }
[data-skin="imago"].ek-motion [data-reveal="skin"]:nth-child(3n) { --s-reveal-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
    [data-skin="imago"] :is(.s-pcard, .s-post, .s-agenda__row, .s-card-link, .s-course-mini):hover { transform: none; }
    [data-skin="imago"] :is(.s-pcard, .s-post):hover :is(.s-pcard__media, .s-post__media) img { transform: none; }
}