/* =========================
   0) HARD LOCK SCROLL / BASE
========================= */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  overscroll-behavior: none; /* stops bounce on mobile */
}

body {
  overflow-y: auto;
  font-family: "RuneScape UF", Arial, Helvetica, sans-serif;
  background: #fff;
}

* {
  box-sizing: border-box;
}

/* =========================
   1) FONTS
========================= */
@font-face {
  font-family: "RuneScape UF";
  src: url("../fonts/RuneScape-UF.woff2") format("woff2"),
       url("../fonts/RuneScape-UF.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* =========================
   2) SECTIONS (GENERAL)
========================= */
section {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* =========================
   3) LANDING IMAGE + HITBOX LINKS
========================= */
.landing-wrapper {
  position: relative;
  width: 100%;
}

.landing-image {
  width: 100%;
  display: block;
}

/* Landing hitboxes */
.landing-link {
  position: absolute;
  display: block;
  z-index: 10;
  background: transparent; /* DEBUG: red overlay — set back to transparent when done */
  cursor: pointer;
  pointer-events: auto;
  text-indent: -9999px; /* hide text */
}

/* Mobile landing.jpg positions (email / whatsapp / instagram) */

/* Email line */
.email-link {
  left: 5.32%;
  top: 28.88%;
  width: 77.83%;
  height: 15.12%;
}

/* WhatsApp line */
.whatsapp-link {
  left: 5.37%;
  top: 46.63%;
  width: 49.07%;
  height: 11.51%;
}

/* Instagram line */
.instagram-link {
  left: 5.37%;
  top: 64.68%;
  width: 35.94%;
  height: 15.02%;
}

/* Desktop landingdesktop.jpg positions */
@media (min-width: 1025px) {
  .email-link {
    left: 3%;
    top: 16%;
    width: 50%;
    height: 24%;
  }

  .whatsapp-link {
    left: 3%;
    top: 40%;
    width: 34%;
    height: 20%;
  }

  .instagram-link {
    left: 3%;
    top: 60%;
    width: 26%;
    height: 26%;
  }
}

/* =========================
   4) PORTFOLIO GRID + TILES
========================= */
/* Default = mobile-first: 2 columns */
.portfolio {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  position: relative;
  -webkit-transform: translateZ(0); /* force compositing layer — fixes position:absolute children on iOS */
  transform: translateZ(0);
  overflow: hidden;
}

/* Desktop: 5 columns (2 clean rows of 5) */
@media (min-width: 768px) {
  .portfolio {
    grid-template-columns: repeat(5, 1fr);
  }
}



/* Tablets + phones → 2 columns 
@media (max-width: 1024px) {
  .portfolio {
    grid-template-columns: repeat(2, 1fr);
  }
}

 Very small phones only → 1 column 
@media (max-width: 360px) {
  .portfolio {
    grid-template-columns: 1fr;
  }
}
*/
.tile {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.tile img {
  width: 100%;
  height: auto;
  display: block;
}

/* Desktop: tiles fill full viewport height across 2 rows */
@media (min-width: 768px) {
  .tile img {
    height: 50vh;
    object-fit: cover;
  }

  /* Anchor to top so faces aren't cropped on fashion runway shots */
  #tile-nanushka img,
  #tile-chopova img {
    object-position: top;
  }
}

/* Over-saturated at rest — greyscale on hover */
.tile img {
  filter: saturate(140%);
  transition: filter 0.35s ease;
}

/* Desktop: desaturate to greyscale on hover */
@media (hover: hover) and (pointer: fine) {
  .tile:hover img {
    filter: saturate(0%);
  }
}

/* Touch devices: full colour */
@media (hover: none) {
  .tile img {
    filter: saturate(100%);
  }
}

/* Overlay — centred label */
.tile .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  opacity: 1;
  transition: opacity 0.3s ease, text-shadow 0.3s ease, font-size 0.3s ease;

  padding: 10px;

  font-size: clamp(13px, 3.2vw, 18px);
  line-height: 1.2;

  white-space: normal;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;

  pointer-events: none; /* IMPORTANT: overlay never blocks clicks */
}

/* Desktop: hidden by default, visible on hover with glow */
@media (hover: hover) and (pointer: fine) {
  .tile .overlay {
    opacity: 0;
  }

  .tile:hover .overlay {
    opacity: 1;
  }
}

/* Mobile: always visible, no dark overlay — just the text */
@media (hover: none) {
  .tile .overlay {
    opacity: 1;
    background: none;
    text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.6);
  }
}

/* =========================
   5) PROJECT PAGES
========================= */
.project {
  max-width: 1000px;
  margin: 80px auto 0;
  padding: 0 20px;
}

@media (max-width: 768px) {
  .project {
    margin-top: 40px;
  }
}

.project img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-bottom: 40px;
}

.project p,
.project li,
.project span,
.project .blurb {
  font-size: clamp(18px, 4vw, 32px);
  line-height: 1.6;
}

.project h1,
.project h2,
.project h3 {
  line-height: 1.3;
  margin-bottom: 16px;
}


/* =========================
   PROJECT HEADER (TITLE + BACK)
========================= */
.project-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;

  /* THIS is the shared size for BOTH title + back */
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.2;

  margin-bottom: 16px;
}

/* Make the H1 not override the shared font-size */
.project-header h1 {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* Back matches the H1 exactly */
.project-header .back {
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
  white-space: nowrap;

  /* bigger tap target, still invisible */
  padding: 0.25em 0;
}

/* Optional: if your titles are long, keep Back from shrinking */
.project-header .back {
  flex: 0 0 auto;
}
.project-header h1 {
  flex: 1 1 auto;
  min-width: 0;
}


/* =========================
   6) VIDEO
========================= */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin-top: 40px;
}

.video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-link {
  display: inline-block;
  padding: 12px 24px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  margin: 20px 0 15px;
  font-weight: bold;
  font-size: 18px;
}

.video-link:hover {
  background-color: #333;
}

/* =========================
   7) ABOUT — styles live in about.html inline
========================= */

/* =========================
   8) FOOTER + HITBOX LINKS
========================= */
.site-footer {
  display: none; /* replaced by .simple-footer on all screen sizes */
}

.footer-inner {
  position: relative; /* needed for absolute footer links */
  width: 100%;
  margin: 0;
  padding: 0;
}

.footer-image,
.site-footer img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Footer hitboxes */
.footer-link {
  position: absolute;
  display: block;
  z-index: 10;
  background: transparent; /* DEBUG: red overlay — set back to transparent when done */
  cursor: pointer;
  pointer-events: auto;
  text-indent: -9999px;
}

/* NEW footer.jpg positions (about / imdb) */

/* About me (covers both “about” and “me”) */
.footer-about-link {
  left: 4.35%;
  top: 31.94%;
  width: 36.23%;
  height: 36.46%;
}

/* IMDB */
.footer-imdb-link {
  left: 72.46%;
  top: 37.50%;
  width: 18.60%;
  height: 32.99%;
}

/* Desktop footerdesktop.jpg positions */
@media (min-width: 768px) {
  .footer-about-link {
    left: 2%;
    top: 25%;
    width: 28%;
    height: 50%;
  }

  .footer-imdb-link {
    left: 78%;
    top: 28%;
    width: 14%;
    height: 45%;
  }

  /* Hide image footer on desktop */
  .site-footer {
    display: none;
  }
}

/* =========================
   SIMPLE DESKTOP FOOTER
========================= */
.simple-footer {
  display: none;
}

@media (max-width: 767px) {
  .simple-footer {
    display: flex;
  }
}

@media (min-width: 768px) {
  .simple-footer {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: center;
    padding: 18px 40px;
    width: 100%;
  }

  .simple-footer-link {
    color: #fff;
    text-decoration: none;
    font-family: "RuneScape UF", Arial, Helvetica, sans-serif;
    font-size: 22px;
    white-space: nowrap;
    transition: opacity 0.2s ease;
  }

  .simple-footer-link:hover {
    opacity: 0.65;
  }
}

/* =========================
   9) PAGE TRANSITIONS
========================= */
.fade-out {
  opacity: 0;
  transition: opacity 1s ease;
}

.fade-in-page {
  opacity: 0;
  animation: fadeInPage 1s ease forwards;
}

@keyframes fadeInPage {
  to {
    opacity: 1;
  }
}

/* legacy fade-in (if you use .fade-in anywhere) */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 1.5s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   10) CUSTOM CURSOR — DESKTOP ONLY
========================= */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: url("../images/cursor/cursor.png") 16 16, auto;
  }

  a,
  button,
  .tile,
  .landing-link,
  .video-link,
  .back,
  .footer-link,
  .simple-footer-link,
  .proj-nav-btn {
    cursor: url("../images/cursor/cursor-hover.png") 16 16, pointer;
  }
}

/* =========================
   BACK — ABOUT PAGE (styles live in about.html inline)
========================= */