/* ============================================================
   FONTS
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&display=swap");
@import url("https://use.typekit.net/uvl7ggx.css");

/* ============================================================
   RESET / BASE
   ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-blue:  #0000ff;
  --primary-green: #B7FE05;
  --primary-pink:  #FC00CD;
}

body {
  font-family: "narkiss-tam", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2em;
}

p {
  margin-bottom: 20px;
}

span {
  background-color: var(--primary-green);
}

/* ============================================================
   HEADINGS
   ============================================================ */
h1, h2, h3 {
  font-family: "kettler-web", monospace;
  font-weight: 700;
  color: var(--primary-blue);
}

h1, h2 {
  font-size: 5.2em;
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  line-height: .7em;
}

/* Decorative SVG strips — white on top, green on bottom */
h1::before, h2::before,
h1::after,  h2::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 17px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

h1::before, h2::before {
  top: -1px;
  left: -20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128.07 12.07'%3E%3Cdefs%3E%3Cstyle%3E.st0%7Bfill:%23ffffff%7D%3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M40.72,12.07c-.99-3.05-3.38-1.03-4.81-2.84-5.82-3.32-13.88-4.04-19.25-7.81C15.49,1.11,13.81,1.99,13.33,0,15.7.39,19.77-.55,21.84,0c1.64,2.52,4.52,1,6.29,1.42v1.42h4.81l1.11,2.13c.32.31,4.44-.29,5.55,0,1.63,2.52,4.52,1,6.29,1.42v1.42h4.81l1.11,2.13c.67.65,6.34-1.45,5.92,2.13h-17.03Z'/%3E%3Cpolygon class='st0' points='0 0 1.11 1.42 .74 2.49 2.22 2.84 1.48 4.61 2.96 4.97 2.22 6.39 3.7 6.39 4.44 8.17 3.7 9.59 4.44 12.07 20.73 12.07 23.69 10.65 19.25 9.94 22.21 7.81 17.77 7.81 19.25 6.39 15.55 6.39 17.03 4.97 11.85 4.97 14.81 2.84 10.36 2.84 11.85 1.42 8.14 1.42 8.88 0 0 0'/%3E%3Cg%3E%3Cpath class='st0' d='M48.86,1.42c.03-.47-.01-.95,0-1.42h7.4c1.9,2.49-6.09,1.12-7.4,1.42-.03.47-.02.95,0,1.42,2.95,0,5.93,0,8.88,0l1.11,2.13c2.97.53,7.06-1.42,8.88,1.42,1.85.49,5.55-.49,7.4,0,1.36,2.84,8.57.77,9.99,1.42v2.13h7.77c2.3,0,.68,1.28.37,2.13h-14.81c.1-2.39.46-2.07-1.85-2.13-1.85-.05-3.71.03-5.55,0v-2.13h-7.4v-1.42h-8.14v-1.42h-6.66c-.01-.7.03-1.43,0-2.13-2.71,0-5.44,0-8.14,0-1.83-2.59,6.72-1.07,8.14-1.42'/%3E%3Cpath class='st0' d='M91.8,6.39c-1.63-.44-13.12,1.36-11.1-1.42h11.1c.03.47-.06.96,0,1.42,4.18.03,8.4-.02,12.58,0v1.42h11.84v2.13h11.84l-1.48,2.13h-14.81l1.48-2.13h-11.1v-2.13h-10.36c-.03-.47.06-.96,0-1.42'/%3E%3Cpath class='st0' d='M79.95,2.84v2.13h-9.62c.2-3.8,6.66-1.56,9.62-2.13'/%3E%3C/g%3E%3Crect class='st0' x='59.96' y='1.42' width='8.14' height='1.42'/%3E%3Crect class='st0' x='33.31' y='0' width='6.66' height='1.42'/%3E%3C/svg%3E");
}

h1::after, h2::after {
  bottom: -3px;
  left: 25px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128.07 12.07'%3E%3Cdefs%3E%3Cstyle%3E.st0%7Bfill:%23B7FE05%7D%3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M40.72,12.07c-.99-3.05-3.38-1.03-4.81-2.84-5.82-3.32-13.88-4.04-19.25-7.81C15.49,1.11,13.81,1.99,13.33,0,15.7.39,19.77-.55,21.84,0c1.64,2.52,4.52,1,6.29,1.42v1.42h4.81l1.11,2.13c.32.31,4.44-.29,5.55,0,1.63,2.52,4.52,1,6.29,1.42v1.42h4.81l1.11,2.13c.67.65,6.34-1.45,5.92,2.13h-17.03Z'/%3E%3Cpolygon class='st0' points='0 0 1.11 1.42 .74 2.49 2.22 2.84 1.48 4.61 2.96 4.97 2.22 6.39 3.7 6.39 4.44 8.17 3.7 9.59 4.44 12.07 20.73 12.07 23.69 10.65 19.25 9.94 22.21 7.81 17.77 7.81 19.25 6.39 15.55 6.39 17.03 4.97 11.85 4.97 14.81 2.84 10.36 2.84 11.85 1.42 8.14 1.42 8.88 0 0 0'/%3E%3Cg%3E%3Cpath class='st0' d='M48.86,1.42c.03-.47-.01-.95,0-1.42h7.4c1.9,2.49-6.09,1.12-7.4,1.42-.03.47-.02.95,0,1.42,2.95,0,5.93,0,8.88,0l1.11,2.13c2.97.53,7.06-1.42,8.88,1.42,1.85.49,5.55-.49,7.4,0,1.36,2.84,8.57.77,9.99,1.42v2.13h7.77c2.3,0,.68,1.28.37,2.13h-14.81c.1-2.39.46-2.07-1.85-2.13-1.85-.05-3.71.03-5.55,0v-2.13h-7.4v-1.42h-8.14v-1.42h-6.66c-.01-.7.03-1.43,0-2.13-2.71,0-5.44,0-8.14,0-1.83-2.59,6.72-1.07,8.14-1.42'/%3E%3Cpath class='st0' d='M91.8,6.39c-1.63-.44-13.12,1.36-11.1-1.42h11.1c.03.47-.06.96,0,1.42,4.18.03,8.4-.02,12.58,0v1.42h11.84v2.13h11.84l-1.48,2.13h-14.81l1.48-2.13h-11.1v-2.13h-10.36c-.03-.47.06-.96,0-1.42'/%3E%3Cpath class='st0' d='M79.95,2.84v2.13h-9.62c.2-3.8,6.66-1.56,9.62-2.13'/%3E%3C/g%3E%3Crect class='st0' x='59.96' y='1.42' width='8.14' height='1.42'/%3E%3Crect class='st0' x='33.31' y='0' width='6.66' height='1.42'/%3E%3C/svg%3E");
}

h3 {
  font-size: 2em;
}

/* ============================================================
   LISTS
   ============================================================ */
ul {
  column-count: 3;
  column-gap: 20px;
  list-style-type: none;
  margin-top: 50px;
}

li {
  text-transform: capitalize;
  margin-left: 20px;
}

li::before {
  content: "→";
  color: var(--primary-green);
  font-weight: bold;
  display: inline-block;
  width: 1.5em;
  margin-left: -1em;
}

li:hover::after {
  content: '';
  display: table;
  position: relative;
  background-color: var(--primary-green);
  width: 80%;
  height: 12px;
  margin-top: -21px;
  padding-top: 21px;
  top: -9px;
  left: 6px;
  mix-blend-mode: darken;
}

/* ============================================================
   HERO — TOP TEXT OVERLAY
   ============================================================ */
#topTxt {
  bottom: 50px;
  left: 50px;
  width: 400px;
  position: absolute;

  h1 {
    margin: 0 0 10px 0;
    /* Default: green. JS switches to white when ticker band overlaps. */
    color: var(--primary-green);
    font-family: "Instrument Serif", serif;
    display: block;
    /* Vertical scale stretches upward from the baseline */
    transform-origin: bottom left;
    will-change: transform, color;
    transition: color 0.12s ease;
  }

  /* Remove both decorative SVG strips from the hero h1 */
  h1::before,
  h1::after {
    background-image: none;
  }

  span {
    font-family: "kettler-web", monospace;
    background-color: transparent;
    color: white;
  }
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.parsp {
  height: 300px;
  width: 100%;
  display: block;
}

/* ============================================================
   CANVAS CONTAINER (Three.js logo)
   ============================================================ */
#canvas-container {
  position: relative;
  width: 100%;
  height: 95vh;
  overflow: hidden;
  cursor: grab;
}

#canvas-container.dragging {
  cursor: grabbing;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ============================================================
   CONTENT SECTIONS
   ============================================================ */
#txt-container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: white;
  padding: 100px 100px;
  column-gap: 40px;
  color: black;
  line-height: 2em;
  font-size: 1.2em;
}

#txt-container div:first-of-type {
  width: 450px;
}

#txt-container div {
  table {
    width: 80%;
    margin: 80px auto;
  }

  table td {
    border: solid 2px var(--primary-green);
    text-align: center;
    padding: 40px;
  }

  .img-wrap {
    position: relative;
  }

  .img-wrap::before {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.15s ease;
    background-color: #231F1F;
    color: white;
    font-size: .5em;
    width: 60%;
    border-radius: 3px;
  }

  .img-wrap:hover::before {
    opacity: 1;
  }

  table div:first-of-type {
    width: auto !important;
  }
}

#txt-container.contact-container {
  background-color: var(--primary-green);
}

/* ============================================================
   DOWNLOAD BUTTON
   ============================================================ */
#downloadBTN {
  width: 100%;
  background-color: var(--primary-green);
  padding: 80px 0;
  margin-top: -250px;
}

#downloadBTN a {
  text-decoration: none;
}

#downloadBTN div {
  margin: 0 auto;
  position: relative;
  background-color: white;
  border-radius: 30px;
  corner-shape: squircle;
  padding: 20px 50px;
  width: 40%;
  text-align: center;
  text-transform: uppercase;
  color: var(--primary-blue);
  font-size: 1.3em;
  font-weight: bold;
  font-family: "kettler-web", monospace;
  border: 2px solid var(--primary-blue);
  box-shadow: 0 0 0 var(--primary-blue);
  transition: all 0.3s ease;
}

#downloadBTN div:hover {
  box-shadow: 4px 4px 0 var(--primary-blue);
}

#downloadBTN div:active {
  color: var(--primary-pink);
  border: 2px solid var(--primary-pink);
  box-shadow: 4px 4px 0 var(--primary-pink);
}

/* ============================================================
   TICKER / MARQUEE
   ============================================================ */
.ticker {
  font-size: 26pt;
  color: var(--primary-blue);
  background-color: var(--primary-green);
  word-spacing: 50px;
  position: absolute;
  width: 100%;
  height: 56px;
  overflow-x: hidden;
  text-transform: uppercase;
  left: 0;
  top: 45vh;
  z-index: -2;
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 80s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   PHOTO STACK
   ============================================================ */
#photoContainer {
  position: absolute;
  z-index: -1;
  left: 55%;
  top: 20%;

  .photoIMG {
    width: 300px;
    height: 550px;
    border: var(--primary-green) solid 2px;
    position: absolute;
    float: left;
    opacity: 0;
    animation: flashCards 2s linear;
    animation-fill-mode: forwards;
    background-size: cover;
  }

  .photoIMG-1 { margin: 0;             animation-delay: 0s;   background-image: url(../_img/me/mm_1.jpg); background-position-x: 100%; }
  .photoIMG-2 { margin: 45px 0 0 45px;   animation-delay: 0.5s; background-image: url(../_img/me/mm_2.jpg); background-position-x: 100%; }
  .photoIMG-3 { margin: 90px 0 0 90px;   animation-delay: 1s;   background-image: url(../_img/me/mm_3.jpg); background-position-x: 100%; }
  .photoIMG-4 { margin: 135px 0 0 135px; animation-delay: 1.5s; background-image: url(../_img/me/mm_5.jpg); background-position-x: 100%; }
  .photoIMG-5 { margin: 180px 0 0 180px; animation-delay: 2s;   background-image: url(../_img/me/mm_4.jpg); background-position-x: 100%; }
}

@keyframes flashCards {
  0%   { opacity: 0; }
  45%  { opacity: 0; }
  46%  { opacity: 1; }
  54%  { opacity: 1; }
  55%  { opacity: 0; }
  99%  { opacity: 0; }
  100% { opacity: 1; }
}

/* ============================================================
   KINETIC CANVAS
   ============================================================ */
#kineticCanvasWrap {
  position: absolute;
  width: 100%;
  height: 450px;
}

#kineticCanvas {
  display: block;
  position: absolute;
  top: 0;
  left: calc(50% - 700px);
  width: 1500px;
  height: 450px;
  z-index: -1;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  width: 100%;
  margin-top: 100vh;
  padding: 30px 100px;
  text-align: left;
  font-size: .7em;
  background-color: var(--primary-green);
  color: var(--primary-blue);
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
form {
  padding: 1em;
  font-family: "kettler-web", monospace;
  text-transform: uppercase;
}

label {
  display: inline-block;
  min-width: 90px;
  text-align: left;
}

input,
textarea {
  font: 1em sans-serif;
  width: 100%;
  height: 40px;
  padding: 30px 20px !important;
  box-sizing: border-box;
  border: 1px solid var(--primary-green);
}

input:focus,
textarea:focus {
  outline-style: solid;
  outline-color: black;
}

textarea {
  vertical-align: top;
  height: 5em;
}

button {
  padding: 15px 25px;
  background-color: var(--primary-blue);
  color: white;
  border: solid 4px white;
}

button:hover {
  background-color: white;
  color: black;
  border: solid 4px black;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border: solid 4px white;
}

/* ── Honeypot ─────────────────────────────────────────────────────────────── */
/* Visually hidden but NOT display:none — bots see display:none and skip it   */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  tab-size: 0;
}

/* ── Form status message ──────────────────────────────────────────────────── */
.form-status {
  min-height: 1.5em;
  margin: 10px 0 15px;
  font-size: 0.85em;
  font-family: "narkiss-tam", sans-serif;
  text-transform: none;
  border-radius: 3px;
  transition: opacity 0.2s ease;
}

.form-status:empty {
  display: none;
}

.form-status--success {
  color: var(--primary-blue);
  background-color: white;
  padding: 10px 15px;
  border-left: 4px solid var(--primary-blue);
}

.form-status--error {
  color: var(--primary-pink);
  background-color: white;
  padding: 10px 15px;
  border-left: 4px solid var(--primary-pink);
}


/* ============================================================
   RESPONSIVE — TABLET  (≤ 1100px)
   ============================================================ */
@media (max-width: 1100px) {

  h1, h2 { font-size: 3.8em; }

  #topTxt {
    width: 320px;
    left: 36px;
    bottom: 40px;
  }

  #txt-container {
    padding: 70px 50px;
    column-gap: 30px;
  }

  #txt-container div:first-of-type {
    width: 280px;
  }

  #txt-container div table {
    width: 100%;
  }

  #txt-container div table td {
    padding: 20px;
  }

  ul {
    column-count: 2;
  }

  #downloadBTN div {
    width: 60%;
  }

  #photoContainer {
    left: 52%;
    top: 15%;

    .photoIMG {
      width: 220px;
      height: 400px;
    }
    .photoIMG-2 { margin: 30px 0 0 30px; }
    .photoIMG-3 { margin: 60px 0 0 60px; }
    .photoIMG-4 { margin: 90px 0 0 90px; }
    .photoIMG-5 { margin: 120px 0 0 120px; }
  }

  footer {
    padding: 30px 50px;
  }

  /* Kinetic canvas — clip overflow so it doesn't bleed on tablet */
  #kineticCanvasWrap {
    overflow: hidden;
  }
}


/* ============================================================
   RESPONSIVE — MOBILE  (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {

  body {
    font-size: 1em;
  }

  /* ── Headings ───────────────────────────────────────────── */
  h1, h2 {
    font-size: 2.6em;
    line-height: .75em;
  }

  /* ── Hero text ──────────────────────────────────────────── */
  #topTxt {
    width: calc(100% - 40px);
    left: 20px;
    bottom: 28px;
  }

  /* ── Stacked photos — hidden on mobile (too cramped) ────── */
  #photoContainer {
    display: none;
  }

  /* ── Ticker ─────────────────────────────────────────────── */
  .ticker {
    font-size: 16pt;
    word-spacing: 24px;
  }

  /* ── Content sections ───────────────────────────────────── */
  #txt-container {
    grid-template-columns: 1fr;
    padding: 40px 20px;
    column-gap: 0;
    font-size: 1em;
  }

  /* Heading column: full width, margin below */
  #txt-container div:first-of-type {
    width: auto;
    margin-bottom: 24px;
  }

  /* Logo client table */
  #txt-container div table {
    width: 100%;
    margin: 30px auto;
  }

  #txt-container div table td {
    padding: 12px 6px;
  }

  #txt-container div table td img {
    width: 70px !important;
    height: 70px !important;
  }

  /* Client list — single column on mobile */
  ul {
    column-count: 1;
    margin-top: 28px;
  }

  /* Spacer paragraph — reduce height */
  .parsp {
    height: 60px;
  }

  /* ── Download button ────────────────────────────────────── */
  #downloadBTN {
    padding: 40px 0;
    margin-top: -60px;
  }

  #downloadBTN div {
    width: 85%;
    padding: 18px 20px;
    font-size: 1em;
    border-radius: 20px;
  }

  /* ── Kinetic canvas — clip & centre on narrow screens ───── */
  #kineticCanvasWrap {
    overflow: hidden;
    height: 200px;
  }

  #kineticCanvas {
    /* Keep the 1500px canvas centred; overflow-hidden clips it */
    left: calc(50% - 750px);
    height: 200px;
    top: -120px; /* nudge to show the vertical middle of the canvas */
  }

  /* ── Contact form ───────────────────────────────────────── */
  form {
    padding: 0.5em 0;
  }

  input,
  textarea {
    font-size: 1em;
  }

  /* ── Footer ─────────────────────────────────────────────── */
  footer {
    padding: 24px 20px;
    margin-top: 60vh;
  }
}


/* ============================================================
   RESPONSIVE — SMALL MOBILE  (≤ 400px)
   ============================================================ */
@media (max-width: 400px) {

  h1, h2 {
    font-size: 2em;
  }

  #topTxt {
    left: 16px;
    bottom: 20px;
  }

  #downloadBTN div {
    width: 92%;
    font-size: 0.9em;
  }
}