/*
Theme Name: Höfs Pixel
Theme URI: https://mhoefs.de/
Author: Maximilian Höfs
Description: Einseitige Visitenkarte mit horizontalen Panels und Pixel-Cursor. Statisches Theme, Inhalte liegen in front-page.php.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hoefs-pixel
*/

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #f7f7f5; color: #171717; font-family: "Space Grotesk", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: #171717; }
::selection { background: #171717; color: #f7f7f5; }

.mh-stage { position: relative; width: 100%; height: 100svh; overflow: hidden; background: #f7f7f5; }
body.admin-bar .mh-stage { height: calc(100svh - 32px); }
@media screen and (max-width: 782px) { body.admin-bar .mh-stage { height: calc(100svh - 46px); } }

#mh-track { scrollbar-width: none; -ms-overflow-style: none; }
#mh-track::-webkit-scrollbar { display: none; }

.mh-mail { border-bottom: 1px solid #c6c6bf; transition: border-color .35s ease; }
.mh-mail:hover { border-bottom-color: #171717; }
.mh-link { transition: color .3s ease; }
.mh-link:hover { color: #171717; }
.mh-btn { transition: color .3s ease; }
.mh-btn:hover { color: #171717; }
.mh-close:hover { opacity: .55; }
.mh-reveal:hover { border-bottom-color: #171717; }
.mh-row { transition: color .3s ease; }
.mh-row:hover { color: #171717; }
.mh-env-flap { transition: transform .45s cubic-bezier(.16,1,.3,1); transform-origin: 50% 0; }
.mh-row:hover .mh-env-flap { transform: scaleY(.15); }
.mh-ext-arrow { transition: transform .4s cubic-bezier(.16,1,.3,1); }
.mh-row:hover .mh-ext-arrow { transform: translate(2px, -2px); }
.mh-in:focus { border-bottom-color: #171717; }

@keyframes soft { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: translateX(0); } }
@keyframes caret { 0%, 46% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; } }