/*
 * OLD MAN OLD DOG — SPLASH VISUALS + GLITCH APPEARANCE
 *
 * Manual editing map:
 * - Brand colors: :root immediately below.
 * - Main size/placement: .stage, .dog-wrap, .wordmark.
 * - "some dogs don’t." resting position: .mystery (left/bottom/font-size).
 * - Glitch intensity/shape: the @keyframes near the bottom.
 * - WHEN glitches happen: edit /src/splash.js instead.
 * - Mobile-only sizing: @media (max-width: 620px).
 *
 * NOTE ABOUT THE DOG YELLOW:
 * The source dog SVG is white. The .dog CSS filter below tints it approximately yellow.
 * The official brand yellow is exactly #D0C606 (var(--yellow)).
 * If exact color matching becomes important, replace the filter approach with a yellow SVG
 * or a CSS mask filled with var(--yellow).
 */

:root {
  --blue: #515986;
  --blue-dark: #343a5b;
  --yellow: #D0C606;
  --white: #FFFFFF;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: var(--blue);
}

body {
  min-height: 100vh;
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}

.splash {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem;
  isolation: isolate;
}

.splash::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.055), transparent 34%),
    linear-gradient(rgba(255,255,255,.018), rgba(255,255,255,0));
}

.splash::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: .08;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(0,0,0,.22) 4px
  );
  mix-blend-mode: multiply;
}

/* MAIN COMPOSITION: overall centered group. */
.stage {
  position: relative;
  width: min(78vw, 34rem);
  padding-bottom: 3.25rem;
}

.lockup {
  position: relative;
  width: 100%;
  text-align: center;
}

.dog-wrap {
  position: relative;
  width: min(72vw, 30rem);
  margin-inline: auto;
}

/* DOG: white SVG tinted toward brand yellow. See file header note for exact-color option. */
.dog {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  filter:
    brightness(0)
    saturate(100%)
    invert(76%)
    sepia(74%)
    saturate(783%)
    hue-rotate(15deg)
    brightness(92%)
    contrast(96%);
}

.dog-wrap::before,
.dog-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/oldmanolddog_logo_sitting.svg') center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.dog-wrap::before {
  filter: brightness(0) saturate(100%) invert(70%) sepia(90%) saturate(3000%) hue-rotate(145deg) brightness(100%);
}

.dog-wrap::after {
  filter: brightness(0) saturate(100%) invert(50%) sepia(95%) saturate(5000%) hue-rotate(300deg) brightness(110%);
}

/* WORDMARK: the big oldmanolddog. directly under the dog. */
.wordmark {
  position: relative;
  margin: -1.1rem 0 0;
  font-size: clamp(2rem, 8vw, 4.6rem);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.065em;
  text-transform: lowercase;
  text-shadow: 0 0 0 transparent;
}

.wordmark .dot {
  color: var(--yellow);
}

.wordmark::before,
.wordmark::after {
  content: "oldmanolddog.";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.wordmark::before { color: #65f2ff; }
.wordmark::after { color: #ff4ca8; }

/* RESTING PHRASE: move this with left/bottom; keep it intentionally a little "wrong". */
.mystery {
  position: absolute;
  left: -5.5%;
  bottom: .1rem;
  margin: 0;
  color: rgba(255,255,255,.88);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.95rem, 2.4vw, 1.32rem);
  letter-spacing: .015em;
  white-space: nowrap;
  transform: rotate(-1.1deg);
}

/* TEXT-GLITCH COPIES: normally invisible; briefly intrude into the dog during text glitches. */
.corrupt-text {
  position: absolute;
  z-index: 4;
  left: 7%;
  right: 4%;
  top: 43%;
  display: block;
  opacity: 0;
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.3rem, 5vw, 3rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.055em;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
  mix-blend-mode: screen;
}

.corrupt-text-b {
  top: 57%;
  color: var(--yellow);
}

/* LINE-GLITCH ELEMENT: normally invisible; JS triggers it independently. */
.signal {
  position: fixed;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  opacity: 0;
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 18px rgba(255,255,255,.3);
  pointer-events: none;
}

.signal::before,
.signal::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  opacity: 0;
  background: rgba(255,255,255,.25);
}

.signal::before {
  top: -8px;
  height: 2px;
}

.signal::after {
  top: 11px;
  height: 1px;
}

/* Glitch family 1: the full dog + wordmark lockup. */
html.glitch-main .lockup {
  animation: main-lockup .24s steps(1, end) both;
}

html.glitch-main .dog-wrap::before {
  animation: main-dog-a .24s steps(1, end) both;
}

html.glitch-main .dog-wrap::after {
  animation: main-dog-b .24s steps(1, end) both;
}

html.glitch-main .wordmark::before {
  animation: main-word-a .24s steps(1, end) both;
}

html.glitch-main .wordmark::after {
  animation: main-word-b .24s steps(1, end) both;
}

/* Glitch family 2: independent horizontal signal/tear. */
html.glitch-line .signal {
  animation: line-tear .30s steps(1, end) both;
}

html.glitch-line .signal::before {
  animation: line-fragment-a .30s steps(1, end) both;
}

html.glitch-line .signal::after {
  animation: line-fragment-b .30s steps(1, end) both;
}

/* Glitch family 3: only the strange sentence and its temporary intrusion into the dog. */
html.glitch-text .mystery {
  animation: mystery-jolt .34s steps(1, end) both;
}

html.glitch-text .corrupt-text-a {
  animation: corrupt-text-a .34s steps(1, end) both;
}

html.glitch-text .corrupt-text-b {
  animation: corrupt-text-b .34s steps(1, end) both;
}

/*
 * GLITCH INTENSITY / SHAPE
 * These keyframes control WHAT each glitch looks like.
 * Timing between glitches is NOT here — change /src/splash.js for frequency.
 */
@keyframes main-lockup {
  0%, 100% { transform: translate(0,0); }
  18% { transform: translate(var(--main-x1, 5px), -1px); }
  39% { transform: translate(var(--main-x2, -4px), 1px); }
  58% { transform: translate(2px, 0); }
  72% { transform: translate(-1px, 0); }
}

@keyframes main-dog-a {
  0%, 100% { opacity: 0; transform: translate(0,0); clip-path: inset(0 0 0 0); }
  18% { opacity: .55; transform: translate(-7px,1px); clip-path: inset(18% 0 48% 0); }
  39% { opacity: .22; transform: translate(5px,-2px); clip-path: inset(55% 0 18% 0); }
  58% { opacity: .38; transform: translate(-3px,0); clip-path: inset(70% 0 7% 0); }
}

@keyframes main-dog-b {
  0%, 100% { opacity: 0; transform: translate(0,0); clip-path: inset(0 0 0 0); }
  18% { opacity: .34; transform: translate(6px,-1px); clip-path: inset(42% 0 28% 0); }
  39% { opacity: .5; transform: translate(-5px,2px); clip-path: inset(68% 0 8% 0); }
  58% { opacity: .24; transform: translate(4px,0); clip-path: inset(12% 0 71% 0); }
}

@keyframes main-word-a {
  0%, 100% { opacity: 0; transform: translate(0,0); clip-path: inset(0 0 0 0); }
  18% { opacity: .5; transform: translate(-4px,0); clip-path: inset(0 0 52% 0); }
  39% { opacity: .2; transform: translate(3px,0); clip-path: inset(58% 0 0 0); }
}

@keyframes main-word-b {
  0%, 100% { opacity: 0; transform: translate(0,0); clip-path: inset(0 0 0 0); }
  18% { opacity: .35; transform: translate(4px,1px); clip-path: inset(48% 0 0 0); }
  39% { opacity: .45; transform: translate(-3px,-1px); clip-path: inset(0 0 60% 0); }
}

@keyframes line-tear {
  0%, 100% {
    opacity: 0;
    transform: translateY(0) scaleX(.35);
  }
  16% {
    opacity: .16;
    transform: translateY(var(--tear-y, -18vh)) scaleX(var(--tear-scale, .84));
  }
  31% {
    opacity: .58;
    transform: translateY(var(--tear-y, -18vh)) scaleX(.96);
  }
  48% {
    opacity: .12;
    transform: translateY(calc(var(--tear-y, -18vh) + 4px)) scaleX(.58);
  }
}

@keyframes line-fragment-a {
  0%, 100% { opacity: 0; transform: translateX(0) scaleX(.5); }
  20% { opacity: .42; transform: translateX(var(--line-x1, 9vw)) scaleX(.74); }
  42% { opacity: .16; transform: translateX(calc(var(--line-x1, 9vw) * -1)) scaleX(.92); }
}

@keyframes line-fragment-b {
  0%, 100% { opacity: 0; transform: translateX(0) scaleX(.4); }
  14% { opacity: .24; transform: translateX(var(--line-x2, -6vw)) scaleX(.88); }
  36% { opacity: .48; transform: translateX(calc(var(--line-x2, -6vw) * -1)) scaleX(.62); }
}

@keyframes mystery-jolt {
  0%, 100% { transform: rotate(-1.1deg) translate(0,0); }
  18% { transform: rotate(-1.1deg) translate(var(--text-x1, 4px), -1px); }
  34% { transform: rotate(-1.1deg) translate(var(--text-x2, -3px), 1px); }
  53% { transform: rotate(-1.1deg) translate(1px, 0); }
}

@keyframes corrupt-text-a {
  0%, 100% {
    opacity: 0;
    transform: translate(0,0) skewX(0deg);
    clip-path: inset(0 0 0 0);
  }
  18% {
    opacity: .9;
    transform: translate(var(--corrupt-a, -18px), -3px) skewX(-7deg);
    clip-path: inset(0 0 58% 0);
  }
  36% {
    opacity: .35;
    transform: translate(24px,5px) skewX(6deg);
    clip-path: inset(55% 0 0 0);
  }
  58% {
    opacity: .18;
    transform: translate(-7px,1px);
    clip-path: inset(32% 0 42% 0);
  }
}

@keyframes corrupt-text-b {
  0%, 100% {
    opacity: 0;
    transform: translate(0,0) scaleX(1);
    clip-path: inset(0 0 0 0);
  }
  16% {
    opacity: .42;
    transform: translate(var(--corrupt-b, 28px),2px) scaleX(.94);
    clip-path: inset(40% 0 0 0);
  }
  34% {
    opacity: .78;
    transform: translate(-14px,-4px) scaleX(1.03);
    clip-path: inset(0 0 46% 0);
  }
  55% {
    opacity: .2;
    transform: translate(5px,0) scaleX(.98);
    clip-path: inset(70% 0 8% 0);
  }
}

/* MOBILE OVERRIDES */
@media (max-width: 620px) {
  .splash { padding: 1.5rem; }
  .stage { width: min(88vw, 28rem); padding-bottom: 3rem; }
  .lockup { width: 100%; }
  .dog-wrap { width: min(82vw, 24rem); }
  .wordmark { margin-top: -.5rem; }
  .mystery {
    left: 1.5%;
    bottom: .15rem;
    font-size: clamp(.92rem, 4vw, 1.12rem);
  }
  .corrupt-text {
    left: 8%;
    right: 2%;
    font-size: clamp(1.05rem, 7vw, 2.15rem);
  }
}

/* ACCESSIBILITY: visitors requesting reduced motion get the static splash. */
@media (prefers-reduced-motion: reduce) {
  .dog-wrap::before,
  .dog-wrap::after,
  .wordmark::before,
  .wordmark::after,
  .corrupt-text,
  .signal {
    display: none;
  }

  .lockup,
  .mystery {
    animation: none !important;
  }
}