/* Dana Wilcher Art: her Commissions page. css/site.css comes first.
   From her confirmed mockup, docs/mockups/telify-web/dana-wilcher/commissions.html. */

/* the title rises in */
/* hidden only once the page's script has started (.reveal on <html>): a script that never loads leaves it all shown */
.reveal .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal .rv { opacity: 1; transform: none; transition: none; } }

.cm-hero { position: relative; padding: 96px 0 64px; text-align: center; background: radial-gradient(ellipse 46% 70% at 50% 0%, rgba(148, 37, 42, .36), transparent 72%); }
.cm-hero h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(60px, 7vw, 108px); line-height: .95; letter-spacing: -0.01em; }

/* one commission, the drums: her photo of the drums against the stars, opening onto their own page */
.cm-feature { position: relative; display: block; min-height: min(86vh, 820px); overflow: hidden; isolation: isolate; color: var(--ink); }
.cm-feature .bg { position: absolute; inset: 0; z-index: -2; }
.cm-feature .bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; transform: scale(1.06); transition: transform 2.4s cubic-bezier(.2, .7, .2, 1); }
.cm-feature.in .bg img { transform: scale(1); }
.cm-feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 9, 7, .92) 0%, rgba(14, 9, 7, .72) 34%, rgba(14, 9, 7, .1) 64%), linear-gradient(180deg, var(--espresso), transparent 14%, transparent 78%, var(--espresso)); }
.cm-in { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: inherit; padding: 90px 0; }
.cm-in .txt { max-width: 520px; }
.cm-in h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 5.4vw, 82px); line-height: .98; }
.cm-in .sub { margin: 16px 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.2vw, 30px); color: var(--wheat); }
.cm-in .facts { display: grid; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-2); }
.cm-in .facts li { display: flex; align-items: center; gap: 10px; }
.cm-in .facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold, #C9A35B); }
.cm-in .btn { margin-top: 40px; align-self: flex-start; }
.cm-in .btn svg { width: 18px; height: 18px; transition: transform .3s; }
.cm-feature:hover .btn svg { transform: translateX(4px); }
.cm-strip { display: flex; gap: 16px; margin-top: 54px; }
.cm-strip span { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .5); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.5s + var(--i) * .08s); }
.reveal .cm-strip span { opacity: 0; transform: translateY(12px); }
.cm-feature.in .cm-strip span { opacity: 1; transform: none; }
.cm-strip img { width: 100%; height: 100%; object-fit: cover; }
.cm-end { height: 110px; }

@media (max-width: 860px) {
  .cm-hero { padding: 60px 0 40px; }
  .cm-feature { min-height: 0; }
  /* clipped, so the photo's settle from 1.06 never shows a strip below its fade (Gabriel 2026-11-02) */
  .cm-feature .bg { position: relative; height: 62vw; overflow: hidden; }
  .cm-feature .bg img { object-position: 60% 30%; }
  .cm-feature::before { display: none; }
  .cm-feature .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--espresso), transparent 16%, transparent 50%, var(--espresso)); }
  .cm-in { padding: 0 0 70px; margin-top: -36px; }
  .cm-strip span { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .cm-feature .bg img, .reveal .cm-strip span { transition: none; transform: none; opacity: 1; } }

/* Higher Self Paintings, the second band: the drums band mirrored, her wide photo across the whole band, its words,
   button and paintings against the right edge under the mirrored fade, each fact's dot after it (way A of
   docs/mockups/telify-web/dana-wilcher/commissions-higher-self/sections.html). On a phone it reads as the drums do. */
.cm-feature.cm-flip .cm-in { align-items: flex-end; }
.cm-feature.cm-flip .txt { width: 420px; max-width: 100%; text-align: right; }
.cm-feature.cm-flip .facts { justify-items: end; }
.cm-feature.cm-flip .facts li { flex-direction: row-reverse; }
.cm-feature.cm-flip .btn { align-self: flex-end; }
.cm-feature.cm-flip::before { background: linear-gradient(270deg, rgba(14, 9, 7, .92) 0%, rgba(14, 9, 7, .72) 34%, rgba(14, 9, 7, .1) 64%), linear-gradient(180deg, var(--espresso), transparent 14%, transparent 78%, var(--espresso)); }
.cm-feature.cm-flip .bg img { object-position: 50% 35%; }
.cm-feature.cm-flip .cm-strip span { border-radius: 2px; width: 50px; height: 66px; }
.cm-gap { height: 24px; }

@media (max-width: 860px) {
  .cm-feature.cm-flip .cm-in { align-items: stretch; }
  .cm-feature.cm-flip .txt { width: auto; text-align: left; }
  .cm-feature.cm-flip .facts { justify-items: start; }
  .cm-feature.cm-flip .facts li { flex-direction: row; }
  .cm-feature.cm-flip .btn { align-self: flex-start; }
  .cm-feature.cm-flip .bg img { object-position: 30% 50%; }
}

/* =====================================================================
   Holiday Gift Portraits, the first band (card dana-holiday-gift-packages, design D7; drawn in
   docs/mockups/telify-web/dana-wilcher/holiday/commissions-band.html): the Higher Self band's mirrored shape (the live .cm-flip rules), so the bands
   run right, left, right, in the holiday page's look: its pine ground with the gold pattern, snow falling over the
   band, one of her gifts floating on the left as on the holiday page's cover, her holiday
   portraits framed under the facts, and the gold village along the foot */
.cm-holiday { --pine: #16382A; --pine-deep: #0D2419; --gold: #D9B46B; --gold-hi: #F3DCA0; --gold-lo: #A9843F; --gold-line: rgba(217, 180, 107, .55); --paper: #FBF3E6;
  --town: max(200px, 100vw * 210 / 1440); background: url("/img/holiday/pattern.ab50be1ddf83.svg") center top / 120px 168px, var(--pine); }
.cm-feature.cm-holiday::before { background: radial-gradient(ellipse 34% 52% at 26% 44%, rgba(217, 180, 107, .16), transparent 70%), linear-gradient(270deg, rgba(13, 36, 25, .78) 0%, rgba(13, 36, 25, .45) 38%, rgba(13, 36, 25, 0) 62%), linear-gradient(180deg, var(--espresso), transparent 14%); }
.cm-holiday .cm-in { padding-bottom: calc(var(--town) + 10px); }
.cm-holiday .txt, .cm-holiday .btn, .cm-holiday .cm-strip { position: relative; z-index: 3; }
/* a little wider than Higher Self's words, so its line under the title stays on one line */
.cm-feature.cm-holiday .txt { width: 470px; }
/* the gift as it arrives, on the left above the village, as on the holiday page's cover: a soft gold glow behind it,
   its shadow on the ground and three sparks around it */
.cm-holiday .cm-gift { position: absolute; z-index: 1; left: 1%; top: calc(50% - var(--town) / 2 + 30px); width: min(34vw, 470px); margin: 0; translate: 0 -50%; }
.cm-holiday .cm-gift::before { content: ""; position: absolute; inset: 6% 2%; border-radius: 50%; background: radial-gradient(circle, rgba(243, 220, 160, .26), transparent 68%); filter: blur(12px); }
.cm-holiday .cm-gift img { position: relative; display: block; width: 100%; height: auto; rotate: -2.5deg; filter: drop-shadow(0 34px 34px rgba(0, 0, 0, .55)); }
.cm-holiday .cm-gift .sp { position: absolute; width: 22px; height: 22px; color: var(--gold-hi); overflow: visible; }
.cm-holiday .cm-gift .s1 { left: 4%; top: 14%; }
.cm-holiday .cm-gift .s2 { right: 6%; top: 4%; width: 30px; height: 30px; }
.cm-holiday .cm-gift .s3 { right: 0; bottom: 22%; width: 16px; height: 16px; }
/* her holiday portraits under the facts, each in a little frame */
.cm-feature.cm-holiday .cm-strip span { border-radius: 1px; width: 50px; height: 64px; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold-line), 0 10px 24px rgba(0, 0, 0, .5); }
.cm-holiday .cm-strip { gap: 18px; }
/* until the band's script has set up (.cm-go), the portraits are simply there, so a blocked script still shows them */
.cm-holiday:not(.cm-go) .cm-strip span { opacity: 1; transform: none; }
/* the snow over everything but the words */
.cm-snow { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
/* the village along the foot of the band, its gold base line the band's edge */
.cm-town { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: var(--town); overflow: hidden; pointer-events: none; }
.cm-village { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cm-village .glass { fill: #FFAA2E; filter: drop-shadow(0 0 4px rgba(255, 170, 60, .95)); }
.cm-village .chsmoke { stroke-dasharray: .35 .65; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* the gift comes up into its place as the band comes into view, then floats, its sparks twinkling */
  /* the waiting state applies at once and only the arrival is eased: eased both ways, the gift faded out as the band
     set up and back in a frame later, so it never visibly arrived (walk 2026-11-01) */
  .cm-holiday.cm-go .cm-gift { opacity: 0; translate: 0 calc(-50% + 30px); rotate: 4deg; }
  .cm-holiday.cm-go.in .cm-gift { opacity: 1; translate: 0 -50%; rotate: 0deg; transition: opacity 1.2s ease .2s, translate 1.6s cubic-bezier(.2, .8, .2, 1) .2s, rotate 1.6s cubic-bezier(.2, .8, .2, 1) .2s; }
  .cm-holiday .cm-gift img { animation: cm-float 8s ease-in-out infinite; }
  .cm-holiday .cm-gift .sp { animation: cm-twinkle 2.6s ease-in-out infinite alternate; }
  .cm-holiday .cm-gift .s2 { animation-delay: -1.1s; }
  .cm-holiday .cm-gift .s3 { animation-delay: -.6s; }
  /* the windows light from left to right (page script orders them), the smoke rises, the stars brighten and dim, never
     growing, so none drifts on a phone (as on the holiday page, Gabriel 2026-11-01) */
  .cm-go .cm-village .glass { fill: #3A2A1A; filter: none; }
  .cm-holiday.cm-go.in .cm-village .glass { fill: #FFAA2E; filter: drop-shadow(0 0 4px rgba(255, 170, 60, .95)); transition: fill .5s ease calc(.6s + var(--w, 0) * 160ms); }
  .cm-village .chsmoke { animation: cm-smoke 5s linear infinite; }
  .cm-village .chsmoke:nth-of-type(2n) { animation-delay: -2.4s; }
  .cm-village .tw { animation: cm-dim 3.2s ease-in-out infinite alternate; }
  .cm-village .tw:nth-of-type(3n) { animation-delay: -1.3s; }
  /* off screen the loops rest (page script sets .cm-rest) */
  .cm-rest :is(.cm-village .chsmoke, .cm-village .tw, .cm-gift img, .cm-gift .sp) { animation-play-state: paused; }
}
@keyframes cm-smoke { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cm-twinkle { from { opacity: .3; scale: .8; } to { opacity: 1; scale: 1.08; } }
@keyframes cm-dim { from { opacity: .3; } to { opacity: 1; } }
@keyframes cm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

@media (max-width: 860px) {
  /* on a phone the gift stands above the words, as the other bands' photos do; the damask at seven tenths, as on the
     holiday page */
  .cm-holiday { --town: 120px; background-size: 84px 117.6px; }
  /* the other bands drop their fade on a phone, as their photo starts them; this one keeps a soft edge under the title */
  .cm-feature.cm-holiday::before { display: block; background: linear-gradient(180deg, var(--espresso), transparent 90px); }
  .cm-holiday .cm-in { margin-top: 0; padding-top: 56px; }
  .cm-holiday .cm-gift { position: relative; left: auto; top: auto; order: -1; width: min(84vw, 360px); margin: 0 auto 30px; translate: none; }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .cm-holiday.cm-go .cm-gift { translate: 0 30px; }
  .cm-holiday.cm-go.in .cm-gift { translate: none; }
}