/* =============================================================================
* Creytix Site Kit — SIGNATURE MODULE (assets/signature.css)
*
* The cheap, high-leverage "award-WINNING" adds from the design taste inventory
* (docs/creytix/CREYTIX_DESIGN_TASTE_INVENTORY.md §1 D2/D4/E1 + §3 tiers 2–3),
* packaged as ONE opt-in stylesheet a site adds AFTER base.css + motion.css:
*
*
*
* Everything here is token-driven (--ctx-*), self-contained (no CDN), and
* reduced-motion-safe. Nothing is required for a page to render or read — each
* preset is opted into per-element (a data-attr or a .ck-* class), so a site
* takes exactly the polish it wants and no motion tax on the rest.
*
* Presets:
* 1 · HERO-INTRO — [data-ck-hero-intro] : one choreographed FIRST-LOAD
* reveal (clip-mask wipe + subtle rise/scale). Taste
* inventory D2 ("one signature hero-intro moment").
* 2 · VIEW TRANSITIONS— cross-document (MPA) page morphs. Mirrors the emitted
* output of @expedia/creytix-motion's view-transitions.ts
* (CROSS_DOCUMENT_OPT_IN_CSS + defaultViewTransitionCss).
* Taste inventory D4. Pure progressive enhancement.
* 3 · SIGNATURE MOTIF — .ck-motif / .ck-motif-rule / .ck-motif-corner backed
* by --ctx-motif-* : one repeated brand mark the base can
* place in dividers/section corners. Taste inventory E1.
*
* (OKLCH wide-gamut color — taste inventory B3 — is a TOKEN-LAYER opt-in that
* lives in each brand's token sheet, not here; see the brand sheets + README.)
* =========================================================================== */
/* ---------------------------------------------------------------------------
* 1 · HERO-INTRO — the single choreographed first-load moment (opt-in).
*
* Put [data-ck-hero-intro] on the hero (or any) container, then mark the
* elements to reveal in sequence with [data-ck-intro] and an ordinal index
* `style="--ck-intro-i:0"`, `1`, `2`… (the stagger). The art-directed media
* layer gets [data-ck-intro-media] for a whisper scale-settle behind the copy.
*
* This is pure first-load CSS — no JS, no scroll-timeline — so it plays ONCE on
* load (the "one moment", not motion-on-everything). It is intentionally
* distinct from motion.css's scroll-driven `appear-*` presets: use hero-intro
* for the hero, `data-cx-motion` for the rest of the page as it scrolls in.
*
* Reduced motion: the whole block is gated behind
* `prefers-reduced-motion: no-preference`, so reduced-motion users get the
* elements at their natural, fully-visible resting state (no animation at all).
* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
[data-ck-hero-intro] [data-ck-intro] {
animation: ck-hero-intro-rise var(--ck-intro-dur, 0.85s) cubic-bezier(.2, .7, .2, 1) both;
animation-delay: calc(var(--ck-intro-base, 0.12s) + var(--ck-intro-i, 0) * var(--ck-intro-step, 0.11s));
will-change: transform, opacity, clip-path;
}
[data-ck-hero-intro] [data-ck-intro-media] {
animation: ck-hero-intro-media var(--ck-intro-media-dur, 1.2s) cubic-bezier(.2, .7, .2, 1) both;
animation-delay: var(--ck-intro-media-delay, 0s);
will-change: transform, opacity;
}
}
@keyframes ck-hero-intro-rise {
from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate3d(0, 0.9rem, 0); }
60% { opacity: 1; }
to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes ck-hero-intro-media {
from { opacity: 0; transform: scale(1.06); }
to { opacity: 1; transform: scale(1); }
}
/* ---------------------------------------------------------------------------
* 2 · VIEW TRANSITIONS — seamless cross-document (MPA) page morphs (opt-in).
*
* Loading this sheet on every page of a same-origin multi-page site turns
* plain navigations into a compositor-thread cross-fade + subtle rise, with
* ZERO JS. Unsupported browsers ignore all of it and navigate instantly and
* correctly — this is strict progressive enhancement.
*
* To MORPH a shared element across pages (e.g. the wordmark that appears in the
* nav of both the marketing page and the portal), give it a UNIQUE
* `view-transition-name`. A name must be unique per page, so scope it to a
* single instance (`.ck-nav .ck-wordmark`, never the footer copy too).
*
* Mirrors @expedia/creytix-motion/src/view-transitions.ts verbatim in intent:
* CROSS_DOCUMENT_OPT_IN_CSS === `@view-transition { navigation: auto; }`
* defaultViewTransitionCss() === the root fade/rise + reduced-motion guard.
* -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ck-vt-fade-out 0.28s ease-out both; }
::view-transition-new(root) { animation: ck-vt-fade-in 0.28s ease-out both; }
@keyframes ck-vt-fade-out { to { opacity: 0; } }
@keyframes ck-vt-fade-in { from { opacity: 0; transform: translateY(8px); } }
/* Morph the nav wordmark between pages (unique per page — nav only). */
.ck-nav .ck-wordmark { view-transition-name: ck-wordmark; }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) { animation: none !important; }
}
/* ---------------------------------------------------------------------------
* 3 · SIGNATURE MOTIF — one repeated brand mark, placed by the base (opt-in).
*
* A recognizable, repeated mark reads as "system"; one-off ornament per section
* reads as hand-editing (taste inventory E1). This gives every brand ONE motif
* primitive it declares once via --ctx-motif-* and the base stamps consistently
* in dividers and section corners.
*
* Brands override --ctx-motif-mark (an SVG data-URI silhouette) in their token
* sheet to make the mark theirs; it is painted with --ctx-motif-ink via CSS
* mask, so it always tracks the brand accent and needs no separate colored asset.
*
* .ck-motif inline mark (drop beside an overline / in a heading)
* .ck-motif-rule a centered divider: hairline — mark — hairline
* .ck-motif-corner stamps the mark in a section's top-right corner
* -------------------------------------------------------------------------- */
:root {
--ctx-motif-size: 1.05rem;
--ctx-motif-opacity: 0.9;
/* Default mark: a slim four-point star (brand-neutral). Brands override. */
--ctx-motif-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 L14 10 L23 12 L14 14 L12 23 L10 14 L1 12 L10 10 Z' fill='%23000'/%3E%3C/svg%3E");
/* NOTE: --ctx-motif-ink is intentionally NOT set here. If it were declared on
* :root it would pre-resolve the brand accent in :root scope (where the brand
* token isn't defined) and lock every motif to the fallback color. Instead the
* mark reads the accent via the inline fallback chain BELOW, so it resolves at
* the .ck-motif element and tracks each brand. A brand can still set
* --ctx-motif-ink on its .brand- scope to override (e.g. a mark that
* isn't the accent). */
}
.ck-motif {
display: inline-block;
inline-size: var(--ctx-motif-size);
block-size: var(--ctx-motif-size);
flex: none;
background-color: var(--ctx-motif-ink, var(--ctx-color-brand-accent, #c9a24b));
opacity: var(--ctx-motif-opacity);
-webkit-mask: var(--ctx-motif-mark) center / contain no-repeat;
mask: var(--ctx-motif-mark) center / contain no-repeat;
}
.ck-motif-rule {
display: flex;
align-items: center;
gap: clamp(0.85rem, 2vw, 1.5rem);
margin-block: clamp(2.25rem, 4.5vw, 4rem);
}
.ck-motif-rule::before,
.ck-motif-rule::after {
content: "";
flex: 1 1 0;
block-size: 1px;
background: var(--ck-hairline, color-mix(in srgb, var(--ctx-color-primary-text, #111) 14%, transparent));
}
/* the divider carries the mark in its middle */
.ck-motif-rule > .ck-motif { --ctx-motif-size: 1.15rem; }
.ck-motif-corner { position: relative; }
.ck-motif-corner::before {
content: "";
position: absolute;
top: var(--ck-gutter, 1.5rem);
right: var(--ck-gutter, 1.5rem);
inline-size: var(--ctx-motif-size);
block-size: var(--ctx-motif-size);
background-color: var(--ctx-motif-ink, var(--ctx-color-brand-accent, #c9a24b));
opacity: calc(var(--ctx-motif-opacity) * 0.7);
-webkit-mask: var(--ctx-motif-mark) center / contain no-repeat;
mask: var(--ctx-motif-mark) center / contain no-repeat;
pointer-events: none;
}
/* ---------------------------------------------------------------------------
* 4 · KINETIC TYPE-LINE-REVEAL — [data-ck-type-line-reveal] on a heading masks
* each line behind an overflow-hidden wrapper and slides it up into place
* on load/scroll-into-view. One signature headline moment (taste inventory
* #6, award-tier motion) — opt-in per element, reduced-motion-safe.
*
* Usage: wrap the heading text in ... per visual line, or apply
* [data-ck-type-line-reveal] directly to a single-line heading (the
* element itself becomes the mask).
* ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
[data-ck-type-line-reveal] {
overflow: hidden;
}
[data-ck-type-line-reveal] > * ,
[data-ck-type-line-reveal].ck-line-inner {
display: inline-block;
animation: ck-type-line-reveal 0.9s cubic-bezier(.2,.7,.2,1) both;
animation-delay: var(--ck-type-reveal-delay, 0.1s);
}
.ck-line-mask { display: block; overflow: hidden; }
.ck-line-mask .ck-line-inner {
display: inline-block;
animation: ck-type-line-reveal 0.9s cubic-bezier(.2,.7,.2,1) both;
animation-delay: var(--ck-type-reveal-delay, 0.1s);
}
}
@keyframes ck-type-line-reveal {
from { transform: translateY(105%); }
to { transform: translateY(0); }
}