/* Color palette & animation values */
:root {
    /* Base colors */
    --color-text: rgb(66,66,66);
    --color-text-light: rgb(68,68,68);
    --color-heading: rgb(44,44,44);
    --color-primary: #006B54;      /* phthalo green */
    --color-primary-dark: #004D3D; /* deeper phthalo */
    --color-primary-muted: #4A8B7C; /* muted teal-gray */
    --color-bg: #FDFBF7;           /* warm off-white */
    --color-white: white;

    /* Effect colors */
    --color-highlight: #FF94AB;    /* pink - difference blend of white on primary green */
    --color-highlight-rgb: 255, 148, 171; /* RGB values for rgba() */

    /* Animation values */
    --max-scale: 1.05;

    /* Hover box properties */
    --hover-box-offset: -0.2em;
    --hover-box-transition: opacity 0.3s ease;
    --mundane-hover-opacity: 0.6;
}

/* Base styles */
body {
    font-family: serif;
    font-size: 16px;
    max-width: 650px;
    margin: 30px auto 0px auto;
    padding: 0 20px;
    line-height: 1.2;
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Text selection */
::selection {
    background: rgba(var(--color-highlight-rgb), 0.4);
    color: var(--color-text);
}

::-moz-selection {
    background: rgba(var(--color-highlight-rgb), 0.4);
    color: var(--color-text);
}

/* Typography */
h1 {
    font-size: 1.3em;
    margin-bottom: 0.5em;
    color: var(--color-heading);
}

h2 {
    font-size: 1.1em;
    margin-bottom: 0.5em;
    color: var(--color-heading);
}

.definition {
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin: 0 0 2em 0;
    font-size: 0.95em;
    color: var(--color-text-light);
}

/* Links */
a {
    color: var(--color-primary);
    text-decoration: none;
}

a:visited {
    color: var(--color-primary-muted);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-dark);
    border-bottom: 1px dotted;
}

a:focus {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* Only show focus outline for keyboard navigation in modern browsers */
a:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

footer {
    margin-top: 4em;
    font-size: 0.9em;
}

footer nav img {
    vertical-align: text-bottom;
    width: 16px;
    height: 16px;
}

/* Skip to main content link - hidden until focused */
.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 0.5em 1em;
    background: var(--color-text);
    color: var(--color-white);
    text-decoration: none;
}

.skip-link:focus {
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

/* Visually hidden text for screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Shared text effect base */
.unsettling,
.mundane {
    display: inline-block;
}

.mundane {
    position: relative;
    color: var(--color-text-light);
}

.mundane::before {
    content: '';
    position: absolute;
    top: var(--hover-box-offset);
    left: var(--hover-box-offset);
    right: var(--hover-box-offset);
    bottom: var(--hover-box-offset);
    border: 2px dotted var(--color-highlight);
    opacity: 0;
    transition: var(--hover-box-transition);
    pointer-events: none;
}

.mundane:hover::before {
    opacity: var(--mundane-hover-opacity);
}

.unsettling {
    animation: languish 5s ease-in-out infinite;
    transition: none;
}

.unsettling:hover {
    animation: evade 2.5s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}

/* Animation keyframes */
@keyframes languish {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(var(--max-scale));
        opacity: 0.9;
    }
}

@keyframes evade {
    0%, 100% {
        transform: perspective(100px) rotateY(7deg) rotateX(-1deg);
        opacity: 1;
    }
    8% {
        transform: perspective(100px) rotateY(-11deg) rotateX(2deg);
        opacity: 0.96;
    }
    23% {
        transform: perspective(100px) rotateY(-6deg) rotateX(5deg);
        opacity: 0.91;
    }
    31% {
        transform: perspective(100px) rotateY(-14deg) rotateX(1deg);
        opacity: 0.8;
    }
    52% {
        transform: perspective(100px) rotateY(-9deg) rotateX(4deg);
        opacity: 0.85;
    }
    67% {
        transform: perspective(100px) rotateY(-12deg) rotateX(-2deg);
        opacity: 0.93;
    }
    84% {
        transform: perspective(100px) rotateY(-5deg) rotateX(3deg);
        opacity: 0.88;
    }
}