/*
Theme Name: SINDS
Theme URI: https://sindsstudio.com
Author: SINDS
Description: Portfolio theme for SINDS. Projects are added under Projects in the admin; Profile and Contact are regular pages.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: sinds
*/

@font-face {
  font-family: "Google Sans Code";
  src: url("assets/fonts/GoogleSansCode.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

/* Trial version: missing @ ' ( ) é É - the licensed font has them */
@font-face {
  font-family: "Rongel";
  src: url("assets/fonts/RongelTrial-Semibold.woff") format("woff"); /* unmodified trial file */
  font-weight: 600;
  font-display: swap;
}

:root {
  --ink: #111111;
  --select: #e6e5e5;
  --paper: #ffffff;

  /* Text stays the same size on every screen */
  --mono-size: 12px;
  --serif-size: 14px;
  --edge: clamp(14px, 1.1vw, 22px);
  --menu-top: clamp(84px, 11.7vh, 150px);
  --column: 14.75vw;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Google Sans Code", ui-monospace, monospace;
  font-variation-settings: "MONO" 1;
  font-weight: 400;
  font-size: var(--mono-size);
  line-height: 1.35;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Page transitions ----------
   Pages crossfade softly into each other; the logo, menu and corners
   stay perfectly still. Browsers without support just change page. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .25s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.chrome--logo { view-transition-name: sinds-logo; }
.chrome--menu { view-transition-name: sinds-menu; }
.chrome--bl { view-transition-name: sinds-bl; }
.chrome--br { view-transition-name: sinds-br; }
/* The page name and NEXT / PREVIOUS switch instantly - no animation */
::view-transition-old(sinds-bl), ::view-transition-old(sinds-br) { display: none; }
::view-transition-new(sinds-bl), ::view-transition-new(sinds-br),
::view-transition-group(sinds-bl), ::view-transition-group(sinds-br) { animation: none; }

::selection { background: var(--select); color: var(--ink); }

/* Links look like the text around them - no underline, no colour change */
a { color: inherit; text-decoration: none; }
button { font: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

img { display: block; max-width: 100%; height: auto; }

/* Images and videos can't be selected, dragged out or saved with right-click */
img, .video, .slide, .work__img {
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* no "Save image" on long-press (iPhone) */
}
img { pointer-events: none; } /* clicks go to the link or page around the image */

/* Images still loading fade in once they arrive (loaded ones show at once) */
.fade-img { transition: opacity .3s ease; }
.fade-img.is-waiting { opacity: 0; }

.serif {
  font-family: "Rongel", Georgia, "Times New Roman", serif;
  font-variation-settings: normal;
  font-weight: 600;
  font-size: var(--serif-size);
  line-height: 1.28;
  text-transform: none;
}

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Fixed chrome: always on top ---------- */
.chrome { position: fixed; z-index: 50; }
.chrome--logo { top: var(--edge); left: var(--edge); }
.chrome--menu { top: var(--menu-top); left: var(--edge); }
.chrome--menu ul { list-style: none; }
.chrome--bl { bottom: var(--edge); left: var(--edge); }
.chrome--br { bottom: var(--edge); right: var(--edge); text-align: right; }
.chrome--bc { bottom: var(--edge); left: 50%; transform: translateX(-50%); white-space: nowrap; }
.chrome--bc .serif { margin-left: .5em; }

/* Logged in: make room for the WordPress admin bar */
body.admin-bar .chrome--logo { top: calc(var(--edge) + 32px); }
body.admin-bar .chrome--menu { top: calc(var(--menu-top) + 32px); }
@media (max-width: 782px) {
  body.admin-bar .chrome--logo { top: calc(var(--edge) + 46px); }
  body.admin-bar .chrome--menu { top: calc(var(--menu-top) + 46px); }
}

/* ---------- Text pages: Profile, Contact ----------
   Each page's text sits slightly off the grid (--x / --y are set per page
   in page.php), so it feels placed by hand rather than lined up. */
.text-page {
  padding: calc(var(--menu-top) + var(--y, 0vh)) var(--edge) 20vh var(--x, var(--column));
  max-width: calc(var(--x, var(--column)) + 50vw);
}
.text-page p + p { margin-top: 1.28em; }

/* ---------- Slideshows: home and project pages ---------- */
.stage {
  position: fixed; inset: 0;
  display: grid; place-items: center;
}
/* Near the image the arrow is replaced by the Previous / Next / (1/5) label */
.stage.is-near { cursor: none; }
.stage .slide {
  grid-area: 1 / 1;
  display: none; /* hidden slides don't download their images until needed */
  place-items: center;
}
.stage .slide.is-active { display: grid; }
.stage .slide img { width: auto; height: auto; }

/* Home: featured projects */
.stage--home .slide { width: 56vw; height: 76vh; }
.stage--home .slide img { max-width: 56vw; max-height: 76vh; }
.stage--home .slide .video { width: min(56vw, calc(76vh * var(--r))); }

/* Project page: images sit in the space beside the text - as large as
   fits there, always with white around them and never touching the text */
.stage--project { justify-items: center; }
.stage--project .slide { width: 100%; height: 86vh; }
.stage--project .slide img { max-width: 100%; max-height: 86vh; }
.stage--project .slide .video { width: min(100%, calc((86vh - 3em) * var(--r))); }
.stage--text-a,
.stage--text-c { padding: 0 33vw 0 8vw; }  /* text on the right -> images in the 59vw left of it  */
.stage--text-b { padding: 0 4vw 20vh 45vw; }  /* text bottom left  -> images in the 51vw right of it, */
.stage--text-b .slide { height: 70vh; }         /* kept above the credits in the bottom-right corner */
.stage--text-b .slide img { max-height: 70vh; }
.stage--text-b .slide .video { width: min(100%, calc((70vh - 3em) * var(--r))); }

.cursor-label {
  position: fixed; z-index: 60; pointer-events: none;
  transform: translate(14px, 14px);
  opacity: 0;
}
.cursor-label.is-on { opacity: 1; }

/* ---------- Projects: scattered, endless ---------- */
.field { position: relative; }
.field .work { position: absolute; }
.field .work__img img { width: 100%; height: auto; }
.work__cap {
  position: absolute;
  display: grid;
  grid-template-columns: max-content 18vw;
  column-gap: 1.6em;
  align-items: start;
  z-index: 2;
}
.work__cap .work__title { white-space: nowrap; } /* titles always on one line */

/* Before the script lays things out (or without JS): a plain list */
.field:not(.is-laid-out) { padding: var(--menu-top) var(--edge) 10vh var(--column); }
.field:not(.is-laid-out) .work { position: relative; margin-bottom: 10vh; width: 30vw; }
.field:not(.is-laid-out) .work__cap { position: static; margin-top: 8px; }

/* ---------- Single project: text and credits ---------- */
.project-text {
  position: fixed; z-index: 40;
  display: grid; row-gap: 3.2em;
}
.project-text .services { max-width: 24em; }
/* Variant A: top right */
.project-text--a { top: 5.6vh; right: var(--edge); width: 30vw; }
.project-text--a .serif { margin-left: 3.75vw; }
/* Variant B: bottom left */
.project-text--b { bottom: 11vh; left: 12vw; width: 30vw; }
.project-text--b .serif { margin-left: 3.2vw; }
/* Variant C: right side, lower down and in from the edge - off the grid */
.project-text--c { top: 30vh; right: 5.5vw; width: 26vw; }
.project-text--c .serif { margin-left: 2.2vw; }

/* Credits: towards the bottom right, a little up and in from the corner.
   Roles and names in the serif, as typed */
.credits {
  position: fixed; z-index: 40;
  right: 6vw; bottom: 9vh;
}
.credits dl {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 2.4em;
  row-gap: .15em;
}

/* ---------- Vimeo video ---------- */
.video { position: relative; }
.video__frame { position: relative; width: 100%; aspect-ratio: var(--ratio); background: #f2f2f2; }
.video__progress {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  height: 3px; width: 0; background: var(--ink);
}
.video__frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  pointer-events: none; /* clicks go to the page, not the Vimeo player */
}
.video__controls { position: relative; z-index: 2; display: flex; justify-content: space-between; margin-top: .6em; cursor: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .fade-img, .fade-img.is-waiting { opacity: 1; transition: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  :root {
    --edge: 14px;
    --menu-top: 64px;
    --column: 14px;
  }

  .text-page { padding: 150px var(--edge) 20vh; max-width: none; }

  .stage { cursor: auto; }
  .cursor-label { display: none; }
  .stage--home .slide { width: calc(100vw - 2 * var(--edge)); height: 58vh; }
  .stage--home .slide img { max-width: calc(100vw - 2 * var(--edge)); max-height: 58vh; }
  .stage--home .slide .video { width: min(calc(100vw - 2 * var(--edge)), calc(58vh * var(--r))); }
  .chrome--bc { left: var(--edge); transform: none; bottom: calc(var(--edge) + 1.6em); white-space: normal; }

  .work__cap { grid-template-columns: 1fr; row-gap: 4px; }
  .field:not(.is-laid-out) { padding-top: 150px; }
  .field:not(.is-laid-out) .work { width: 70vw; }

  /* Project page on phones: text first, then the images stacked */
  .stage--project, .stage--text-a, .stage--text-b, .stage--text-c { position: static; display: block; padding: 0 var(--edge); }
  .stage--project .slide { width: auto; height: auto; display: block; margin-bottom: 40px; }
  .stage--project .slide img { max-width: 100%; max-height: none; width: 100%; }
  .stage--project .slide .video { width: 100%; }
  .credits { position: static; padding: 0 var(--edge) 120px; }
  .credits dl { grid-template-columns: 45% auto; }
  .project-text,
  .project-text--a,
  .project-text--b,
  .project-text--c {
    position: static; width: auto; display: grid; row-gap: 20px;
    padding: 150px var(--edge) 32px;
  }
  .project-text--a .serif, .project-text--b .serif { margin: 0; }
}