/* ============================================================
   Marrow art.css
   The frames and the still, quiet motion that art.js draws into.

   Everything here is slow on purpose. The fastest animation in this file takes
   3.6 seconds to complete one pass, and none of them change brightness by more
   than a small amount, because a person in a hard moment should be able to look
   at the screen without it doing anything to them.

   Colours come from the app tokens, with the shipped values as fallbacks so
   this file also works on its own (a demo page, the marketing site).

   Companion to app/art.js. Load both, or neither.
   ============================================================ */

/* ---------- frames ---------- */

/* the living current. Give it a height in your own CSS, or use the default. */
.art-river{position:relative;width:100%;height:180px;overflow:hidden;}
.art-river canvas,canvas.art-river{display:block;width:100%;height:100%;}

/* full-bleed band that dissolves into the page, the way .place-art does */
.art-fade{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 46%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 46%,transparent 100%);}

/* a surge visual. Square, centred, capped so it never dominates a small screen.
   The ::before keeps the box square without aspect-ratio, for older webviews. */
.art-surge{position:relative;width:100%;max-width:340px;margin:0 auto;}
.art-surge::before{content:"";display:block;padding-bottom:100%;}
.art-surge canvas{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:block;}

/* place art and milestone marks: decorative, never interactive.
   The place band is a fixed height and crops sideways, the way .place-art
   already does, so it reads the same on a narrow phone and a wide one.
   Override .art-place .ar-svg{height:} for a taller band. */
.art-place,.art-mark{display:block;pointer-events:none;user-select:none;-webkit-user-select:none;}
.art-place{position:relative;width:100%;}
.art-place .ar-svg{display:block;width:100%;height:150px;}
.art-mark{width:100%;max-width:300px;margin:0 auto;}
.art-mark .ar-svg{display:block;width:100%;height:auto;}

/* ---------- ink ----------
   One stroke language: round caps, no fill unless asked, colour from tokens. */
.ar-l{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.ar-m{stroke:var(--moon,#9FB6A8);}
.ar-g{stroke:var(--lantern,#D2935A);}
.ar-d{stroke:#0C1614;}
.ar-mf{fill:var(--moon,#9FB6A8);}
.ar-gf{fill:var(--lantern,#D2935A);}
.ar-df{fill:#0C1614;}
.ar-svg [class^="ar-"],.ar-svg [class*=" ar-"]{transform-box:view-box;}

/* ---------- motion ----------
   Long cycles, small amplitudes, no opacity swing wider than about 0.3. */
@keyframes arDrift{0%,100%{transform:translateX(0);}50%{transform:translateX(-7px);}}
@keyframes arBreathe{0%,100%{opacity:.7;transform:scale(.985);}50%{opacity:1;transform:scale(1.02);}}
@keyframes arGlim{0%,100%{opacity:1;}46%{opacity:.55;}}
@keyframes arSway{0%,100%{transform:rotate(0deg);}50%{transform:rotate(-1.6deg);}}
@keyframes arRing{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.05);opacity:.72;}}
@keyframes arRise{0%{transform:translateY(0);opacity:0;}16%{opacity:.6;}100%{transform:translateY(-30px);opacity:0;}}
@keyframes arFlick{0%,100%{transform:scaleY(1) scaleX(1);}34%{transform:scaleY(1.07) scaleX(.96);}
  62%{transform:scaleY(.95) scaleX(1.03);}}
@keyframes arThread{0%{stroke-dashoffset:0;}100%{stroke-dashoffset:-20;}}
@keyframes arHaze{0%,100%{transform:translateX(0);opacity:.14;}50%{transform:translateX(-6px);opacity:.2;}}

.ar-drift{animation:arDrift 17s cubic-bezier(.22,.68,.2,1) infinite;}
.ar-drift2{animation:arDrift 26s cubic-bezier(.22,.68,.2,1) infinite reverse;}
.ar-breathe{animation:arBreathe 7.5s cubic-bezier(.22,.68,.2,1) infinite;transform-origin:center;}
.ar-breathe2{animation:arBreathe 9.5s cubic-bezier(.22,.68,.2,1) 1.6s infinite;transform-origin:center;}
.ar-glim{animation:arGlim 5.4s cubic-bezier(.22,.68,.2,1) infinite;}
.ar-glim2{animation:arGlim 7.2s cubic-bezier(.22,.68,.2,1) 1.1s infinite;}
.ar-sway{animation:arSway 9s cubic-bezier(.22,.68,.2,1) infinite;transform-origin:170px 96px;}
.ar-ring{animation:arRing 8s cubic-bezier(.22,.68,.2,1) infinite;transform-origin:center;}
.ar-ring2{animation:arRing 10s cubic-bezier(.22,.68,.2,1) 1.2s infinite;transform-origin:center;}
.ar-ring3{animation:arRing 12s cubic-bezier(.22,.68,.2,1) 2.4s infinite;transform-origin:center;}
.ar-rise{animation:arRise 6.5s linear infinite;}
.ar-rise2{animation:arRise 8.5s linear 2.2s infinite;}
.ar-flick{animation:arFlick 3.6s ease-in-out infinite;transform-origin:180px 72px;}
.ar-thread{animation:arThread 12s linear infinite;}
.ar-haze{animation:arHaze 14s cubic-bezier(.22,.68,.2,1) infinite;}

/* ---------- reduced motion ----------
   Everything composes as a still image. art.js stops its canvases in the same
   breath, so nothing on screen is moving at all. */
@media (prefers-reduced-motion: reduce){
  .art-place *,.art-mark *,[class*="ar-"]{animation:none!important;transition:none!important;}
}

/* ---------- print ---------- */
@media print{ .art-river,.art-place{display:none;} }