/* =========================================================
   TRYHARD — ABOUT CINEMATIC
   LIQUID ETHER + EDITORIAL LAYOUT
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.about.about-cinematic {
  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: 540px;

  padding:
    36px
    28px
    32px;

  display: grid;

  grid-template-columns:
    210px
    minmax(0, 1fr);

  column-gap:
    clamp(30px, 3.5vw, 60px);

  align-items: center;

  overflow: hidden;

  background: #050505;

  color: #ffffff;
}


/* =========================================================
   LIQUID ETHER
   NO TOCAR SIMULACIÓN
========================================================= */

#about-liquid-ether {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  z-index: 0;

  pointer-events: none;
}

#about-liquid-ether .liquid-ether-container,
#about-liquid-ether canvas {
  width: 100%;
  height: 100%;

  display: block;
}


/* =========================================================
   SECTION NUMBER
   SE CONSERVA EN LA POSICIÓN ACTUAL
========================================================= */

.about-cinematic > .section-number {
  position: absolute;

  z-index: 20;

  top: 25px;
  left: 28px;
}


/* =========================================================
   LEFT TITLE
========================================================= */

.about-cinematic-title {
  position: relative;

  z-index: 10;

  align-self: center;

  min-width: 0;
}


/* ABOUT */

.about-cinematic-title > span {
  display: block;

  margin-bottom: 10px;

  color: #ffffff;

  font-size: 9px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: .04em;

  text-transform: uppercase;
}


/* WHO WE ARE */

.about-cinematic-title h2 {
  margin: 0;

  color: #ffffff;

  font-family:
    "Anton",
    sans-serif;

  font-size:
    clamp(68px, 6vw, 105px);

  font-weight: 400;

  line-height: .79;

  letter-spacing: -.04em;

  text-transform: uppercase;
}

.about-cinematic-title h2 span {
  color: #ff1717;
}


/* =========================================================
   MAIN STAGE

   COPY | IMAGE | LOCATION
========================================================= */

.about-cinematic-stage {
  position: relative;

  z-index: 10;

  width: 100%;
  min-width: 0;

  display: grid;

  grid-template-columns:
    minmax(235px, .78fr)
    minmax(420px, 1.7fr)
    155px;

  gap:
    clamp(20px, 2.4vw, 42px);

  align-items: center;
}


/* =========================================================
   MANIFESTO / COPY
========================================================= */

.about-cinematic-copy {
  position: relative;

  z-index: 5;

  top: auto;
  left: auto;

  width: auto;

  max-width: 340px;

  transform: none;

  color: #ffffff;
}


/* =========================================================
   MANIFESTO
========================================================= */

.about-cinematic-manifesto {
  max-width: 330px;

  margin:
    0
    0
    24px;

  color: #ffffff;

  font-family:
    "Anton",
    sans-serif;

  font-size:
    clamp(34px, 3vw, 52px);

  font-weight: 400;

  line-height: .88;

  letter-spacing: -.028em;

  text-transform: uppercase;

  text-shadow: none;
}

.about-cinematic-manifesto span {
  color: #ff1717;
}


/* =========================================================
   BODY COPY
========================================================= */

.about-cinematic-body {
  position: relative;

  width: 100%;

  max-width: 320px;

  padding-left: 0;

  border-left: 0;
}

.about-cinematic-body p {
  margin:
    0
    0
    16px;

  color:
    rgba(255,255,255,.88);

  font-size:
    clamp(10px, .75vw, 12px);

  font-weight: 500;

  line-height: 1.5;

  letter-spacing: -.005em;

  text-shadow: none;
}

.about-cinematic-body p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   SMALL LINE UNDER COPY
========================================================= */

.about-cinematic-copy >
.about-cinematic-line-bottom {
  position: relative;

  right: auto;
  bottom: auto;

  width: 150px;

  margin-top: 22px;

  height: 1px;

  background:
    rgba(255,255,255,.45);
}


/* =========================================================
   CENTER IMAGE
========================================================= */

.about-cinematic-visual {
  position: relative;

  width: 100%;

  height:
    clamp(380px, 36vw, 470px);

  min-width: 0;

  overflow: hidden;

  background: #050505;

  isolation: isolate;

  box-shadow: none;
}


/* =========================================================
   PHOTO
========================================================= */

.about-cinematic-photo {
  position: absolute;

  inset: 0;

  z-index: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center center;

  filter:
    grayscale(100%)
    contrast(1.12)
    brightness(.76);

  transform:
    scale(1.015);

  transform-origin:
    center;

  will-change:
    transform;

  transition:
    transform .8s cubic-bezier(.2,.7,.2,1),
    filter .8s ease;
}


/* =========================================================
   IMAGE SHADE
========================================================= */

.about-cinematic-shade {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.04) 0%,
      transparent 55%,
      rgba(0,0,0,.18) 100%
    );
}


/* =========================================================
   RED LIGHT
========================================================= */

.about-cinematic-red-light {
  position: absolute;

  z-index: 2;

  left: 18%;
  bottom: -190px;

  width: 500px;
  height: 300px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(255,23,23,.12) 0%,
      rgba(255,23,23,.04) 40%,
      transparent 72%
    );

  filter:
    blur(45px);

  opacity:
    .55;
}


/* =========================================================
   GRAIN
========================================================= */

.about-cinematic-grain {
  position: absolute;

  inset: 0;

  z-index: 3;

  pointer-events: none;

  opacity: .08;

  mix-blend-mode:
    soft-light;

  background-image:
    repeating-radial-gradient(
      circle at 20% 20%,
      rgba(255,255,255,.05) 0,
      rgba(255,255,255,.05) 1px,
      transparent 1px,
      transparent 5px
    );

  background-size:
    8px 8px;
}


/* =========================================================
   PHOTO HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

  .about-cinematic-visual:hover
  .about-cinematic-photo {

    transform:
      scale(1.03);

    filter:
      grayscale(96%)
      contrast(1.12)
      brightness(.79);
  }

}


/* =========================================================
   RIGHT LOCATION
========================================================= */

.about-cinematic-location {
  position: relative;

  z-index: 5;

  top: auto;
  right: auto;

  width: 100%;
  height: auto;

  padding: 0;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  gap: 22px;

  transform: none;

  color: #ffffff;
}


/* =========================================================
   TH BRAND
========================================================= */

.about-cinematic-brand {
  width: 70px;
  height: 70px;

  display: flex;

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

  padding: 10px;

  border:
    1px solid
    rgba(255,255,255,.55);

  background:
    rgba(5,5,5,.12);

  backdrop-filter:
    blur(5px);
}

.about-cinematic-brand img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* =========================================================
   LOCATION / VISION
========================================================= */

.about-cinematic-location .location-text {
  display: block;

  color: #ffffff;

  font-size:
    clamp(11px, .85vw, 14px);

  font-weight: 900;

  line-height: 1.25;

  letter-spacing: -.02em;

  text-transform: uppercase;

  text-shadow: none;
}

.about-cinematic-location .location-red {
  display: block;

  color: #ff1717;

  font-size:
    clamp(11px, .85vw, 14px);

  font-weight: 900;

  line-height: 1.25;

  letter-spacing: -.02em;

  text-transform: uppercase;

  text-shadow: none;
}


/* =========================================================
   LINES INSIDE RIGHT COLUMN
========================================================= */

.about-cinematic-location
.about-cinematic-line {

  position: relative;

  top: auto;
  right: auto;
  bottom: auto;
  left: auto;

  width: 100%;

  height: 1px;

  background:
    rgba(255,255,255,.35);

  pointer-events: none;
}


/* =========================================================
   TABLET LARGE
========================================================= */

@media (max-width: 1200px) {

  .about.about-cinematic {

    grid-template-columns:
      175px
      minmax(0, 1fr);

    column-gap:
      30px;
  }


  .about-cinematic-stage {

    grid-template-columns:
      minmax(190px, .7fr)
      minmax(360px, 1.5fr)
      130px;

    gap:
      22px;
  }


  .about-cinematic-manifesto {

    font-size:
      clamp(32px, 3vw, 44px);
  }


  .about-cinematic-visual {

    height:
      clamp(380px, 40vw, 460px);
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

  .about.about-cinematic {

    grid-template-columns:
      150px
      minmax(0, 1fr);

    column-gap:
      25px;
  }


  .about-cinematic-stage {

    grid-template-columns:
      minmax(180px, .8fr)
      minmax(300px, 1.4fr);

    grid-template-areas:
      "copy image"
      "meta image";

    align-items: start;
  }


  .about-cinematic-copy {
    grid-area: copy;
  }


  .about-cinematic-visual {
    grid-area: image;

    height:
      clamp(430px, 58vw, 520px);
  }


  .about-cinematic-location {
    grid-area: meta;

    margin-top: 20px;

    width: 150px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  .about.about-cinematic {

    min-height: auto;

    padding:
      48px
      18px
      50px;

    display: block;
  }


  /* 02 SE MANTIENE */

  .about-cinematic >
  .section-number {

    top: 22px;
    left: 18px;
  }


  /* TITLE */

  .about-cinematic-title {

    margin-bottom:
      32px;
  }


  .about-cinematic-title h2 {

    font-size:
      clamp(68px, 20vw, 95px);
  }


  /* STAGE */

  .about-cinematic-stage {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 28px;

    align-items: stretch;
  }


  /* COPY */

  .about-cinematic-copy {

    order: 1;

    max-width:
      500px;
  }


  .about-cinematic-manifesto {

    max-width:
      400px;

    margin-bottom:
      20px;

    font-size:
      clamp(39px, 11vw, 56px);
  }


  .about-cinematic-body {

    max-width:
      480px;
  }


  .about-cinematic-body p {

    font-size:
      11px;
  }


  /* PHOTO */

  .about-cinematic-visual {

    order: 2;

    width: 100%;

    height: auto;

    aspect-ratio:
      4 / 5;

    min-height: 0;
  }


  .about-cinematic-photo {

    object-position:
      center center;
  }


  /* LOCATION */

  .about-cinematic-location {

    order: 3;

    width: 100%;

    display: grid;

    grid-template-columns:
      65px
      minmax(0, 1fr)
      minmax(0, 1fr);

    column-gap: 20px;

    align-items: end;
  }


  .about-cinematic-location
  .about-cinematic-line {

    display: none;
  }


  .about-cinematic-brand {

    width: 60px;
    height: 60px;
  }


  .about-cinematic-location
  .location-text,

  .about-cinematic-location
  .location-red {

    font-size:
      11px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

  .about.about-cinematic {

    padding-left:
      16px;

    padding-right:
      16px;
  }


  .about-cinematic-location {

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

    gap:
      13px;
  }


  .about-cinematic-brand {

    width:
      52px;

    height:
      52px;
  }

}