@charset "UTF-8";

/* ===== Base Reset ===== */
html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  background-color: #131232; /* teal background */
  color: #fff;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* so links/buttons stay clickable */
  z-index: 9999;        /* sits on top of everything */
  background: url('img/grain.png');
  opacity: 0.4;        /* adjust grain visibility */
  animation: noise 0.2s steps(1) infinite;
	mix-blend-mode: hard-light;
}

@keyframes noise {
  0%, 100% { background-position: 0 0; }
  10%      { background-position: -5% -10%; }
  20%      { background-position: -15% 5%; }
  30%      { background-position: 7% -25%; }
  40%      { background-position: 20% 25%; }
  50%      { background-position: -25% 10%; }
  60%      { background-position: 15% 5%; }
  70%      { background-position: 0% 15%; }
  80%      { background-position: 25% 35%; }
  90%      { background-position: -10% 10%; }
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

p {
  margin: 0 0 10px;
}

/* ===== Headings ===== */
h1, h2, h3, h4, h5, h6, .client-name {
  position: relative;
  font-family: 'Migra', Arial, sans-serif;
  color: #daff01; /* neon yellow */
  margin: 0;
  text-shadow:
    1px 0 red,
   -1px 0 cyan,
    0 1px blue;
}

@keyframes chromaShift {
  0%, 100% {
    text-shadow: 0.5px 0 red, -0.5px 0 cyan, 0 0.5px blue;
  }
  20% {
    text-shadow: 0.5px -0.5px red, -0.5px 1px cyan, 0.5px -0.75px blue;
  }
  40% {
    text-shadow: -0.5px 0.5px red, 0.5px -0.5px cyan, -0.5px 0.75px blue;
  }
  60% {
    text-shadow: 0.75px 0.5px red, -0.75px -0.5px cyan, 0.5px 0.75px blue;
  }
  80% {
    text-shadow: -0.75px -0.5px red, 0.75px 0.5px cyan, -0.5px -0.75px blue;
  }
}

h1, h2, h3, .client-name {
  animation: chromaShift 1s infinite steps(5	, jump-none);
}




h1 {
  margin: 20px 0 10px;
  font-size: 38px;
  font-weight: bold;
  line-height: 44px;
	animation: rgbGlow 0.5s infinite alternate;
}

@keyframes rgbGlow {
  0% {
    text-shadow:
      1px 0 red,
     -1px 0 cyan,
      0 1px blue,
      0 0 6px red,
      0 0 200px red;
  }
  25% {
    text-shadow:
      1.5px -0.5px red,
     -1.5px 0.5px cyan,
      0.5px -1.5px blue,
      0 0 6px cyan,
      0 0 200px cyan;
  }
  50% {
    text-shadow:
      2px -1px red,
     -2px 1px cyan,
      1px -2px blue,
      0 0 6px blue,
      0 0 200px blue;
  }
  75% {
    text-shadow:
      1.5px 0.5px red,
     -1.5px -0.5px cyan,
      -0.5px 1.5px blue,
      0 0 6px cyan,
      0 0 200px cyan;
  }
  100% {
    text-shadow:
      1px 0 red,
     -1px 0 cyan,
      0 1px blue,
      0 0 6px red,
      0 0 200px red;
  }
}

h2 {
  font-size: 9vw;
  font-weight: 700;
  line-height: 1.2em;
	
}

h3 {
  margin: 20px 0 10px;
  font-size: 4em;
  font-weight: 700;
  line-height: 1.2;
}

h4 {
  margin: 20px 0 10px;
  font-size: 2vw;
  font-weight: 200;
  line-height: 3;
	color: #fff;
	letter-spacing: 0.05em;
  animation: spacingPulse 10s infinite alternate ease-in-out;
}

@keyframes spacingPulse {
  from { letter-spacing: 0.2em; }
  to   { letter-spacing: 0.05em; }
}

/* ===== Layout Containers ===== */

.nav-container {
  z-index: 99998;
  width: 100%;
  position: fixed;
}

.nav-wrapper {
  justify-content: flex-end;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
}

.nav-link {
  text-transform: uppercase;
  padding-left: 25px;
  padding-right: 25px;
  font-size: 1.6vw;
  text-decoration: none;
	font-family: 'Migra', Arial, sans-serif;
  color: #fff; /* neon yellow */
}

.container {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 25px;
  box-sizing: border-box;
}

.splash {
  position: relative; /* context for the arrow */
  width: 100vw;
  min-height: 100vh; /* keep it fullscreen */
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.splash-arrow {
	font-family: 'Migra', Arial, sans-serif;
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 4vw;   /* size of the arrow */
  opacity: 0.8;
  animation: bounce 2s infinite;
  pointer-events: none;
}

/* Bounce only on Y axis */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}




.splash h1 {
  font-size: 7vw;
  font-weight: 700; /* Migra ExtraBold */
  margin-bottom: 1rem;
}

.lockup-container {
  display: block;
  margin: 4vw auto 0;
  max-width: 70%;
}

.about-me-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
}

.about-me-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.showreel {
  width: 70%;
  margin: 0 auto;
  display: block;
}

.video-border {
  background: #daff01;
  padding: 15px;
  width: 100%;
  box-sizing: border-box;
}

.video-border > div {
  position: relative;
  padding-top: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
}

.video-border iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



.video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 4rem 2rem;
  width: 100%;
}

.video-column {
  flex: 1 1 45%; /* two columns on large screens */
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.video-container {
  text-align: center;
}

.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-container h3 {
  margin-top: 1rem;
  font-family: 'Migra', Arial, sans-serif;
  font-weight: 700;
  color: #daff01;
}

/* ===== Client List ===== */
.client-container {
	padding: 0 40px;
}

.client-list {
  text-align: center;
  padding: 4rem 2rem;
  color: #fff;
}

.clients {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
}

.client-name {
  display: inline-block;
  font-family: 'Migra', Arial, sans-serif;
  color: #daff01;
  white-space: nowrap;
  text-transform: uppercase;
	font-weight: 700;
}

/* Apply dots ONLY inside .client-list */
.client-list .clients .client-name::after {
  content: " ●";
  margin-left: 0.25rem;
  color: #fff;
  font-size: 0.7em;
  vertical-align: middle;
  line-height: 0;
}

.client-list .clients .client-name:last-child::after {
  content: "";
}

/* Font scaling by group */
.clients-xl .client-name { font-size: 5.8vw; line-height: 6.1vw; }
.clients-lg .client-name { font-size: 4vw;   line-height: 4.5vw; }
.clients-md .client-name { font-size: 1.8vw; line-height: 2.5vw; }
.clients-sm .client-name { font-size: 1vw;   line-height: 1.5vw; }

/* Dot scaling by group */
.clients-xl .client-name::after { font-size: 0.7em; }
.clients-lg .client-name::after { font-size: 0.7em; }
.clients-md .client-name::after { font-size: 0.7em; }
.clients-sm .client-name::after { font-size: 0.7em; }

/* ===== Responsive ===== */

/* Small phones (portrait) */
@media (max-width: 480px) {
  h1 { font-size: 10vw; line-height: 1.1; }
  h2 { font-size: 12vw; }
  h3 { font-size: 6vw; }
  h4 { font-size: 4vw; }

  .splash h1 { font-size: 12vw; }
  .nav-link { font-size: 4vw; padding: 10px; }

  .showreel { width: 100%; }
  .video-border { padding: 8px; }
  .video-grid { padding: 2rem 1rem; gap: 1rem; }
  .video-column { flex: 1 1 100%; }

  .client-container { padding: 0 10px; }
  .clients-xl .client-name { font-size: 8vw; }
  .clients-lg .client-name { font-size: 6vw; }
  .clients-md .client-name { font-size: 5vw; }
  .clients-sm .client-name { font-size: 4vw; }
	h3 { font-size: 2em; }
}

/* Larger phones / small tablets */
@media (min-width: 481px) and (max-width: 767px) {
  .splash h1 { font-size: 9vw; }
  .nav-link { font-size: 3.5vw; }

  .showreel { width: 90%; }
  .video-border { padding: 10px; }
  .video-grid { padding: 2rem 1rem; gap: 1.5rem; }
  .video-column { flex: 1 1 100%; }

  .clients-xl .client-name { font-size: 7vw; }
  .clients-lg .client-name { font-size: 5.5vw; }
  .clients-md .client-name { font-size: 4vw; }
  .clients-sm .client-name { font-size: 3vw; }
	h3 { font-size: 2em; }
}

/* Tablets portrait/landscape */
@media (min-width: 768px) and (max-width: 1024px) {
  .nav-link { font-size: 2.5vw; }

  .showreel { width: 80%; }
  .video-grid { gap: 1.5rem; }
  .video-column { flex: 1 1 100%; } /* stack */
  .clients-xl .client-name { font-size: 6vw; }
  .clients-lg .client-name { font-size: 4.5vw; }
  .clients-md .client-name { font-size: 3vw; }
  .clients-sm .client-name { font-size: 2.5vw; }
	h3 { font-size: 2em; }
}

/* Small laptops / desktops */
@media (min-width: 1025px) and (max-width: 1440px) {
  .nav-link { font-size: 1.8vw; }
  .showreel { width: 70%; }
  .video-grid { gap: 2rem; }
  .video-column { flex: 1 1 45%; }
  .clients-xl .client-name { font-size: 5.5vw; }
  .clients-lg .client-name { font-size: 4vw; }
  .clients-md .client-name { font-size: 2.5vw; }
  .clients-sm .client-name { font-size: 1.5vw; }
	.lockup-container { max-width: 90%; }
	.splash h1 { font-size: 9vw; }
	h3 { font-size: 2em; }
}

/* Big screens / 4K */
@media (min-width: 1441px) {
  .splash h1 { font-size: 6vw; }
  .nav-link { font-size: 1.2vw; }
  .showreel { max-width: 60%; }
  .video-grid { gap: 3rem; }
}



/* ===== Fonts ===== */
@font-face {
  font-family: 'Migra';
  src: url('fonts/Migra-Extrabold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Migra';
  src: url('fonts/Migra-Extralight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}