/* Minimalist landing styles — seamless dual-tile slider with two animated views */
:root{
  --bg-speed: 120s; /* smaller = faster */
  --container-max: 1100px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #fff;
  background: #000;
  overflow-x: hidden;
}

/* Background slider container */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bg .tile {
  position: absolute;
  top: 50%;
  left: 0;
  height: 100vh;
  width: auto;
  transform: translateY(-50%);
  filter: grayscale(100%);
  animation: slide var(--bg-speed) linear infinite;
  will-change: transform;
  user-select: none;
  pointer-events: none;
}
.bg .tile:nth-of-type(2) {
  transform: translate(100%, -50%);
  animation: slide2 var(--bg-speed) linear infinite;
}
.bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

@keyframes slide {
  from { transform: translateY(-50%) translateX(0); }
  to   { transform: translateY(-50%) translateX(-100%); }
}
@keyframes slide2 {
  from { transform: translateY(-50%) translateX(100%); }
  to   { transform: translateY(-50%) translateX(0); }
}

/* Views */
.view {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 8vh 6vw;
  text-align: center;
}

.inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem; 
  max-width: 980px;
  width: 100%;
}

.logo {
  width: min(85vw, 720px);
  height: auto;
  opacity: 0;
  transform: translateY(24px) scale(.98);
  animation: enter 1900ms cubic-bezier(.2,.8,.2,1) 150ms forwards;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));
}

.tagline {
  margin: .25rem 0 0;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0;
  font-size:20px;
    color: #DEDEDE;
  margin-top:20px;
  transform: translateY(18px);
  animation: enter 1900ms cubic-bezier(.2,.8,.2,1) 500ms forwards;
}

.buttons {
  opacity: 0;
  transform: translateY(12px);
  animation: enter 2700ms cubic-bezier(.2,.8,.2,1) 1800ms forwards;
  margin-top: .5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  padding: 0.9rem 1.5rem;
  border: 2px solid #fff;
  color: #fff;
  background: rgba(255,255,255,0.06);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .04em;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
  border-radius: 0; /* square corners */
  will-change: transform;
}
.btn:hover, .btn:focus-visible {
  background: #fff;
  color: #000;
  border-color: #fff;
  transform: translateY(-2px);
}

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

/* Transition between views
   - When body has .show-about, Home "falls away" and About fades/slides in */
.home {
  transition: opacity 1.35s ease, transform 1.35s ease, filter 1.35s ease;
}
body.show-about .home, body.show-vrm .home {
  opacity: 0;
  transform: translateY(40px) scale(.98);
  filter: blur(6px);
  pointer-events: none;
}

/* When showing About, remove Home from the document flow so content is at the top */
body.show-about .home, body.show-vrm .home {
  position: absolute;
  inset: 0;
  height: 0;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}


.about {
  /* Hidden state (Home): completely removed from layout */
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;

  /* Prepare animation properties */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.35s ease .3s, transform 1.35s ease .3s;
  text-align: left;
  display: block;
  padding-top: 8vh; /* retained for shown state; no effect when height:0 */
}
body.show-about .about {
  position: relative;
  height: auto;
  overflow: visible;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
body.show-about .about {
  opacity: 1;
  transform: translateY(0);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.back {
  display: inline-block;
  margin: 0 0 1rem;
  color: #fff;
  opacity: .8;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .02em;
  transition: opacity .2s ease, transform .2s ease;
}
.back:hover, .back:focus-visible {
  opacity: 1;
  transform: translateX(-2px);
}

.title {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: .01em;
  margin: .25rem 0 .5rem;
}

.title-underline {
  height: 2px;
  width: min(720px, 80%);
  margin: 0 0 2rem;
  background: rgba(255,255,255,.75);
}

.lede, .outro {
  font-size: clamp(16px, 2.6vw, 18px);
  line-height: 1.6;
  max-width: 80ch;
  opacity: .95;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  margin: 2.25rem 0;
}
.split .image-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}
.split .image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}
.split .text h3 {
  margin: 0 0 .5rem;
  font-size: clamp(18px, 3vw, 22px);
}
.split .text p {
  margin: 0;
  line-height: 1.7;
  opacity: .95;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }
  .title-underline { width: 100%; }
}

/* Accessibility: respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .bg .tile { animation: none; }
  .home, .about { transition: none; }
  .logo, .tagline { animation: none; opacity: 1; transform: none; }
}

/* Gentle initial fade-in of the home inner container */
.home .inner {
  will-change: opacity, transform;
}




/* About header: grid layout keeps buttons aligned with title without affecting other areas */
.about-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;           /* align to top edge of the title block */
  column-gap: 1rem;
  row-gap: .5rem;
  margin-bottom: 1.25rem;
}

.about-head__title {
  min-width: 40%;
}

.about-head__actions {
  align-self: start;            /* pin to the top of the grid row */
  display: flex;
  gap: .6rem;
}

.btn-small {
  padding: 0.6rem 1rem;
  line-height: 1;
  font-weight: 600;
  border-width: 2px;
  border-radius: 0; /* square to match main buttons */
}

/* Keep underline scoped to the title column */
.about-head__title .title-underline {
  width: min(720px, 80%);
}

@media (max-width: 900px) {
  .about-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .about-head__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .about-head__title .title-underline {
    width: 100%;
  }
}


/* VRM view: hidden (no layout) by default; fades in when .show-vrm is set */
.vrm {
  width: 100%;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;

  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.35s ease .3s, transform 1.35s ease .3s;
  text-align: left;
  display: block;
  padding-top: 8vh;
}
body.show-vrm .vrm {
  position: relative;
  height: auto;
  overflow: visible;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

/* Keep content styling consistent with About */
.vrm .container { width: 100%; max-width: var(--container-max); margin: 0 auto; }
.vrm .split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; margin: 2.25rem 0; }
.vrm .split .image-wrap { aspect-ratio: 16/9; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.06); }
.vrm .split .image-wrap img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); }
.vrm .split .text h3 { margin: 0 0 .5rem; font-size: clamp(18px, 3vw, 22px); }
.vrm .split .text p { margin: 0; line-height: 1.7; opacity: .95; }
@media (max-width: 900px) { .vrm .split { grid-template-columns: 1fr; } }


/* VRM header: grid layout with single action button on the right */
.vrm-head { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 1rem; row-gap: .5rem; margin-bottom: 1.25rem; }
.vrm-head__title { min-width: 40%; }
.vrm-head__actions { align-self: start; display: flex; gap: .6rem; justify-content: flex-end; }
.vrm-head__title .title-underline { width: min(720px, 80%); }

@media (max-width: 900px) {
  .vrm-head { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 1rem; row-gap: .5rem; margin-bottom: 1.25rem; }
  .vrm-head__actions { align-self: start; display: flex; gap: .6rem; justify-content: flex-end; }
  .vrm-head__title .title-underline { width: 100%; }
}