/* ========================================================================== BHURAN BUILDING — Motion Every effect degrades to "visible, no movement" when JS is off or when the visitor asks for reduced motion. Load last. ========================================================================== */ /* ---------- §25 SCROLL REVEALS ------------------------------------------- */ /* Only arm the hidden state when JS is available (html.js is set inline in ), so a no-JS visitor never gets an invisible page. */ .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.75s var(--ease) var(--reveal-delay, 0s), transform 0.75s var(--ease) var(--reveal-delay, 0s), clip-path 0.85s var(--ease) var(--reveal-delay, 0s); will-change: opacity, transform; } .js [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; } /* Variants */ .js [data-reveal="left"] { transform: translateX(-32px); } .js [data-reveal="right"] { transform: translateX(32px); } .js [data-reveal="scale"] { transform: scale(0.955); } .js [data-reveal="fade"] { transform: none; } .js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); } .js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); } /* On narrow screens a sideways reveal has nowhere to travel — the element is already the full width of the viewport — so it becomes a vertical one. */ @media (max-width: 48rem) { .js [data-reveal="left"], .js [data-reveal="right"] { transform: translateY(26px); } } /* Staggered children — the index is set by JS as --reveal-delay */ .js [data-reveal-group] > * { opacity: 0; transform: translateY(24px); } .js [data-reveal-group].is-in > * { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger, 90ms)); } /* ---------- §26 HEADING LINE REVEAL -------------------------------------- */ /* JS wraps each line of [data-lines] in .line > .line__inner */ .line { display: block; overflow: hidden; } .line__inner { display: block; transform: translateY(105%); transition: transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 85ms); } .is-in .line__inner, .line.is-in .line__inner { transform: none; } /* Styling lifted off inline wrappers onto the individual words (see splitLines) */ .word--em { font-style: italic; } .word--strong { font-weight: 700; } /* ---------- §27 IMAGE WIPE ----------------------------------------------- */ /* A gold panel slides across, then the image is revealed behind it. */ .js [data-wipe] { position: relative; overflow: hidden; } .js [data-wipe]::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--gold-500); transform-origin: left center; transform: scaleX(1); } .js [data-wipe].is-in::after { animation: wipe 1.15s var(--ease) forwards; } @keyframes wipe { 0% { transform: scaleX(1); transform-origin: left center; } 49% { transform: scaleX(1); transform-origin: left center; } 50% { transform: scaleX(1); transform-origin: right center; } 100% { transform: scaleX(0); transform-origin: right center; } } .js [data-wipe] img { transform: scale(1.12); transition: transform 1.4s var(--ease) 0.45s; } .js [data-wipe].is-in img { transform: scale(1); } /* ---------- §28 HERO ENTRANCE -------------------------------------------- */ .js [data-hero] { opacity: 0; transform: translateY(22px); } .js [data-hero].is-in { opacity: 1; transform: none; transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); transition-delay: calc(var(--i, 0) * 110ms + 0.15s); } /* ---------- §29 PARALLAX ------------------------------------------------- */ /* JS writes --py (px). Kept on a wrapper so object-fit stays intact. */ [data-parallax] { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); } /* ---------- §30 COUNTERS ------------------------------------------------- */ .counter { font-variant-numeric: tabular-nums; } /* ---------- §31 MAGNETIC BUTTONS ----------------------------------------- */ [data-magnetic] { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); } [data-magnetic]:hover { transition: none; } /* ---------- §32 PAGE LOAD ------------------------------------------------ */ /* Thin gold progress bar showing scroll depth */ .scroll-progress { position: fixed; inset: 0 0 auto 0; z-index: 95; height: 2px; background: var(--gold-500); transform-origin: left center; transform: scaleX(var(--progress, 0)); } /* ---------- §33 REDUCED MOTION ------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js [data-reveal], .js [data-reveal-group] > *, .js [data-hero] { opacity: 1 !important; transform: none !important; clip-path: none !important; } .line__inner { transform: none !important; } .js [data-wipe]::after { display: none; } .js [data-wipe] img { transform: none !important; } [data-parallax] { transform: none !important; } .ticker__track { animation: none; } .hero__scroll span.bar::after { animation: none; } }