/* Creativity (public/assets/js/site-creativity.js). Port of the Circles Framework's css/cc-data-motion.css and
   css/cc-motion-blocks.css. Every start state sits under a class the script adds (cc-dm-ready, cc-motion-ready), so
   without the script, or with reduced motion, the page is its finished self. Transform, opacity, filter and clip only. */

/* Data motion */
.cc-dm-num { font-variant-numeric: tabular-nums; }
html.cc-dm-ready .cc-dm-bar { transform: scaleX(0); transform-origin: 0 50%; }
html.cc-dm-ready .cc-dm-in .cc-dm-bar { transform: none; transition: transform .95s cubic-bezier(.22, 1, .36, 1) var(--dm-d, 0ms); }
html.cc-dm-ready .cc-dm-seq { opacity: 0; transform: translateY(8px); }
html.cc-dm-ready .cc-dm-in .cc-dm-seq { opacity: 1; transform: none; transition: opacity .45s ease-out var(--dm-d, 0ms), transform .5s cubic-bezier(.22, 1, .36, 1) var(--dm-d, 0ms); }
html.cc-dm-ready .cc-dm-pin { opacity: 0; scale: .4; }
html.cc-dm-ready .cc-dm-in .cc-dm-pin { opacity: 1; scale: 1; transition: opacity .3s ease-out var(--dm-d, 0ms), scale .55s cubic-bezier(.34, 1.56, .64, 1) var(--dm-d, 0ms); }

/* 4+ The opening (heroEntrance): held invisible by the head gate until its entrance starts, so it never flashes
   finished and then jumps back. The gate only exists with motion allowed, and lifts on its own after 4 seconds. */
html.pb-motion-pre:is([data-creativity="4"], [data-creativity="5"], [data-creativity="6"], [data-creativity="7"], [data-creativity="8"], [data-creativity="9"], [data-creativity="10"]) main > section.pb-block:first-of-type :is(h1, .st-heading, .st-eyebrow, .st-lead, .pb-btn, figure, .st-media) { opacity: 0; }
.cc-hw { display: inline-block; overflow: clip; overflow-clip-margin: .12em; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.cc-hw > span { display: inline-block; }

/* Creative effects */
@media (prefers-reduced-motion: no-preference) {
    html.cc-motion-ready [data-cc-block="blur-in"] { transition: filter 1s ease, opacity 1s ease, transform 1s cubic-bezier(.22, 1, .36, 1); }
    html.cc-motion-ready [data-cc-block="blur-in"]:not(.cc-fx-in) { filter: blur(12px); opacity: .2; transform: translateY(12px); }
    html.cc-motion-ready [data-cc-block="wipe"], html.cc-motion-ready [data-cc-block="band-wipe"] { transition: clip-path 1.2s cubic-bezier(.22, 1, .36, 1); }
    html.cc-motion-ready [data-cc-block="wipe"]:not(.cc-fx-in) { clip-path: inset(0 50%); }
    html.cc-motion-ready [data-cc-block="band-wipe"]:not(.cc-fx-in) { clip-path: inset(6% 8% round 24px); }
    html.cc-motion-ready [data-cc-block="wipe"].cc-fx-in, html.cc-motion-ready [data-cc-block="band-wipe"].cc-fx-in { clip-path: inset(0); }
    html.cc-motion-ready [data-cc-block="draw"] .cc-fx-stroke { stroke-dasharray: var(--cc-length); stroke-dashoffset: var(--cc-length); transition: stroke-dashoffset 1.6s ease; }
    html.cc-motion-ready [data-cc-block="draw"].cc-fx-in .cc-fx-stroke { stroke-dashoffset: 0; }
    html.cc-motion-ready [data-cc-block="scroll-zoom"] { overflow: clip; }
    html.cc-motion-ready [data-cc-block="scroll-zoom"] img { transform-origin: 50% 50%; will-change: transform; }
}
html.cc-motion-ready [data-cc-block="dots"], html.cc-motion-ready [data-cc-block="tilt"] { position: relative; isolation: isolate; }
.cc-fx-dots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
html.cc-motion-ready [data-cc-block="dots"] > :not(.cc-fx-dots) { position: relative; z-index: 1; }

/* 6+: a short statement fills in word by word as it scrolls past (desktop). */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .cc-fx-pin > span { opacity: .28; transition: opacity .2s; }
    .cc-fx-pin > .cc-fx-filled { opacity: 1; }
}

/* 6+: card tilt with a moving light (desktop, fine pointer). */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    html.cc-motion-ready [data-cc-block="tilt"] { transition: transform .25s ease-out; transform-style: preserve-3d; }
    .cc-fx-light { position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; background: radial-gradient(circle at var(--cc-light-x, 50%) var(--cc-light-y, 50%), color-mix(in srgb, currentColor 14%, transparent), transparent 60%); transition: opacity .2s; }
    .cc-fx-hot > .cc-fx-light { opacity: 1; }
}

/* Phones: quicker reveals. */
@media (max-width: 767px) {
    [data-cc-block="blur-in"], [data-cc-block="wipe"], [data-cc-block="band-wipe"] { transition-duration: .55s !important; }
}

@media (prefers-reduced-motion: reduce) {
    html.cc-dm-ready *:is(.cc-dm-bar, .cc-dm-seq, .cc-dm-pin) { opacity: 1 !important; transform: none !important; scale: 1 !important; transition: none !important; }
}
@media print {
    html.cc-dm-ready *:is(.cc-dm-bar, .cc-dm-seq, .cc-dm-pin), [data-cc-block] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}