/* =========================================================
   SLATE STUDIO
   MAINTENANCE PAGE
   RESPONSIVE SYSTEM
   ========================================================= */

:root {
  --slate-blue: #0026F9;
  --white: #ffffff;

  --font-display: "Anton", sans-serif;
  --font-body: "Manrope", sans-serif;
}


/* =========================================================
   RESET
   ========================================================= */

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

html {
  width: 100%;
  height: 100%;
  background: var(--slate-blue);
}

body {
  width: 100%;
  min-height: 100%;
  background: var(--slate-blue);
  color: var(--white);

  font-family: var(--font-body);

  overflow: hidden;

  cursor: none;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.maintenance {
  position: relative;

  width: 100%;
  height: 100dvh;
  min-height: 560px;

  padding:
    clamp(20px, 2.2vw, 40px)
    clamp(20px, 3vw, 60px);

  display: flex;
  flex-direction: column;

  overflow: hidden;
}


/* =========================================================
   NOISE
   ========================================================= */

.noise {
  position: fixed;

  inset: -50%;

  pointer-events: none;

  z-index: 50;

  opacity: 0.035;

  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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

  animation: noiseMove 0.2s steps(2) infinite;
}

@keyframes noiseMove {

  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(2%, -2%);
  }

  50% {
    transform: translate(-2%, 2%);
  }

  75% {
    transform: translate(1%, 2%);
  }

  100% {
    transform: translate(-1%, -1%);
  }

}


/* =========================================================
   CURSOR
   ========================================================= */

.cursor-ring {

  position: fixed;

  top: 0;
  left: 0;

  width: 38px;
  height: 38px;

  border: 1px solid rgba(255, 255, 255, 0.9);

  border-radius: 50%;

  pointer-events: none;

  z-index: 9999;

  transform:
    translate(-50%, -50%)
    scale(1);

  opacity: 0;

  mix-blend-mode: difference;

}


.cursor-ring::after {

  content: "";

  position: absolute;

  width: 5px;
  height: 5px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  background: white;

  border-radius: 50%;

}


/* =========================================================
   TOP BAR
   ========================================================= */

.topbar {

  position: relative;

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  z-index: 10;

  flex-shrink: 0;

}


.brand {

  font-family: var(--font-body);

  font-size: clamp(15px, 1.2vw, 20px);

  font-weight: 800;

  letter-spacing: -0.065em;

}


.brand span {

  font-size: 0.45em;

  vertical-align: top;

  margin-left: 2px;

}


.status {

  display: flex;

  align-items: center;

  gap: 9px;

  font-size: clamp(8px, 0.65vw, 11px);

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.1em;

}


.status-dot {

  width: 7px;
  height: 7px;

  flex-shrink: 0;

  background: white;

  border-radius: 50%;

  animation: pulse 1.6s infinite ease-in-out;

}


@keyframes pulse {

  0%,
  100% {

    opacity: 1;

    transform: scale(1);

  }

  50% {

    opacity: 0.3;

    transform: scale(0.65);

  }

}


/* =========================================================
   HERO
   ========================================================= */

.hero {

  position: relative;

  flex: 1;

  min-height: 0;

  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

}


/* =========================================================
   HERO LABEL
   ========================================================= */

.hero-label {

  position: absolute;

  top: clamp(35px, 7vh, 90px);

  left: 0;

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 30px;

  font-size: clamp(7px, 0.62vw, 10px);

  font-weight: 700;

  letter-spacing: 0.13em;

  line-height: 1.4;

  text-transform: uppercase;

  opacity: 0.72;

  z-index: 5;

}


/* =========================================================
   GIANT SLATE
   ========================================================= */

.slate-word {

  position: absolute;

  left: 50%;
  top: 50%;

  width: max-content;

  display: flex;

  justify-content: center;

  align-items: center;

  white-space: nowrap;

  pointer-events: none;

  z-index: 1;

  transform:
    translate(-50%, -50%);

}


/* Desktop large */

.letter {

  display: inline-block;

  font-family: var(--font-display);

  /*
    El tamaño se controla principalmente
    por el ancho de pantalla.
  */

  font-size: clamp(
    150px,
    27vw,
    520px
  );

  line-height: 0.78;

  letter-spacing: -0.065em;

  font-weight: 400;

  color: rgba(255, 255, 255, 0.98);

  will-change: transform, opacity;

  transform-origin: center center;

}


/* =========================================================
   CENTER MESSAGE
   ========================================================= */

.message {

  position: relative;

  z-index: 5;

  width: min(
    550px,
    45vw
  );

  margin-left: clamp(
    20px,
    7vw,
    140px
  );

  display: grid;

  grid-template-columns:
    clamp(45px, 5vw, 80px)
    1fr;

}


/* Number */

.message-number {

  padding-top: 7px;

  font-size: clamp(8px, 0.65vw, 10px);

  font-weight: 700;

  letter-spacing: 0.08em;

  opacity: 0.7;

}


/* Text */

.eyebrow {

  margin-bottom: clamp(
    7px,
    0.6vw,
    12px
  );

  font-size: clamp(
    8px,
    0.7vw,
    11px
  );

  font-weight: 700;

  letter-spacing: 0.13em;

  text-transform: uppercase;

}


h1 {

  font-family: var(--font-display);

  /*
    Se adapta al ancho de pantalla
    pero nunca se vuelve exageradamente grande.
  */

  font-size: clamp(
    60px,
    8vw,
    130px
  );

  line-height: 0.82;

  letter-spacing: -0.035em;

  font-weight: 400;

}


h1 span {

  color: transparent;

  -webkit-text-stroke:
    clamp(0.7px, 0.09vw, 1.4px)
    white;

}


.description {

  width: min(
    330px,
    27vw
  );

  margin-top: clamp(
    18px,
    1.7vw,
    30px
  );

  font-size: clamp(
    9px,
    0.72vw,
    12px
  );

  line-height: 1.6;

  font-weight: 500;

}


/* =========================================================
   PROGRESS
   ========================================================= */

.progress {

  position: absolute;

  right: 0;

  bottom: clamp(
    35px,
    8vh,
    90px
  );

  width: clamp(
    180px,
    18vw,
    320px
  );

  z-index: 5;

}


.progress-top {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 8px;

  font-size: clamp(
    7px,
    0.6vw,
    10px
  );

  font-weight: 700;

  letter-spacing: 0.1em;

}


.progress-track {

  position: relative;

  width: 100%;

  height: clamp(
    1px,
    0.12vw,
    2px
  );

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

  overflow: hidden;

}


.progress-bar {

  width: 78%;

  height: 100%;

  background: white;

  transform-origin: left center;

}


/* =========================================================
   HORIZONTAL GUIDE
   ========================================================= */

.hero::before {

  content: "";

  position: absolute;

  left: 0;
  top: 50%;

  width: 100%;

  height: 1px;

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

  z-index: 0;

}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {

  position: relative;

  width: 100%;

  display: grid;

  grid-template-columns:
    1fr
    1fr
    1fr;

  align-items: end;

  flex-shrink: 0;

  z-index: 10;

  font-size: clamp(
    7px,
    0.58vw,
    10px
  );

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

}


.footer-center {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

}


.footer-line {

  width: clamp(
    20px,
    2vw,
    35px
  );

  height: 1px;

  background: white;

}


.footer-right {

  text-align: right;

}


/* =========================================================
   LARGE DESKTOP
   1440px +
   ========================================================= */

@media (min-width: 1440px) {

  .message {

    margin-left: 8vw;

  }


  .description {

    width: 350px;

  }


  .slate-word {

    /*
      Evita que SLATE se vuelva
      demasiado grande en monitores 4K.
    */

    transform:
      translate(-50%, -50%)
      scale(
        min(1, 100vw / 1900)
      );

  }

}


/* =========================================================
   LAPTOP / DESKTOP
   1024px — 1439px
   ========================================================= */

@media (
  min-width: 901px
) and (
  max-width: 1439px
) {

  .maintenance {

    padding:
      25px
      clamp(25px, 3vw, 45px);

  }


  .message {

    width: 48vw;

    margin-left: 4vw;

  }


  .description {

    width: 300px;

  }


  .progress {

    width: 220px;

  }

}


/* =========================================================
   TABLET LANDSCAPE
   iPad horizontal
   ========================================================= */

@media (
  min-width: 768px
) and (
  max-width: 1100px
) and (
  orientation: landscape
) {

  .maintenance {

    padding:
      24px
      30px;

  }


  .hero-label {

    top: 5vh;

  }


  .slate-word {

    top: 48%;

  }


  .letter {

    font-size: 25vw;

  }


  .message {

    width: 52vw;

    margin-left: 2vw;

  }


  h1 {

    font-size: clamp(
      62px,
      8vw,
      88px
    );

  }


  .description {

    width: 280px;

  }


  .progress {

    width: 200px;

    bottom: 6vh;

  }

}


/* =========================================================
   TABLET PORTRAIT
   iPad vertical
   ========================================================= */

@media (
  min-width: 600px
) and (
  max-width: 1100px
) and (
  orientation: portrait
) {

  .maintenance {

    min-height: 650px;

    padding:
      26px
      28px;

  }


  .hero-label {

    top: 6vh;

  }


  .slate-word {

    top: 39%;

    width: 130%;

    transform:
      translate(-50%, -50%)
      rotate(-4deg);

  }


  .letter {

    font-size: 26vw;

  }


  .message {

    position: absolute;

    left: 0;

    bottom: 19%;

    width: 78vw;

    margin-left: 0;

  }


  h1 {

    font-size: clamp(
      70px,
      11vw,
      105px
    );

  }


  .description {

    width: 300px;

    font-size: 11px;

  }


  .progress {

    left: 0;

    right: auto;

    bottom: 8%;

    width: 250px;

  }


  .footer-center {

    display: none;

  }


  .footer {

    grid-template-columns:
      1fr
      1fr;

  }


  .footer-right {

    text-align: right;

  }

}


/* =========================================================
   LARGE PHONES
   iPhone Pro Max / Plus
   ========================================================= */

@media (
  max-width: 599px
) {

  body {

    cursor: auto;

  }


  .cursor-ring {

    display: none;

  }


  .maintenance {

    width: 100%;

    height: 100dvh;

    min-height: 560px;

    padding:
      18px
      20px
      20px;

  }


  /* -------------------------
     HEADER
     ------------------------- */

  .brand {

    font-size: 16px;

  }


  .status {

    font-size: 7px;

    letter-spacing: 0.08em;

  }


  .status-dot {

    width: 6px;

    height: 6px;

  }


  /* -------------------------
     HERO LABEL
     ------------------------- */

  .hero-label {

    top: 7%;

    font-size: 7px;

    letter-spacing: 0.1em;

  }


  .hero-label span:last-child {

    max-width: 120px;

    text-align: right;

  }


  /* -------------------------
     SLATE
     ------------------------- */

  .slate-word {

    top: 40%;

    width: 145%;

    transform:
      translate(-50%, -50%)
      rotate(-5deg);

  }


  .letter {

    /*
      27vw = aproximadamente
      108px en un iPhone de 390px.
    */

    font-size: 27vw;

    line-height: 0.78;

    letter-spacing: -0.065em;

  }


  /* -------------------------
     MESSAGE
     ------------------------- */

  .message {

    position: absolute;

    left: 0;

    bottom: 20%;

    width: 92%;

    margin: 0;

    display: block;

  }


  .message-number {

    display: none;

  }


  .eyebrow {

    margin-bottom: 8px;

    font-size: 8px;

  }


  h1 {

    font-size:
      clamp(
        58px,
        17vw,
        82px
      );

    line-height: 0.82;

  }


  .description {

    width: min(
      290px,
      82vw
    );

    margin-top: 18px;

    font-size: 10px;

    line-height: 1.55;

  }


  /* -------------------------
     PROGRESS
     ------------------------- */

  .progress {

    left: 0;

    right: auto;

    bottom: 9%;

    width: 55vw;

  }


  .progress-top {

    font-size: 7px;

  }


  /* -------------------------
     FOOTER
     ------------------------- */

  .footer {

    grid-template-columns: 1fr;

    font-size: 7px;

  }


  .footer-center,

  .footer-right {

    display: none;

  }


  /* -------------------------
     LINE
     ------------------------- */

  .hero::before {

    display: none;

  }

}


/* =========================================================
   SMALL PHONES
   iPhone SE / small Android
   ========================================================= */

@media (
  max-width: 380px
) {

  .maintenance {

    padding:
      16px
      17px;

  }


  .brand {

    font-size: 14px;

  }


  .status {

    font-size: 6.5px;

  }


  .hero-label {

    top: 6%;

    font-size: 6px;

  }


  .slate-word {

    top: 37%;

    width: 160%;

  }


  .letter {

    font-size: 28vw;

  }


  .message {

    bottom: 21%;

  }


  h1 {

    font-size: 55px;

  }


  .description {

    width: 260px;

    font-size: 9px;

    margin-top: 15px;

  }


  .progress {

    bottom: 8%;

    width: 58vw;

  }


  .footer {

    font-size: 6px;

  }

}


/* =========================================================
   SHORT SCREENS
   Laptops with little vertical space
   ========================================================= */

@media (
  min-width: 901px
) and (
  max-height: 700px
) {

  .hero-label {

    top: 4vh;

  }


  .slate-word {

    top: 51%;

  }


  .message {

    transform:
      translateY(3vh);

  }


  h1 {

    font-size:
      clamp(
        55px,
        7vw,
        85px
      );

  }


  .description {

    margin-top: 14px;

  }


  .progress {

    bottom: 5vh;

  }

}


/* =========================================================
   VERY SHORT MOBILE
   ========================================================= */

@media (
  max-width: 600px
) and (
  max-height: 700px
) {

  .slate-word {

    top: 36%;

  }


  .message {

    bottom: 17%;

  }


  h1 {

    font-size: 54px;

  }


  .description {

    margin-top: 13px;

  }


  .progress {

    bottom: 7%;

  }

}


/* =========================================================
   LANDSCAPE PHONES
   ========================================================= */

@media (
  max-width: 900px
) and (
  orientation: landscape
) {

  .maintenance {

    min-height: 420px;

    padding:
      15px
      20px;

  }


  .hero-label {

    top: 3vh;

  }


  .slate-word {

    top: 50%;

  }


  .letter {

    font-size: 19vw;

  }


  .message {

    width: 48vw;

    margin-left: 0;

  }


  h1 {

    font-size: 8vw;

  }


  .description {

    width: 250px;

    margin-top: 12px;

    font-size: 9px;

  }


  .progress {

    width: 180px;

    right: 0;

    bottom: 7vh;

  }


  .footer {

    font-size: 6px;

  }

}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (
  pointer: coarse
) {

  body {

    cursor: auto;

  }


  .cursor-ring {

    display: none;

  }

}


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

@media (
  prefers-reduced-motion: reduce
) {

  *,
  *::before,
  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }

}