@font-face {
  font-family: "Holliday";
  src: url("../assets/fonts/HolidayFree.otf");
  font-display: swap;
}


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

:root {
  --bg: #000c22;
  --bg-deep: #000714;
  --card: rgba(5, 13, 28, .86);

  --pink: #ff66c4;
  --pink-soft: rgba(255, 102, 196, .14);
  --pink-glow: rgba(255, 102, 196, .30);

  --white: #f7f8fb;

  --muted: #9ea7b8;
  --muted-2: #697386;

  --line: rgba(255, 255, 255, .08);

  --container:
    min(1240px, calc(100vw - 56px));

  --radius-xl: 30px;
  --radius-lg: 24px;

  --ease:
    cubic-bezier(.2, .85, .25, 1);
}


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

* {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;

  background: var(--bg);
}


body {
  min-height: 100vh;

  overflow-x: hidden;

  color: var(--white);

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(255, 102, 196, .07),
      transparent 30%
    ),

    radial-gradient(
      circle at 85% 70%,
      rgba(255, 102, 196, .05),
      transparent 30%
    ),

    linear-gradient(
      180deg,
      #000c22 0%,
      #000714 50%,
      #000c22 100%
    );

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

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;
}


body.modal-open,
body.menu-open {
  overflow: hidden;
}


a {
  color: inherit;

  text-decoration: none;
}


button {
  font: inherit;
}


img,
video {
  display: block;

  max-width: 100%;
}


::selection {
  color: var(--bg);

  background: var(--pink);
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
  width: 9px;
}


::-webkit-scrollbar-track {
  background: #000714;
}


::-webkit-scrollbar-thumb {
  border: 2px solid #000714;

  border-radius: 100px;

  background:
    linear-gradient(
      180deg,
      #ff66c4,
      rgba(255, 102, 196, .35)
    );
}


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

.noise {
  position: fixed;

  inset: 0;

  z-index: 1000;

  pointer-events: none;

  opacity: .025;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

  mix-blend-mode: soft-light;
}


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

.scroll-progress {
  position: fixed;

  top: 0;
  left: 0;

  z-index: 1500;

  width: 100%;
  height: 2px;

  background: transparent;
}


.scroll-progress span {
  display: block;

  width: 0;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      var(--pink),
      rgba(255, 102, 196, .4)
    );

  box-shadow:
    0 0 18px var(--pink-glow);
}


/* =========================================================
   HEADER
========================================================= */

.archive-header {
  position: fixed;

  top: 0;
  left: 50%;

  z-index: 900;

  width: var(--container);

  padding: 22px 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  transform:
    translateX(-50%);
}


.archive-header::before {
  content: "";

  position: absolute;

  inset: 8px -18px;

  z-index: -1;

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

  border-radius: 18px;

  background:
    rgba(0, 12, 34, .76);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 16px 50px rgba(0, 0, 0, .18);
}


.archive-brand {
  display: flex;

  align-items: center;

  gap: 12px;
}


.archive-brand img {
  width: 28px;

  object-fit: contain;
}


.archive-brand span {
  font-size: .72rem;

  font-weight: 700;

  letter-spacing: .15em;
}


.archive-nav {
  display: flex;

  align-items: center;

  gap: 28px;
}


.archive-nav a {
  position: relative;

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

  font-size: .67rem;

  font-weight: 600;

  letter-spacing: .12em;

  transition:
    color .25s ease;
}


.archive-nav a:hover {
  color: white;
}


.archive-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -7px;

  width: 0;
  height: 1px;

  background:
    var(--pink);

  transition:
    width .3s var(--ease);
}


.archive-nav a:hover::after {
  width: 100%;
}


.archive-nav__cta {
  padding:
    10px 15px;

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

  border-radius:
    100px;

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


.archive-nav__cta::after {
  display: none;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.archive-menu-toggle {
  width: 44px;
  height: 44px;

  display: none;

  place-content: center;

  gap: 6px;

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

  border-radius: 50%;

  background:
    rgba(0, 12, 34, .86);

  cursor: pointer;
}


.archive-menu-toggle span {
  width: 18px;
  height: 1px;

  display: block;

  background:
    white;
}


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

.archive-hero {
  width: var(--container);

  min-height:
    100svh;

  margin:
    0 auto;

  padding:
    170px 0 80px;

  display: flex;

  flex-direction: column;

  justify-content: center;
}


.archive-hero__kicker {
  margin-bottom:
    25px;

  color:
    var(--pink);

  font-size:
    .65rem;

  font-weight:
    700;

  letter-spacing:
    .2em;

  text-transform:
    uppercase;
}


.archive-hero h1 {
  max-width:
    1100px;

  font-size:
    clamp(
      3.4rem,
      8vw,
      8.5rem
    );

  font-weight:
    800;

  line-height:
    .88;

  letter-spacing:
    -.07em;

  text-transform:
    uppercase;
}


.archive-hero h1 span {
  color: transparent;

  background:
    linear-gradient(
      90deg,
      var(--pink),
      rgba(255, 102, 196, .55),
      var(--pink)
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;
}


.archive-hero__bottom {
  margin-top:
    65px;

  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    40px;
}


.archive-hero__bottom p {
  max-width:
    610px;

  color:
    #c7ceda;

  font-size:
    clamp(
      .95rem,
      1.4vw,
      1.15rem
    );

  line-height:
    1.8;
}


.archive-hero__scroll {
  color:
    rgba(255, 255, 255, .55);

  font-size:
    .65rem;

  font-weight:
    600;

  letter-spacing:
    .15em;
}


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

.archive-section {
  width:
    var(--container);

  margin:
    0 auto;

  padding:
    120px 0;
}


.archive-heading {
  margin-bottom:
    50px;

  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    40px;
}


.archive-kicker {
  display:
    block;

  margin-bottom:
    12px;

  color:
    var(--pink);

  font-size:
    .62rem;

  font-weight:
    700;

  letter-spacing:
    .19em;
}


.archive-heading h2 {
  font-size:
    clamp(
      2.8rem,
      5.5vw,
      5.6rem
    );

  font-weight:
    800;

  line-height:
    .92;

  letter-spacing:
    -.055em;
}


.archive-heading h2 span {
  color:
    var(--pink);
}


.archive-heading p {
  max-width:
    430px;

  color:
    var(--muted);

  font-size:
    .9rem;

  line-height:
    1.75;
}


/* =========================================================
   GRIDS
========================================================= */

.vertical-archive-grid {
  display:
    grid;

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

  gap:
    22px;
}


.horizontal-archive-grid {
  display:
    grid;

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

  gap:
    22px;
}


/* =========================================================
   VIDEO CARDS
========================================================= */

.archive-card {
  position:
    relative;

  isolation:
    isolate;

  overflow:
    hidden;

  cursor:
    pointer;

  border:
    1px solid transparent;

  background:
    linear-gradient(
      rgba(5, 13, 28, .9),
      rgba(5, 13, 28, .9)
    )
    padding-box,

    linear-gradient(
      135deg,
      rgba(255, 255, 255, .68),
      rgba(115, 125, 145, .18) 40%,
      rgba(220, 225, 235, .52) 68%,
      rgba(255, 255, 255, .10)
    )
    border-box;

  box-shadow:
    0 24px 70px
    rgba(0, 0, 0, .28);

  transition:
    transform .45s var(--ease),
    box-shadow .45s var(--ease);
}


.archive-card:hover {
  transform:
    translateY(-6px);

  box-shadow:
    0 35px 85px rgba(0, 0, 0, .42),
    0 0 35px rgba(255, 102, 196, .05);
}


/* vertical */

.archive-card--vertical {
  aspect-ratio:
    9 / 16;

  border-radius:
    25px;
}


/* horizontal */

.archive-card--horizontal {
  aspect-ratio:
    16 / 9;

  border-radius:
    25px;
}


/* =========================================================
   VIDEO
========================================================= */

.archive-card__video {
  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  opacity:
    0;

  background:
    #020917;

  transition:
    opacity .5s ease,
    transform .75s var(--ease);
}


.archive-card.is-loaded
.archive-card__video {
  opacity:
    1;
}


.archive-card:hover
.archive-card__video {
  transform:
    scale(1.025);
}


/* =========================================================
   LOADER / PLACEHOLDER
========================================================= */

.archive-card__loader {
  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  display:
    grid;

  place-content:
    center;

  justify-items:
    center;

  gap:
    10px;

  background:

    linear-gradient(
      rgba(255, 255, 255, .025)
      1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255, 255, 255, .025)
      1px,
      transparent 1px
    ),

    radial-gradient(
      circle at 50% 50%,
      rgba(255, 102, 196, .14),
      transparent 45%
    ),

    linear-gradient(
      145deg,
      #071225,
      #020917
    );

  background-size:
    48px 48px,
    48px 48px,
    auto,
    auto;

  transition:
    opacity .4s ease;
}


.archive-card.is-loaded
.archive-card__loader {
  opacity:
    0;

  pointer-events:
    none;
}


.archive-card__loader span {
  padding:
    6px 10px;

  border:
    1px solid
    rgba(255, 102, 196, .20);

  border-radius:
    100px;

  color:
    var(--pink);

  background:
    rgba(255, 102, 196, .06);

  font-size:
    .55rem;

  font-weight:
    700;

  letter-spacing:
    .15em;
}


.archive-card__loader strong {
  color:
    rgba(255, 255, 255, .48);

  font-size:
    .65rem;

  letter-spacing:
    .16em;
}


/* =========================================================
   CARD SHADE
========================================================= */

.archive-card__shade {
  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(0, 5, 15, .78) 100%
    );
}


/* =========================================================
   CARD INFO
========================================================= */

.archive-card__info {
  position:
    absolute;

  right:
    20px;

  bottom:
    18px;

  left:
    20px;

  z-index:
    4;

  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    15px;

  pointer-events:
    none;
}


.archive-card__info > div {
  display:
    grid;

  gap:
    5px;
}


.archive-card__info span {
  color:
    rgba(255, 255, 255, .58);

  font-size:
    .52rem;

  font-weight:
    600;

  letter-spacing:
    .16em;
}


.archive-card__info strong {
  font-size:
    .78rem;

  font-weight:
    600;

  letter-spacing:
    .04em;
}


.archive-card__number {
  color:
    rgba(255, 255, 255, .8)
    !important;

  font-size:
    1.1rem
    !important;

  font-weight:
    500
    !important;
}


/* =========================================================
   REVEAL
========================================================= */

.reveal-archive {
  opacity:
    0;

  transform:
    translateY(35px);

  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease);
}


.reveal-archive.is-visible {
  opacity:
    1;

  transform:
    translateY(0);
}


/* =========================================================
   MARQUEE
========================================================= */

.archive-marquee {
  overflow:
    hidden;

  padding:
    42px 0;

  border-top:
    1px solid
    rgba(255, 255, 255, .07);

  border-bottom:
    1px solid
    rgba(255, 255, 255, .07);

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


.archive-marquee__track {
  width:
    max-content;

  display:
    flex;

  align-items:
    center;

  gap:
    28px;

  animation:
    archiveMarquee
    30s linear
    infinite;
}


.archive-marquee__track span {
  color:
    transparent;

  -webkit-text-stroke:
    1px
    rgba(255, 255, 255, .22);

  font-size:
    clamp(
      2.5rem,
      6vw,
      5.5rem
    );

  font-weight:
    800;

  letter-spacing:
    -.04em;
}


.archive-marquee__track i {
  color:
    var(--pink);

  font-size:
    14px;

  font-style:
    normal;
}


@keyframes archiveMarquee {

  to {
    transform:
      translateX(-50%);
  }

}


/* =========================================================
   CTA
========================================================= */

.archive-cta {
  width:
    var(--container);

  margin:
    100px auto;

  padding:
    clamp(
      50px,
      8vw,
      100px
    );

  overflow:
    hidden;

  position:
    relative;

  border:
    1px solid transparent;

  border-radius:
    32px;

  background:

    linear-gradient(
      rgba(5, 13, 28, .92),
      rgba(5, 13, 28, .92)
    )
    padding-box,

    linear-gradient(
      135deg,
      rgba(255, 255, 255, .7),
      rgba(130, 140, 160, .15),
      rgba(255, 255, 255, .25)
    )
    border-box;

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


.archive-cta::before {
  content: "";

  position:
    absolute;

  width:
    350px;

  height:
    350px;

  right:
    -120px;

  top:
    -140px;

  border-radius:
    50%;

  background:
    rgba(255, 102, 196, .13);

  filter:
    blur(100px);
}


.archive-cta > span {
  position:
    relative;

  z-index:
    2;

  color:
    var(--pink);

  font-size:
    .6rem;

  font-weight:
    700;

  letter-spacing:
    .20em;
}


.archive-cta h2 {
  position:
    relative;

  z-index:
    2;

  margin:
    18px 0 38px;

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

  line-height:
    .92;

  letter-spacing:
    -.055em;
}


.archive-cta h2 strong {
  color:
    var(--pink);
}


.archive-cta > a {
  position:
    relative;

  z-index:
    2;

  width:
    fit-content;

  display:
    flex;

  align-items:
    center;

  gap:
    24px;

  padding:
    15px 20px;

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

  border-radius:
    100px;

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

  font-size:
    .68rem;

  font-weight:
    700;

  letter-spacing:
    .13em;

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


.archive-cta > a:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(255, 102, 196, .50);

  background:
    rgba(255, 102, 196, .08);
}


.archive-cta > a span {
  color:
    var(--pink);

  font-size:
    1rem;
}


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

.archive-footer {
  width:
    var(--container);

  margin:
    0 auto;

  padding:
    50px 0 35px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    30px;

  border-top:
    1px solid
    rgba(255, 255, 255, .07);
}


.archive-footer img {
  width:
    38px;
}


.archive-footer > div {
  display:
    flex;

  align-items:
    center;

  gap:
    25px;
}


.archive-footer a,
.archive-footer > span {
  color:
    rgba(255, 255, 255, .55);

  font-size:
    .62rem;

  font-weight:
    600;

  letter-spacing:
    .12em;
}


.archive-footer > span {
  justify-self:
    end;
}


/* =========================================================
   MODAL
========================================================= */

.archive-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    2000;

  padding:
    80px 30px 30px;

  display:
    grid;

  place-items:
    center;

  visibility:
    hidden;

  opacity:
    0;

  pointer-events:
    none;

  background:
    rgba(0, 5, 15, .92);

  backdrop-filter:
    blur(18px);

  transition:
    opacity .3s ease,
    visibility .3s ease;
}


.archive-modal.is-open {
  visibility:
    visible;

  opacity:
    1;

  pointer-events:
    auto;
}


.archive-modal__close {
  position:
    absolute;

  top:
    25px;

  right:
    30px;

  padding:
    10px 16px;

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

  border-radius:
    100px;

  color:
    white;

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

  cursor:
    pointer;

  font-size:
    .65rem;

  font-weight:
    600;

  letter-spacing:
    .12em;
}


.archive-modal__frame {
  width:
    min(
      1200px,
      95vw
    );

  max-height:
    85vh;

  display:
    grid;

  place-items:
    center;
}


.archive-modal__frame video {
  width:
    auto;

  max-width:
    100%;

  max-height:
    82vh;

  border-radius:
    18px;

  background:
    black;

  box-shadow:
    0 30px 100px
    rgba(0, 0, 0, .50);
}


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

@media (max-width: 1000px) {

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


  .horizontal-archive-grid {
    grid-template-columns:
      1fr;
  }


  .archive-heading {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      20px;
  }


  .archive-heading p {
    max-width:
      600px;
  }


  .archive-footer {
    grid-template-columns:
      auto 1fr;

    row-gap:
      25px;
  }


  .archive-footer > span {
    grid-column:
      1 / -1;

    justify-self:
      start;
  }

}


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

@media (max-width: 800px) {

  :root {
    --container:
      calc(100% - 30px);
  }


  .archive-menu-toggle {
    display:
      grid;
  }


  .archive-nav {
    position:
      fixed;

    inset:
      0;

    z-index:
      -1;

    padding:
      130px 30px 50px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    gap:
      30px;

    opacity:
      0;

    visibility:
      hidden;

    background:
      rgba(0, 12, 34, .98);

    backdrop-filter:
      blur(20px);

    transition:
      opacity .3s ease,
      visibility .3s ease;
  }


  .archive-nav.is-open {
    z-index:
      850;

    opacity:
      1;

    visibility:
      visible;
  }


  .archive-nav a {
    font-size:
      1.4rem;

    font-weight:
      700;
  }


  .archive-nav__cta {
    margin-top:
      15px;

    font-size:
      .9rem
      !important;
  }

}


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

@media (max-width: 640px) {

  .archive-header {
    padding:
      14px 0;
  }


  .archive-header::before {
    inset:
      5px -6px;

    border-radius:
      100px;
  }


  .archive-brand span {
    display:
      none;
  }


  .archive-brand img {
    width:
      30px;
  }


  /* Hero */

  .archive-hero {
    min-height:
      auto;

    padding:
      calc(
        135px +
        env(safe-area-inset-top)
      )
      0
      80px;
  }


  .archive-hero h1 {
    font-size:
      clamp(
        3rem,
        15vw,
        5.3rem
      );

    line-height:
      .88;
  }


  .archive-hero__bottom {
    margin-top:
      40px;

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      25px;
  }


  .archive-hero__bottom p {
    font-size:
      .91rem;
  }


  /* Sections */

  .archive-section {
    padding:
      75px 0;
  }


  .archive-heading {
    margin-bottom:
      30px;
  }


  .archive-heading h2 {
    font-size:
      clamp(
        2.6rem,
        12vw,
        4rem
      );
  }


  .archive-heading p {
    font-size:
      .84rem;
  }


  /* Vertical 2 colunas */

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

    gap:
      12px;
  }


  .archive-card--vertical {
    border-radius:
      18px;
  }


  /* Horizontal */

  .horizontal-archive-grid {
    gap:
      15px;
  }


  .archive-card--horizontal {
    border-radius:
      18px;
  }


  .archive-card__info {
    right:
      12px;

    bottom:
      11px;

    left:
      12px;
  }


  .archive-card__info span {
    font-size:
      .42rem;
  }


  .archive-card__info strong {
    font-size:
      .63rem;
  }


  .archive-card__number {
    font-size:
      .85rem
      !important;
  }


  .archive-card__loader span {
    font-size:
      .45rem;
  }


  .archive-card__loader strong {
    font-size:
      .48rem;
  }


  /* CTA */

  .archive-cta {
    margin:
      70px auto;

    padding:
      45px 25px;

    border-radius:
      24px;
  }


  .archive-cta h2 {
    font-size:
      clamp(
        2.5rem,
        12vw,
        4rem
      );
  }


  /* Footer */

  .archive-footer {
    grid-template-columns:
      1fr;

    padding-bottom:
      calc(
        30px +
        env(safe-area-inset-bottom)
      );
  }


  .archive-footer > span {
    justify-self:
      start;
  }


  /* Modal */

  .archive-modal {
    padding:
      80px 14px 20px;
  }


  .archive-modal__close {
    top:
      20px;

    right:
      16px;
  }

}


/* =========================================================
   TELAS MUITO PEQUENAS
========================================================= */

@media (max-width: 370px) {

  .vertical-archive-grid {
    grid-template-columns:
      1fr;
  }


  .archive-card--vertical {
    width:
      min(
        100%,
        310px
      );

    margin-inline:
      auto;
  }

}


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

@media (hover: none),
(pointer: coarse) {

  .archive-card:hover {
    transform:
      none;
  }


  .archive-card:hover
  .archive-card__video {
    transform:
      none;
  }

}


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

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

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;
  }

}