/* =========================================================
   ABOUT PAGE
   Chucky1337 Community Portal
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

.about-page {
  --about-accent:
    var(--accent, #7c3aed);

  --about-accent-soft:
    color-mix(
      in srgb,
      var(--about-accent) 13%,
      transparent
    );

  --about-border:
    var(--line);

  --about-panel:
    var(--panel);

  --about-soft:
    var(--bg-soft);

  --about-shadow:
    0 24px 70px
    rgba(0, 0, 0, .14);

  position: relative;

  min-height:
    100vh;

  overflow:
    hidden;
}


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


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

.about-hero {
  position: relative;

  padding:
    90px 0 42px;

  overflow:
    hidden;

  border-bottom:
    1px solid
    var(--about-border);
}


.about-hero-grid {
  position: absolute;

  inset: 0;

  pointer-events:
    none;

  background:
    linear-gradient(
      var(--line) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      var(--line) 1px,
      transparent 1px
    );

  background-size:
    70px 70px;

  opacity:
    .08;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 88%
    );
}


.about-hero-glow {
  position: absolute;

  border-radius:
    50%;

  filter:
    blur(100px);

  pointer-events:
    none;
}


.about-hero-glow-one {
  top:
    -300px;

  left:
    -220px;

  width:
    720px;

  height:
    720px;

  background:
    color-mix(
      in srgb,
      var(--about-accent) 16%,
      transparent
    );
}


.about-hero-glow-two {
  right:
    -280px;

  bottom:
    -350px;

  width:
    700px;

  height:
    700px;

  background:
    rgba(66, 153, 225, .06);
}


/* =========================================================
   LANGUAGE
========================================================= */

.about-language {
  position: relative;

  z-index:
    4;

  display: flex;

  justify-content:
    flex-end;

  gap:
    5px;

  margin-bottom:
    28px;
}


.about-language a {
  display: grid;

  place-items:
    center;

  width:
    40px;

  height:
    34px;

  border:
    1px solid
    var(--about-border);

  border-radius:
    9px;

  color:
    var(--text-faint);

  background:
    var(--about-panel);

  font-size:
    .58rem;

  font-weight:
    800;

  text-decoration:
    none;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease;
}


.about-language a:hover {
  color:
    var(--text);

  border-color:
    color-mix(
      in srgb,
      var(--about-accent) 35%,
      var(--about-border)
    );
}


.about-language a.is-active {
  border-color:
    var(--about-accent);

  color:
    #fff;

  background:
    var(--about-accent);
}


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

.about-hero-layout {
  position: relative;

  z-index:
    2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(330px, .88fr);

  align-items:
    center;

  gap:
    clamp(
      45px,
      7vw,
      100px
    );
}


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

.about-hero-copy {
  max-width:
    760px;
}


.about-hero-copy h1 {
  display: flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  margin:
    10px 0 25px;

  font-size:
    clamp(
      3rem,
      7.2vw,
      6.6rem
    );

  line-height:
    .88;

  letter-spacing:
    -.075em;
}


.about-hero-copy h1 > span {
  color:
    var(--text);
}


.about-hero-copy h1 > strong {
  color:
    var(--about-accent);

  font-weight:
    850;
}


.about-hero-text {
  display: grid;

  gap:
    13px;

  max-width:
    690px;
}


.about-hero-text p {
  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    .78rem;

  line-height:
    1.8;
}


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

.about-hero-actions,
.about-future-actions {
  display: flex;

  align-items:
    center;

  gap:
    10px;

  flex-wrap:
    wrap;

  margin-top:
    28px;
}


.about-hero-actions .button,
.about-future-actions .button {
  gap:
    8px;

  min-height:
    42px;
}


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

.about-hero-visual {
  position: relative;

  width:
    min(
      100%,
      470px
    );

  justify-self:
    end;
}


/* =========================================================
   IMAGE CARD
========================================================= */

.about-image-card {
  position: relative;

  padding:
    12px;

  overflow:
    hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--about-accent) 25%,
      var(--about-border)
    );

  border-radius:
    24px;

  background:
    radial-gradient(
      circle at 100% 0,
      var(--about-accent-soft),
      transparent 45%
    ),
    var(--about-panel);

  box-shadow:
    var(--about-shadow);
}


.about-image-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  width:
    130px;

  height:
    1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--about-accent),
      transparent
    );
}


/* =========================================================
   IMAGE TOP
========================================================= */

.about-image-topline {
  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  padding:
    4px 4px 11px;

  color:
    var(--text-faint);

  font-size:
    .5rem;

  font-weight:
    800;

  letter-spacing:
    .1em;
}


.about-image-topline i {
  color:
    #4ade80;

  font-size:
    .42rem;

  filter:
    drop-shadow(
      0 0 6px
      rgba(74, 222, 128, .7)
    );
}


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

.about-image-wrap {
  position: relative;

  min-height:
    420px;

  overflow:
    hidden;

  border-radius:
    17px;

  background:
    var(--about-soft);
}


.about-image-wrap::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events:
    none;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, .22),
      transparent 30%
    );
}


.about-image-wrap img {
  display: block;

  width:
    100%;

  height:
    100%;

  min-height:
    420px;

  object-fit:
    cover;

  object-position:
    center;
}


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

.about-image-footer {
  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  padding:
    13px 5px 3px;
}


.about-image-footer strong {
  color:
    var(--text);

  font-size:
    .68rem;
}


.about-image-footer span {
  color:
    #4ade80;

  font-size:
    .48rem;

  font-weight:
    800;

  letter-spacing:
    .09em;
}


/* =========================================================
   FLOATING BADGES
========================================================= */

.about-floating-badge {
  position: absolute;

  z-index:
    3;

  display: inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    10px 12px;

  border:
    1px solid
    var(--about-border);

  border-radius:
    11px;

  color:
    var(--text);

  background:
    color-mix(
      in srgb,
      var(--about-panel) 94%,
      transparent
    );

  backdrop-filter:
    blur(12px);

  font-size:
    .56rem;

  font-weight:
    820;

  box-shadow:
    0 12px 30px
    rgba(0, 0, 0, .14);
}


.about-floating-badge-stream {
  top:
    58px;

  left:
    -34px;
}


.about-floating-badge-stream i {
  color:
    #9146ff;
}


.about-floating-badge-irl {
  right:
    -28px;

  bottom:
    100px;
}


.about-floating-badge-irl i {
  color:
    var(--about-accent);
}


/* =========================================================
   QUICK FACTS
========================================================= */

.about-quick-facts {
  position: relative;

  z-index:
    2;

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  margin-top:
    70px;

  overflow:
    hidden;

  border:
    1px solid
    var(--about-border);

  border-radius:
    18px;

  background:
    var(--about-panel);
}


.about-quick-fact {
  display: flex;

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;

  padding:
    17px 19px;

  border-right:
    1px solid
    var(--about-border);
}


.about-quick-fact:last-child {
  border-right:
    0;
}


.about-quick-fact > i {
  display: grid;

  place-items:
    center;

  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  border-radius:
    10px;

  color:
    var(--about-accent);

  background:
    var(--about-accent-soft);

  font-size:
    .67rem;
}


.about-quick-fact div {
  min-width:
    0;
}


.about-quick-fact span {
  display: block;

  margin-bottom:
    3px;

  color:
    var(--text-faint);

  font-size:
    .5rem;

  font-weight:
    720;

  text-transform:
    uppercase;

  letter-spacing:
    .07em;
}


.about-quick-fact strong {
  display: block;

  overflow:
    hidden;

  color:
    var(--text);

  font-size:
    .62rem;

  font-weight:
    680;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.about-section {
  position: relative;

  padding:
    88px 0;
}


.about-section-soft {
  border-top:
    1px solid
    var(--about-border);

  border-bottom:
    1px solid
    var(--about-border);

  background:
    color-mix(
      in srgb,
      var(--about-soft) 45%,
      transparent
    );
}


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

.about-section-heading {
  max-width:
    720px;

  margin-bottom:
    38px;
}


.about-section-heading h2 {
  margin:
    8px 0 13px;

  color:
    var(--text);

  font-size:
    clamp(
      1.9rem,
      4.3vw,
      3.6rem
    );

  line-height:
    1;

  letter-spacing:
    -.055em;
}


.about-section-heading p {
  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    .74rem;

  line-height:
    1.75;
}


/* =========================================================
   FEATURE GRID
========================================================= */

.about-feature-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    13px;
}


.about-feature-card {
  position: relative;

  min-width:
    0;

  padding:
    24px;

  overflow:
    hidden;

  border:
    1px solid
    var(--about-border);

  border-radius:
    18px;

  background:
    var(--about-panel);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


.about-feature-card::before {
  content: "";

  position: absolute;

  top:
    -70px;

  right:
    -70px;

  width:
    150px;

  height:
    150px;

  border-radius:
    50%;

  background:
    var(--about-accent-soft);

  filter:
    blur(20px);

  opacity:
    .55;

  pointer-events:
    none;
}


.about-feature-card:hover {
  transform:
    translateY(-3px);

  border-color:
    color-mix(
      in srgb,
      var(--about-accent) 30%,
      var(--about-border)
    );

  box-shadow:
    0 18px 45px
    rgba(0, 0, 0, .09);
}


.about-feature-icon {
  display: grid;

  place-items:
    center;

  width:
    40px;

  height:
    40px;

  margin-bottom:
    19px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--about-accent) 20%,
      transparent
    );

  border-radius:
    12px;

  color:
    var(--about-accent);

  background:
    var(--about-accent-soft);
}


.about-feature-card h3 {
  margin:
    0 0 10px;

  color:
    var(--text);

  font-size:
    .82rem;
}


.about-feature-card p {
  margin:
    0;

  color:
    var(--text-faint);

  font-size:
    .64rem;

  line-height:
    1.7;
}


/* =========================================================
   TIMELINE
========================================================= */

.about-timeline {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    0;
}


.about-timeline::before {
  content: "";

  position: absolute;

  top:
    23px;

  left:
    8%;

  right:
    8%;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(
        in srgb,
        var(--about-accent) 35%,
        var(--about-border)
      ),
      color-mix(
        in srgb,
        var(--about-accent) 35%,
        var(--about-border)
      ),
      transparent
    );
}


.about-timeline-item {
  position: relative;

  z-index:
    2;

  padding:
    0 18px;
}


.about-timeline-marker {
  display: grid;

  place-items:
    center;

  width:
    46px;

  height:
    46px;

  margin-bottom:
    18px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--about-accent) 35%,
      var(--about-border)
    );

  border-radius:
    50%;

  color:
    var(--about-accent);

  background:
    var(--about-panel);

  box-shadow:
    0 0 0 7px
    color-mix(
      in srgb,
      var(--about-soft) 90%,
      transparent
    );
}


.about-timeline-copy > span {
  display: block;

  margin-bottom:
    6px;

  color:
    var(--about-accent);

  font-size:
    .5rem;

  font-weight:
    850;

  letter-spacing:
    .1em;
}


.about-timeline-copy h3 {
  margin:
    0 0 9px;

  color:
    var(--text);

  font-size:
    .8rem;
}


.about-timeline-copy p {
  margin:
    0;

  color:
    var(--text-faint);

  font-size:
    .62rem;

  line-height:
    1.7;
}


/* =========================================================
   FORMAT GRID
========================================================= */

.about-format-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    13px;
}


.about-format-card {
  position: relative;

  min-height:
    210px;

  padding:
    27px;

  overflow:
    hidden;

  border:
    1px solid
    var(--about-border);

  border-radius:
    18px;

  background:
    var(--about-panel);
}


.about-format-number {
  position: absolute;

  top:
    13px;

  right:
    18px;

  color:
    color-mix(
      in srgb,
      var(--text-faint) 35%,
      transparent
    );

  font-size:
    2.5rem;

  font-weight:
    900;

  letter-spacing:
    -.08em;
}


.about-format-card > i {
  display: grid;

  place-items:
    center;

  width:
    40px;

  height:
    40px;

  margin-bottom:
    25px;

  border-radius:
    12px;

  color:
    var(--about-accent);

  background:
    var(--about-accent-soft);
}


.about-format-card h3 {
  margin:
    0 0 9px;

  color:
    var(--text);

  font-size:
    .87rem;
}


.about-format-card p {
  max-width:
    480px;

  margin:
    0;

  color:
    var(--text-faint);

  font-size:
    .65rem;

  line-height:
    1.7;
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.about-philosophy {
  padding:
    25px 0 80px;
}


.about-philosophy-card {
  position: relative;

  display: grid;

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

  align-items:
    start;

  gap:
    25px;

  padding:
    36px;

  overflow:
    hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--about-accent) 25%,
      var(--about-border)
    );

  border-radius:
    22px;

  background:
    radial-gradient(
      circle at 100% 0,
      var(--about-accent-soft),
      transparent 38%
    ),
    var(--about-panel);

  box-shadow:
    var(--about-shadow);
}


.about-philosophy-symbol {
  display: grid;

  place-items:
    center;

  width:
    52px;

  height:
    52px;

  border-radius:
    15px;

  color:
    var(--about-accent);

  background:
    var(--about-accent-soft);

  font-size:
    1rem;
}


.about-philosophy-card h2 {
  margin:
    7px 0 13px;

  color:
    var(--text);

  font-size:
    clamp(
      1.6rem,
      3.5vw,
      2.8rem
    );

  line-height:
    1;

  letter-spacing:
    -.045em;
}


.about-philosophy-card p {
  max-width:
    760px;

  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    .72rem;

  line-height:
    1.75;
}


.about-philosophy-card strong {
  display: block;

  margin-top:
    20px;

  color:
    var(--about-accent);

  font-size:
    .72rem;

  font-weight:
    750;
}


/* =========================================================
   TECH
========================================================= */

.about-tech-card {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(270px, .8fr);

  align-items:
    center;

  gap:
    50px;

  padding:
    34px;

  border:
    1px solid
    var(--about-border);

  border-radius:
    22px;

  background:
    var(--about-panel);
}


.about-tech-copy h2 {
  margin:
    8px 0 13px;

  color:
    var(--text);

  font-size:
    clamp(
      1.6rem,
      3.8vw,
      3rem
    );

  line-height:
    1;

  letter-spacing:
    -.045em;
}


.about-tech-copy p {
  max-width:
    650px;

  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    .7rem;

  line-height:
    1.75;
}


/* =========================================================
   TECH VISUAL
========================================================= */

.about-tech-visual {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    10px;
}


.about-tech-visual > div {
  display: grid;

  place-items:
    center;

  min-height:
    100px;

  border:
    1px solid
    var(--about-border);

  border-radius:
    15px;

  color:
    var(--about-accent);

  background:
    var(--about-soft);

  font-size:
    1.15rem;

  transition:
    transform .18s ease,
    border-color .18s ease;
}


.about-tech-visual > div:hover {
  transform:
    translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--about-accent) 30%,
      var(--about-border)
    );
}


/* =========================================================
   FUTURE
========================================================= */

.about-future {
  position: relative;

  padding:
    10px 0 95px;
}


.about-future-card {
  position: relative;

  padding:
    clamp(
      30px,
      6vw,
      58px
    );

  overflow:
    hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--about-accent) 30%,
      var(--about-border)
    );

  border-radius:
    24px;

  background:
    var(--about-panel);

  box-shadow:
    var(--about-shadow);
}


.about-future-glow {
  position: absolute;

  top:
    -180px;

  right:
    -100px;

  width:
    500px;

  height:
    500px;

  border-radius:
    50%;

  background:
    color-mix(
      in srgb,
      var(--about-accent) 15%,
      transparent
    );

  filter:
    blur(70px);

  pointer-events:
    none;
}


.about-future-copy {
  position: relative;

  z-index:
    2;

  max-width:
    760px;
}


.about-future-copy h2 {
  margin:
    9px 0 14px;

  color:
    var(--text);

  font-size:
    clamp(
      2rem,
      5vw,
      4.2rem
    );

  line-height:
    .96;

  letter-spacing:
    -.06em;
}


.about-future-copy p {
  max-width:
    680px;

  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    .74rem;

  line-height:
    1.75;
}


/* =========================================================
   LIGHT THEME
========================================================= */

html[data-theme="light"]
.about-page {
  --about-shadow:
    0 22px 65px
    rgba(45, 30, 70, .08);
}


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

@media (max-width: 1050px) {

  .about-hero-layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, .75fr);

    gap:
      45px;
  }


  .about-feature-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .about-quick-facts {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .about-quick-fact:nth-child(2) {
    border-right:
      0;
  }


  .about-quick-fact:nth-child(-n + 2) {
    border-bottom:
      1px solid
      var(--about-border);
  }


  .about-timeline {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      35px 0;
  }


  .about-timeline::before {
    display:
      none;
  }

}


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

@media (max-width: 820px) {

  .about-hero {
    padding:
      65px 0 38px;
  }


  .about-hero-layout {
    grid-template-columns:
      1fr;

    gap:
      45px;
  }


  .about-hero-visual {
    width:
      min(
        100%,
        500px
      );

    justify-self:
      center;
  }


  .about-image-wrap,
  .about-image-wrap img {
    min-height:
      380px;
  }


  .about-tech-card {
    grid-template-columns:
      1fr;

    gap:
      30px;
  }


  .about-format-grid {
    grid-template-columns:
      1fr;
  }

}


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

@media (max-width: 650px) {

  .about-language {
    margin-bottom:
      20px;
  }


  .about-hero {
    padding-top:
      50px;
  }


  .about-hero-copy h1 {
    font-size:
      clamp(
        3rem,
        15vw,
        4.7rem
      );
  }


  .about-hero-text p {
    font-size:
      .72rem;
  }


  .about-hero-actions,
  .about-future-actions {
    display: grid;

    grid-template-columns:
      1fr;
  }


  .about-hero-actions .button,
  .about-future-actions .button {
    width:
      100%;

    justify-content:
      center;
  }


  .about-floating-badge-stream {
    left:
      10px;
  }


  .about-floating-badge-irl {
    right:
      10px;
  }


  .about-quick-facts {
    grid-template-columns:
      1fr;
  }


  .about-quick-fact,
  .about-quick-fact:nth-child(2) {
    border-right:
      0;
  }


  .about-quick-fact:not(:last-child) {
    border-bottom:
      1px solid
      var(--about-border);
  }


  .about-section {
    padding:
      65px 0;
  }


  .about-feature-grid {
    grid-template-columns:
      1fr;
  }


  .about-timeline {
    grid-template-columns:
      1fr;

    gap:
      30px;
  }


  .about-timeline-item {
    display: grid;

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

    gap:
      17px;

    padding:
      0;
  }


  .about-timeline-marker {
    margin:
      0;
  }


  .about-philosophy {
    padding-bottom:
      60px;
  }


  .about-philosophy-card {
    grid-template-columns:
      1fr;

    padding:
      27px;
  }


  .about-tech-card {
    padding:
      25px;
  }


  .about-future {
    padding-bottom:
      70px;
  }

}


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

@media (max-width: 430px) {

  .about-image-card {
    border-radius:
      19px;
  }


  .about-image-wrap {
    border-radius:
      14px;
  }


  .about-image-wrap,
  .about-image-wrap img {
    min-height:
      320px;
  }


  .about-feature-card,
  .about-format-card {
    padding:
      21px;
  }


  .about-tech-visual > div {
    min-height:
      82px;
  }

}


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

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

  .about-feature-card,
  .about-language a,
  .about-tech-visual > div {
    transition:
      none;
  }

}