/* =========================================================
   CARLEO ADVISORY — HERO ONLY
   ========================================================= */


/* ---------------------------------------------------------
   FONT
   Ripristina il look originale della Hero
   --------------------------------------------------------- */

@font-face {
  font-family: "Velune Sans";
  src: local("Inter"), local("Helvetica Neue");
  font-display: swap;
}


/* ---------------------------------------------------------
   VARIABLES
   --------------------------------------------------------- */

:root {
  --night: #030712;
  --ink: #f7f5ef;

  --font-main:
    "Velune Sans",
    "Inter",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
}


/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--night);
}

body {
  min-width: 320px;

  color: var(--ink);

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

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ---------------------------------------------------------
   HERO SEQUENCE
   --------------------------------------------------------- */

.sequence-stage {
  height: 660dvh;

  background: var(--night);
}

.sequence-viewport {
  position: sticky;
  top: 0;

  height: 100dvh;
  min-height: 38rem;

  overflow: clip;
  isolation: isolate;
}


/* ---------------------------------------------------------
   IMAGES / CANVAS
   --------------------------------------------------------- */

.sequence-poster,
.sequence-canvas {
  position: absolute;
  z-index: -5;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.sequence-canvas {
  display: block;
}

html[data-enhanced="true"] .sequence-poster {
  opacity: 0;
}


/* ---------------------------------------------------------
   IMAGE OVERLAY
   --------------------------------------------------------- */

.media-scrim {
  position: absolute;
  z-index: -3;
  inset: 0;

  background:
    radial-gradient(
      ellipse at 50% 47%,
      transparent 28%,
      rgba(1, 4, 12, 0.05) 66%,
      rgba(1, 4, 12, 0.4) 100%
    ),
    linear-gradient(
      180deg,
      rgba(2, 5, 13, 0.18),
      transparent 30%,
      transparent 70%,
      rgba(2, 5, 13, 0.38)
    );

  pointer-events: none;
}


/* ---------------------------------------------------------
   LOADING
   --------------------------------------------------------- */

.loading-status {
  position: absolute;
  z-index: 20;

  left: 50%;
  bottom: 2rem;

  display: grid;
  gap: 0.65rem;

  width: min(12rem, 45vw);

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

  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;

  text-align: center;
  text-transform: uppercase;

  transform: translateX(-50%);

  transition: opacity 0.5s;
}

.loading-status.is-ready {
  opacity: 0;

  pointer-events: none;
}

.loading-status__track {
  height: 1px;

  background: rgba(255, 255, 255, 0.22);
}

.loading-status__track span {
  display: block;

  width: 0;
  height: 100%;

  background: #fff;

  transition: width 0.18s;
}


/* ---------------------------------------------------------
   CHAPTERS
   --------------------------------------------------------- */

.chapter {
  position: absolute;
  z-index: 5;

  width: min(35rem, calc(100% - 2rem));

  text-wrap: balance;
}

html[data-enhanced="true"] .chapter {
  opacity: 0;
  visibility: hidden;

  will-change: opacity, transform;
}


/* ---------------------------------------------------------
   TEXT BACKGROUND
   --------------------------------------------------------- */

.chapter::before {
  content: "";

  position: absolute;
  z-index: -1;

  inset: -5rem -7rem;

  background:
    radial-gradient(
      ellipse,
      rgba(1, 5, 14, 0.58),
      transparent 67%
    );

  filter: blur(8px);

  pointer-events: none;
}


/* ---------------------------------------------------------
   HERO — OPENING
   --------------------------------------------------------- */

.chapter--hero {
  top: 50%;
  left: 50%;

  text-align: center;

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


/* 01 — WHAT WE DO */
.chapter--left {
  top: 45%;
  left: clamp(1.3rem, 6vw, 7rem);
}


/* 02 — HOW WE WORK */
.chapter--cloud {
  top: 45%;
  left: clamp(1.3rem, 6vw, 7rem);
}


/* 03 — THE OUTCOME */
.chapter--right {
  top: 35%;
  right: clamp(1.3rem, 4.5vw, 5.5rem);

  width: min(40rem, calc(100% - 2rem));

  text-align: right;
}


/* 04 — THE NEXT STEP */
.chapter--arrival {
  top: 35%;
  left: clamp(1.3rem, 4.5vw, 5.5rem);
}

/* ---------------------------------------------------------
   EYEBROW
   --------------------------------------------------------- */

.eyebrow {
  margin: 0 0 1.1rem;

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

  font-family: var(--font-main);
  font-size: 0.75rem;
  font-weight: 650;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------
   TITLES
   Ripristinato il look originale
   --------------------------------------------------------- */

.chapter h1,
.chapter h2 {
  margin: 0;

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

  font-weight: 420;

  line-height: 0.94;
  letter-spacing: -0.055em;
}

.chapter h1 {
  font-size: clamp(3.2rem, 5.5vw, 6.8rem);
}

.chapter h2 {
  font-size: clamp(2.6rem, 5.4vw, 6.2rem);
}


/* ---------------------------------------------------------
   BODY / SUBTITLE
   --------------------------------------------------------- */

.chapter__body {
  max-width: 29rem;

  margin: 1.5rem auto 1.8rem;

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

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

  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  font-weight: 400;

  line-height: 1.55;
}

.chapter--left .chapter__body,
.chapter--cloud .chapter__body,
.chapter--arrival .chapter__body {
  margin-left: 0;
}


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

.sequence-meta {
  position: absolute;
  z-index: 9;

  left: clamp(1rem, 2.5vw, 3rem);
  right: clamp(1rem, 2.5vw, 3rem);
  bottom: 1.6rem;

  display: flex;
  align-items: center;
  gap: 0.8rem;

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

  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 500;

  letter-spacing: 0.1em;
}

.sequence-meta__line {
  flex: 1;

  height: 1px;

  background: rgba(255, 255, 255, 0.22);
}

.sequence-meta__line span {
  display: block;

  width: 0;
  height: 100%;

  background: rgba(255, 255, 255, 0.8);
}


/* ---------------------------------------------------------
   SCROLL CUE
   --------------------------------------------------------- */

.scroll-cue {
  position: absolute;
  z-index: 8;

  right: 2.5rem;
  bottom: 3.2rem;

  display: flex;
  align-items: center;
  gap: 0.8rem;

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

  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 500;

  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scroll-cue i {
  width: 1px;
  height: 2.5rem;

  background:
    linear-gradient(
      #fff,
      transparent
    );

  animation:
    cue 1.8s
    ease-in-out
    infinite;
}

@keyframes cue {
  50% {
    opacity: 0.45;

    transform:
      translateY(0.4rem);
  }
}


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

@media (max-width: 800px) {

  .sequence-stage {
    height: 590dvh;
  }

  .chapter--hero,
  .chapter--left,
  .chapter--cloud,
  .chapter--right,
  .chapter--arrival {
    top: auto;
    right: auto;
    bottom: 15vh;
    left: 1.25rem;

    width: calc(100% - 2.5rem);

    text-align: left;

    transform: none;
  }

  .chapter h1 {
    font-size:
      clamp(
        3.4rem,
        15vw,
        5.5rem
      );
  }

  .chapter h2 {
    font-size:
      clamp(
        3rem,
        14vw,
        5.25rem
      );
  }

  .chapter--hero .chapter__body {
    margin-left: 0;
  }

  .scroll-cue {
    display: none;
  }
}


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

@media (max-width: 480px) {

  .sequence-viewport {
    min-height: 34rem;
  }

  .chapter {
    bottom: 12vh !important;
  }

  .chapter h1,
  .chapter h2 {
    letter-spacing: -0.065em;
  }

  .chapter__body {
    max-width: 22rem;

    font-size: 0.92rem;
  }

  .eyebrow {
    font-size: 0.75rem;
  }

  .sequence-meta {
    bottom: 1rem;
  }
}