/* Dan Davis Golf - light motion layer (progressive enhancement). Content is visible by default. Reveals only apply once enhance.js confirms support and adds .motion to . Hovers are plain CSS and always safe. */ :root { --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* gentle arrival, no overshoot */ --gold: 240, 208, 96; /* brand accent (rgb channels) */ } /* ---- Scroll reveals (opacity-only: never touches the elements' own transforms) ---- */ @media (prefers-reduced-motion: no-preference) { html.motion [data-reveal] { opacity: 0; transition: opacity 0.6s var(--ease-out); } html.motion [data-reveal].in-view { opacity: 1; } } /* ---- Hover / press micro-interactions (Jakub: subtle, production-polish) ---- These are plain CSS, always on. They animate transform / filter / shadow only, so they never affect layout. Each surface gets a distinct, restrained treatment. */ /* Buttons: confident lift with soft elevation + a touch brighter; tactile press down. Buttons carry no base transform, so transform here is safe. */ a.framer-WG5IT { transition: transform 0.24s var(--ease-out), filter 0.24s ease, box-shadow 0.24s ease; } a.framer-WG5IT:hover { transform: translateY(-2px) scale(1.015); filter: brightness(1.05); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.55); } a.framer-WG5IT:active { transform: translateY(0) scale(0.97); filter: brightness(0.98); box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.5); transition-duration: 0.1s; } /* Social circle icons: scale up with a gold-tinted fill + ring and a small lift. */ a[data-framer-name="Instagram"], a[data-framer-name="FB"], a[data-framer-name="YT"] { transition: transform 0.28s var(--ease-out), background-color 0.28s ease, box-shadow 0.28s ease; } a[data-framer-name="Instagram"]:hover, a[data-framer-name="FB"]:hover, a[data-framer-name="YT"]:hover { transform: scale(1.12) translateY(-1px); background-color: rgba(var(--gold), 0.14) !important; box-shadow: 0 0 0 1px rgba(var(--gold), 0.5), 0 6px 16px -8px rgba(0, 0, 0, 0.5); } a[data-framer-name="Instagram"]:active, a[data-framer-name="FB"]:active, a[data-framer-name="YT"]:active { transform: scale(1.04); transition-duration: 0.1s; } /* Brand logo (D monogram, header + footer): a gentle, confident scale + brighten. */ a[data-framer-name="logo"] { transition: transform 0.3s var(--ease-out), filter 0.3s ease; transform-origin: center; } a[data-framer-name="logo"]:hover { transform: scale(1.07); filter: brightness(1.08); } /* Photos: a subtle wake-up - barely-there zoom + a lift in brightness/saturation. Kept tiny because the image frames don't clip overflow. */ img { transition: transform 0.4s var(--ease-out), filter 0.4s ease; } img:hover { transform: scale(1.02); filter: brightness(1.05) saturate(1.04); } /* Text links (nav, footer wordmark): soft dim. Excludes the surfaces handled above. */ a:not(.framer-WG5IT):not([data-framer-name="Instagram"]):not([data-framer-name="FB"]):not([data-framer-name="YT"]):not([data-framer-name="logo"]) { transition: opacity 0.2s ease; } a:not(.framer-WG5IT):not([data-framer-name="Instagram"]):not([data-framer-name="FB"]):not([data-framer-name="YT"]):not([data-framer-name="logo"]):hover { opacity: 0.68; } /* ---- Accessibility: honour reduced-motion. enhance.js also opts out entirely, this is the belt-and-braces CSS guarantee. ---- */ @media (prefers-reduced-motion: reduce) { html.motion [data-reveal] { opacity: 1 !important; } a, img { transition-duration: 0.01ms !important; } }