/* keithfleck.com — 2026 refresh
   Palette (menu colour + hover gradient) is picked per page load and set as html.pal-N.
   html.fun = the 💀 "Don't click me" theme. */

*,
*::before,
*::after { box-sizing: border-box; }

:root {
	--menu: #FF5A1F; --g1: #FFC93C; --g2: #E8186D;
}
html.pal-0 { --menu: #FF5A1F; --g1: #FFC93C; --g2: #E8186D; } /* tangerine */
html.pal-1 { --menu: #F2A91E; --g1: #FF5A1F; --g2: #8B4DE8; } /* gold */
html.pal-2 { --menu: #F2607A; --g1: #FFB36B; --g2: #5B6CF2; } /* coral */
html.pal-3 { --menu: #A97CF2; --g1: #7EDCF0; --g2: #F2607A; } /* violet */
html.pal-4 { --menu: #6274F2; --g1: #A8EEF5; --g2: #F2A0E8; } /* cobalt */
html.pal-5 { --menu: #7EC8F0; --g1: #7A5CF0; --g2: #F2A91E; } /* sky */
html.pal-6 { --menu: #F2283A; --g1: #FFC08A; --g2: #9B6CF2; } /* red */
html.pal-7 { --menu: #F08A80; --g1: #F21D2F; --g2: #7EC8F0; } /* salmon */

body { margin: 0; background: #0f0f0f; }
a { color: #EEECE7; text-decoration: none; }

.kf {
	--fg: #EEECE7; --bg: #0f0f0f; --accent: #E35018; --alt: #FF7A1F; --rowfill: #232323;
	--font: helvetica, arial, sans-serif; --item: max(min(7vw, 9.5vh), 40px); --pad: 3.5vw; --radius: 25px; --imgleft: 90%; --fx: 4vw;
	position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden;
	color: var(--fg); background: var(--bg); font-family: var(--font); font-size: 18px;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
html.fun .kf {
	--fg: #000; --menu: #000; --bg: #3FBFFF; --alt: #fff; --rowfill: transparent;
	--font: "Comic Sans MS", "Comic Sans", cursive, sans-serif; --item: max(min(7.5vw, 9vh), 40px); --pad: 5vw; --radius: 300px; --imgleft: 100%; --fx: 6vw;
	font-size: 14px;
}

/* Film grain */
.grain { position: fixed; top: -100%; left: -50%; width: 300%; height: 300%; pointer-events: none; opacity: .5; background-image: url(../img/noise.png); animation: grain 4s steps(8) infinite; }
html.fun .grain { background-image: url(../img/whoa.gif); opacity: 1; animation: none; }
@keyframes grain {
	0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-5%, -10%); } 20% { transform: translate(-15%, 5%); }
	30% { transform: translate(7%, -25%); } 40% { transform: translate(-5%, 25%); } 50% { transform: translate(-15%, 10%); }
	60% { transform: translate(15%, 0); } 70% { transform: translate(0, 15%); } 80% { transform: translate(3%, 30%); } 90% { transform: translate(-10%, 10%); }
}

.kf a { color: var(--fg); }
.kf a:focus { outline: none; }
.kf a:focus-visible { outline: 2px solid var(--menu); outline-offset: 4px; border-radius: 4px; }

/* Header + footer */
.frame { position: relative; z-index: 10; display: grid; grid-template-columns: 75% 25%; align-content: space-between; padding: 2.5rem var(--fx); line-height: 1.2; }
.frame__title { margin: 0 1rem 0 0; font-size: 1rem; font-weight: 300; }
.frame__title b { font-weight: 700; }
.frame__links { justify-self: end; font-size: 16px; }
.frame__links p, .frame__footer p { margin: 0; }
.frame__footer { font-size: 16px; }
.frame__footer p { display: flex; flex-wrap: wrap; align-items: center; gap: .9em; }
.frame--footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; align-items: end; }
html.fun .frame__title, html.fun .frame__links, html.fun .frame__footer { font-size: 1.3rem; }
@media (max-width: 620px) { .frame { display: block; padding: 3rem 5vw; } .frame__links { display: none; } }

.kf-logo { display: block; width: 50px; height: 35px; overflow: visible; }

/* Footer actions: plain text at rest, a squircle button on hover/focus */
.skull { all: unset; cursor: pointer; }
.pill { display: inline-block; padding: .4em .8em; margin: -.4em -.35em; border-radius: 12px; line-height: 1.2; color: var(--fg); -webkit-text-fill-color: var(--fg); background-color: transparent; cursor: pointer; transition: background-color .2s ease, color .2s ease, -webkit-text-fill-color .2s ease, transform .15s ease; }
@supports (corner-shape: squircle) { .pill { border-radius: 999px; corner-shape: squircle; } }
.kf .pill:hover, .kf .pill:focus-visible { background-color: #232323; color: var(--fg); -webkit-text-fill-color: var(--fg); outline: none; }
html.fun .kf .pill:hover, html.fun .kf .pill:focus-visible { background-color: #000; color: #3FBFFF; -webkit-text-fill-color: #3FBFFF; }
.pill:active { transform: scale(.96); }

/* Menu, centred in the viewport and clear of the pinned footer */
.kf > nav { position: relative; z-index: 10; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 24px 0 120px; }
.menu { margin: 0; padding: 0; list-style: none; -webkit-user-select: none; user-select: none; }

/* Full-width row fill on hover */
.menu__item { position: relative; }
.menu__item::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--rowfill); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.menu__item:focus-within::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .menu__item:hover::before { opacity: 1; } }

.menu__item-link { position: relative; z-index: 2; display: block; padding: .07em var(--pad) .11em; cursor: pointer; white-space: nowrap; font-size: var(--item); font-weight: 900; line-height: 1.02; }
.kf .menu__item-link:focus-visible { outline: none; }

/* Gooey morph (Codrops-style): each word is SVG text — the name and its tagline stacked in one <g>.
   They crossfade while js/site.js ramps a goo filter on the <g> in and out. SVG text is what Safari renders filters on reliably. */
.goo { display: block; width: 100%; height: 1.02em; overflow: visible; }
.t1, .t2 { transition: opacity 1s linear; }
.t1 { fill: var(--menu); }
.t2 { fill: url(#kf-grad); font-style: italic; opacity: 0; }
.goo.on .t1 { opacity: 0; }
.goo.on .t2 { opacity: 1; }
.g1 { stop-color: var(--g1); }
.g2 { stop-color: var(--g2); }
html.fun .t1 { fill: url(#kf-rainbow); }
html.fun .t2 { fill: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hover image sits behind the morphing word (mouse/trackpad only, so taps are always one tap) */
.menu__item-img { position: absolute; z-index: 1; top: 50%; left: var(--imgleft); height: 50vh; max-height: 300px; width: auto; border-radius: var(--radius); opacity: 0; pointer-events: none; transform: translate3d(calc(-100% - 6vw), -30%, 0) translate3d(0, 20px, 0) scale(.85); }
@media (hover: hover) and (pointer: fine) {
	.menu__item-link:hover + .menu__item-img,
	.menu__item-link:focus-visible + .menu__item-img { opacity: 1; transform: translate3d(calc(-100% - 6vw), -30%, 0) rotate3d(0, 0, 1, 4deg); transition: all .6s; }
}
@media (max-width: 620px) { .menu__item-img { display: none; } }

@media (prefers-reduced-motion: reduce) { .grain { animation: none; } .t1, .t2 { transition-duration: .3s; } }

.goo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }