/* GORDONS/DEV - TECH BRUTALISM */
/* Shared styles for all pages */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: max(884px, 100dvh);
    background-color: #000000;
    overflow-x: hidden;
}

/* Brutal Borders */
.brutal-border {
    border: 4px solid white;
}

/* Brutal Shadows */
.brutal-shadow-white {
    box-shadow: 8px 8px 0px 0px #ffffff;
}
.brutal-shadow-neon {
    box-shadow: 8px 8px 0px 0px #79ff5b;
}
.brutal-shadow-black {
    box-shadow: 8px 8px 0px 0px #000000;
}

/* Outline Text */
.text-outline {
    -webkit-text-stroke: 1px white;
    color: transparent;
}

/* Marquee */
.marquee {
    white-space: nowrap;
    overflow: hidden;
    display: flex;
}
.marquee-content {
    display: flex;
    animation: marquee 30s linear infinite;
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Glitch */
.glitch-hover:hover {
    animation: glitch 0.3s cubic-bezier(.25,.46,.45,.94) both infinite;
}
@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

/* Material Icons */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Case cards — random cycling + glitch */
.case-card { cursor: pointer; }
.case-card .case-img { transition: filter .3s; display: block; }
.case-card.is-glitching .case-img {
  animation: case-glitch .35s steps(2, end) 2;
}
@keyframes case-glitch {
  0% { clip-path: inset(0 0 0 0); transform: translate(0); filter: none; }
  20% { clip-path: inset(20% 0 60% 0); transform: translate(-6px); filter: hue-rotate(90deg) saturate(200%); }
  40% { clip-path: inset(60% 0 10% 0); transform: translate(6px); filter: hue-rotate(-60deg) contrast(180%); }
  60% { clip-path: inset(30% 0 40% 0); transform: translate(-4px); filter: invert(1); }
  80% { clip-path: inset(0 0 0 0); transform: translate(3px); filter: hue-rotate(45deg); }
  100% { clip-path: inset(0 0 0 0); transform: translate(0); filter: none; }
}
.case-card.is-glitching .case-tag-top,
.case-card.is-glitching .case-tag-bottom {
  animation: case-glitch-text .3s steps(2, end) 2;
}
@keyframes case-glitch-text {
  0%,100% { transform: translate(0); opacity:1; }
  50% { transform: translate(4px,-2px); opacity:.5; letter-spacing:.35em; }
}