@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
}



body {
    list-style-type: none;
    font-family: 'Nanum Gothic', sans-serif;
    background: var(--surface-2);
    display: grid;
    justify-items: center;
    align-content: start;
    overflow-x: hidden;
}

/* Menu */

.fixed-menu {
    position: fixed;
    bottom: 40px;
    right: 20px;
    z-index: 1000;
}

.menu-button {
    padding: 10px 20px;
    font-size: 20px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    font-weight: normal;
}

.menu-button:hover {
    font-weight: bolder;
}

.menu-box {
    position: fixed;
    bottom: 70px;
    right: -300px; 
    background-color: transparent;
    /* box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3); */
    transition: right 0.3s ease;
    padding: 20px;
    box-sizing: border-box;
    z-index: 999;
}

.menu-box.open {
    right: 0; /* Slide in */
}

.menu-box h2 {
    margin-top: 0;
}

.menu-box ul {
    list-style: none;
    padding: 5px 30px;
    font-size: 16px;
}

.menu-box ul li {
    margin: 10px 0;
}

.menu-box ul li a {
    color: #111;
    font-weight: normal;
}

.menu-box ul li a:hover {
    border-bottom: 1px solid #111;
    transition: all 0.3s ease-in-out;
}

.close-button {
    padding: 10px 0px;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

.close-button i {
    font-size: 24px;
}

/* BtStudio Logo */

.btstudio {
  position: fixed;
  bottom: 0px;
  left: 10px;
}

.btstudio h4 {
  font-size: 18px;
  font-weight: normal;
}

.btstudio img {
  width: 8%;
}


.scroll {
  position: fixed;
  bottom: 500px;
  left: 10px;
}

.scroll .rotate p {
  font-size: 20px;
  font-weight: bolder;
}

/* Main */
*,
*:after,
*:before {
	box-sizing: border-box;
}


:root {
  --content: 110ch;
  --gutter: 5rem;
  --gap: 5rem;
}

main {
  width: var(--content);
  max-width: calc(100vw - (2 * var(--gutter)));
  margin: 0 auto;
}



h1 {
  z-index: 2;
  position: relative;
}

h1 span:nth-of-type(2) {
  color: transparent;
  -webkit-text-stroke: 0.25rem var(--text-1);
}

section {
  display: grid;
  gap: var(--gutter);
  grid-template-columns:
    auto
    1fr;
  align-items: center;
  min-height: 100vh;
}

p:first-line {
  text-transform: uppercase;
  font-weight: bold;
}

section p {
  z-index: 2;
  padding: 0rem;
  backdrop-filter: blur(4px);
  font-size: 1rem;
  text-align: justify;
  text-justify: inter-word;
}

@media(prefers-color-scheme: dark) {
  section p {
    background: transparent;
  }
}

section img {
  grid-column: 1;
  width: 80%;
  /* clip-path: polygon(0 10%, 10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%); */
  scale: 1;
}

section:nth-of-type(even) {
  grid-template-columns:
    1fr
    auto;
  grid-auto-flow: dense;
}
section:nth-of-type(even) img {
  grid-column: 2;
}
section:nth-of-type(even) p {
  grid-column: 1;
}


section {
  --x: -100%;
}
section:nth-of-type(even) {
  --x: 100%;
}

section img {
  view-timeline: --item;
  animation: item-reveal both ease-in;
  animation-timeline: --item;
  animation-delay: cover 10%;
  animation-end-delay: cover 35%;
  animation-range: cover 10% cover 35%;
}

section img {
  --y: 0;
}
section p {
  --x: 0;
  --y: 50%;
  view-timeline: --item;
  animation: item-reveal both ease-out;
  animation-timeline: --item;
  animation-delay: cover 35%;
  animation-end-delay: cover 50%;
  animation-range: cover 35% cover 50%;
  position: sticky;
  bottom: 40%;
}

@keyframes item-reveal {
  0% {
    opacity: 0;
    translate: var(--x, 0) var(--y, 0);
  }
}

.ring-wrapper {
  --char-count: 19;
  --inner-angle: calc((360 / var(--char-count, 19)) * 1deg);
  --character-width: 1.0;
  --radius: calc((var(--character-width, 1.0) / 0.32469946920468346) * -1ch);
  --font-size: 1.5rem;
  position: fixed;
  top: 0;
  right: 0;
  height: calc((var(--character-width, 1.0) / 0.32469946920468346) * 3.5ch);
  width: calc((var(--character-width, 1.0) / 0.32469946920468346) * 3.5ch);
  translate: 0% 0%;
  display: grid;
  place-items: center;
  z-index: 10;
  border: calc(var(--character-width) * 2rem) solid var(--surface-2);
  border-radius: 50%;
  font-weight: bold;
}

.ring {
  font-family: monospace;
  text-transform: uppercase;
  font-size: calc(var(--font-size, 1) * 1rem);
  animation: rotation 6s both linear;
  position: relative;
  animation-timeline: scroll(root);
}
.char {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--inner-angle) * var(--char-index)))
    translateY(var(--radius));
}
@keyframes rotation {
  to {
    rotate: 720deg;
  }
}   

.mobile {
  display: none;
}

/* Responsive */
@media (max-width: 768px) {

  main {
    display: none;
  }

  .btstudio {
		position: fixed;
		bottom: 0px;
		left: 10px;
		padding: 0;
		margin: 0;
	  }
	  .btstudio img {
		width: 8%;
		padding: 0;
		margin: 0;
	  }

	  .fixed-menu {
		position: fixed;
		bottom: 0px;
		right: 0px;
		z-index: 1000;
		font-size: 12px;
	}
  
  .menu-box  {
    bottom: 3px;
    box-shadow: 5px 10px 8px rgb(0, 0, 0);
    background-color: aliceblue;
  }

  .mobile {
    display: flex;
    flex-direction: column;
  }

  .mobile img {
    width: 60%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }

  .mobile p {
    padding: 0 60px;
    text-align: center;
    text-align: justify;
    text-justify: inter-word;
    font-size: 14px;
    line-height: 20px;
  }

  .mobile h3 {
    padding: 5px 60px;
    font-size: 16px;
  }

  .mobile h4 {
    padding: 5px 60px;
    font-size: 16px;
  }

  .scroll {
    position: fixed;
    bottom: 500px;
    left: 0px;
  }
  
  .scroll .rotate p {
    font-size: 15px;
    font-weight: bold;
  }

}