:root {
  --cloud-design-width: 1920;
  --cloud-design-height: 1080;
  --cloud-overscan: 1.12;
  --particle-blue: rgba(160, 230, 255, 0.9);
  --particle-white: rgba(255, 255, 255, 0.85);
}

html {
  background: #0f0819;
  overflow-x: hidden;
}


body {
  position: relative;
  width: 100%;
  min-width: 1280px;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

img,
a,
svg {
  -webkit-user-drag: none;
  user-drag: none;
}


.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
}

.cursor img {
  display: block;
  width: 80px;
  height: auto;
  animation: glimmer 4s ease-in-out infinite alternate;
}
@keyframes glimmer {
  0% {
    filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 18px rgba(160, 230, 255, 0.95)) drop-shadow(0 0 30px rgba(160, 230, 255, 0.95));
  }
  
  100% {
    filter: drop-shadow(0 0 15px #fff) drop-shadow(0 0 25px rgba(160, 230, 255, 0.95)) drop-shadow(0 0 40px rgba(160, 230, 255, 0.95));
  }
}


.butterfly-dust {
  position: fixed;
  width: 2px;
  height: 2px;
  background-color: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  box-shadow: 0 0 5px #fff, 0 0 12px var(--particle-blue), 0 0 20px var(--particle-blue);
  animation: dustFade var(--dust-duration) ease-out forwards;
}

@keyframes dustFade {
  0% {
    opacity: 0.8;
    transform: translate(0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(var(--dust-x), var(--dust-y)) scale(0.2);
  }
}


.wrap {
  position: relative;
  width: 100%;
}

section.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  pointer-events: none;
}

section.header > ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(8px, 0.625vw, 12px);
  margin: 0;
  padding: clamp(32px, 3.125vw, 60px) clamp(20px, 1.82vw, 35px) 0 0;
  list-style: none;
  pointer-events: auto;
}

section.header > ul > li {
  position: relative;
  font-size: 0;
}

section.header > ul > li > a {
  position: relative;
  display: block;
  font-size: 0;
}

section.header > ul > li img {
  display: block;
  width: clamp(45px, 3.594vw, 49px);
  height: auto;
}

section.header > ul > li > img:last-child,
section.header > ul > li > a > img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.3s ease;
}

section.header > ul > li:hover > img:last-child,
section.header > ul > li > a:hover > img:last-child {
  opacity: 1;
}

section.header > ul > li.music-button {
  cursor: pointer;
}


section.footer {
  background: #0f0819;
  width: 100%;
  max-width: 1920px;
  box-sizing: border-box;
  padding: clamp(32px, 2.5vw, 48px) clamp(20px, 1.82vw, 35px);
}

section.footer .footer-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.04vw, 20px);
}

section.footer .footer-logos {
  display: flex;
  align-items: center;
  gap: 36px;
}

section.footer .kakaogames-logo,
section.footer .supercat-logo {
  flex-shrink: 0;
}

section.footer .kakaogames-logo svg,
section.footer .supercat-logo svg {
  display: block;
  width: clamp(96px, 6.3vw, 121px);
  height: auto;
}

section.footer .footer-links {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.625vw, 12px);
  font-size: clamp(12px, 0.729vw, 14px);
  line-height: 1.4;
}

section.footer .footer-links a {
  color: #fff;
  text-decoration: none;
}

section.footer .footer-links a:hover {
  text-decoration: underline;
}

section.footer .footer-link-bold {
  font-weight: 700;
}

section.footer .footer-links-divider {
  color: rgba(255, 255, 255, 0.4);
}

section.footer .footer-company {
  font-size: clamp(10px, 0.625vw, 12px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}

section.footer .footer-company p {
  margin: 0;
}

section.footer .footer-company a {
  color: inherit;
  text-decoration: underline;
}

section.footer .footer-copyright {
  margin: 0;
  font-size: clamp(10px, 0.625vw, 12px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}

/* content */

section.main{position: relative;overflow: hidden;contain: layout style;will-change: filter, transform, opacity;}

/* 배경 */
.bg-box{position: relative;font-size: 0;}
.bg-box img{max-width: 100%; width: 100%; height: auto;}

.bg-front-box {position: absolute; bottom: 0; left: 0; width: 100%; z-index: 10;font-size: 0;}
.bg-front-box img{max-width: 100%; width: 100%; height: auto;}
.bg-gradient {position: absolute; bottom: 0; left: 0; width: 100%; z-index: 40;font-size: 0;}
.bg-gradient img{max-width: 100%; width: 100%; height: auto;opacity: 0.1;}

/* 타이틀 */
.title-box{position: absolute; width: 100%; top: clamp(53px, 4.17vw, 80px); z-index: 10; pointer-events: none; display: flex; flex-direction: column; align-items: center;}
.title-particle-box{position: absolute; top: -10px; left: 50%; width: 80%; height: clamp(200px, 15.63vw, 300px); transform: translateX(-50%); z-index: 0; pointer-events: none; overflow: visible;}
.title-box img{position: relative; z-index: 1; max-width: 100%; height: auto;}
.title-box .main-title{width: clamp(11.46%, 17.19vw, 17.19%);}
.title-box .sub-title{width: clamp(13.91%, 20.83vw, 20.83%); margin-top: clamp(-1.67%, -1.67vw, -1.09%);}
.title-box .play-button-wrap {pointer-events: auto; cursor: pointer; position: relative; display: grid; place-items: center; width: clamp(113px, 8.85vw, 170px); margin-top: clamp(10px, 0.78vw, 15px); font-size: 0; aspect-ratio: 1 / 1;}
.title-box .play-button-wrap .play-button,
.title-box .play-button-wrap .play-button-cloud {grid-area: 1 / 1; position: relative; width: 100%;}
.title-box .play-button-wrap .play-button-cloud {width: 125%; z-index: 2; animation: cloudRotateSlow 240s linear infinite; animation-play-state: paused;}
.title-box .play-button-wrap.is-ready .play-button-cloud {animation-play-state: running;}
.title-box .play-button-wrap img {display: block; width: 100%; position: static;}
.title-box .play-button-wrap .play-button .hover { transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);}
.title-box .play-button-wrap .hover {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; z-index: 1; transition: opacity 0.3s ease;}
/* .title-box .play-button-wrap:hover .play-button .hover { opacity: 1; filter: drop-shadow(0 0 40px rgba(135, 206, 250, 0.9)) brightness(1.2); transform: translate(-50%, -50%) scale(1.05); } */
.title-box .play-button-wrap:hover .hover {opacity: 1;}

@keyframes cloudRotateSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.title-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--particle-white);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 10px var(--particle-blue);
  animation: titleParticleFloat var(--p-duration) ease-in-out var(--p-delay) infinite;
}

@keyframes titleParticleFloat {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.8);
  }

  20% {
    opacity: var(--p-opacity);
    transform: translate(calc(var(--drift-x) * 0.2), calc(var(--drift-y) * 0.2)) scale(1.2);
  }

  80% {
    opacity: var(--p-opacity);
    transform: translate(calc(var(--drift-x) * 0.8), calc(var(--drift-y) * 0.8)) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(var(--drift-x), var(--drift-y)) scale(0.5);
  }
}

/* 캐릭터 */
.character-box{position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; pointer-events: none;}

.character-box > figure{position: absolute;margin: 0;}
.character-box > figure img{max-width: 100%; width: 100%; height: auto;}

.character-box .npc-01  {top:44.65%;    left:35%; width:8%;}
.character-box .npc-02  {top:51.15%;    left:57.81%; width:4.43%;}
.character-box .npc-03  {top:54.45%;    left:60.94%; width:4.43%;}
.character-box .npc-04  {bottom:7.29%;  left:15.69%; width:8.81%;}
.character-box .npc-05  {bottom:8%;  left:22%; width:5%;}
.character-box .npc-06  {bottom:11.49%; left:27.66%; width:4.17%;}
.character-box .npc-07  {bottom:10.99%; left:34%; width:8%;}
.character-box .npc-08  {bottom:12.69%; left:38.96%; width:3.32%;}
.character-box .npc-09  {bottom:9.69%;  left:42.71%; width:6.09%;}
.character-box .npc-10  {bottom:5.49%;  left:46.61%; width:6.67%;}
.character-box .npc-11 {bottom:7.99%;  left:50.78%; width:7.29%;}
.character-box .npc-12 {bottom:11.89%; left:55.26%; width:7.29%;}
.character-box .npc-13 {bottom:10.99%; left:60.42%; width:3.02%;}
.character-box .npc-14 {bottom:8.00%;  left:64%; width:6%;}
.character-box .npc-15 {bottom:7.00%;  left:66.58%; width:6%;}
.character-box .npc-16 {bottom:11.39%; left:75.42%; width:4.58%; z-index: 2;}
.character-box .npc-17 {bottom:8.69%;  left:78.75%; width:4.79%; z-index: 3;}
.character-box .npc-18 {bottom:11.69%; left:81.09%; width:7.03%; z-index: 2;}
.character-box .npc-19 {bottom: 18.48%; left: 85.83%; width: 2.5%; z-index: 1; animation: ghostFloat 2s ease-in-out infinite;}

.character-box .navi-01 {top:54.15%; left:55.81%; width:2.33%;}
.character-box .navi-02 {top:51.45%; left:63.94%; width:2.33%; transform:scaleX(-1);}

.character-box .bird-01 {bottom: 8.49%; left: 29.66%; width:2.22%; z-index: 4;}
.character-box .bird-02 {bottom: 9.49%; left: 31.66%; width:2.22%; transform:scaleX(-1);}

@keyframes ghostFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(clamp(-3px, -0.26vw, -8px));
  }
}


.character-front-box{position: absolute; z-index: 30; width: 100%; height: 100%; top: 0; pointer-events: none;}

.character-front-box > figure{position: absolute;margin: 0;}
.character-front-box > figure img{max-width: 100%; height: auto;}

.character-front-box > figure:nth-child(1){bottom:-6.99%; left:1.77%; width:17.19%;}
.character-front-box > figure:nth-child(1) > img:nth-child(1){width:100%;}
.character-front-box > figure:nth-child(1) > img:nth-child(2){position:absolute; top:clamp(19px, 1.51vw, 29px); right:6.67%;}

.character-front-box > figure:nth-child(2){bottom:-4.00%; left:14.06%; width:5.21%;}

/* intro flow */

body.is-intro-flow {
  overflow: hidden;
}

body.is-chrome-hidden section.header,
body.is-chrome-hidden section.footer {
  visibility: hidden;
  pointer-events: none;
}

body.is-scene-revealing section.footer {
  visibility: visible;
  pointer-events: auto;
  animation: mainSceneReveal 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  will-change: filter, transform, opacity;
}

body.is-scene-revealing section.header {
  visibility: visible;
  pointer-events: none;
}

body.is-scene-revealing section.header > ul {
  pointer-events: auto;
}

body.is-scene-revealing section.header > ul > li {
  opacity: 0;
  animation: mistyReveal 1.2s ease-out forwards;
}

body.is-scene-revealing section.header > ul > li:nth-child(1) {
  animation-delay: 3s;
}

body.is-scene-revealing section.header > ul > li:nth-child(2) {
  animation-delay: 3.3s;
}

body.is-scene-revealing section.header > ul > li:nth-child(3) {
  animation-delay: 3.6s;
}

.wrap.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.wrap.is-under-clouds,
.wrap.is-revealed {
  visibility: visible;
  pointer-events: auto;
}

.wrap.is-under-clouds section.main {
  opacity: 0;
}

.wrap.is-revealed section.main {
  animation: mainSceneReveal 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes mainSceneReveal {
  0% {
    filter: blur(20px) brightness(0.45);
    opacity: 0.85;
    transform: scale(1.03);
  }

  45% {
    filter: blur(10px) brightness(0.7);
    opacity: 0.93;
    transform: scale(1.015);
  }

  75% {
    filter: blur(3px) brightness(0.92);
    opacity: 0.98;
    transform: scale(1.005);
  }

  100% {
    filter: blur(0) brightness(1);
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes grandFrontReveal {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(1.02);
    filter: blur(15px) brightness(0.3);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) brightness(1) drop-shadow(0 -25px 50px rgba(0, 0, 0, 0.9));
  }
}

@keyframes spiritRevealX {
  0% {
    opacity: 0;
    transform: scale(0.97);
    filter: blur(20px) brightness(1.5);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.985);
    filter: blur(5px) brightness(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1);
  }
}

@keyframes mistyReveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes mysticEntry {
  0% {
    opacity: 0;
    transform: scale(1.05);
    filter: brightness(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes fadeBlurInCenter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 순차 등장 */
.wrap.is-revealed .bg-box,
.wrap.is-revealed .character-box {
  opacity: 0;
  animation: mysticEntry 3.2s ease-out 0.2s forwards;
}

.wrap.is-revealed .bg-front-box,
.wrap.is-revealed .bg-gradient,
.wrap.is-revealed .character-front-box  {
  opacity: 0;
  will-change: transform, opacity, filter;
  animation: grandFrontReveal 2.8s ease-out forwards;
  animation-delay: 1s;
}
.wrap.is-revealed .character-front-box {
  animation-delay: 1.7s;
}

.wrap.is-revealed .main-title {
  opacity: 0;
  will-change: transform, opacity, filter;
  animation: spiritRevealX 2.1s ease-out forwards;
  animation-delay: 3s;
}

.wrap.is-revealed .sub-title {
  opacity: 0;
  will-change: transform, opacity, filter;
  animation: spiritRevealX 2.1s ease-out forwards;
  animation-delay: 4s;
}

.wrap.is-revealed .play-button-wrap {
  opacity: 0;
}

.wrap.is-revealed .play-button-wrap.is-ready {
  animation: fadeBlurInCenter 2.1s ease-out forwards;
  animation-delay: 4.8s;
}

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f0819;
}

.intro-overlay.is-hidden {
  display: none;
}

.intro-play-button {
  position: relative;
  cursor: pointer;
  font-size: 0;
}

.intro-play-button img {
  display: block;
  width: 200px;
  height: auto;
  transition: opacity 0.3s ease;
}

.intro-play-button img:last-child {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}

.intro-play-button:hover img:first-child {
  opacity: 0;
}

.intro-play-button:hover img:last-child {
  opacity: 1;
}

.video-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  background: #000;
}

.video-overlay.is-active {
  display: block;
}

.video-overlay .intro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.video-overlay.is-placeholder .video-placeholder-label {
  display: flex;
}

.video-placeholder-label {
  position: absolute;
  inset: 0;
  display: none;
  margin: 0;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: -0.02em;
  pointer-events: none;
}

.video-controls {
  position: fixed;
  top: clamp(32px, 3.125vw, 60px);
  right: clamp(20px, 1.82vw, 35px);
  z-index: 510;
  display: none;
  align-items: center;
  gap: 16px;
}

.video-overlay.is-active .video-controls {
  display: flex;
}

.video-mute-button,
.video-skip-button {
  padding: 0;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.video-mute-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-mute-button .icon-unmuted {
  display: none;
}

.video-mute-button.is-unmuted .icon-muted {
  display: none;
}

.video-mute-button.is-unmuted .icon-unmuted {
  display: block;
}

.video-mute-button:hover,
.video-skip-button:hover {
  color: #fff;
  opacity: 0.85;
}

.video-skip-button {
  display: none;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.video-overlay.is-active.is-skippable .video-skip-button {
  display: block;
}

.cloud-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0f0819;
}

.cloud-reveal-overlay.is-active {
  display: flex;
  cursor: pointer;
}

.cloud-reveal-overlay.is-clearing {
  background: transparent;
  pointer-events: none;
}

.cloud-reveal-overlay.is-clearing ~ .cloud-clear-button img {
  animation: fanSway 0.65s ease-in-out forwards;
  transform-origin: 50% 88%;
}

@keyframes fanSway {
  0% {
    transform: rotate(0deg);
  }

  18% {
    transform: rotate(-16deg);
  }

  38% {
    transform: rotate(12deg);
  }

  58% {
    transform: rotate(-8deg);
  }

  78% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.cloud-reveal-stage {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  --cloud-cover-scale: max(
    calc(100vw / var(--cloud-design-width)),
    calc(100vh / var(--cloud-design-height))
  );
  transform: scale(var(--cloud-cover-scale)) scale(var(--cloud-overscan));
  transform-origin: center center;
}

.cloud-layer {
  position: absolute;
  overflow: hidden;
  will-change: transform;
  width: 100%;
  height: 100%;
}

.cloud-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .cloud-layer.cloud-layer--1{top: 0; left: 53%; width: 1565px; transform: translateX(-50%); }
.cloud-layer.cloud-layer--2{top: 172px; right: -200px;width: 1156px;}
.cloud-layer.cloud-layer--3{top: -50px; left: -200px; width: 1500px;}
.cloud-layer.cloud-layer--4{top: -90px; left: -840px; width: 1800px;}
.cloud-layer.cloud-layer--5{bottom: -260px; left: 50%; width: 1800px; transform: translateX(-50%);}
.cloud-layer.cloud-layer--10{bottom: -407px; left: -600px; width: 1717px;}
.cloud-layer.cloud-layer--6{bottom: -130px; left: -800px; width: 1560px;}
.cloud-layer.cloud-layer--7{top: -521px; left: 52%; width: 1574px; transform: translateX(-50%);}
.cloud-layer.cloud-layer--8{bottom: -359px; right: -495px; width: 1676px;}
.cloud-layer.cloud-layer--9{top: -153px; right: -840px;width: 1655px;} */

@keyframes cloudClearTL {
  from {
    opacity: 1;
  }

  to {
    transform: translate(-130%, -130%);
    opacity: 0;
  }
}

@keyframes cloudClearTR {
  from {
    opacity: 1;
  }

  to {
    transform: translate(130%, -130%);
    opacity: 0;
  }
}

@keyframes cloudClearBL {
  from {
    opacity: 1;
  }

  to {
    transform: translate(-130%, 130%);
    opacity: 0;
  }
}

@keyframes cloudClearBR {
  from {
    opacity: 1;
  }

  to {
    transform: translate(130%, 130%);
    opacity: 0;
  }
}

@keyframes cloudClearUp {
  from {
    opacity: 1;
  }

  to {
    transform: translateY(-130%);
    opacity: 0;
  }
}

@keyframes cloudClearDown {
  from {
    opacity: 1;
  }

  to {
    transform: translateY(130%);
    opacity: 0;
  }
}

@keyframes cloudClearLeft {
  from {
    opacity: 1;
  }

  to {
    transform: translateX(-130%);
    opacity: 0;
  }
}

@keyframes cloudClearRight {
  from {
    opacity: 1;
  }

  to {
    transform: translateX(130%);
    opacity: 0;
  }
}

.cloud-reveal-overlay.is-clearing .cloud-layer {
  animation-duration: 4s;
  animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  animation-fill-mode: forwards;
}

/* 0: 우상단 */
.cloud-reveal-overlay.is-clearing .cloud-layer--1 {
  animation-name: cloudClearUp;
}

/* 1: 상단 */
.cloud-reveal-overlay.is-clearing .cloud-layer--2 {
  animation-name: cloudClearUp;
}

/* 2: 우하단 */
.cloud-reveal-overlay.is-clearing .cloud-layer--3 {
  animation-name: cloudClearBR;
}

/* 3: 좌하단 */
.cloud-reveal-overlay.is-clearing .cloud-layer--4 {
  animation-name: cloudClearBL;
}

/* 4: 좌측 */
.cloud-reveal-overlay.is-clearing .cloud-layer--5 {
  animation-name: cloudClearLeft;
}

/* 5: 상단 */
.cloud-reveal-overlay.is-clearing .cloud-layer--6 {
  animation-name: cloudClearUp;
}

/* 6: 좌상단 */
.cloud-reveal-overlay.is-clearing .cloud-layer--7 {
  animation-name: cloudClearTL;
}

/* 7: 우측 */
.cloud-reveal-overlay.is-clearing .cloud-layer--8 {
  animation-name: cloudClearRight;
}

/* 8: 우하단 */
.cloud-reveal-overlay.is-clearing .cloud-layer--9 {
  animation-name: cloudClearBR;
}

/* 9: 우하단 */
.cloud-reveal-overlay.is-clearing .cloud-layer--10 {
  animation-name: cloudClearBR;
}

/* 10: 하단 */
.cloud-reveal-overlay.is-clearing .cloud-layer--11 {
  animation-name: cloudClearDown;
}

/* 11: 우상단 */
.cloud-reveal-overlay.is-clearing .cloud-layer--12 {
  animation-name: cloudClearTR;
}

/* 12: 좌하단 */
.cloud-reveal-overlay.is-clearing .cloud-layer--13 {
  animation-name: cloudClearBL;
}

.cloud-reveal-overlay.is-clearing .cloud-layer--1 { animation-delay: 0s; }
.cloud-reveal-overlay.is-clearing .cloud-layer--2 { animation-delay: 0.04s; }
.cloud-reveal-overlay.is-clearing .cloud-layer--3 { animation-delay: 0.02s; }
.cloud-reveal-overlay.is-clearing .cloud-layer--4 { animation-delay: 0.06s; }
.cloud-reveal-overlay.is-clearing .cloud-layer--5 { animation-delay: 0.03s; }
.cloud-reveal-overlay.is-clearing .cloud-layer--6 { animation-delay: 0.07s; }
.cloud-reveal-overlay.is-clearing .cloud-layer--7 { animation-delay: 0.01s; }
.cloud-reveal-overlay.is-clearing .cloud-layer--8 { animation-delay: 0.05s; }
.cloud-reveal-overlay.is-clearing .cloud-layer--9 { animation-delay: 0.06s; }
.cloud-reveal-overlay.is-clearing .cloud-layer--10 { animation-delay: 0.08s; }
.cloud-reveal-overlay.is-clearing .cloud-layer--11 { animation-delay: 0.04s; }
.cloud-reveal-overlay.is-clearing .cloud-layer--12 { animation-delay: 0.02s; }
.cloud-reveal-overlay.is-clearing .cloud-layer--13 { animation-delay: 0.07s; }

.cloud-clear-button {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 410;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease-out, transform 0.3s ease, visibility 0s linear 0.6s;
}

.cloud-reveal-overlay.is-active ~ .cloud-clear-button {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.6s ease-out, transform 0.3s ease;
}

.cloud-reveal-overlay.is-active.is-clearing ~ .cloud-clear-button {
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: fanButtonFadeOut 0.45s ease 0.65s forwards;
}

@keyframes fanButtonFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}

.cloud-clear-button img {
  display: block;
  width: 80px;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.cloud-clear-button span {
  font-size: 15px;
  line-height: 1.4;
  color: #fff;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.cloud-clear-button:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.cloud-clear-button:hover span {
  opacity: 0.85;
}

.youtube-popup {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 6vw, 80px) clamp(16px, 3vw, 40px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.youtube-popup.is-active {
  opacity: 1;
  visibility: visible;
}

.youtube-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  cursor: pointer;
}

.youtube-popup__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 1.25vw, 24px);
  width: min(calc(1280px + 56px), 100%);
  max-width: 100%;
}

.youtube-popup__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.youtube-popup__close-icon {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  opacity: 0.882;
  transition: opacity 0.2s ease;
}

.youtube-popup__close:hover .youtube-popup__close-icon {
  opacity: 1;
}

.youtube-popup__player {
  flex: 1;
  min-width: 0;
  aspect-ratio: 16 / 9;
  background: #000;
}

.youtube-popup__player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 1919px) {
  .youtube-popup__dialog {
    width: min(calc(854px + 56px), 100%);
  }

  .youtube-popup__player {
    flex: none;
    width: min(854px, calc(100% - 56px));
    aspect-ratio: 16 / 9;
  }
}