/* =========================================================
   SASOL AI INDABA - SPLASH PAGE (landing.html only)
   The AI Indaba background image is the main visual. On laptop,
   desktop and tablet the copy sits directly on the image; only
   phones get a compact semi-transparent panel for readability.
   The font, square corners and "no borders, shadows or
   animation" come from brand-fixes.css.

   Breakpoints
     1024px and wider  laptop / desktop  transparent, left side
     768px - 1023px    tablet            transparent, scaled
     767px and below   phone             compact translucent panel
   ========================================================= */

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

html,
body {
  margin: 0;
  padding: 0;
}


/* =========================================================
   PAGE AND BACKGROUND (laptop / desktop: 1024px and wider)
   The portrait and network artwork sit on the right of the
   image, so it is anchored right of centre.
   ========================================================= */

body.ai-splash {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  color: #FFFFFF;
  background: #003961 url("../assets/images/bg-desktop.webp") 70% center / cover no-repeat fixed;
  transition: opacity 0.45s ease;
}

/* Fade out when entering the experience (landing.js) */
body.ai-splash.experience-leaving {
  opacity: 0;
}


/* =========================================================
   SASOL LOGO (top left)
   ========================================================= */

.splash-header {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  padding: 32px 40px;
}

.splash-logo {
  display: block;
  width: 120px;
  height: auto;
}


/* =========================================================
   LAYOUT: copy on the left of the image, vertically centred
   ========================================================= */

.splash-main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 120px 40px 96px 9vw;
}


/* =========================================================
   HERO COPY: transparent, directly on the image
   (the left of the image is dark navy, so white and CI blue
   text read clearly without a panel)
   ========================================================= */

.splash-copy {
  max-width: 720px;
  padding: 0;
  background: transparent;
  text-align: left;
}

.splash-kicker {
  margin: 0 0 16px;
  color: var(--brand-accent, #2C93D9);
  font-size: clamp(18px, 1.35vw, 22px);
  font-weight: 700;
  line-height: 1.3;
}

.splash-copy h1 {
  margin: 0 0 28px;
  color: #FFFFFF;
  font-size: clamp(80px, 7.2vw, 128px);
  font-weight: 700;
  line-height: 0.95;
  white-space: nowrap;
}

.splash-tagline {
  margin: 0 0 44px;
  color: #FFFFFF;
  font-size: clamp(22px, 1.7vw, 28px);
  font-weight: 400;
  line-height: 1.45;
}

.splash-tagline span {
  display: block;
}


/* =========================================================
   ENTER THE EXPERIENCE: solid CI blue, flat white on hover
   ========================================================= */

.experience-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 300px;
  min-height: 60px;
  padding: 16px 28px;
  background: var(--brand-accent, #2C93D9);
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.experience-button:hover,
.experience-button:focus-visible {
  background: #FFFFFF;
  color: #003961;
}

.experience-arrow {
  font-size: 22px;
  line-height: 1;
}


/* =========================================================
   TABLET AND PHONE (1023px and narrower): smaller logo,
   background scrolls with the page
   ========================================================= */

@media (max-width: 1023px) {
  body.ai-splash {
    background-attachment: scroll;
  }

  .splash-header {
    padding: 28px 32px;
  }

  .splash-logo {
    width: 104px;
  }

  .splash-main {
    padding: 112px 8vw 72px;
  }

  .splash-kicker {
    margin-bottom: 14px;
    font-size: 18px;
  }

  .splash-copy h1 {
    margin-bottom: 24px;
    font-size: clamp(64px, 9.5vw, 88px);
  }

  .splash-tagline {
    margin-bottom: 36px;
    font-size: 22px;
  }

  .experience-button {
    min-width: 280px;
    min-height: 58px;
    font-size: 17px;
  }
}

/* Tablet portrait: tablet image; copy in the upper part, above the portrait */
@media (max-width: 1023px) and (orientation: portrait) {
  body.ai-splash {
    background-image: url("../assets/images/bg-tablet.webp");
    background-position: center bottom;
  }

  .splash-main {
    align-items: flex-start;
    padding-top: 20vh;
  }
}

/* Tablet landscape: the landscape (desktop) image keeps the portrait
   beside the copy instead of behind it */
@media (max-width: 1023px) and (orientation: landscape) {
  body.ai-splash {
    background-position: 45% center;
  }
}


/* =========================================================
   PHONE (767px and narrower): compact semi-transparent panel
   over the image, centred content, full-width button
   ========================================================= */

@media (max-width: 767px) {
  .splash-header {
    padding: 20px;
  }

  .splash-logo {
    width: 88px;
  }

  .splash-main {
    align-items: flex-start;
    justify-content: center;
    padding: 96px 18px 32px;
  }

  .splash-copy {
    width: fit-content;
    max-width: 100%;
    padding: 28px 22px;
    background: rgba(0, 40, 65, 0.7);
    text-align: center;
  }

  .splash-kicker {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .splash-copy h1 {
    margin-bottom: 18px;
    font-size: clamp(40px, 13vw, 64px);
  }

  .splash-tagline {
    margin-bottom: 24px;
    font-size: clamp(17px, 4.9vw, 20px);
    line-height: 1.5;
  }

  .experience-button {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 14px 22px;
  }
}

/* Phone portrait: the portrait-shaped mobile image */
@media (max-width: 767px) and (orientation: portrait) {
  body.ai-splash {
    background-image: url("../assets/images/bg-mobile.webp");
    background-position: 70% center;
  }
}


/* =========================================================
   SHORT LANDSCAPE SCREENS (for example a phone on its side)
   ========================================================= */

@media (orientation: landscape) and (max-height: 560px) {
  .splash-header {
    padding: 16px 24px;
  }

  .splash-logo {
    width: 88px;
  }

  /* Copy stays on the left so the portrait on the right is clear */
  .splash-main {
    align-items: center;
    justify-content: flex-start;
    padding-top: 56px;
    padding-bottom: 16px;
    padding-left: 6vw;
  }

  .splash-kicker {
    margin-bottom: 8px;
    font-size: 15px;
  }

  .splash-copy h1 {
    margin-bottom: 12px;
    font-size: 48px;
  }

  .splash-tagline {
    margin-bottom: 18px;
    font-size: 17px;
    line-height: 1.4;
  }

  .experience-button {
    min-height: 48px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  body.ai-splash {
    transition: none;
  }
}