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

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

body{
  font-family:"DM Sans",sans-serif;
  overflow-x:hidden;
  background:#111;
}

section{
  min-height:100vh;
  overflow:hidden;
}

.container{
  min-height:100vh;
  padding:2rem;
  display:flex;
  transform:rotate(25deg);
  transform-origin:bottom left;
  will-change:transform;
}

.one .container{
  background:#d8d3c4;
  color:#000;
}

.two .container{
  background:#1d1d1d;
  color:#fff;
}

.three .container{
  background:#8f7cff;
  color:#000;
}

.four .container{
  background:#f0c808;
  color:#000;
}

.col{
  flex:1;
  display:flex;
}

.center{
  align-items:center;
  justify-content:center;
}

.text{
  flex-direction:column;
  justify-content:space-between;
}

.column{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:1rem;
}

.img{
  width:40%;
  aspect-ratio:4/5;
  overflow:hidden;
}

.large{
  width:30%;
}

img{
  width:100%;
  height:100%;
  object-fit:cover;
}

h1{
  font-size:clamp(3rem,10vw,9rem);
  line-height:1;
  text-transform:uppercase;
}

p{
  font-size:1.2rem;
  max-width:600px;
  line-height:1.5;
}

@media(max-width:900px){
  .container{
    flex-direction:column;
  }

  .img,
  .large{
    width:100%;
  }

  .text{
    gap:2rem;
  }
}

/* i18n: fixed language switcher (this scroll demo has no header bar) */
.lang-switch { position: fixed; top: 16px; right: 16px; z-index: 1000; }
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 30px 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  backdrop-filter: blur(4px);
}
.lang-select option { color: #111; background-color: #fff; }

/* i18n line-break: JP body wraps naturally with kinsoku; titles stay one line */
html[lang="ja"] { line-break: strict; }
html[lang="ja"] p { word-break: normal; overflow-wrap: anywhere; text-wrap: pretty; }
html[lang="ja"] h1 { word-break: keep-all; font-size: clamp(2.5rem, 7vw, 6rem); }