:root {
  --pink: #d0826f;
  --blue: #3b4358;
  --darklblue: #1c202b;
  --mainfont: "Futura 100", "Futura", "Trebuchet MS", Arial, sans-serif;
  --script: "Covered By Your Grace", "Bradley Hand", cursive;
  --background: #f7f5f2;
}

/* -------------------------------------------- */
/* Global */
/* -------------------------------------------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

p {
  font-family: var(--mainfont);
}

h2 {
  font-family: var(--mainfont);
  font-size: 64px;
  text-transform: uppercase;
}

h3 {
  font-family: var(--mainfont);
  font-size: 46px;
  font-weight: lighter;
  font-style: italic;
}

/* Sound Popup  */

/* Popup Overlay */
#soundPopup {
  position: fixed;
  inset: 0;
  background: rgba(28, 32, 43, 0.88);
  backdrop-filter: blur(8px);

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 99999;
}

/* Popup Box */
.sound-box {
  width: 1000px;
  max-width: 90%;
  padding: 50px;
  border-radius: 30px;
  background: white;
  text-align: center;
}

.sound-box h2 {
  line-height: 1;
  color: var(--blue);
}

.sound-box p {
  margin-bottom: 30px;
  color: var(--blue);
  font-size: 20px;
  line-height: 1.4;
}

/* -------------------------------------------- */
/* Scroll Progress Bar */
/* -------------------------------------------- */

.scroll-progress {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background: rgba(255, 255, 255, 0.08);

  z-index: 9999;

  pointer-events: none;
}

.scroll-progress-bar {
  width: 0%;
  height: 100%;

  background: var(--blue);

  transition: width 0.08s linear;
}
/* -------------------------------------------- */
/* Logo Introduction */
/* -------------------------------------------- */

.logo {
  min-height: 100vh;
  width: 100%;
  padding: 6vh 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-inner {
  position: relative;
  width: min(92vw, 1100px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 100px;
}

.logo svg {
  position: absolute;
  top: clamp(30px, 2vw, 80px);
  left: clamp(0px, 2vw, 50px);
  width: clamp(240px, 28vw, 420px);
  height: auto;
  padding: 0;
  z-index: 2;
}

.name-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  margin-top: 0;
  transform: translateY(120px);
}

#name-1,
#name-2 {
  width: 100%;
  margin: 0;
  padding: 0;

  color: var(--blue);
  font-family: var(--mainfont);
  font-weight: 700;
  text-align: right;
  line-height: 0.78;

  font-size: clamp(60px, 10vw, 150px);
}

#multimedia {
  width: 100%;
  margin-top: clamp(4px, 1vw, 12px);
  padding-right: clamp(0px, 4vw, 90px);

  color: var(--pink);
  font-family: var(--mainfont);
  font-weight: 100;
  text-align: right;
  line-height: 1;

  font-size: clamp(18px, 3.6vw, 42px);
}

.path {
  fill: var(--pink);
  fill-opacity: 0;
  stroke: var(--pink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.split {
  will-change: transform;
}

.char {
  display: inline-block;
}

.button-container {
  display: flex;
  flex-direction: column;
  margin-top: clamp(80px, 10vw, 160px);
  width: 100%;

  font-family: var(--mainfont);

  text-align: center;
  color: var(--blue);
  gap: 20px;
}

.button-array {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  gap: 20px;
}

.scrollText {
  margin-top: clamp(80px, 5vw, 160px);
  width: 100%;
  text-align: center;
  color: var(--blue);
}
/* -------------------------------------------- */
/* Introduction */
/* -------------------------------------------- */

.introduction {
  min-height: 280vh;
  position: relative;
  background-color: var(--blue);
  width: 100vw;
  color: white;
}

.intro-text {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: "Futura 100", sans-serif;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
  z-index: 2;
  font-size: 48px;
}

.intro-line {
  display: block;
}

#human-centred {
  font-family: "Covered By Your Grace", cursive;
  display: inline-block;
  margin-right: 0.15em;
  font-size: larger;
}

.digital {
  display: inline-block;
}

#circleAnimation {
  position: sticky;
  top: 50%;

  width: clamp(260px, 34vw, 487px);
  height: clamp(380px, 50vw, 708px);

  margin-left: auto;
  margin-right: auto;

  transform: translateY(-50%) scale(0);
  transform-origin: center center;

  border-radius: 999px;
  background: #000;
  opacity: 0.12;
  z-index: 1;
}

/* -------------------------------------------- */
/* Buttons */
/* -------------------------------------------- */

button {
  font-family: var(--mainfont);
  padding: 12px 32px;
  border-radius: 25px;
  background-color: var(--pink);
  color: white;
  border: none;
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition:
    opacity 0.2s,
    background-color 0.2s,
    transform 0.2s;
}

button:hover {
  opacity: 1;
  background-color: var(--blue);
  transform: scale(0.95);
}

/* -------------------------------------------- */
/* PART 1 — Splitz */
/* -------------------------------------------- */

.part1 {
  position: sticky;
  top: 0;
  margin-top: -1000px;
  height: 100vh;
  width: 100%;

  /* keep all your existing layout exactly */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px;
  padding: 6rem 6vw;
  background-color: rgba(0, 0, 0, 0);
  overflow: hidden;

  /* starts invisible — GSAP fades it in at scroll position ~3.9 */
  opacity: 0;

  /* must sit above circle (z:1) and intro-text (z:2) */
  z-index: 10;
}

#title {
  color: var(--pink);
  margin-bottom: -10px;
  margin-left: 20px;
  font-family: var(--mainfont);
}

#splitz-container,
#nameZen-container,
#omi-container {
  display: flex;
  flex-direction: column;
  z-index: 6;
}

#splitz,
#nameZen {
  max-width: 700px;
  color: var(--blue);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 50;
  border-radius: 55px;
  background: #f0f1f3;
  padding: 50px 100px 50px 50px;
  text-align: left;
}

#splitz p,
#nameZen p {
  line-height: 1.5;
  width: 600px;
}

/* floating decorations */
.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.deco-plane {
  top: 0;
  right: 0;
  transform: rotate(17deg);
  z-index: 20;
  height: 286.68px;
  scale: 0.7;
}

.deco-money-tl {
  top: 20%;
  right: 25%;
  z-index: 8;
  width: 204px;
  height: 169px;
  transform: rotate(-23.135deg);
}

.deco-money-ll {
  bottom: 30%;
  left: 0%;
  z-index: 8;
  width: 255px;
  height: 211.25px;
  transform: rotate(-24deg);
}

.deco-money-lr {
  bottom: 10%;
  right: 40%;
  z-index: 8;
  width: 255px;
  height: 211.25px;
  transform: rotate(-24deg);
}

.deco-bag-bl {
  width: clamp(90px, 14vw, 226px);
  height: auto;

  bottom: clamp(0px, 1vh, 10px);
  left: clamp(20px, 5vw, 130px);

  z-index: 8;
}

.deco-money-br {
  bottom: 4%;
  right: 3%;
  z-index: 10;
  width: 345.875px;
  height: 286.68px;
  transform: rotate(21.566deg);
}

.deco-money-ll-2 {
  bottom: 65%;
  left: -5%;
  z-index: 8;
  width: 240px;
  transform: rotate(22deg);
}

.deco-money-lr-2 {
  bottom: 35%;
  right: 28%;
  z-index: 8;
  width: 220px;
  transform: rotate(-18deg);
}

.deco-money-br-2 {
  bottom: 8%;
  right: -2%;
  z-index: 8;
  width: 285px;
  transform: rotate(14deg);
}

.deco-money-tl-2 {
  top: -5%;
  right: 45%;
  z-index: 8;
  width: 190px;
  transform: rotate(-12deg);
}

/* -------------------------------------------- */
/* Horizontal */
/* -------------------------------------------- */

.horizontalscrolling {
  position: relative;
  width: 400vw;
  height: 100vh;
  display: flex;
  background: rgba(0, 0, 0, 0);
  z-index: 20;
  overflow: hidden;
}

.part1,
.part2,
.part3,
.part4 {
  flex: 0 0 100vw;
  width: 100vw;
  max-width: 100vw;
}

.iphone {
  position: relative;
  width: clamp(300px, 26vw, 430px);
  flex-shrink: 0;
  z-index: 5;
}

.splitz-phone-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* -------------------------------------------- */
/* PART 2 — NameZen */
/* -------------------------------------------- */

.part2 {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 6vw;
  gap: 40px;
  will-change: transform;
  z-index: 15;
}

/* PART 2 layering fix */
.part2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* content stays above */
#nameZen-container,
.mac-wrapper {
  position: relative;
  z-index: 5;
}

/* the actual card must be above ripples */
#nameZen,
.part2 #title {
  position: relative;
  z-index: 50;
}

.ripple-wrap,
.ripple-wrap-2,
.ripple-wrap-3,
.ripple-wrap-4 {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.mac-wrapper {
  position: relative;
  width: clamp(420px, 44vw, 767px);
  aspect-ratio: 767 / 703;
  height: auto;
  flex-shrink: 1;
  z-index: 100;
}

.mac-frame {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 101;
}

.macImg {
  position: absolute;
  top: 34.5%;
  left: 49.9%;
  transform: translate(-50%, -50%);
  width: 96.5%;
  height: 65%;
  object-fit: cover;
  z-index: 103;
  border-radius: 6px;
}

/* -------------------------------------------- */
/* FIRST RIPPLE COLLECTION */
/* -------------------------------------------- */

/* ripple container */
.ripple-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  scale: 0.25;
}

/* circles */
.ripple {
  position: absolute;
  top: 1700px;
  left: 400px; /* behind mac + NameZen area */
  transform: translate(-50%, -50%);
  width: 700px;
}

/* -------------------------------------------- */
/* SECOND RIPPLE COLLECTION */
/* -------------------------------------------- */

.ripple-wrap-2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  scale: 0.3;
}

/* circles */
.ripple2 {
  position: absolute;
  top: -200px;
  left: -1000px; /* behind mac + NameZen area */
  transform: translate(-50%, -50%);
  width: 700px;
}

/* -------------------------------------------- */
/* THIRD RIPPLE COLLECTION */
/* -------------------------------------------- */

.ripple-wrap-3 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  scale: 0.4;
}

.ripple3 {
  position: absolute;
  top: 30%;
  left: 3100px;
  transform: translate(-50%, -50%);
  width: 720px;
  will-change: transform, opacity;
}

/* -------------------------------------------- */
/* FORTH RIPPLE COLLECTION */
/* -------------------------------------------- */

.ripple-wrap-4 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  scale: 0.4;
}

.ripple4 {
  position: absolute;
  top: -400px;
  left: 1000px;
  transform: translate(-50%, -50%);
  width: 720px;
  opacity: 0;
  will-change: transform, opacity;
}

/* -------------------------------------------- */
/* PART 3 — Omi */
/* -------------------------------------------- */

.part3 {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 6vw;
  gap: 40px;
  will-change: transform;
  z-index: 15;
}

#omi-container {
  display: flex;
  flex-direction: column;
  z-index: 6;
}

#omi {
  max-width: 700px;
  color: var(--blue);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 6;
  border-radius: 55px;
  background: rgba(59, 67, 88, 0.09);
  padding: 50px 100px 50px 50px;
  text-align: left;
}

#omi p {
  line-height: 1.5;
  width: 600px;
}

.deco-omi-1,
.deco-omi-2 {
  position: absolute;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
}

.deco-omi-1 {
  bottom: 6%;
  left: 5%;
  z-index: 12;
  width: 200px;
}

.deco-omi-2 {
  top: 17%;
  right: 10%;
  z-index: 12;
  width: 150px;
}
.iphone2 {
  position: relative;
  width: clamp(300px, 26vw, 430px);
  flex-shrink: 0;
  z-index: 5;
}

.omi-phone-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* -------------------------------------------- */
/* PART 4 — Human Error 404 */
/* -------------------------------------------- */

.part4 {
  position: relative;
  height: 100vh;
  width: 100vw;
  max-width: 100vw;

  background: rgba(0, 0, 0, 0);
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 6rem 6vw;
  gap: 40px;

  will-change: transform;
  z-index: 15;
}

.human-error-preview {
  position: relative;
  width: clamp(420px, 44vw, 767px);
  flex-shrink: 0;
  z-index: 5;
}

.human-error-preview img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

#human-error-container {
  display: flex;
  flex-direction: column;
  z-index: 6;
}

#human-error-card {
  max-width: 700px;
  color: var(--blue);

  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 50;

  border-radius: 55px;
  background: #f0f1f3;

  padding: 50px 100px 50px 50px;
  text-align: left;
}

#human-error-card p {
  line-height: 1.5;
  width: 600px;
}

.star {
  position: absolute;
  color: var(--blue);
  font-size: clamp(90px, 13vw, 190px);
  line-height: 1;
  font-weight: 900;
  z-index: 100;

  font-family: "input-mono", monospace;
  font-weight: bolder;
}

#star-1 {
  top: 20%;
  left: 85%;
}

#star-2 {
  bottom: 15%;
  right: 90%;
  transform: scale(0.6);
}

/* -------------------------------------------- */
/* Motion Graphics */
/* -------------------------------------------- */

.motion-title-section {
  width: 100vw;
  height: 100vh;
  background: var(--blue);
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  z-index: 80;

  /* this makes it cover Part 2 from below */
  margin-top: -30vh;
}

.motion-title-section h2 {
  margin: 0;
}

/* hidden by default */
.motion-title-mobile {
  display: none;
}

/* phone only */
@media (max-width: 500px) {
  .motion-title-section {
    display: none;
  }

  .motion-title-mobile {
    display: flex;

    min-height: 100vh;
    width: 100vw;

    align-items: center;
    justify-content: center;

    background: var(--blue);
    text-align: center;
  }

  .motion-title-mobile h2 {
    font-family: var(--mainfont);
    color: white;
    font-size: clamp(48px, 15vw, 72px);
    margin: 0;
  }
}

/* -------------------------------------------- */
/* Showreel */
/* -------------------------------------------- */
.showreel-section {
  width: 100vw;
  height: 100vh;
  background: var(--darklblue);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 100;
  margin-top: 0;
  overflow: hidden;
}

#showreelVideo {
  display: block;
  width: auto;
  height: 100vh;
  max-width: 100vw;
  object-fit: fill;
  transform-origin: center center;
}

.leaving-video-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
}
.about-section {
  width: 100vw;
  min-height: 100vh;
  background: white;
  color: var(--blue);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6vw, 100px);

  padding: clamp(80px, 8vw, 120px) clamp(24px, 6vw, 100px);

  position: relative;
  z-index: 90;
}

/* LEFT SIDE */
.about-image-block {
  width: min(42vw, 520px);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-title {
  margin-bottom: 20px;
  line-height: 0.9;
}

.about-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;

  border-radius: 20px;
  display: block;
}

/* RIGHT SIDE */
.about-text-block {
  width: min(42vw, 620px);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-text-block p {
  width: 100%;
  margin: 0;

  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.8;
}

.about-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;

  margin-top: 32px;
}

/* ----------------------------------------
   COPYRIGHT
---------------------------------------- */

.copyright {
  text-align: right;
  font-family: var(--mainfont);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--blue);
  opacity: 0.6;

  padding-right: 30px;
  padding-bottom: 30px;
}

.copyright p {
  margin: 0;
  color: var(--blue);
  opacity: 0.7;
  font-size: 14px;
  letter-spacing: 0.05em;
}