@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@300;400;500;600&display=swap');

:root {
  --tcr-navy: #000717;
  --tcr-red: #7E0106;
  --tcr-white: #FFFFFF;
  --tcr-cream: #F7E0B8;
}

/* =====================================================
   RESET
===================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--tcr-navy);
  color: var(--tcr-white);
  font-family: "Manrope", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}


/* =====================================================
   HEADER
===================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 82px;

  padding: 0 42px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  z-index: 1000;

  background: transparent !important;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  display: block;
  width: 46px;
  height: auto;
  object-fit: contain;
}

.navigation {
  display: flex;
  gap: 34px;

  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.navigation a {
  opacity: 0.72;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.navigation a:hover {
  opacity: 1;
  transform: translateY(-2px);
}


/* =====================================================
   HAMBURGER
===================================================== */

.menu-button {
  display: none;

  width: 30px;
  height: 30px;

  padding: 0;

  border: none;
  background: transparent !important;

  cursor: pointer;

  flex-direction: column;
  justify-content: center;
  align-items: flex-end;

  z-index: 1002;
}

.menu-button span {
  display: block;

  width: 24px;
  height: 1px;

  margin: 4px 0;

  background: var(--tcr-white);

  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    width 0.3s ease;
}


/* Hamburger → X */

.menu-button.active span:first-child {
  transform: translateY(5px) rotate(45deg);
}

.menu-button.active span:nth-child(2) {
  opacity: 0;
}

.menu-button.active span:last-child {
  transform: translateY(-5px) rotate(-45deg);
}


/* =====================================================
   HERO
===================================================== */

.hero {
  position: relative;

  width: 100%;

  height: 100vh;
  height: 100svh;

  min-height: 650px;

  overflow: hidden;

  display: flex;
  align-items: center;

  padding: 0 8vw;

  background: var(--tcr-navy);
}


/* =====================================================
   VIDEO LAYER
===================================================== */

.hero-video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  z-index: 0;

  filter:
    sepia(0.12)
    hue-rotate(185deg)
    saturate(0.72)
    brightness(0.88)
    contrast(1.08);
}


/* =====================================================
   HERO OVERLAY
===================================================== */

.hero-overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(10, 10, 9, 0.82) 0%,
      rgba(10, 10, 9, 0.45) 45%,
      rgba(10, 10, 9, 0.25) 100%
    );
}


/* =====================================================
   HERO CONTENT
===================================================== */

.hero-content {
  position: relative;

  z-index: 2;

  max-width: 900px;
}

.eyebrow {
  margin-bottom: 28px;

  font-family: "DM Mono", monospace;

  font-size: 10px;

  letter-spacing: 0.16em;

  color: #aaa79e;
}

.hero h1 {
  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size: clamp(76px, 11vw, 190px);

  line-height: 0.82;

  font-weight: 400;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}

.hero-intro {
  max-width: 390px;

  margin-top: 38px;

  font-size: 15px;

  line-height: 1.6;

  font-weight: 300;

  color: #bcb9b0;
}

.hero-link {
  display: inline-flex;

  align-items: center;

  gap: 24px;

  margin-top: 44px;

  padding-bottom: 9px;

  border-bottom: 1px solid #77736b;

  font-family: "DM Mono", monospace;

  font-size: 10px;

  letter-spacing: 0.12em;

  transition:
    gap 0.3s ease,
    border-color 0.3s ease;
}

.hero-link:hover {
  gap: 34px;
  border-color: #e8e5dd;
}

.hero-link span {
  font-size: 15px;
}


/* =====================================================
   HERO META
===================================================== */

.hero-meta {
  position: absolute;

  z-index: 2;

  bottom: 32px;

  left: 42px;
  right: 42px;

  display: flex;

  justify-content: space-between;

  font-family: "DM Mono", monospace;

  font-size: 9px;

  letter-spacing: 0.12em;

  color: #88857d;
}


/* =====================================================
   PLACEHOLDER SECTIONS
===================================================== */

.placeholder-section {
  min-height: 70vh;

  padding: 120px 8vw;

  display: flex;

  align-items: flex-start;

  background: #151513;

  border-top: 1px solid #2b2b27;
}

.placeholder-section p {
  font-family: "DM Mono", monospace;

  font-size: 11px;

  letter-spacing: 0.14em;

  color: #77746c;
}


/* =====================================================
   TCR — CINEMATIC BLOOD DROPLETS
===================================================== */

.blood-layer {
  position: absolute;
  inset: 0;

  z-index: 3;

  pointer-events: none;
  overflow: hidden;
}

.blood-drop {
  position: absolute;

  top: -80px;

  display: block;

  width: 6px;
  height: 55px;

  border-radius: 50% 50% 45% 45%;

  background:
    linear-gradient(
      180deg,
      rgba(126, 1, 6, 0.96),
      rgba(126, 1, 6, 0.78)
    );

  box-shadow:
    0 0 8px rgba(126, 1, 6, 0.35);

  opacity: 0;

  animation:
    blood-fall
    var(--duration)
    var(--delay)
    ease-in
    infinite;
}


/* =====================================================
   INDIVIDUAL DROPS
===================================================== */

.drop-1 {
  left: 11%;
  width: 5px;
  height: 42px;
  --duration: 8s;
  --delay: 1s;
}

.drop-2 {
  left: 34%;
  width: 7px;
  height: 70px;
  --duration: 11s;
  --delay: 4s;
}

.drop-3 {
  left: 57%;
  width: 4px;
  height: 34px;
  --duration: 9s;
  --delay: 2s;
}

.drop-4 {
  left: 76%;
  width: 8px;
  height: 82px;
  --duration: 12s;
  --delay: 6s;
}

.drop-5 {
  left: 91%;
  width: 5px;
  height: 48px;
  --duration: 10s;
  --delay: 8s;
}


/* =====================================================
   MOTION
===================================================== */

@keyframes blood-fall {
  0% {
    transform:
      translateY(-40px)
      scaleY(0.45);

    opacity: 0;
  }

  8% {
    opacity: 0.9;
  }

  65% {
    opacity: 0.82;
  }

  100% {
    transform:
      translateY(110vh)
      scaleY(1.15);

    opacity: 0;
  }
}


/* =====================================================
   HOMEPAGE CONTENT
===================================================== */

.home-section {
  position: relative;

  min-height: 80vh;

  padding: 120px 7vw;

  background: var(--tcr-navy);

  color: var(--tcr-white);

  overflow: hidden;

  border-top: 1px solid rgba(247, 224, 184, 0.12);

  isolation: isolate;

  background-image:
    radial-gradient(
      rgba(255, 255, 255, 0.025) 0.6px,
      transparent 0.6px
    );

  background-size: 5px 5px;
}


/* =====================================================
   SECTION LABEL
===================================================== */

.section-label {
  position: relative;

  display: flex;
  align-items: center;

  gap: 14px;

  margin-bottom: 80px;

  font-family: Arial, sans-serif;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.18em;

  color: var(--tcr-cream);

  text-transform: uppercase;
}

.section-label::before {
  content: "";

  flex-shrink: 0;

  width: 34px;
  height: 1px;

  background: var(--tcr-cream);
}


/* =====================================================
   ATMOSPHERIC NUMBERS
===================================================== */

.home-section::before {
  content: "";

  position: absolute;

  top: 60px;
  right: 5vw;

  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size: clamp(120px, 18vw, 280px);

  line-height: 1;

  color: rgba(247, 224, 184, 0.08);

  pointer-events: none;

  z-index: 0;
}

.about-preview::before {
  content: "01";
}

.what-we-do-preview::before {
  content: "02";
}

.event-preview::before {
  content: "03";
}

.youth-preview::before {
  content: "04";
}

.why-preview::before {
  content: "05";
}

.archive-preview::before {
  content: "06";
}

.team-preview::before {
  content: "07";
}

.collaborate-preview::before {
  content: "08";
}


/* =====================================================
   ABOUT
===================================================== */

.about-preview {
  min-height: 75vh;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section-content {
  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: 10vw;

  align-items: end;

  position: relative;
}

.section-content h2,
.archive-heading h2,
.team-heading h2,
.collaborate-content h2 {
  margin: 0;

  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size: clamp(70px, 10vw, 160px);

  line-height: 0.82;

  font-weight: 400;

  letter-spacing: -0.025em;
}

.section-copy {
  max-width: 470px;
}

.lead {
  margin: 0 0 45px;

  font-family: Arial, sans-serif;

  font-size: clamp(20px, 2vw, 30px);

  line-height: 1.35;

  color: var(--tcr-white);
}


/* =====================================================
   TEXT LINKS
===================================================== */

.text-link {
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding-bottom: 7px;

  color: var(--tcr-cream);

  font-family: Arial, sans-serif;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.15em;

  text-decoration: none;

  transition:
    color 0.3s ease,
    gap 0.3s ease;
}

.text-link::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background: var(--tcr-red);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.35s ease;
}

.text-link:hover {
  color: var(--tcr-white);
  gap: 18px;
}

.text-link:hover::after {
  transform: scaleX(1);
}


/* =====================================================
   WHAT WE DO
===================================================== */

.what-we-do-preview {
  padding-top: 150px;

  background:
    linear-gradient(
      180deg,
      rgba(247, 224, 184, 0.018),
      transparent 35%
    );
}

.feature-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  border-top: 1px solid rgba(247, 224, 184, 0.25);
}

.feature-card {
  position: relative;

  min-height: 300px;

  padding: 35px;

  color: var(--tcr-white);

  text-decoration: none;

  border-bottom: 1px solid rgba(247, 224, 184, 0.25);

  transition:
    background 0.45s ease,
    transform 0.45s ease;
}

.feature-card:nth-child(odd) {
  border-right: 1px solid rgba(247, 224, 184, 0.25);
}

.feature-card span {
  display: block;

  margin-bottom: 90px;

  color: var(--tcr-cream);

  font-size: 11px;

  letter-spacing: 0.15em;
}

.feature-card h3 {
  margin: 0 0 12px;

  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size: clamp(42px, 5vw, 80px);

  font-weight: 400;

  line-height: 0.9;
}

.feature-card p {
  margin: 0;

  color: rgba(255, 255, 255, 0.6);

  font-size: 14px;

  letter-spacing: 0.04em;
}

.feature-card:hover {
  background: rgba(126, 1, 6, 0.14);

  transform: translateY(-4px);
}

.feature-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 2px;
  height: 0;

  background: var(--tcr-red);

  transition: height 0.45s ease;
}

.feature-card:hover::before {
  height: 100%;
}


/* =====================================================
   EVENT
===================================================== */

.event-preview {
  min-height: 85vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  background:
    linear-gradient(
      135deg,
      rgba(126, 1, 6, 0.055),
      transparent 45%
    );
}

.event-display {
  display: grid;

  grid-template-columns: 1.2fr 0.8fr;

  gap: 10vw;

  align-items: end;

  position: relative;
}

.event-display::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -35px;

  width: 120px;
  height: 1px;

  background: var(--tcr-red);

  opacity: 0.6;
}

.event-display h2 {
  margin: 0;

  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size: clamp(80px, 12vw, 190px);

  font-weight: 400;

  line-height: 0.78;
}

.event-description {
  max-width: 480px;

  margin-top: 45px;

  color: rgba(255, 255, 255, 0.65);

  font-size: 16px;

  line-height: 1.6;
}

.event-meta {
  display: flex;

  flex-direction: column;

  gap: 18px;

  padding-bottom: 5px;
}

.event-meta span {
  padding-bottom: 14px;

  border-bottom: 1px solid rgba(247, 224, 184, 0.2);

  color: var(--tcr-cream);

  font-size: 11px;

  letter-spacing: 0.15em;
}


/* =====================================================
   EYEBROW
===================================================== */

.eyebrow {
  margin: 0 0 25px;

  color: var(--tcr-red);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.2em;
}


/* =====================================================
   BUTTON
===================================================== */

.tcr-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: fit-content;

  margin-top: 25px;

  padding: 17px 25px;

  background: var(--tcr-red);

  color: var(--tcr-white);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.15em;

  text-decoration: none;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.tcr-button:hover {
  background: #9a080e;

  transform: translateY(-3px);
}


/* =====================================================
   WHY TCR
===================================================== */

.why-preview {
  min-height: 75vh;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.why-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

  border: none;
}

.why-grid > div {
  position: relative;

  min-height: 360px;

  padding: 32px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  background: #f7e0b8;

  color: #000717;

  border: 1px solid rgba(0, 7, 23, 0.2);

  overflow: hidden;

  isolation: isolate;

  transition:
    background 0.4s ease,
    transform 0.4s ease,
    border-color 0.4s ease;
}

.why-grid > div::before {
  position: absolute;

  right: -15px;
  bottom: -55px;

  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size: 220px;

  line-height: 1;

  color: rgba(0, 7, 23, 0.055);

  z-index: -1;

  pointer-events: none;
}

.why-grid > div:nth-child(1)::before {
  content: "01";
}

.why-grid > div:nth-child(2)::before {
  content: "02";
}

.why-grid > div:nth-child(3)::before {
  content: "03";
}

.why-grid span {
  position: relative;

  display: block;

  color: #7e0106;

  font-family: Arial, sans-serif;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.22em;

  z-index: 2;
}

.why-grid > div::after {
  content: "";

  position: absolute;

  right: 28px;
  top: 32px;

  width: 7px;
  height: 7px;

  border: 1px solid var(--tcr-cream);

  opacity: 0.3;

  transform: rotate(45deg);
}

.why-grid h3 {
  position: relative;

  margin: 0;

  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size: clamp(55px, 5vw, 78px);

  font-weight: 400;

  line-height: 0.82;

  letter-spacing: -0.015em;

  color: #000717;

  transition:
    color 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.why-grid p {
  position: relative;

  max-width: 260px;

  margin: 0;

  color: rgba(0, 7, 23, 0.65);

  font-family: Arial, sans-serif;

  font-size: 13px;

  line-height: 1.55;

  transition: color 0.45s ease;
}

.why-grid h3::after {
  content: "";

  display: block;

  width: 35px;
  height: 2px;

  margin-top: 16px;

  background: #7e0106;

  transition:
    width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.45s ease;
}

.why-grid > div:hover {
  background: #000717;

  border-color: rgba(247, 224, 184, 0.3);

  transform:
    translateY(-8px)
    rotate(-0.4deg);
}

.why-grid > div:hover h3 {
  color: #ffffff;

  transform: translateX(8px);
}

.why-grid > div:hover h3::after {
  width: 70px;

  background: #7e0106;
}

.why-grid > div:hover p {
  color: rgba(255, 255, 255, 0.65);
}

.why-grid > div:hover span {
  color: #f7e0b8;
}

.why-grid > div:hover::before {
  color: rgba(247, 224, 184, 0.035);
}

.why-grid > div:hover::after {
  background: #f7e0b8;

  transform:
    rotate(45deg)
    scale(1.15);

  box-shadow:
    0 0 0 6px rgba(247, 224, 184, 0.07);
}


/* =====================================================
   ARCHIVE
===================================================== */

.archive-preview {
  min-height: 85vh;

  background:
    linear-gradient(
      180deg,
      rgba(247, 224, 184, 0.018),
      transparent 35%
    );
}

.archive-heading {
  display: flex;

  justify-content: space-between;

  align-items: end;

  margin-bottom: 80px;

  position: relative;
}

.archive-placeholder {
  position: relative;

  min-height: 330px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  border: 1px solid rgba(247, 224, 184, 0.2);

  overflow: hidden;

  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 7px,
      rgba(247, 224, 184, 0.012) 8px
    ),
    linear-gradient(
      135deg,
      rgba(247, 224, 184, 0.025),
      rgba(126, 1, 6, 0.08)
    );
}

.archive-placeholder::before,
.archive-placeholder::after {
  content: "";

  position: absolute;

  width: 45px;
  height: 45px;

  border-color: var(--tcr-cream);

  opacity: 0.35;

  pointer-events: none;
}

.archive-placeholder::before {
  top: 18px;
  left: 18px;

  border-top: 1px solid;
  border-left: 1px solid;
}

.archive-placeholder::after {
  right: 18px;
  bottom: 18px;

  border-right: 1px solid;
  border-bottom: 1px solid;
}

.archive-placeholder span {
  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size: clamp(55px, 8vw, 110px);

  font-weight: 400;

  color: rgba(247, 224, 184, 0.18);
}

.archive-placeholder p {
  max-width: 400px;

  text-align: center;

  color: rgba(255, 255, 255, 0.45);

  line-height: 1.5;
}


/* =====================================================
   TEAM
===================================================== */

.team-preview {
  min-height: 75vh;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.team-heading {
  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: 10vw;

  align-items: end;

  position: relative;
}

.team-lead {
  max-width: 300px;

  margin: 0 0 35px;

  color: rgba(255, 255, 255, 0.6);

  font-family: inherit;

  font-size: 13px;

  font-weight: 400;

  line-height: 1.6;
}

.team-preview::after {
  content: "TCR // EST. 2025";

  position: absolute;

  right: 25px;
  bottom: 100px;

  writing-mode: vertical-rl;

  font-family: Arial, sans-serif;

  font-size: 9px;

  letter-spacing: 0.2em;

  color: rgba(247, 224, 184, 0.3);

  pointer-events: none;
}


/* =====================================================
   COLLABORATE
===================================================== */

.collaborate-preview {
  min-height: 80vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  background:
    linear-gradient(
      135deg,
      rgba(126, 1, 6, 0.055),
      transparent 45%
    );
}

.collaborate-content {
  position: relative;

  padding-left: 35px;

  border-left: 2px solid var(--tcr-red);
}

.collaborate-content h2 {
  margin-bottom: 50px;
}

.collaborate-content::after {
  content: "+";

  position: absolute;

  right: 5%;
  top: 10%;

  color: var(--tcr-red);

  font-size: 30px;

  font-weight: 200;

  opacity: 0.6;
}


/* =====================================================
   YOUTH
===================================================== */

.youth-preview {
  min-height: 75vh;

  padding: 120px 7vw;

  background: var(--tcr-navy);

  color: var(--tcr-white);

  overflow: hidden;
}

.youth-preview-content {
  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: 10vw;

  align-items: end;
}

.youth-preview h2 {
  margin: 0;

  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size: clamp(70px, 10vw, 160px);

  line-height: 0.82;

  font-weight: 400;

  letter-spacing: -0.025em;

  color: var(--tcr-white);
}

.youth-preview-info {
  max-width: 470px;
}

.youth-preview-info p {
  margin: 0 0 45px;

  font-family: Arial, sans-serif;

  font-size: clamp(20px, 2vw, 30px);

  line-height: 1.35;

  color: var(--tcr-white);
}

.youth-preview-link {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  color: var(--tcr-cream);

  font-family: Arial, sans-serif;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.15em;

  transition: gap 0.3s ease;
}

.youth-preview-link:hover {
  gap: 18px;
}

.youth-preview-link span {
  color: var(--tcr-red);

  font-size: 18px;
}


/* =====================================================
   SCROLL REVEAL
===================================================== */

.reveal {
  opacity: 0;

  transform: translateY(45px);

  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
  opacity: 1;

  transform: translateY(0);
}

.home-section.visible::after {
  width: 100%;
}


/* =====================================================
   RED ACCENT LINE
===================================================== */

.home-section::after {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 0;
  height: 2px;

  background: var(--tcr-red);

  transition:
    width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =====================================================
   BLOOD STAINS
===================================================== */

.blood-stain {
  position: absolute;

  display: block;

  pointer-events: none;

  background: var(--tcr-red);

  opacity: 0.22;

  filter: blur(1px);

  mix-blend-mode: multiply;

  border-radius:
    48% 52% 61% 39%
    /
    54% 43% 57% 46%;

  transform: rotate(-18deg);

  animation: stain-breathe 8s ease-in-out infinite alternate;
}

.stain-1 {
  top: 9%;
  left: 3%;

  width: 85px;
  height: 115px;

  opacity: 0.18;

  transform: rotate(-24deg);
}

.stain-2 {
  top: 34%;
  right: 6%;

  width: 45px;
  height: 65px;

  opacity: 0.2;

  transform: rotate(31deg);

  animation-delay: 2s;
}

.stain-3 {
  bottom: 18%;
  left: 47%;

  width: 28px;
  height: 36px;

  opacity: 0.15;

  transform: rotate(12deg);

  animation-delay: 4s;
}

@keyframes stain-breathe {
  from {
    transform:
      scale(0.98)
      rotate(-18deg);
  }

  to {
    transform:
      scale(1.02)
      rotate(-16deg);
  }
}


/* =====================================================
   INK / BLOOD SPLATTER
===================================================== */

.ink-splatter {
  position: absolute;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

  z-index: 0;
}

.ink-splatter .splash {
  position: absolute;

  width: 58px;
  height: 42px;

  background: var(--tcr-red);

  opacity: 0.48;

  border-radius: 48% 52% 41% 59%;

  transform: rotate(-23deg);

  clip-path: polygon(
    0% 48%,
    9% 32%,
    18% 38%,
    26% 12%,
    37% 31%,
    48% 4%,
    58% 29%,
    71% 17%,
    79% 39%,
    94% 32%,
    100% 53%,
    87% 66%,
    72% 61%,
    64% 89%,
    51% 69%,
    37% 96%,
    28% 69%,
    13% 78%
  );
}

.ink-splatter i {
  position: absolute;

  display: block;

  background: var(--tcr-red);

  border-radius: 50%;

  opacity: 0.42;

  transform-origin: center;
}


/* CLOSE DROPLETS */

.ink-splatter i:nth-child(2) {
  width: 13px;
  height: 9px;
  transform: rotate(25deg);
}

.ink-splatter i:nth-child(3) {
  width: 7px;
  height: 11px;
  transform: rotate(-18deg);
}

.ink-splatter i:nth-child(4) {
  width: 5px;
  height: 5px;
}

.ink-splatter i:nth-child(5) {
  width: 10px;
  height: 6px;
  transform: rotate(40deg);
}


/* MEDIUM SPRAY */

.ink-splatter i:nth-child(6) {
  width: 6px;
  height: 8px;
}

.ink-splatter i:nth-child(7) {
  width: 4px;
  height: 4px;
}

.ink-splatter i:nth-child(8) {
  width: 8px;
  height: 5px;
}

.ink-splatter i:nth-child(9) {
  width: 3px;
  height: 3px;
}


/* DISTANT SPRAY */

.ink-splatter i:nth-child(10) {
  width: 5px;
  height: 5px;
}

.ink-splatter i:nth-child(11) {
  width: 3px;
  height: 4px;
}

.ink-splatter i:nth-child(12) {
  width: 7px;
  height: 3px;
}

.ink-splatter i:nth-child(13) {
  width: 2px;
  height: 2px;
}


/* SPLATTER POSITION */

.ink-splatter .splash {
  top: 20%;
  left: 8%;
}

.ink-splatter i:nth-child(2) {
  top: 18%;
  left: 14%;
}

.ink-splatter i:nth-child(3) {
  top: 24%;
  left: 15%;
}

.ink-splatter i:nth-child(4) {
  top: 29%;
  left: 13%;
}

.ink-splatter i:nth-child(5) {
  top: 15%;
  left: 17%;
}

.ink-splatter i:nth-child(6) {
  top: 12%;
  left: 21%;
}

.ink-splatter i:nth-child(7) {
  top: 27%;
  left: 20%;
}

.ink-splatter i:nth-child(8) {
  top: 34%;
  left: 17%;
}

.ink-splatter i:nth-child(9) {
  top: 10%;
  left: 25%;
}

.ink-splatter i:nth-child(10) {
  top: 38%;
  left: 21%;
}

.ink-splatter i:nth-child(11) {
  top: 7%;
  left: 28%;
}

.ink-splatter i:nth-child(12) {
  top: 31%;
  left: 27%;
}

.ink-splatter i:nth-child(13) {
  top: 18%;
  left: 31%;
}

.home-section > *:not(.ink-splatter) {
  position: relative;
  z-index: 1;
}


/* =====================================================
   TECHNICAL CORNER MARKS
===================================================== */

.home-section .section-content::before,
.home-section .event-display::before,
.home-section .archive-heading::before,
.home-section .team-heading::before,
.home-section .collaborate-content::before {
  content: "";

  position: absolute;

  width: 28px;
  height: 28px;

  border-top: 1px solid rgba(247, 224, 184, 0.35);
  border-left: 1px solid rgba(247, 224, 184, 0.35);

  transform: translate(-18px, -18px);

  pointer-events: none;
}


/* =====================================================
   FLOATING DOT
===================================================== */

.about-preview .section-content::after {
  content: "";

  position: absolute;

  right: 8%;
  top: 22%;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--tcr-red);

  box-shadow:
    0 0 0 5px rgba(126, 1, 6, 0.08),
    0 0 18px rgba(126, 1, 6, 0.25);
}


/* =====================================================
   FOOTER
===================================================== */

.tcr-footer {
  position: relative;

  padding: 80px 6vw 25px;

  background: #000717;

  color: #ffffff;

  border-top: 1px solid rgba(247, 224, 184, 0.18);
}

.footer-main {
  display: grid;

  grid-template-columns: 2.2fr 1fr 1fr 1.2fr;

  gap: 60px;

  padding-bottom: 80px;
}

.footer-identity {
  max-width: 360px;
}

.footer-logo {
  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size: clamp(38px, 4.5vw, 62px);

  line-height: 0.9;

  letter-spacing: 0;

  color: #f7e0b8;

  opacity: 0.85;

  font-weight: 400;
}

.footer-arabic {
  margin: 18px 0 20px;

  font-size: 17px;

  color: rgba(247, 224, 184, 0.75);

  direction: rtl;

  width: fit-content;
}

.footer-description {
  max-width: 330px;

  margin: 0;

  color: rgba(255, 255, 255, 0.55);

  font-family: Arial, sans-serif;

  font-size: 13px;

  line-height: 1.6;
}

.footer-column {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 13px;
}

.footer-column > span {
  margin-bottom: 12px;

  color: #7e0106;

  font-family: Arial, sans-serif;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.2em;
}

.footer-column a,
.footer-location {
  margin: 0;

  color: rgba(255, 255, 255, 0.58);

  font-family: Arial, sans-serif;

  font-size: 11px;

  text-decoration: none;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.footer-column a:hover {
  color: #f7e0b8;

  transform: translateX(5px);
}

.footer-location {
  margin-top: 8px;

  color: rgba(247, 224, 184, 0.45);
}

.footer-bottom {
  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  gap: 20px;

  padding-top: 20px;

  border-top: 1px solid rgba(247, 224, 184, 0.12);

  color: rgba(247, 224, 184, 0.35);

  font-family: Arial, sans-serif;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 0.14em;
}

.footer-bottom a {
  color: rgba(247, 224, 184, 0.35);

  text-decoration: none;

  transition: color 0.3s ease;
}

.footer-bottom a:hover {
  color: #f7e0b8;
}

.footer-bottom span:last-child {
  text-align: right;
}


/* =====================================================
   PRIVACY CONSENT
===================================================== */

.privacy-consent {
  position: fixed;

  left: 24px;
  bottom: 24px;

  width: min(460px, calc(100vw - 48px));

  z-index: 9999;

  background: #111;

  color: #fff;

  border: 1px solid rgba(255, 255, 255, 0.2);

  transform: translateY(130%);

  opacity: 0;

  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease;

  pointer-events: none;
}

.privacy-consent.show {
  transform: translateY(0);

  opacity: 1;

  pointer-events: auto;
}

.privacy-consent-content {
  padding: 32px;
}

.privacy-label {
  display: block;

  margin-bottom: 18px;

  font-size: 11px;

  letter-spacing: 0.18em;

  opacity: 0.6;
}

.privacy-consent h2 {
  margin: 0 0 18px;

  font-size: 32px;

  line-height: 0.95;

  letter-spacing: -0.03em;
}

.privacy-consent p {
  margin: 0 0 26px;

  font-size: 14px;

  line-height: 1.6;

  opacity: 0.7;
}

.privacy-actions {
  display: flex;

  gap: 10px;

  margin-bottom: 18px;
}

.privacy-button {
  border: none;

  padding: 13px 22px;

  font-size: 11px;

  letter-spacing: 0.12em;

  cursor: pointer;
}

.privacy-button.primary {
  background: #fff;
  color: #111;
}

.privacy-button.secondary {
  background: transparent;

  color: #fff;

  border: 1px solid rgba(255, 255, 255, 0.3);
}

.privacy-policy-link {
  font-size: 11px;

  letter-spacing: 0.1em;

  color: #fff;

  text-decoration: none;

  opacity: 0.6;
}

.privacy-policy-link:hover {
  opacity: 1;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 800px) {

  /* HEADER */

  .site-header {
    height: 70px;

    padding: 0 22px;

    background: transparent !important;
  }

  .logo img {
    width: 40px;
  }

  .navigation {
    display: none;
  }

  /*
    IMPORTANT:
    This is NOT fixed and NOT full-screen.
    It only occupies the space needed by the links.
  */

  .navigation.mobile-open {
    display: flex;

    position: absolute;

    top: 70px;
    right: 22px;

    width: max-content;
    min-width: 170px;

    padding: 10px 0 20px;

    flex-direction: column;

    align-items: flex-end;

    gap: 20px;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    z-index: 1001;
  }

  .navigation.mobile-open a {
    display: block;

    font-size: 11px;

    opacity: 1;

    text-align: right;

    white-space: nowrap;
  }

  /* HAMBURGER */

  .menu-button {
    display: flex;

    width: 30px;
    height: 30px;

    padding: 0;

    border: none;

    background: transparent !important;

    cursor: pointer;

    flex-direction: column;

    justify-content: center;

    align-items: flex-end;

    z-index: 1002;
  }

  .menu-button span {
    display: block;

    width: 24px;
    height: 1px;

    margin: 4px 0;

    background: var(--tcr-white);

    transition:
      transform 0.3s ease,
      opacity 0.3s ease,
      width 0.3s ease;
  }

  .menu-button.active span:first-child {
    transform: translateY(5px) rotate(45deg);
  }

  .menu-button.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-button.active span:last-child {
    transform: translateY(-5px) rotate(-45deg);
  }


  /* HERO */

  .hero {
    min-height: 650px;

    padding: 0 22px;
  }

  .hero h1 {
    font-size: clamp(64px, 18vw, 120px);
  }

  .hero-intro {
    max-width: 300px;

    font-size: 14px;
  }

  .hero-meta {
    left: 22px;
    right: 22px;

    bottom: 22px;

    font-size: 8px;
  }


  /* HOME SECTIONS */

  .home-section {
    min-height: auto;

    padding: 90px 6vw;
  }

  .section-label {
    margin-bottom: 55px;
  }

  .section-content,
  .event-display,
  .team-heading,
  .youth-preview-content {
    grid-template-columns: 1fr;

    gap: 55px;

    align-items: start;
  }

  .section-content h2,
  .archive-heading h2,
  .team-heading h2,
  .collaborate-content h2,
  .youth-preview h2 {
    font-size: clamp(64px, 18vw, 120px);
  }

  .feature-grid,
  .why-grid {
    grid-template-columns: 1fr;
  }

  .feature-card:nth-child(odd),
  .why-grid > div:not(:last-child) {
    border-right: none;
  }

  .feature-card {
    min-height: 240px;
  }

  .feature-card span {
    margin-bottom: 60px;
  }

  .why-grid > div {
    min-height: 300px;
  }

  .why-grid h3 {
    margin-top: 55px;
  }

  .archive-heading {
    flex-direction: column;

    align-items: flex-start;

    gap: 40px;
  }

  .youth-preview {
    min-height: auto;

    padding: 90px 6vw;
  }

  .youth-preview-info {
    max-width: 100%;
  }

  .youth-preview-info p {
    max-width: 300px;

    margin-bottom: 35px;

    font-size: 18px;

    line-height: 1.45;
  }

  .youth-preview-link {
    font-size: 11px;
  }


  /* COLLABORATE */

  .collaborate-content {
    padding-left: 20px;
  }


  /* FOOTER */

  .tcr-footer {
    padding: 60px 6vw 20px;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;

    gap: 50px 30px;

    padding-bottom: 60px;
  }

  .footer-identity {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .footer-bottom span:last-child {
    text-align: left;
  }
}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 600px) {

  .privacy-consent {
    left: 12px;

    bottom: 12px;

    width: calc(100vw - 24px);
  }

  .privacy-consent-content {
    padding: 24px;
  }

  .privacy-consent h2 {
    font-size: 27px;
  }

  .privacy-actions {
    flex-direction: column-reverse;
  }

  .privacy-button {
    width: 100%;
  }
}