@import "../css/owl.carousel.min.css";
@import "../css/owl.theme.default.min.css";

/* ── Reset ── */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0; padding: 0; border: 0; outline: 0;
  font-size: 100%; font-weight: normal;
  vertical-align: baseline; background: transparent;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
nav ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #e0e0e0; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }
button, input, select, textarea { margin: 0; }
body, select, input, textarea { color: #111; }
nav ul, nav li { margin: 0; }
label, input[type=button], input[type=submit], input[type=image], button { cursor: pointer; }
button { width: auto; overflow: visible; }

/* ── Selection ── */
::selection { color: #fff; background: #111; }

/* ── Fonts ── */
@font-face {
  font-family: "Apercu Light";
  src: url("../font/Apercu-Light.woff") format("woff");
  font-style: normal; font-weight: 200;
}
@font-face {
  font-family: "Apercu Medium";
  src: url("../font/Apercu-Medium.woff") format("woff");
  font-style: normal; font-weight: 400;
}
@font-face {
  font-family: "Apercu Regular";
  src: url("../font/Apercu.woff") format("woff");
  font-style: normal; font-weight: 400;
}
@font-face {
  font-family: "Apercu Bold";
  src: url("../font/Apercu-Bold.woff") format("woff");
  font-style: normal; font-weight: 700;
}

/* ── Base ── */
html, body {
  height: 100%; width: 100%;
  margin: 0; padding: 0;
  -webkit-font-smoothing: antialiased;
  font-family: "Apercu Light", sans-serif;
  background-color: #fff;
}

a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* ── Logo / Header ── */
header {
  position: fixed;
  height: 100%; width: 100%;
  animation: allloaded 1000ms forwards 1000ms;
  border-right: 1px solid #e0e0e0;
  z-index: 4;
}
header a#name {
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  top: 50%; left: 50%;
  width: 30px; height: 54px;
  padding: 100px;
  z-index: 2;
  perspective: 1000px;
  pointer-events: all;
}

@media only screen and (min-width: 1025px) {
  @keyframes allloaded {
    0%   { width: 100%; pointer-events: none; }
    100% { width: 350px; pointer-events: all; }
  }
}
@media only screen and (max-width: 1024px) {
  header {
    position: absolute;
    pointer-events: none;
  }
  header a#name {
    position: absolute;
    top: 50%; left: 50%;
    padding: 100px; margin-left: 0;
  }
  @keyframes allloaded {
    0%   { width: 100%; height: 100%; pointer-events: none; }
    100% { width: 100%; height: 350px; pointer-events: all; }
  }
  body.loaded #container a#name { top: 150px; }
}
@media only screen and (max-width: 767px) {
  header { border: 0; }
}

/* ── SVG Logo tilt ── */
.tilter svg { width: 30px; height: 54px; transform: translateZ(0); }
.tilter * { pointer-events: none; }
.tilter:focus { outline: none; }
.tilter .letter {
  position: absolute;
  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.2s ease-out;
}
.tilter .letter:nth-of-type(1) {
  margin-left: -100px; margin-top: -120px; opacity: 0;
  animation: loaded1 1000ms forwards;
}
.tilter .letter:nth-of-type(2) {
  margin-left: 0; margin-top: 0;
  animation: loaded2 1000ms forwards;
}
.tilter .letter:nth-of-type(3) {
  margin-left: 70px; margin-top: 40px; opacity: 0;
  animation: loaded3 1000ms forwards;
}

@keyframes loaded1 {
  0%   { margin-left: -100px; margin-top: -120px; opacity: 0; pointer-events: none; }
  100% { margin-left:  -50px; margin-top:  -60px; opacity: 1; pointer-events: all; }
}
@keyframes loaded2 {
  0%   { opacity: 0; pointer-events: none; }
  100% { opacity: 1; pointer-events: all; }
}
@keyframes loaded3 {
  0%   { margin-left: 140px; margin-top: 80px; opacity: 0; pointer-events: none; }
  100% { margin-left:  70px; margin-top: 40px; opacity: 1; pointer-events: all; }
}

/* ── Container ── */
#container {
  padding: 160px 80px 120px;
  transform: translateY(160px);
  margin-left: auto; margin-right: auto;
  box-sizing: border-box;
  transition: all 0ms cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
  max-width: 1200px;
  width: 100%;
  position: relative;
}

#container #content > * {
  margin-left: auto; margin-right: auto;
}

/* ── Links ── */
#container a {
  position: relative;
  display: inline-block;
  color: #111;
  z-index: 1;
  transition: opacity 200ms ease;
}
#container a:hover { opacity: 0.5; }

#container a span {
  display: block;
  width: 100%; height: 2px;
  bottom: -2px;
  z-index: -1;
  background: #111;
  position: absolute;
  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
#container a.nextProject span,
#container a.previousProject span {
  display: inline; width: auto; height: auto;
  bottom: 0; z-index: 0;
  background: transparent; position: relative;
}

/* ── Project list ── */
#container #projects {
  max-width: 800px;
  transition: background-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
#container #projects li {
  height: 90px; margin-top: -1px;
  list-style-type: none; position: relative;
  line-height: 90px; font-size: 28px; color: #111;
  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
#container #projects li a {
  height: 100%; color: #111;
  box-sizing: border-box;
  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media only screen and (min-width: 1025px) {
  #container #projects li a { opacity: 1; }
  #container #projects li a:hover { opacity: 0.4; }
}
#container #projects li span {
  position: relative; display: inline-block;
  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
  color: #999; background: none; width: auto; height: auto;
  bottom: 0; margin-left: 12px; font-size: 15px;
}

/* ── State transitions ── */
body.loaded:not(.loading) #container {
  transform: translateY(0);
  opacity: 1;
  transition: transform 1000ms cubic-bezier(0.645, 0.045, 0.355, 1),
              opacity   900ms  cubic-bezier(0.645, 0.045, 0.355, 1);
}
body.away:not(.loading) #container {
  transform: translateY(140px);
  opacity: 0;
  transition: all 1000ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* ── Tablet ── */
@media only screen and (max-width: 1024px) {
  #container {
    width: 100%;
    padding: 100px 60px 100px;
    transform: translateY(160px);
  }
  #container #projects li:before { opacity: 1; left: 0; }
  #container h2 { padding: 0; }
  body.loaded #container {
    transform: translateY(0);
    margin: auto;
  }
  body.loaded #container #content > * {
    margin-left: auto; margin-right: auto;
  }
}

/* ── Mobile ── */
@media only screen and (max-width: 767px) {
  #container {
    transform: translateY(100px);
    padding: 350px 16px 60px;
  }
  #container #projects { padding: 30px 0 0; }
  #container #projects li {
    padding-left: 0; font-size: 22px;
    line-height: 32px; height: 65px; margin-bottom: 25px;
  }
  #container #projects li span { display: block; margin-left: 0; }
  body.loaded #container { transform: translateY(0); margin: auto; }
}

/* ── Custom cursor (legacy) ── */
.svg-cursor {
  position: fixed; pointer-events: none; z-index: 1000;
  transform: translate(20px, 20px) scale(0);
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.svg-cursor.inviewport,
.svg-cursor.outviewport { transform: translate(20px, 20px) scale(0); }
@media only screen and (max-width: 1024px) { .svg-cursor { display: none; } }
.svg-cursor__circle { width: 36px; height: 36px; }
.svg-cursor__circle circle {
  transform: scale(1);
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.svg-cursor__forward #arrow-forward,
.svg-cursor__backward #arrow-backward,
.svg-cursor__link #link,
.svg-cursor__home #home,
.svg-cursor__zoom #zoom { fill-opacity: 1; }
.svg-cursor__play #play,
.svg-cursor__pause #pause,
.svg-cursor__close #close,
.svg-cursor__locked #locked { stroke-opacity: 1; }
.svg-cursor__backward, .svg-cursor__forward, .svg-cursor__close,
.svg-cursor__link, .svg-cursor__home, .svg-cursor__pause, .svg-cursor__play,
.svg-cursor__zoom, .svg-cursor__locked {
  transform: scale(1) translate(16px, 16px);
  animation: bounce 1s linear infinite;
}
.svg-cursor.svg-cursor__action .svg-cursor__circle,
.svg-cursor.svg-cursor__close .svg-cursor__circle,
.svg-cursor.svg-cursor__link .svg-cursor__circle,
.svg-cursor.svg-cursor__pause .svg-cursor__circle,
.svg-cursor.svg-cursor__play .svg-cursor__circle,
.svg-cursor.svg-cursor__zoom .svg-cursor__circle,
.svg-cursor.svg-cursor__locked .svg-cursor__locked {
  transform: scale(1) translate(0, 0);
}

/* ── Typography ── */
#container p {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.7;
  max-width: 780px;
  margin: 24px 0;
  color: #111;
}
#container p:nth-of-type(1) { margin-top: 24px; }

@media only screen and (max-width: 767px) {
  #container p { margin: 20px 0; }
  #container p:nth-of-type(1) { margin-top: 20px; }
}

#container h1 {
  font-family: "Apercu Light", sans-serif;
  font-size: clamp(52px, 6vw, 100px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  color: #111;
  max-width: 900px;
}

#container h2 {
  font-family: "Apercu Light", sans-serif;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
  margin: 60px 0 24px;
  box-sizing: border-box;
  max-width: 780px;
  color: #111;
}
#container h2.overwrite { margin: 40px auto 40px; }
#container h2.noptag   { margin-top: 60px; }

#container h3 {
  font-weight: 400;
  line-height: 28px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #999;
  font-family: "Apercu Light", sans-serif;
  position: relative;
  margin-bottom: 20px;
  padding-left: 40px;
  max-width: 660px;
}
#container h3:after {
  content: "";
  display: block;
  width: 24px; height: 1px;
  position: absolute;
  background-color: #ccc;
  margin-top: -15px; margin-left: -40px;
}

#container h4 {
  font-size: 13px; font-weight: 400; opacity: 0.45;
  text-align: left; max-width: 1150px;
  line-height: 22px; margin-top: -45px; margin-left: auto;
}
#container h4 a { font-size: 13px; }

#container h5 {
  font-weight: 400; font-size: 11px;
  text-transform: uppercase; letter-spacing: 2px;
  color: #999; font-family: "Apercu Light", sans-serif;
  position: relative; margin: 0 0 20px; max-width: 700px;
}
#container h5 span {
  display: block; width: 100%; height: 1px;
  bottom: -4px; z-index: -1; background: #e0e0e0;
  position: absolute;
  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
#container h5:hover span { height: 2px; }

/* ── Embed / Video ── */
#container .embed-container {
  position: relative; padding-bottom: 62.48%;
  height: 0; overflow: hidden;
  max-width: 1150px; margin: 60px auto 0;
}
#container .embed-container #cursor_trick {
  width: 100%; height: 100%; position: absolute; z-index: 2;
}
#container .embed-container iframe,
#container .embed-container object,
#container .embed-container embed {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* ── Images ── */
#container span.zoom {
  display: block;
  border: 1px solid #e8e8e8;
  box-sizing: border-box;
  max-width: 1150px; margin: 80px auto;
  cursor: pointer;
}
#container span.zoom img { border: none; margin: auto; }
#container span img { margin: auto; }

#container img,
#container video {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #e8e8e8;
  margin: 48px auto;
  max-width: 1150px;
  display: block;
}

#container .fullbleed {
  width: calc(100% + 160px);
  margin-left: -80px !important;
  border: 0 !important;
  max-width: none !important;
}
#container img {
  width: 100%;
  height: auto;
  display: block;
  border: none !important;
  image-rendering: -webkit-optimize-contrast;
}
#container .fullbleed img,
#container img.fullbleed {
  max-width: none !important;
}

@media only screen and (max-width: 1024px) {
  #container .fullbleed {
    width: calc(100% + 120px);
    margin-left: -60px !important;
  }
}
@media only screen and (max-width: 767px) {
  #container .fullbleed {
    width: 100%;
    margin-left: 0 !important;
  }
}

/* ── Lists ── */
#container ul:not(#projects) li { list-style: none; }
#container ul:not(#projects) li:nth-of-type(2) { width: 50%; float: left; }
#container ul:not(#projects) li:nth-of-type(3) { width: 50%; float: right; }
#container ul:not(#projects) li ul li { width: 100% !important; }
#container ul:not(#projects) li video { margin: 0; border: none; }

/* ── Next/Prev controllers ── */
#container .controllers {
  border-top: 1px solid #e0e0e0;
  margin-top: 120px; margin-bottom: 120px;
}

#container .controllers .nextProject {
  transition: opacity 300ms ease;
  border: none; background: none; opacity: 1;
  float: right; padding: 50px; margin-right: -50px;
  color: #111; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.6;
}
#container .controllers .nextProject:hover,
#container .controllers .previousProject:hover { opacity: 0.4; }

#container .controllers .previousProject {
  transition: opacity 300ms ease;
  border: none; background: none; opacity: 1;
  float: left; padding: 50px; margin-left: -50px;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.6; color: #111;
}

@media only screen and (max-width: 767px) {
  #container .controllers {
    margin: 80px auto 0;
    padding-top: 25px; padding-bottom: 25px;
  }
  #container .controllers .nextProject,
  #container .controllers .previousProject {
    float: none; margin: auto;
    padding-top: 25px; padding-bottom: 25px;
    box-sizing: border-box; text-align: center;
    width: 100%; padding-left: 0; padding-right: 0;
  }
  #container .controllers .nextProject span,
  #container .controllers .previousProject span { display: none; }
  #container video { margin: 32px auto; }
  #container h3 { margin-bottom: 0; }
  #container h5 a { margin-top: 10px; }
}