/**
 * Dreamformer Motion Kit
 * Opt-in interaction/animation for generated pages. Every effect is triggered by a data-df-*
 * attribute the generator can add; the runtime (dreamformer-motion.js) wires the behaviour.
 *
 * No-JS safety: the hiding rules apply ONLY under html.df-motion, a class the kit adds early via
 * an inline head script. Without JS the class is absent and all content is fully visible — a page
 * never depends on JavaScript to be readable.
 */

/* ---- Reveal (data-df-reveal="up|fade|blur|left|right") ---- */
html.df-motion [data-df-reveal]{opacity:0;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s ease;will-change:opacity,transform}
html.df-motion [data-df-reveal="up"],
html.df-motion [data-df-reveal=""]{transform:translateY(26px)}
html.df-motion [data-df-reveal="fade"]{transform:none}
html.df-motion [data-df-reveal="blur"]{transform:translateY(14px);filter:blur(10px)}
html.df-motion [data-df-reveal="left"]{transform:translateX(-34px)}
html.df-motion [data-df-reveal="right"]{transform:translateX(34px)}
html.df-motion [data-df-reveal].df-in{opacity:1;transform:none;filter:none}

/* ---- Word-by-word text reveal (data-df-text) ---- */
[data-df-text] .df-w{display:inline-block;white-space:pre}
html.df-motion [data-df-text] .df-w{opacity:0;transform:translateY(60%) rotate(2deg);filter:blur(4px);
  transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .7s ease}
html.df-motion [data-df-text].df-in .df-w{opacity:1;transform:none;filter:none}

/* ---- Magnetic (data-df-magnetic) & Tilt (data-df-tilt) ---- */
[data-df-magnetic]{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
[data-df-tilt]{transition:transform .3s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}

/* ---- Border trail (data-df-trail) — a light streak orbiting the border ---- */
.df-trail{position:relative;isolation:isolate}
.df-trail::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:1;pointer-events:none;
  background:conic-gradient(from var(--df-a,0deg),transparent 0 78%,currentColor 90%,transparent 97%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:df-trail 5s linear infinite;opacity:.75}
@supports not (background: conic-gradient(from 0deg, red, blue)){.df-trail::after{display:none}}
@keyframes df-trail{to{--df-a:360deg}}

/* ---- Infinite marquee (data-df-marquee) ---- */
.df-marquee{overflow:hidden;white-space:nowrap}
.df-marquee>*{display:inline-block;animation:df-marq var(--df-dur,36s) linear infinite}
@keyframes df-marq{to{transform:translateX(-50%)}}

/* the animatable angle for the trail */
@supports (background: paint(x)){}
@property --df-a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---- Respect reduced motion: everything visible, nothing moving ---- */
@media (prefers-reduced-motion:reduce){
  html.df-motion [data-df-reveal],
  html.df-motion [data-df-text] .df-w{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .df-trail::after,.df-marquee>*{animation:none!important}
  [data-df-magnetic],[data-df-tilt]{transition:none!important}
}