/* ============================================================= DEVOTION MOTION LAYER — activated by (motion.js) Pure enhancement: nothing here changes layout or functionality. ============================================================= */ /* ---- Scroll reveals ---- */ .m-on [data-mrv]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)} .m-on [data-mrv].m-in{opacity:1;transform:translateY(0)} .m-on h1[data-mrv]{transform:translateY(46px) skewY(1.2deg);transform-origin:0 100%} .m-on h1[data-mrv].m-in{transform:translateY(0) skewY(0)} .m-on .dm-eyebrow[data-mrv]{transform:translateY(0);clip-path:inset(0 100% 0 0);transition:opacity .7s ease,clip-path .9s cubic-bezier(.16,1,.3,1)} .m-on .dm-eyebrow[data-mrv].m-in{clip-path:inset(0 0 0 0)} @media print{[data-mrv]{opacity:1!important;transform:none!important;clip-path:none!important}} /* ---- Hero video: slow cinematic push-in ---- */ .m-on .dm-placeholder.cinematic video{animation:m-kenburns 24s ease-in-out infinite alternate;will-change:transform} @keyframes m-kenburns{from{transform:scale(1)}to{transform:scale(1.09)}} /* ---- Intro curtain (once per session) ---- */ .m-curtain{position:fixed;inset:0;background:#0d0d0d;z-index:2147483400;display:flex;align-items:center;justify-content:center;transition:transform .75s cubic-bezier(.76,0,.24,1)} .m-curtain.m-out{transform:translateY(-101%)} .m-curtain-word{font-family:'Oswald','Anton',sans-serif;font-weight:600;font-size:clamp(38px,7vw,96px);color:#FFF6E1;text-transform:uppercase;line-height:1;animation:m-word .95s cubic-bezier(.16,1,.3,1) both} .m-curtain-sub{position:absolute;bottom:38px;left:0;right:0;text-align:center;font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,246,225,.45);animation:m-word 1.1s .15s cubic-bezier(.16,1,.3,1) both} @keyframes m-word{from{opacity:0;transform:translateY(26px);letter-spacing:.28em}to{opacity:1;transform:translateY(0);letter-spacing:.04em}} /* ---- Film grain ---- */ .m-grain{position:fixed;inset:-50%;z-index:2147482000;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");animation:m-grain .45s steps(3) infinite} @keyframes m-grain{0%{transform:translate(0,0)}33%{transform:translate(-2%,1.4%)}66%{transform:translate(1.6%,-1.2%)}100%{transform:translate(0,0)}} /* ---- Scroll progress ---- */ .m-progress{position:fixed;top:0;left:0;right:0;height:2.5px;background:linear-gradient(90deg,#FFF6E1,#d8c9a3);transform-origin:0 50%;transform:scaleX(0);z-index:2147483200;pointer-events:none} /* ---- Cursor ring (desktop, fine pointers) ---- */ .m-ring{position:fixed;top:0;left:0;width:32px;height:32px;margin:-16px 0 0 -16px;border:1.5px solid #FFF6E1;border-radius:50%;pointer-events:none;z-index:2147483100;mix-blend-mode:difference;opacity:.55;transition:width .25s ease,height .25s ease,margin .25s ease,background-color .25s ease,opacity .3s ease} .m-ring.m-ring-hot{width:54px;height:54px;margin:-27px 0 0 -27px;background:rgba(255,246,225,.16);opacity:1} @media (pointer:coarse){.m-ring{display:none}} /* ---- Buttons: sheen sweep + arrow nudge + lift ---- */ .m-on .dm-btn{position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,background .2s ease,color .2s ease,border-color .2s ease} .m-on .dm-btn::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-85%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-20deg);pointer-events:none;transition:left .55s ease} .m-on .dm-btn:hover::after{left:135%} .m-on .dm-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.35)} .m-on .dm-btn:active{transform:translateY(0) scale(.98)} .m-on .dm-btn .arrow{display:inline-block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)} .m-on .dm-btn:hover .arrow{transform:translateX(5px)} /* ---- Cards: lift + image zoom ---- */ .m-on article{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease,border-color .35s ease} .m-on article.m-in:hover,.m-on article:not([data-mrv]):hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(0,0,0,.38)} .m-on article img{transition:transform .9s cubic-bezier(.16,1,.3,1)} .m-on article:hover img{transform:scale(1.055)} .m-on .dm-bento>*{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease} .m-on .dm-bento>*.m-in:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,.35)} .m-on .dm-bento img{transition:transform 1s cubic-bezier(.16,1,.3,1)} .m-on .dm-bento>*:hover img{transform:scale(1.06)} /* ---- Hero text flicker-on (like a light powering up) ---- */ @keyframes dm-flicker{0%{opacity:0}6%{opacity:1}10%{opacity:.15}14%{opacity:1}19%{opacity:.35}24%{opacity:1}30%{opacity:.6}36%{opacity:1}46%{opacity:.8}54%,100%{opacity:1}} .dm-flicker{animation:dm-flicker 1.5s linear both} @media (prefers-reduced-motion: reduce){.dm-flicker{animation:none}} /* ---- Accessibility + polish ---- */ .m-on :focus-visible{outline:2px solid #FFF6E1;outline-offset:3px} ::selection{background:#FFF6E1;color:#0a0a0a}