/* 
 * The Scovells - Global Styles
 * Aesthetic: Messy Friction
 */

:root {
    --brand-orange: #ff4500;
    --brand-dark: #121212;
    --brand-light: #fcfbf9;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: var(--brand-light);
    color: var(--brand-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Outfit', system-ui, sans-serif;
}

/* Messy Friction Utilities */
.messy-border {
    border: 3px solid var(--brand-dark);
    box-shadow: 6px 6px 0px var(--brand-orange);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.messy-border:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0px var(--brand-orange);
}

.messy-border-alt {
    border: 3px solid var(--brand-dark);
    box-shadow: -6px 6px 0px var(--brand-orange);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.messy-border-alt:hover {
    transform: translate(3px, -3px);
    box-shadow: -9px 9px 0px var(--brand-orange);
}

.messy-link {
    text-decoration: none;
    position: relative;
    display: inline-block;
    font-weight: 600;
}

.messy-link::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 3px;
    bottom: -2px;
    left: 0;
    background-color: var(--brand-orange);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.messy-link:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.skew-bg {
    position: absolute;
    inset: 0;
    background-color: var(--brand-orange);
    transform: skewY(-2deg);
    z-index: -1;
}

.underline-scribble {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0 5 Q 25 10, 50 5 T 100 5" stroke="%23ff4500" stroke-width="2" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 30%;
    padding-bottom: 2px;
}

/* Logo Ransom Note Variants */
.cutout-classic {
    background-color: #121212;
    color: #fcfbf9;
    padding: 0.2em 0.4em;
    transform: rotate(-2deg);
    display: inline-block;
}
.cutout-classic-orange {
    background-color: #ff4500;
    color: #121212;
    transform: rotate(2deg);
    display: inline-block;
    margin-left: -10px;
}

.cutout-jagged {
    background-color: #121212;
    color: #ff4500;
    padding: 0.1em 0.3em;
    display: inline-block;
    clip-path: polygon(2% 0, 98% 5%, 100% 95%, 5% 100%);
    transform: rotate(-4deg);
}
.cutout-jagged-light {
    background-color: #fcfbf9;
    color: #121212;
    padding: 0.2em 0.4em;
    display: inline-block;
    clip-path: polygon(0 5%, 100% 0, 95% 100%, 5% 95%);
    transform: rotate(3deg);
    margin-left: -5px;
    border: 2px solid #121212;
}

.cutout-stacked-the {
    background-color: #ff4500;
    color: #121212;
    padding: 0.2em;
    font-size: 0.4em;
    writing-mode: vertical-rl;
    text-orientation: upright;
    transform: translateY(-5px) rotate(-2deg);
    margin-right: 5px;
}
.cutout-stacked-scovells {
    background-color: #121212;
    color: #fcfbf9;
    padding: 0.1em 0.3em;
    transform: rotate(1deg);
}