:root {
  --black: #02050a;
  --white: #f6f9ff;
  --muted: rgba(230, 239, 250, .72);
  --faint: rgba(230, 239, 250, .34);
  --line: rgba(214, 233, 255, .16);
  --blue: #168cff;
  --cyan: #58d7ff;
  --ease: cubic-bezier(.22, .76, 0, 1);
  --scene-time: 6s;
  --gutter: clamp(22px, 5vw, 76px);
}

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

html, body { width: 100%; min-height: 100%; }

html { background: var(--black); }

body {
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
  color: var(--white);
  background: var(--black);
  overflow: hidden;
}

button, input { font: inherit; }
button { color: inherit; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.sr-only,
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  inset-block-start: 12px;
  inset-inline-start: 50%;
  translate: 50% 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
}

/* Loader */
.loader {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  background: #010307;
  pointer-events: none;
  animation: loader-leave 1s 1.35s var(--ease) forwards;
}

.loader__brand {
  font: 500 clamp(1.5rem, 3vw, 2.2rem)/1 "Inter", sans-serif;
  letter-spacing: .65em;
  translate: .325em 0;
  animation: loader-brand .85s var(--ease) both;
}

.loader__line {
  position: absolute;
  width: 84px;
  height: 1px;
  translate: 0 40px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}

.loader__line i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform-origin: left;
  animation: loader-line 1.15s .12s var(--ease) both;
}

/* Shell */
.launch {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--black);
  isolation: isolate;
}

.launch::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(2) infinite;
}

.header {
  position: absolute;
  z-index: 30;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(22px, 3vw, 38px) var(--gutter);
  animation: fade-down .9s 1.65s var(--ease) both;
}

.brand {
  color: var(--white);
  text-decoration: none;
  font: 500 clamp(.95rem, 1.4vw, 1.15rem)/1 "Inter", sans-serif;
  letter-spacing: .58em;
  translate: .29em 0;
}

.header__meta {
  display: flex;
  align-items: center;
  gap: 18px;
}

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .14em;
}

.status span:last-child {
  font-family: "Inter", sans-serif;
  font-size: .62rem;
  letter-spacing: .22em;
}

.status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(88,215,255,.5);
  animation: pulse 2.3s ease infinite;
}

.language-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 50px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(2, 5, 10, .24);
  color: var(--white);
  font: 500 .66rem/1 "Inter", sans-serif;
  letter-spacing: .12em;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: border-color .3s ease, background .3s ease, transform .3s var(--ease);
}

.language-switch i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
}

.language-switch:hover {
  border-color: rgba(88, 215, 255, .55);
  background: rgba(22, 140, 255, .16);
  transform: translateY(-2px);
}

/* Scenes */
.scenes,
.scene {
  position: absolute;
  inset: 0;
}

.scene {
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 0 100%);
  transition:
    opacity .85s ease,
    visibility .85s,
    clip-path 1.05s var(--ease);
}

.scene.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  clip-path: inset(0);
}

.scene.is-leaving {
  z-index: 1;
  opacity: 0;
  visibility: visible;
  clip-path: inset(0 100% 0 0);
}

.scene__media,
.scene__shade {
  position: absolute;
  inset: 0;
}

.scene__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  scale: 1.035;
  filter: brightness(.75) saturate(.88);
  transition: scale 8s ease, filter 1.2s ease;
}

.scene.is-active .scene__media img {
  scale: 1;
  filter: brightness(.92) saturate(1);
}

.scene__shade {
  background:
    linear-gradient(90deg, rgba(2,5,10,.06) 0 34%, rgba(2,5,10,.34) 50%, rgba(2,5,10,.92) 100%),
    linear-gradient(180deg, rgba(2,5,10,.35), transparent 28%, transparent 60%, rgba(2,5,10,.82));
}

.scene__copy {
  position: absolute;
  z-index: 5;
  right: var(--gutter);
  inset-block-start: 50%;
  width: min(620px, 54vw);
  translate: 0 -48%;
  text-align: start;
}

.scene__number {
  margin-block-end: 24px;
  color: var(--cyan);
  font: 500 .65rem/1 "Inter", sans-serif;
  letter-spacing: .28em;
  opacity: 0;
  translate: 0 14px;
}

.scene h1,
.scene h2 {
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.045em;
}

.scene h1 span,
.scene h2 span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

.scene h1 span::after,
.scene h2 span::after {
  content: "";
  position: absolute;
}

.scene h1 span,
.scene h2 span {
  opacity: 0;
  translate: 0 110%;
}

.scene__lead {
  max-width: 34ch;
  margin-block-start: 26px;
  color: var(--muted);
  font-size: clamp(.98rem, 1.3vw, 1.15rem);
  font-weight: 300;
  line-height: 1.9;
  opacity: 0;
  translate: 0 16px;
}

.scene__english {
  margin-block-start: 12px;
  color: var(--faint);
  font: 400 .68rem/1.5 "Inter", sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: 0;
  translate: 0 12px;
}

.scene.is-active .scene__number { animation: reveal-up .7s .5s var(--ease) forwards; }
.scene.is-active h1 span:first-child,
.scene.is-active h2 span:first-child { animation: title-up .9s .58s var(--ease) forwards; }
.scene.is-active h1 span:last-child,
.scene.is-active h2 span:last-child { animation: title-up .9s .7s var(--ease) forwards; }
.scene.is-active .scene__lead { animation: reveal-up .8s .85s var(--ease) forwards; }
.scene.is-active .scene__english { animation: reveal-up .8s .96s var(--ease) forwards; }

/* Climate FX */
.climate-fx,
.cooling-fx,
.care-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#airCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.air-cone {
  position: absolute;
  top: 27%;
  left: 17%;
  width: 43%;
  height: 58%;
  background: linear-gradient(140deg, rgba(101,209,255,.24), rgba(73,173,255,.07) 42%, transparent 72%);
  clip-path: polygon(0 0, 100% 56%, 82% 100%, 0 17%);
  filter: blur(16px);
  opacity: 0;
  transform-origin: left top;
}

.scene.is-active .air-cone { animation: cone-breathe 4s .8s ease-in-out infinite; }

.air-stream {
  --angle: 28deg;
  position: absolute;
  top: 32%;
  left: 18%;
  width: 29vw;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(190,235,255,.55), transparent);
  filter: blur(6px);
  opacity: 0;
  transform-origin: left center;
}

.air-stream--1 { --angle: 24deg; }
.air-stream--2 { --angle: 31deg; top: 35%; width: 34vw; }
.air-stream--3 { --angle: 38deg; top: 38%; width: 39vw; filter: blur(9px); }
.air-stream--4 { --angle: 45deg; top: 41%; width: 32vw; filter: blur(12px); }

.scene.is-active .air-stream { animation: air-flow 3.8s 1s ease-in-out infinite; }
.scene.is-active .air-stream--2 { animation-delay: 1.65s; }
.scene.is-active .air-stream--3 { animation-delay: 2.3s; }
.scene.is-active .air-stream--4 { animation-delay: 2.95s; }

/* Cooling FX */
.cold-mist {
  position: absolute;
  left: 7%;
  top: 12%;
  width: 31%;
  height: 62%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(152,220,255,.24), transparent 68%);
  filter: blur(28px);
  opacity: 0;
}

.cold-mist--2 {
  left: 16%;
  top: 28%;
  width: 35%;
  height: 54%;
  opacity: 0;
}

.scene.is-active .cold-mist--1 { animation: mist-one 5.5s .8s ease-in-out infinite; }
.scene.is-active .cold-mist--2 { animation: mist-two 6.5s 1.4s ease-in-out infinite; }

.light-scan {
  position: absolute;
  inset-block: 0;
  left: -20%;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(104,202,255,.16), transparent);
  transform: skewX(-12deg);
  opacity: 0;
}

.scene.is-active .light-scan { animation: light-scan 5.4s 1.8s ease-in-out infinite; }

/* Care FX */
.water-ring {
  position: absolute;
  left: 10.2%;
  top: 42.2%;
  width: 17.4vw;
  max-width: 268px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(82,209,255,.26);
  box-shadow: inset 0 0 25px rgba(63,183,255,.14), 0 0 32px rgba(63,183,255,.12);
  opacity: 0;
}

.water-ring--2 {
  scale: .83;
  border-style: dashed;
  border-color: rgba(185,238,255,.22);
}

.scene.is-active .water-ring--1 { animation: ring-pulse 3.8s .8s ease-in-out infinite; }
.scene.is-active .water-ring--2 { animation: ring-spin 9s 1s linear infinite; }

.glass-glint {
  position: absolute;
  left: 13%;
  top: 43%;
  width: 4%;
  height: 20%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  filter: blur(5px);
  rotate: 24deg;
  opacity: 0;
}

.scene.is-active .glass-glint { animation: glint 4.6s 1.4s ease-in-out infinite; }

/* Navigation */
.scene-nav {
  position: absolute;
  z-index: 25;
  left: var(--gutter);
  inset-block-end: clamp(108px, 14vh, 150px);
  display: flex;
  align-items: center;
  gap: 16px;
  direction: ltr;
  animation: fade-up .9s 2s var(--ease) both;
}

.arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(2,5,10,.18);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, transform .3s var(--ease);
}

.arrow:hover {
  background: rgba(22,140,255,.18);
  border-color: rgba(88,215,255,.55);
  transform: scale(1.06);
}

.arrow svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.scene-tabs { display: flex; gap: 11px; }

.scene-tab {
  width: 82px;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: start;
}

.scene-tab span {
  display: block;
  margin-block-end: 8px;
  color: var(--faint);
  font: 500 .58rem/1 "Inter", sans-serif;
  transition: color .3s ease;
}

.scene-tab i {
  display: block;
  height: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.13);
}

.scene-tab b {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
}

.scene-tab.is-active span { color: var(--white); }
.scene-tab.is-active b { animation: progress var(--scene-time) linear forwards; }

/* Declaration and footer */
.declaration {
  position: absolute;
  z-index: 24;
  right: var(--gutter);
  inset-block-end: clamp(88px, 10vh, 118px);
  max-width: 240px;
  text-align: start;
  animation: fade-up .9s 2.08s var(--ease) both;
}

.declaration small {
  display: block;
  margin-block-end: 8px;
  color: var(--cyan);
  font: 500 .58rem/1 "Inter", sans-serif;
  letter-spacing: .24em;
}

.declaration strong {
  font-weight: 400;
  font-size: .9rem;
  line-height: 1.7;
}

.footer {
  position: absolute;
  z-index: 25;
  inset-inline: var(--gutter);
  inset-block-end: 24px;
  display: flex;
  justify-content: space-between;
  color: var(--faint);
  font: 400 .54rem/1 "Inter", sans-serif;
  letter-spacing: .18em;
  animation: fade-up .9s 2.16s var(--ease) both;
}

[dir="ltr"] body {
  font-family: "Inter", system-ui, sans-serif;
}

[dir="ltr"] .scene h1,
[dir="ltr"] .scene h2 {
  font-size: clamp(2.5rem, 4.2vw, 4.25rem);
  letter-spacing: -.055em;
  line-height: 1.04;
}

[dir="ltr"] .scene__lead {
  line-height: 1.65;
}

[dir="rtl"] #scenePrev svg,
[dir="rtl"] #sceneNext svg {
  transform: rotate(180deg);
}

/* Animations */
@keyframes loader-brand {
  from { opacity: 0; letter-spacing: 1em; filter: blur(8px); }
  to { opacity: 1; letter-spacing: .65em; filter: none; }
}

@keyframes loader-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes loader-leave {
  to { opacity: 0; visibility: hidden; clip-path: inset(0 0 100%); }
}

@keyframes fade-down {
  from { opacity: 0; translate: 0 -14px; }
  to { opacity: 1; translate: 0; }
}

@keyframes fade-up {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0; }
}

@keyframes reveal-up {
  to { opacity: 1; translate: 0; }
}

@keyframes title-up {
  to { opacity: 1; translate: 0; }
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 8px rgba(88,215,255,0); }
}

@keyframes progress { to { transform: scaleX(1); } }

@keyframes grain {
  0%, 100% { translate: 0; }
  50% { translate: -1% 1%; }
}

@keyframes cone-breathe {
  0%, 100% { opacity: .4; scale: .96; }
  50% { opacity: .82; scale: 1.06; }
}

@keyframes air-flow {
  0% { opacity: 0; transform: rotate(var(--angle)) translateX(0) scaleX(.25); }
  22% { opacity: .75; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateX(11vw) scaleX(1.28); }
}

@keyframes mist-one {
  0%, 100% { opacity: .15; translate: 0; scale: .9; }
  50% { opacity: .8; translate: 7vw 5vh; scale: 1.16; }
}

@keyframes mist-two {
  0%, 100% { opacity: .08; translate: 0; }
  50% { opacity: .52; translate: 9vw -2vh; }
}

@keyframes light-scan {
  0%, 15% { left: -20%; opacity: 0; }
  35% { opacity: 1; }
  70%, 100% { left: 110%; opacity: 0; }
}

@keyframes ring-pulse {
  0%, 100% { opacity: .28; scale: .92; }
  50% { opacity: .78; scale: 1.04; }
}

@keyframes ring-spin {
  from { opacity: .5; rotate: 0deg; }
  to { opacity: .5; rotate: 360deg; }
}

@keyframes glint {
  0%, 20% { opacity: 0; translate: -20px 20px; }
  45% { opacity: .75; }
  75%, 100% { opacity: 0; translate: 90px -38px; }
}

/* Responsive */
@media (max-width: 1000px) {
  .scene__copy { width: min(510px, 52vw); }
  .water-ring { left: 8.7%; top: 43.5%; width: 19vw; }
}

@media (max-width: 720px) {
  body { overflow: auto; }

  .launch {
    min-height: 100svh;
    height: 100svh;
  }

  .header { padding-block-start: 22px; }
  .status span:last-child { display: none; }
  .header__meta { gap: 8px; }
  .language-switch { min-width: 46px; padding-inline: 10px; }

  .scene__media img {
    object-position: 26% center;
  }

  .scene__shade {
    background:
      linear-gradient(180deg, rgba(2,5,10,.12) 0 34%, rgba(2,5,10,.72) 61%, rgba(2,5,10,.98) 100%),
      linear-gradient(90deg, rgba(2,5,10,.12), rgba(2,5,10,.28));
  }

  .scene__copy {
    right: var(--gutter);
    left: var(--gutter);
    inset-block-start: auto;
    inset-block-end: 205px;
    width: auto;
    translate: 0;
  }

  .scene h1,
  .scene h2 { font-size: clamp(2.2rem, 11vw, 3.5rem); }

  .scene__number { margin-block-end: 13px; }
  .scene__lead { margin-block-start: 14px; }

  .scene-nav {
    left: var(--gutter);
    right: var(--gutter);
    inset-block-end: 132px;
    justify-content: space-between;
  }

  .scene-tab { width: clamp(48px, 15vw, 72px); }
  .arrow { width: 44px; height: 44px; }

  .declaration {
    right: var(--gutter);
    left: var(--gutter);
    inset-block-end: 58px;
    max-width: none;
  }

  .declaration strong { font-size: .78rem; }
  .footer { inset-block-end: 18px; }
  .footer p:first-child { opacity: .75; }

  .air-stream { left: 20%; top: 27%; width: 42vw; }
  .air-stream--2 { top: 30%; width: 48vw; }
  .air-stream--3 { top: 33%; width: 54vw; }
  .air-stream--4 { top: 36%; width: 45vw; }
  .air-cone { top: 24%; left: 20%; width: 66%; height: 45%; }

  .water-ring { left: 8%; top: 43%; width: 31vw; }
}

@media (max-height: 720px) and (min-width: 721px) {
  .scene__copy { translate: 0 -42%; }
  .scene h1, .scene h2 { font-size: clamp(2.5rem, 4.7vw, 4.5rem); }
  .scene__lead { margin-block-start: 16px; }
  .scene-nav { inset-block-end: 105px; }
  .declaration { inset-block-end: 66px; }
  .footer { inset-block-end: 16px; }
}

@media (max-width: 390px) {
  :root { --gutter: 18px; }
  .scene__copy { inset-block-end: 205px; }
  .scene__lead { font-size: .9rem; }
  .scene-nav { gap: 8px; }
  .scene-tabs { gap: 5px; }
  .footer p:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .loader { display: none; }
  .air-cone, .air-stream, .cold-mist, .light-scan, .water-ring, .glass-glint, #airCanvas { display: none; }
  .scene.is-active .scene__number,
  .scene.is-active h1 span,
  .scene.is-active h2 span,
  .scene.is-active .scene__lead,
  .scene.is-active .scene__english {
    opacity: 1;
    translate: 0;
  }
}