/* ============================================================ PONCE HOMES — motion.css Cinematic motion layer. Class/data-attribute driven. Safe defaults: without JS (or with reduced motion) everything is fully visible and static. No layout shift, no hidden text. ============================================================ */ /* When motion.js is active it stamps and takes over reveals; the legacy .reveal transition system goes inert. */ html.mjs .reveal{opacity:1;transform:none;transition:none;} /* ---------- kinetic headline (JS wraps lines in masks) ---------- */ .kin-line{display:block;overflow:hidden;} .kin-line>span{display:block;will-change:transform;} /* ---------- gold rule draw ---------- */ [data-goldrule]{position:relative;} [data-goldrule]::after{ content:"";display:block;height:3px;width:56px;border-radius:2px; background:var(--champagne,#C9A96E);margin-top:18px; transform:scaleX(var(--rule,1));transform-origin:left center; } html.mjs [data-goldrule]::after{--rule:0;} [data-goldrule].rule-in::after{ transition:transform 0.9s cubic-bezier(.22,1,.36,1) .15s;--rule:1; } /* ---------- glass cards (dark/pine sections only) ---------- */ .glass{ background:rgba(245,242,237,0.06); border:1px solid rgba(201,169,110,0.28); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-radius:14px; } @media(hover:hover) and (pointer:fine){ .glass{transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s;} .glass:hover{transform:translateY(-4px);border-color:rgba(201,169,110,0.6); box-shadow:0 18px 50px rgba(0,0,0,0.35);} } /* ---------- cinematic overlays: grain + vignette ---------- */ .cine{position:relative;isolation:isolate;} .cine::before{ /* vignette */ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(ellipse at center,transparent 55%,rgba(13,13,13,0.42) 100%); } .cine::after{ /* film grain — tiny inline SVG noise, animated jitter */ content:"";position:absolute;inset:-12px;z-index:1;pointer-events:none;opacity:.13; background-image:url("data:image/svg+xml;utf8,"); background-size:140px 140px; } @media(prefers-reduced-motion:no-preference){ .cine::after{animation:grainShift 1.1s steps(4) infinite;} } @keyframes grainShift{ 0%{transform:translate(0,0)}25%{transform:translate(-6px,4px)} 50%{transform:translate(4px,-6px)}75%{transform:translate(-4px,-4px)}100%{transform:translate(6px,6px)} } .cine>*{position:relative;z-index:2;} .cine::before,.cine::after{z-index:1;} /* ---------- stat underline draw ---------- */ .stat .n{position:relative;display:inline-block;} .stat .n::after{ content:"";position:absolute;left:0;bottom:-6px;height:3px;width:100%; border-radius:2px;background:var(--champagne,#C9A96E); transform:scaleX(0);transform-origin:left center; } .stat.stat-in .n::after{transition:transform .8s cubic-bezier(.22,1,.36,1) .35s;transform:scaleX(1);} /* ---------- page fade transitions (anchor-preserving) ---------- */ html.mjs body{opacity:0;} html.mjs.pt-in body{opacity:1;transition:opacity .28s ease;} html.mjs.pt-out body{opacity:0;transition:opacity .16s ease;} /* If JS dies after stamping mjs, body must never stay hidden */ html.mjs body{animation:ptSafety .01s .8s forwards;} @keyframes ptSafety{to{opacity:1;}} /* ---------- gold glow pulse (sell submit) ---------- */ @media(prefers-reduced-motion:no-preference){ .glow-pulse{animation:goldGlow 3.2s ease-in-out infinite;} } @keyframes goldGlow{ 0%,100%{box-shadow:0 0 0 0 rgba(201,169,110,0);} 50%{box-shadow:0 0 24px 2px rgba(201,169,110,0.45);} } /* ---------- video poster shells ---------- */ .vshell{position:relative;overflow:hidden;background:var(--pine-900,#0E2418);} .vshell video,.vshell canvas,.vshell img.vposter{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; } /* ---------- cinematic hero (homepage scroll-scrub) ---------- */ .hero--cine{background:var(--pine-900,#0E2418);} /* the flat-pine gold glow circle reads as a stray spotlight over real footage — video supplies its own light now */ .hero--cine::after{display:none;} .hero--cine .hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;} .hero--cine .hero__bg img, .hero--cine .hero__bg canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .hero--cine .hero__bg canvas{opacity:0;transition:opacity .6s ease;} .hero--cine .hero__bg canvas.frames-ready{opacity:1;} .hero--cine .hero__scrim{ position:absolute;inset:0;z-index:0;pointer-events:none; background: linear-gradient(105deg,rgba(13,13,13,.80) 0%,rgba(13,13,13,.48) 55%,rgba(13,13,13,.22) 100%), linear-gradient(to top,rgba(13,13,13,.62),transparent 42%); } .hero--cine .hero__grid{position:relative;z-index:2;} @media(min-width:901px){ /* full-viewport money moment; CTAs stay inside the first viewport */ .hero--cine .hero__grid{min-height:calc(100svh - 77px);align-content:center;} } /* slow Ken Burns push on the poster whenever the canvas scrub is not active */ @media(prefers-reduced-motion:no-preference){ .hero--cine .hero__bg img.kenburns{ animation:kenburns 22s ease-in-out infinite alternate;transform-origin:52% 42%; } } @keyframes kenburns{from{transform:scale(1);}to{transform:scale(1.09);}} /* narrow screens: a nowrap .mark highlight must never force the hero grid wider than the viewport (kinetic split handles it when active; this covers reduced-motion / no-JS) */ @media(max-width:640px){ .hero--cine .mark{white-space:normal;} } /* ---------- video band: loop behind a pine/dark section ---------- */ .vband{position:relative;overflow:hidden;isolation:isolate;} .vband__media{position:absolute;inset:0;z-index:0;pointer-events:none;} .vband__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .vband__media::after{ /* brand scrim keeps text contrast on any frame */ content:"";position:absolute;inset:0; background:linear-gradient(160deg,rgba(14,36,24,.86) 0%,rgba(13,13,13,.72) 100%); } .vband>.wrap{position:relative;z-index:2;} .vband--lift .vband__media::after{ /* lighter scrim for texture-only bands (quote/bokeh) */ background:linear-gradient(160deg,rgba(14,36,24,.55) 0%,rgba(13,13,13,.5) 100%); } /* ---------- accessibility ---------- */ :focus-visible{outline:2px solid var(--champagne,#C9A96E);outline-offset:3px;} @media(prefers-reduced-motion:reduce){ .glass,.glass:hover{transform:none;transition:none;} [data-goldrule]::after{--rule:1 !important;transition:none;} .stat .n::after{transform:scaleX(1);transition:none;} html.mjs body{opacity:1 !important;transition:none;} }