/* ALEASAT preview page (aleasat.html). Laid out like the PhoenixRise case
   study: the shared header over a full-width hero that fades into the page,
   then content at the same width. The hero stays a night-sky scene in both
   themes so the satellite imagery reads; everything below follows the
   theme. */

.aleasat-page {
  --aleasat-page-bg: #0e0a1c;
  --aleasat-text: #f5f1fa;
  --aleasat-muted: #c9c2d9;
  --aleasat-accent: #c9a8ff;
  --aleasat-space: #05060f;
  --aleasat-width: min(1320px, calc(100% - clamp(40px, 8vw, 128px)));
  min-width: 320px;
  margin: 0;
  padding: 0;
  color: var(--aleasat-text);
  background: var(--aleasat-page-bg);
  font-family: "Plus Jakarta Sans", sans-serif;
}

/* Light mode: a white page under the hero, like PhoenixRise */
:root[data-portfolio-theme="light"] .aleasat-page {
  --aleasat-page-bg: #ffffff;
  --aleasat-text: #0e0a1c;
  --aleasat-muted: #3d3452;
  --aleasat-accent: #4d317b;
}

/* main.css gives id-less sections a border and margins; each section here
   sets its own spacing and is centred at the page width */
.aleasat-page main section {
  border: 0;
}

.aleasat-page .aleasat-hero,
.aleasat-page .aleasat-coming-soon,
.aleasat-page .aleasat-related {
  box-sizing: border-box;
  width: var(--aleasat-width);
  margin: 0 auto;
}

/* ----- Header: always the dark-theme colours, over the night sky ----- */

.aleasat-page .portfolio-header {
  --portfolio-top-bg: transparent;
  --portfolio-top-text: #c9a8ff;
  --portfolio-top-strong: #f5f1fa;
  --portfolio-top-focus: #f5f1fa;
  --portfolio-menu-bg: #0e0a1c;
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0;
}

.aleasat-page .portfolio-nav {
  background: transparent;
}

/* ----- Hero ----- */

/* A deep blue night sky with a few faint stars, fading into the page */
.aleasat-hero-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--aleasat-space);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgb(255 255 255 / 70%), transparent),
    radial-gradient(1px 1px at 24% 64%, rgb(255 255 255 / 55%), transparent),
    radial-gradient(1.5px 1.5px at 38% 14%, rgb(255 255 255 / 60%), transparent),
    radial-gradient(1px 1px at 52% 40%, rgb(255 255 255 / 45%), transparent),
    radial-gradient(1.5px 1.5px at 66% 18%, rgb(255 255 255 / 65%), transparent),
    radial-gradient(1px 1px at 78% 58%, rgb(255 255 255 / 50%), transparent),
    radial-gradient(1.5px 1.5px at 88% 30%, rgb(255 255 255 / 60%), transparent),
    radial-gradient(1px 1px at 94% 72%, rgb(255 255 255 / 45%), transparent),
    radial-gradient(1px 1px at 6% 80%, rgb(255 255 255 / 50%), transparent),
    radial-gradient(ellipse 70% 55% at 50% 100%, rgb(36 72 140 / 45%), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 0%, rgb(80 50 150 / 30%), transparent 70%);
}

/* The PhoenixRise hero's fade into the page (phoenixrise.css): a gradient
   over the bottom 30% that eases into the page colour, drawn above the
   artwork so the laptop melts into the page */
.aleasat-hero-shell::after {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 30%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.025) 12%,
    rgba(255, 255, 255, 0.07) 24%,
    rgba(255, 255, 255, 0.15) 38%,
    rgba(255, 255, 255, 0.29) 53%,
    rgba(255, 255, 255, 0.49) 68%,
    rgba(255, 255, 255, 0.71) 81%,
    rgba(255, 255, 255, 0.88) 91%,
    rgba(255, 255, 255, 0.97) 97%,
    var(--aleasat-page-bg) 100%
  );
  content: "";
  pointer-events: none;
}

:root[data-portfolio-theme="dark"] .aleasat-hero-shell::after {
  background: linear-gradient(
    to bottom,
    rgba(14, 10, 28, 0) 0%,
    var(--aleasat-page-bg) 100%
  );
}

/* No bottom padding: the laptop runs to the hero's edge and fades out, as
   PhoenixRise's phones do */
.aleasat-hero {
  position: relative;
  z-index: 1;
  padding: clamp(52px, 4.3vw, 66px) 0 0;
  text-align: center;
}

/* The wordmark sits where PhoenixRise's title does, at a similar size */
.aleasat-page .aleasat-hero__logo {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  color: #f5f1fa;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(46px, 5.2vw, 80px);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.12;
  text-align: center;
  /* The letter spacing also trails the last letter; this re-centres it */
  text-indent: 0.14em;
}

.aleasat-page .aleasat-hero__intro p {
  max-width: 900px;
  margin: clamp(12px, 1.6vw, 22px) auto 0;
  color: #e4defa;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(20px, 2.35vw, 36px);
  font-weight: 400;
  line-height: 1.4;
}

/* Satellite floating on the left, the site on a laptop to the right running
   down into the fade. Both images are small, so they're shown no larger than
   about 1.5x their own size to stay crisp. */
.aleasat-hero__art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(16px, 6vw, 110px);
  margin: clamp(36px, 4vw, 56px) auto 0;
}

.aleasat-hero__satellite {
  display: block;
  width: min(30%, 340px);
  height: auto;
  /* Raised, as if in orbit beside the laptop */
  align-self: center;
  transform: rotate(-6deg);
}

/* The PhoenixRise phones' fade (phoenixrise.css): solid to 46%, then
   easing to transparent at the bottom edge */
.aleasat-hero__website {
  display: block;
  width: min(58%, 560px);
  height: auto;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 46%,
    rgba(0, 0, 0, 0.94) 52%,
    rgba(0, 0, 0, 0.7) 62%,
    rgba(0, 0, 0, 0.46) 72%,
    rgba(0, 0, 0, 0.25) 82%,
    rgba(0, 0, 0, 0.09) 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 46%,
    rgba(0, 0, 0, 0.94) 52%,
    rgba(0, 0, 0, 0.7) 62%,
    rgba(0, 0, 0, 0.46) 72%,
    rgba(0, 0, 0, 0.25) 82%,
    rgba(0, 0, 0, 0.09) 93%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* ----- Coming soon ----- */

.aleasat-page .aleasat-coming-soon {
  max-width: 760px;
  padding: clamp(8px, 2vw, 24px) 0 0;
  text-align: center;
}

/* A small pill, like the homepage card's "Case study coming soon" badge */
.aleasat-page .aleasat-coming-soon__label {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--aleasat-accent) 55%, transparent);
  border-radius: 999px;
  color: var(--aleasat-accent);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.aleasat-page .aleasat-coming-soon p {
  margin: 20px 0 0;
  color: var(--aleasat-text);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.6;
}

/* ----- Completed case studies ----- */

.aleasat-page .aleasat-related {
  padding: clamp(48px, 6vw, 80px) 0 clamp(72px, 8vw, 112px);
}

.aleasat-page .aleasat-related__intro {
  margin: 0 0 clamp(24px, 3vw, 36px);
  color: var(--aleasat-muted);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

/* The cards match PhoenixRise's "More Case Studies" (phoenixrise.css):
   two columns, compact padding and type */
.aleasat-related .portfolio-case-studies {
  /* As wide as PhoenixRise's content column, so the cards are the same size */
  width: min(990px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px);
}

.aleasat-related .portfolio-case-card {
  --portfolio-case-padding: 26px;
  min-height: 345px;
}

.aleasat-related .portfolio-case-card__eyebrow {
  margin-bottom: 12px;
  font-size: 16px;
}

.aleasat-related .portfolio-case-card h3 {
  margin-bottom: 12px;
  font-size: clamp(20px, 1.85vw, 22px);
  line-height: 1.35;
}

.aleasat-related .portfolio-case-card__tags li {
  font-size: 15px;
}

.aleasat-related .portfolio-case-card--ux-was-here {
  align-self: stretch;
}

.aleasat-related .portfolio-case-card:focus-visible {
  outline: 3px solid var(--aleasat-accent);
  outline-offset: 5px;
}

/* ----- Small screens ----- */

@media (max-width: 768px) {
  .aleasat-page {
    --aleasat-width: calc(100% - 40px);
  }

  .aleasat-hero {
    padding-top: clamp(38px, 8vw, 56px);
  }

  .aleasat-page .aleasat-hero__logo {
    font-size: clamp(40px, 11vw, 56px);
  }

  .aleasat-page .aleasat-hero__intro p {
    max-width: 600px;
    font-size: clamp(19px, 5.5vw, 23px);
    line-height: 1.42;
  }

  .aleasat-hero__satellite {
    width: 34%;
  }

  .aleasat-hero__website {
    width: 62%;
  }
}

/* One column below 900px, as on PhoenixRise */
@media (max-width: 900px) {
  .aleasat-related .portfolio-case-studies {
    width: min(620px, 100%);
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .aleasat-related .portfolio-case-card {
    min-height: 0;
  }
}