/* ======================================================
ROOT
====================================================== */

:root {

  --bg: #f1f0eb;

  --black: #111111;

  --white: #ffffff;

  --accent: #d8ff36;

  --grey: #d8d7d1;

  --line: rgba(17,17,17,.25);


  --ease:
    cubic-bezier(.65,0,.35,1);


  /* MF MOTION SYSTEM */

  --mf-motion-fast: .35s;

  --mf-motion-medium: .8s;

  --mf-motion-slow: 1.6s;

  --mf-motion-extra-slow: 2.6s;

  --mf-ease:
    cubic-bezier(.16,1,.3,1);

}


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

* {

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  margin: 0;

  background: var(--bg);

  color: var(--black);

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

  overflow-x: hidden;

}


a {

  color: inherit;

  text-decoration: none;

}


button,
input {

  font-family: inherit;

}



/* ======================================================
GLOBAL
====================================================== */

.container-fluid {

  padding-left: 32px;
  padding-right: 32px;

}


.eyebrow {

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

  font-size: 12px;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: .08em;

}


.study-number {

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

  font-size: 14px;

}


.stage-instruction {

  position: absolute;

  top: 20px;
  left: 20px;

  z-index: 10;

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

  font-size: 11px;

  letter-spacing: .08em;

  text-transform: uppercase;

}


.stage-instruction.light {

  color: white;

}



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

.lab-header {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  background:
    rgba(241,240,235,.9);

  backdrop-filter: blur(12px);

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

}


.lab-navbar {

  min-height: 72px;

  display: flex;

  align-items: center;

  gap: 40px;

}


.lab-brand {

  display: flex;

  align-items: center;

  gap: 9px;

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

  font-size: 13px;

  font-weight: 600;

  white-space: nowrap;

}


/* ======================================================
MF LOGO
====================================================== */

.mf-header-logo {

  width: 100px;

  height: 100px;

  display: block;

  object-fit: contain;

}


.lab-brand span:first-child {

  font-size: 22px;

  font-weight: 700;

}


.brand-divider {

  opacity: .35;

}


.lab-nav {

  margin-left: auto;

  display: flex;

  gap: 27px;

}


.lab-nav a,
.back-mf {

  font-size: 12px;

  transition:
    opacity .3s ease;

}


.lab-nav a:hover,
.back-mf:hover {

  opacity: .4;

}


.back-mf {

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

  margin-left: 15px;

}


.menu-button {

  display: none;

  margin-left: auto;

  border: 0;

  background: none;

  cursor: pointer;

  font-size: 13px;

}


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

.mobile-menu {

  position: fixed;

  inset: 0;

  z-index: 2000;

  background: var(--black);

  color: white;

  padding: 30px;

  display: flex;

  align-items: center;

  visibility: hidden;

  opacity: 0;

  transition:
    opacity .4s var(--ease),
    visibility .4s;

}


.mobile-menu.active {

  visibility: visible;

  opacity: 1;

}


.mobile-menu nav {

  display: flex;

  flex-direction: column;

}


.mobile-menu nav a {

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

  font-size:
    clamp(38px,9vw,70px);

  line-height: 1;

  letter-spacing: -.04em;

}


.mobile-back {

  margin-top: 50px;

  opacity: .5;

}


.mobile-close {

  position: absolute;

  top: 15px;
  right: 24px;

  border: 0;

  color: white;

  background: transparent;

  font-size: 44px;

  cursor: pointer;

}



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

.lab-hero {


  min-height: 100vh;

  padding-top: 72px;

}


.hero-grid {

  min-height:
    calc(100vh - 72px);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding:
    30px 0 25px;

}


.hero-meta {

  display: flex;

  justify-content: space-between;

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

  font-size: 11px;

  letter-spacing: .08em;

}


.hero-main h1 {

  margin: 0;

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

  font-weight: 600;

  font-size:
    clamp(80px,15vw,230px);

  line-height: .72;

  letter-spacing: -.075em;

}


.hero-main h1 span {

  display: block;

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

}


.hero-main:hover
h1 span:first-child {

  transform:
    translateX(4vw);

}


.hero-main:hover
h1 span:last-child {

  transform:
    translateX(12vw);

}


.hero-main p {

  margin:
    55px 0 0 auto;

  width:
    min(480px,100%);

  font-size:
    clamp(20px,2.2vw,32px);

  line-height: 1.25;

}


.hero-bottom {

  padding-top: 15px;

  border-top:
    1px solid var(--line);

  display: grid;

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

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

  font-size: 11px;

  text-transform: uppercase;

}



/* ======================================================
INTRO
====================================================== */

.lab-intro {

  padding:
    150px 0;

  border-top:
    1px solid var(--line);

}


.lab-intro h2 {

  margin: 0;

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

  font-size:
    clamp(39px,5.3vw,78px);

  font-weight: 500;

  line-height: .98;

  letter-spacing: -.045em;

}


.lab-intro p {

  width:
    min(580px,100%);

  margin-top: 45px;

  font-size: 17px;

  line-height: 1.6;

}



/* ======================================================
STUDIES
====================================================== */

.study-section {

  padding:
    40px 0 110px;

  border-top:
    1px solid var(--line);

}


.study-heading {

  display: grid;

  grid-template-columns:
    1fr 3fr;

  gap: 30px;

  margin-bottom: 80px;

}


.study-heading h2 {

  width:
    min(1050px,100%);

  margin:
    20px 0 0;

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

  font-size:
    clamp(40px,6vw,90px);

  font-weight: 500;

  line-height: .95;

  letter-spacing: -.055em;

}


.study-note {

  display: grid;

  grid-template-columns:
    1fr 3fr;

  gap: 30px;

  margin-top: 30px;

}


.study-note span {

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

  font-size: 11px;

  text-transform: uppercase;

}


.study-note p {

  margin: 0;

  width:
    min(600px,100%);

  font-size: 14px;

  line-height: 1.55;

}


/* ======================================================
01 IDENTITY IN MOTION — MF
====================================================== */

.identity-stage {

  position: relative;

  min-height: 650px;

  overflow: hidden;

  background: var(--accent);

  color: #000052;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: crosshair;

}


/* MONOGRAMA */

.mf-motion-logo {

  position: relative;

  z-index: 2;

  width: min(58vw, 560px);

  height: auto;

  overflow: visible;

}


/* LAS 6 PIEZAS */

.mf-piece {

  transform-box: fill-box;

  transform-origin: center;

  transition:
    transform .1.5s var(--ease);

  will-change: transform;

}


/* INFORMACIÓN */

.identity-data {

  position: absolute;

  right: 20px;

  bottom: 20px;

  z-index: 10;

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

  font-size: 10px;

  letter-spacing: .1em;

  text-transform: uppercase;

}


/* EJES */

.identity-axis {

  position: absolute;

  z-index: 1;

  background:
    rgba(0,0,82,.18);

  pointer-events: none;

}


.axis-x {

  left: 0;

  top: 50%;

  width: 100%;

  height: 1px;

}


.axis-y {

  top: 0;

  left: 50%;

  width: 1px;

  height: 100%;

}


/* TEXTOS */

.identity-stage
.stage-instruction {

  transition:
    opacity .4s ease;

}


.identity-stage:hover
.stage-instruction {

  opacity: .35;

}


/* MOBILE */

@media
(max-width: 575px) {

  .identity-stage {

    min-height: 500px;

  }


  .mf-motion-logo {

    width: 88vw;

  }


  .identity-data {

    right: 15px;

    bottom: 15px;

  }

}



/* ======================================================
02 MOTION AS SYSTEM — MF
====================================================== */

.motion-system-stage {

  border-top:
    1px solid var(--line);

  border-left:
    1px solid var(--line);

  background:
    var(--bg);

}



/* ======================================================
INTRO
====================================================== */

.motion-system-intro {

  min-height: 70px;

  padding: 18px 22px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-right:
    1px solid var(--line);

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

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

  font-size: 10px;

  letter-spacing: .08em;

  text-transform: uppercase;

}



/* ======================================================
PRINCIPLE ROW
====================================================== */

.motion-principle {

  min-height: 290px;

  display: grid;

  grid-template-columns:
    32% 68%;

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

  overflow: hidden;

}


.motion-principle-info {

  padding: 25px;

  display: grid;

  grid-template-columns:
    50px 1fr;

  gap: 15px;

  border-right:
    1px solid var(--line);

}


.motion-index {

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

  font-size: 11px;

}


.motion-principle-info h3 {

  margin: 0;

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

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

  font-weight: 500;

  letter-spacing: -.04em;

}


.motion-principle-info p {

  width:
    min(300px,100%);

  margin-top: 25px;

  font-size: 13px;

  line-height: 1.5;

}



/* ======================================================
DEMO BASE
====================================================== */

.motion-demo {

  position: relative;

  min-height: 360px;

  overflow: hidden;

  border-right:
    1px solid var(--line);

}


.motion-mf {

  display: block;

  width: 118px;

  height: 118px;

  object-fit: contain;

  user-select: none;

  pointer-events: none;

}



/* ======================================================
01 DIRECTION
====================================================== */

.direction-demo {

  display: flex;

  align-items: center;

}


.motion-guide {

  position: absolute;

  left: 8%;

  right: 8%;

  top: 50%;

  height: 1px;

  background:
    var(--line);

}


.direction-logo {

  position: absolute;

  left: 8%;

  top: 50%;

  width: 150px;

  height: 150px;

  transform:
    translateY(-50%);

  transition:
    left
    var(--mf-motion-slow)
    var(--mf-ease);

}

.motion-principle:hover
.direction-logo {

  left:
    calc(92% - 125px);

}



/* ======================================================
02 DURATION
====================================================== */

.duration-demo {

  padding:
    35px 8%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 35px;

}


.duration-track {

  display: grid;

  grid-template-columns:
    55px 1fr;

  align-items: center;

  gap: 15px;

}


.motion-small-label {

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

  font-size: 9px;

  letter-spacing: .1em;

}


.duration-line {

  position: relative;

  height: 95px;

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

}


.duration-fast,
.duration-slow {

  position: absolute;

  left: 0;

  bottom: -1px;

  width: 150px;

  height: 150px;

}


.duration-fast {

  transition:
    left
    var(--mf-motion-fast)
    var(--mf-ease);

}


.duration-slow {

  transition:
    left
    var(--mf-motion-extra-slow)
    var(--mf-ease);

}


.motion-principle:hover
.duration-fast,

.motion-principle:hover
.duration-slow {

  left:
    calc(100% - 82px);

}



/* ======================================================
03 RHYTHM
====================================================== */

.rhythm-demo {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: clamp(15px,4vw,60px);

}


.rhythm-mf {

  width: 130px;

  height: 130px;

  opacity: .25;

}


.motion-principle:hover
.rhythm-1 {

  animation:
    mfRhythm
    1.6s
    var(--mf-ease)
    infinite;

}


.motion-principle:hover
.rhythm-2 {

  animation:
    mfRhythm
    1.6s
    var(--mf-ease)
    .18s
    infinite;

}


.motion-principle:hover
.rhythm-3 {

  animation:
    mfRhythm
    1.6s
    var(--mf-ease)
    .36s
    infinite;

}


.motion-principle:hover
.rhythm-4 {

  animation:
    mfRhythm
    1.6s
    var(--mf-ease)
    .54s
    infinite;

}


@keyframes mfRhythm {

  0%,
  100% {

    opacity: .2;

    transform:
      scale(.75);

  }


  50% {

    opacity: 1;

    transform:
      scale(1.25);

  }

}



/* ======================================================
04 SCALE
====================================================== */

.scale-demo {

  display: flex;

  align-items: center;

  justify-content: center;

}


.scale-reference {

  position: absolute;

  width: 270px;

  height: 270px;

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

  border-radius: 50%;

}


.scale-logo {

  position: relative;

  z-index: 2;

  width: 130px;

  height: 130px;

  transform:
    scale(.78);

  transition:
    transform
    var(--mf-motion-slow)
    var(--mf-ease);

}


.motion-principle:hover
.scale-logo {

  transform:
    scale(2.35);

}



/* ======================================================
05 TRANSFORMATION
====================================================== */

.transformation-demo {

  display: flex;

  align-items: center;

  justify-content: center;

  color: #000052;

}


.transformation-grid {

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(
      var(--line) 1px,
      transparent 1px
    ),

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

  background-size:
    40px 40px;

  opacity: .35;

}


.transform-mf-logo {

  position: relative;

  z-index: 2;

  width: min(360px, 64%);

  height: auto;

  overflow: visible;

}


.transform-group {

  transform-box: fill-box;

  transform-origin: center;

  transition:
    transform
    var(--mf-motion-slow)
    var(--mf-ease);

}


/* Etiquetas */

.transformation-label {

  position: absolute;

  left: 20px;

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

  font-size: 10px;

  letter-spacing: .08em;

  text-transform: uppercase;

  z-index: 5;

  transition:
    opacity .45s ease;

}


.label-default {

  top: 20px;

  opacity: 1;

}


.label-recomposed {

  bottom: 20px;

  opacity: .2;

}


/* Hover: recomposición */

.motion-principle:hover
.transform-group-m {

  transform:
    translate(150px, -150px);

}


.motion-principle:hover
.transform-group-f {

  transform:
    translate(-170px, 50px);

}


.motion-principle:hover
.label-default {

  opacity: .25;

}


.motion-principle:hover
.label-recomposed {

  opacity: 1;

}


/* ======================================================
HOVER BACKGROUND
====================================================== */

.motion-principle {

  transition:
    background
    var(--mf-motion-medium)
    var(--mf-ease);

}


.motion-principle:hover {

  background:
    rgba(216,255,54,.25);

}



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

@media
(max-width: 800px) {

  .motion-principle {

    grid-template-columns:
      1fr;

  }


  .motion-principle-info {

    border-right: 0;

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

  }


  .motion-demo {

    min-height: 260px;

  }

}


@media
(max-width: 575px) {

  .motion-system-intro {

    flex-direction: column;

    align-items: flex-start;

    gap: 5px;

  }


  .motion-principle-info {

    grid-template-columns:
      35px 1fr;

  }


  .rhythm-demo {

    gap: 15px;

  }


  .rhythm-mf {

    width: 62px;

    height: 62px;

  }

.transform-mf-logo {

  width: min(270px, 80%);

}
	
	
	
  .duration-demo {

    padding:
      30px 20px;

  }


  .duration-track {

    grid-template-columns:
      45px 1fr;

  }

}

/* ======================================================
03 RESPONSIVE IDENTITY — MF
====================================================== */

.responsive-stage {

  min-height: 760px;

  background: #dad9d3;

  padding: 35px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}


.responsive-controls {

  width: min(760px,100%);

  margin-bottom: 16px;

  display: flex;

  align-items: center;

  gap: 25px;

}


.responsive-controls label {

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

  font-size: 11px;

  text-transform: uppercase;

  white-space: nowrap;

  letter-spacing: .08em;

}


.responsive-controls input {

  width: 100%;

}


.responsive-status {

  width: min(760px,100%);

  margin-bottom: 22px;

  display: flex;

  justify-content: space-between;

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

  font-size: 11px;

  letter-spacing: .08em;

  text-transform: uppercase;

}


.responsive-frame {

  position: relative;

  width: 720px;

  max-width: 100%;

  min-height: 460px;

  background: var(--black);

  color: white;

  padding: 24px 28px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  transition:
    width .25s ease,
    min-height .6s var(--mf-ease),
    border-radius .6s var(--mf-ease),
    padding .6s var(--mf-ease);

}


.responsive-info {

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

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

  font-size: 10px;

  line-height: 1.25;

  letter-spacing: .08em;

  text-transform: uppercase;

  transition:
    font-size .5s var(--mf-ease),
    gap .5s var(--mf-ease);

}


.responsive-logo-stage {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}


.responsive-mf-logo {

  width: min(82%, 520px);

  height: auto;

  overflow: visible;

  color: white;

  transition:
    width .55s var(--mf-ease);

}


.rf-group {

  transform-box: fill-box;

  transform-origin: center;

  transition:
    transform var(--mf-motion-slow) var(--mf-ease),
    opacity .5s ease;

}



/* ==========================================
STATE 01 — EXPANDED
========================================== */

.state-expanded .rf-group-m {

  transform: translate(0,0);

}


.state-expanded .rf-group-f {

  transform: translate(0,0);

}

.state-expanded .responsive-info {

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  font-size: 10px;

}


.state-expanded
.responsive-info-top {

  text-align: left;

}


.state-expanded
.responsive-info-bottom {

  text-align: left;

}

/* ==========================================
STATE 02 — STACKED
========================================== */

.state-stacked {

  min-height: 500px;

  border-radius: 32px;

}


.state-stacked .responsive-mf-logo {

  width: min(72%, 390px);

}


.state-stacked .rf-group-m {

  transform:
    translate(150px,-75px);

}


.state-stacked .rf-group-f {

  transform:
    translate(-170px,80px);

}

/* INFORMACIÓN — STACKED */

.state-stacked
.responsive-info {

  font-size: 9px;

  letter-spacing: .06em;

}


.state-stacked
.responsive-info-top {

  flex-direction: column;

  align-items: flex-start;

  justify-content: flex-start;

  gap: 5px;

}


.state-stacked
.responsive-info-bottom {

  flex-direction: column;

  align-items: flex-start;

  justify-content: flex-start;

  gap: 5px;

}

/* ==========================================
STATE 03 — COMPACT
========================================== */

.state-compact {

  min-height: 540px;

  border-radius: 70px;

  padding:
    28px 22px;

}


.state-compact .responsive-mf-logo {

  width: min(68%, 320px);

}


.state-compact .rf-group-m {

  transform:
    translate(155px,-85px) scale(.92);

}


.state-compact .rf-group-f {

  transform:
    translate(-175px,65px) scale(.92);

}


/* INFORMACIÓN — COMPACT */

.state-compact
.responsive-info {

  font-size: 8px;

  line-height: 1.35;

  letter-spacing: .045em;

}


.state-compact
.responsive-info-top {

  flex-direction: column;

  align-items: flex-start;

  justify-content: flex-start;

  gap: 4px;

}


.state-compact
.responsive-info-bottom {

  flex-direction: column;

  align-items: flex-start;

  justify-content: flex-start;

  gap: 4px;

}



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

@media
(max-width: 575px) {

  .responsive-stage {

    min-height: 620px;

    padding: 20px;

  }


  .responsive-controls {

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

  }


  .responsive-frame {

    min-height: 420px;

    padding: 18px;

  }


  .responsive-mf-logo {

    width: min(88%, 320px);

  }


  .state-stacked .responsive-mf-logo {

    width: min(82%, 270px);

  }


  .state-compact .responsive-mf-logo {

    width: min(82%, 380px);

  }


  .responsive-info {

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

  }

}

.state-compact
.responsive-logo-stage {

  padding:
    20px 0;

}



/* ======================================================
04 INTERACTION — MF ASSEMBLY
====================================================== */

.interaction-playground {

  position: relative;

  min-height: 720px;

  background: #dad9d3;

  overflow: hidden;

  transition:
    background
    .8s
    var(--mf-ease);

}


/* ==========================================
INTERFACE SUPERIOR
========================================== */

.interaction-ui {

  position: relative;

  z-index: 20;

  min-height: 82px;

  padding:
    20px 24px;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 30px;

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

}


.interaction-instruction {

  display: flex;

  flex-direction: column;

  gap: 6px;

}


.interaction-ui-label {

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

  font-size: 10px;

  letter-spacing: .1em;

  text-transform: uppercase;

}


.interaction-message {

  font-size: 13px;

}


.interaction-controls {

  display: flex;

  align-items: center;

  gap: 20px;

}


.interaction-progress {

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

  font-size: 12px;

  letter-spacing: .08em;

}


.interaction-reset {

  padding: 7px 13px;

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

  background: transparent;

  color: var(--black);

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

  font-size: 9px;

  letter-spacing: .08em;

  text-transform: uppercase;

  cursor: pointer;

  transition:
    background .3s ease,
    color .3s ease;

}


.interaction-reset:hover {

  background:
    var(--black);

  color:
    white;

}



/* ==========================================
SVG
========================================== */

.mf-assembly {

  display: block;

  width: 100%;

  height: auto;

  min-height: 560px;

  color: #000052;

  user-select: none;

}



/* ==========================================
GHOST / TARGET
========================================== */

.mf-target {

  color: #000052;

  pointer-events: none;

}


.ghost-piece {

  fill:
    rgba(0,0,82,.035);

  stroke:
    rgba(0,0,82,.30);

  stroke-width:
    2;

  stroke-dasharray:
    8 9;

  vector-effect:
    non-scaling-stroke;

  transition:
    fill .25s ease,
    stroke .25s ease,
    opacity .25s ease;

}


.ghost-piece.is-hot {

  fill:
    rgba(0,0,82,.12);

  stroke:
    rgba(0,0,82,.75);

}



/* ==========================================
DRAGGABLE PIECES
========================================== */

.drag-piece {

  color: #000052;

  cursor: grab;

  touch-action: none;

  transform-origin: center;

}


.drag-piece > * {

  fill: currentColor;

  stroke:
    rgba(0,0,82,.001);

  stroke-width: 18;

  paint-order:
    stroke fill;

}


.drag-piece:hover {

  color: #111111;

}


.drag-piece.is-dragging {

  cursor: grabbing;

  color: var(--black);

}


.drag-piece.is-near {

  color: var(--black);

}


.drag-piece.snap-animation {

  transition:
    transform
    .45s
    var(--mf-ease);

}


.drag-piece.is-placed {

  pointer-events: none;

  color: #000052;

}



/* ==========================================
BOTTOM LEGEND
========================================== */

.interaction-bottom {

  position: absolute;

  left: 24px;
  right: 24px;
  bottom: 18px;

  z-index: 10;

  display: flex;

  justify-content: flex-end;

  gap: 10px;

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

  font-size: 9px;

  letter-spacing: .1em;

  text-transform: uppercase;

  opacity: .55;

}



/* ==========================================
COMPLETE STATE
========================================== */

.interaction-playground.is-complete {

  background:
    var(--accent);

}


.interaction-playground.is-complete
.ghost-piece {

  opacity: 0;

}


.interaction-playground.is-complete
.interaction-progress {

  font-weight: 600;

}



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

@media
(max-width: 575px) {

  .interaction-playground {

    min-height: 620px;

  }


  .interaction-ui {

    padding:
      16px;

    flex-direction: column;

    gap: 12px;

  }


  .interaction-controls {

    width: 100%;

    justify-content: space-between;

  }


  .mf-assembly {

    min-height: 470px;

  }


  .interaction-bottom {

    left: 16px;

    right: 16px;

    justify-content: flex-start;

  }

}



/* ======================================================
05 DIGITAL ACTIVATION — MF
====================================================== */

.activation-lab {

  display: grid;

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

  border-top:
    1px solid var(--line);

  border-left:
    1px solid var(--line);

}



/* ======================================================
CARD BASE
====================================================== */

.activation-card {

  position: relative;

  min-height: 650px;

  padding: 22px;

  display: flex;

  flex-direction: column;

  border-right:
    1px solid var(--line);

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

  overflow: hidden;

}


.activation-card-header {

  display: flex;

  justify-content: space-between;

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

  font-size: 10px;

  letter-spacing: .1em;

  text-transform: uppercase;

}


.activation-card-footer {

  margin-top: auto;

  padding-top: 18px;

  display: flex;

  justify-content: space-between;

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

  font-size: 9px;

  letter-spacing: .08em;

  text-transform: uppercase;

}



/* ======================================================
01 WEB
====================================================== */

.web-browser {

  position: relative;

  flex: 1;

  margin:
    30px 0;

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

  background:
    white;

  overflow: hidden;

}


.web-browser-top {

  height: 45px;

  padding:
    0 15px;

  display: flex;

  align-items: center;

  justify-content: space-between;

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

}


.web-browser-top {

  transition:
    height
    .8s
    var(--mf-ease);

}


.activation-web:hover
.web-browser-top {

  height: 35px;

}




.browser-dots {

  display: flex;

  gap: 5px;

}


.browser-dots span {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background:
    var(--black);

}


.browser-url {

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

  font-size: 8px;

  text-transform: uppercase;

}


.web-browser-content {

  position: relative;

  height:
    calc(100% - 45px);

  min-height: 440px;

  padding: 30px;

  overflow: hidden;

}


.web-copy {

  position: absolute;

  left: 30px;

  top: 50%;

  width: 55%;

  z-index: 2;

  transform:
    translateY(-50%);

  transition:

    left
    .9s
    var(--mf-ease),

    top
    .9s
    var(--mf-ease),

    width
    .9s
    var(--mf-ease),

    transform
    .9s
    var(--mf-ease);

}

.web-copy span {

  display: block;

  margin-bottom: 15px;

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

  font-size: 9px;

  letter-spacing: .1em;

}


.web-copy strong {

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

  font-size:
    clamp(28px,4vw,54px);

  font-weight: 500;

  line-height: .9;

}


.web-mf {

  position: absolute;

  right: 7%;

  top: 50%;

  width: 30%;

  max-width: 190px;

  transform:
    translateY(-50%);

  transform-origin:
    center;

  transition:

    left
    .9s
    var(--mf-ease),

    right
    .9s
    var(--mf-ease),

    top
    .9s
    var(--mf-ease),

    width
    .9s
    var(--mf-ease),

    transform
    .9s
    var(--mf-ease);

}


.web-copy span {

  transition:

    opacity
    .6s ease,

    transform
    .8s
    var(--mf-ease);

}


.activation-web:hover
.web-copy span {

  opacity: .45;

  transform:
    translateX(20px);

}

.activation-web:hover
.browser-url {

  opacity: .45;

}

.browser-url {

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

  font-size: 8px;

  text-transform: uppercase;

  transition:
    opacity
    .5s ease;

}

/* ======================================================
WEB — RESPONSIVE STATE
====================================================== */


/* MONOGRAMA
   pasa de elemento protagonista
   a marca funcional */

.activation-web:hover
.web-mf {

  right: auto;

  left: 28px;

  top: 28px;

  width: 72px;

  transform:
    translateY(0);

}


/* TITULAR
   se reorganiza en el espacio disponible */

.activation-web:hover
.web-copy {

  left: 42%;

  top: 58%;

  width: 48%;

  transform:
    translateY(-50%);

}





/* ======================================================
02 DISPLAY
====================================================== */

.display-screen {

  position: relative;

  flex: 1;

  min-height: 485px;

  margin:
    30px 0;

  background:
    var(--black);

  color:
    white;

  overflow: hidden;

}


.display-mf {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 72%;

  height: 72%;

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

  color: white;

  overflow: visible;

}


.display-piece {

  transform-box:
    fill-box;

  transform-origin:
    center;

  transition:

    transform
    1.25s
    var(--mf-ease),

    opacity
    .5s ease;

}



/* ESTADO DESARMADO */

.dp-1 {

  transform:
    translate(-170px,-150px)
    rotate(-20deg);

}


.dp-2 {

  transform:
    translate(210px,-150px)
    rotate(16deg);

}



.dp-3 {

  transform:
    translate(-230px,150px)
    rotate(12deg);

}


.dp-4 {

  transform:
    translate(150px,-170px)
    rotate(-15deg);

}


.dp-5 {

  transform:
    translate(190px,180px)
    rotate(20deg);

}


.dp-6 {

  transform:
    translate(-150px,190px)
    rotate(-12deg);

}



/* DISPLAY HOVER — FORMA MF */

.activation-display:hover
.display-piece {

  transform:
    translate(0,0)
    rotate(0deg);

}


.display-message {

  position: absolute;

  left: 20px;

  bottom: 20px;

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

  font-size: 9px;

  letter-spacing: .12em;

  opacity: .45;

  transition:
    opacity .5s ease;

}


.activation-display:hover
.display-message {

  opacity: 1;

}



/* ======================================================
03 SOCIAL
====================================================== */

.social-post {

  position: relative;

  width:
    min(100%,470px);

  aspect-ratio:
    1;

  margin:
    auto;

  background:
    var(--accent);

  overflow: hidden;

  display: flex;

  flex-direction: column;

}


.social-top,
.social-bottom {

  position: relative;

  z-index: 3;

  padding: 16px;

  display: flex;

  justify-content: space-between;

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

  font-size: 9px;

  letter-spacing: .08em;

}


.social-logo-area {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

}


.social-mf {

  width: 58%;

  max-width: 280px;

  transition:

    width
    1s
    var(--mf-ease),

    transform
    1s
    var(--mf-ease);

}



/* SOCIAL HOVER */

.activation-social:hover
.social-mf {

  width: 92%;

  transform:
    rotate(5deg);

}


.activation-social:hover
.social-post {

  background:
    white;

}



/* ======================================================
04 INTERFACE
====================================================== */

.interface-screen {

  position: relative;

  width:
    min(100%,430px);

  min-height: 485px;

  margin:
    auto;

  padding: 20px;

  background:
    white;

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

  display: flex;

  flex-direction: column;

  overflow: hidden;

}


.interface-top {

  display: flex;

  justify-content: space-between;

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

  font-size: 9px;

  letter-spacing: .08em;

}


.interface-content {

  flex: 1;

  position: relative;

  display: flex;

  align-items: center;

}


.interface-mf {

  position: absolute;

  left: 5%;

  width: 36%;

  transition:

    left .8s var(--mf-ease),

    width .8s var(--mf-ease),

    transform .8s var(--mf-ease);

}


.interface-info {

  margin-left: auto;

  width: 46%;

  transition:
    transform
    .8s
    var(--mf-ease);

}


.interface-info span {

  display: block;

  margin-bottom: 10px;

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

  font-size: 8px;

  letter-spacing: .1em;

}


.interface-info strong {

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

  font-size: 28px;

  font-weight: 500;

  line-height: .95;

}



/* PLAY */

.interface-play {

  width: 100%;

  min-height: 48px;

  padding:
    0 15px;

  display: flex;

  justify-content: space-between;

  align-items: center;

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

  background:
    transparent;

  color:
    var(--black);

  cursor: pointer;

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

  font-size: 10px;

  letter-spacing: .1em;

  transition:

    background .3s ease,

    color .3s ease;

}


.interface-play:hover {

  background:
    var(--black);

  color:
    white;

}


.play-icon {

  font-size: 11px;

}



/* PROGRESS */

.interface-progress-bar {

  position: relative;

  height: 2px;

  margin-top: 18px;

  background:
    rgba(17,17,17,.15);

  overflow: hidden;

}


.interface-progress-bar span {

  position: absolute;

  left: 0;

  top: 0;

  width: 0;

  height: 100%;

  background:
    var(--black);

}



/* INTERFACE HOVER */

.activation-interface:hover
.interface-mf {

  left: 33%;

  width: 42%;

  transform:
    rotate(-4deg);

}


.activation-interface:hover
.interface-info {

  transform:
    translateX(130%);

}



/* INTERFACE PLAYING */

.interface-screen.is-playing
.interface-mf {

  animation:
    interfaceMFPlay
    2.4s
    var(--mf-ease)
    infinite alternate;

}


.interface-screen.is-playing
.interface-progress-bar span {

  animation:
    interfaceProgress
    2.4s
    linear
    infinite;

}


@keyframes interfaceMFPlay {

  0% {

    left: 5%;

    width: 32%;

    transform:
      rotate(0deg);

  }


  50% {

    left: 50%;

    width: 48%;

    transform:
      translateX(-50%)
      rotate(0deg);

  }


  100% {

    left: 58%;

    width: 30%;

    transform:
      rotate(7deg);

  }

}


@keyframes interfaceProgress {

  from {

    width: 0;

  }


  to {

    width: 100%;

  }

}



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

@media
(max-width: 800px) {

  .activation-lab {

    grid-template-columns:
      1fr;

  }

}


@media
(max-width: 575px) {

  .activation-card {

    min-height: 570px;

    padding: 16px;

  }


  .web-browser-content {

    min-height: 380px;

    padding: 20px;

  }


  .web-copy strong {

    font-size: 30px;

  }


  .display-screen {

    min-height: 410px;

  }


  .interface-screen {

    min-height: 430px;

  }

}


/* ======================================================
06 EXPERIMENTS
====================================================== */

.experiments-section {

  padding:
    40px 0 140px;

  border-top:
    1px solid var(--line);

}


.experiments-grid {

  display: grid;

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

  border-top:
    1px solid var(--line);

  border-left:
    1px solid var(--line);

}


.experiment-card {

  min-height: 590px;

  padding: 22px;

  border-right:
    1px solid var(--line);

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

}


.experiment-number {

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

  font-size: 10px;

}


.experiment-demo {

  height: 360px;

  margin:
    25px 0;

  background: var(--black);

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}


.experiment-card h3 {

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

  font-size: 29px;

  font-weight: 500;

}


.experiment-card p {

  width: min(400px,100%);

  font-size: 13px;

}


/* ======================================================
EXP 001 — KINETIC TYPE
====================================================== */

.kinetic-type-demo {

  position: relative;

  background: var(--black);

  color: white;

  overflow: hidden;

}


.kinetic-type-demo
.experiment-hint {

  color: white;

  opacity: .55;

}


.kinetic-composition {

  position: absolute;

  inset: 0;

  overflow: hidden;

}


/* ------------------------------------------
BASE TIPOGRÁFICA
------------------------------------------ */

.kinetic-word {

  position: absolute;

  display: block;

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

  font-weight: 500;

  line-height: .82;

  letter-spacing: -.055em;

  white-space: nowrap;

  transition:

    left
    1s
    var(--mf-ease),

    right
    1s
    var(--mf-ease),

    top
    1s
    var(--mf-ease),

    bottom
    1s
    var(--mf-ease),

    font-size
    1s
    var(--mf-ease),

    letter-spacing
    1s
    var(--mf-ease);

}



/* ------------------------------------------
ESTADO INICIAL
------------------------------------------ */

.kinetic-design {

  left: 9%;

  top: 29%;

  font-size:
    clamp(42px,6vw,82px);

}


.kinetic-is {

  left: 9%;

  top: 50%;

  font-size:
    clamp(42px,6vw,82px);

}


.kinetic-motion {

  left: 22%;

  bottom: 17%;

  font-size:
    clamp(58px,8vw,110px);

}



/* ------------------------------------------
HOVER / RECOMPOSICIÓN
------------------------------------------ */

.experiment-kinetic:hover
.kinetic-design {

  left: 7%;

  top: 17%;

  font-size:
    clamp(30px,4vw,55px);

  letter-spacing: .02em;

}


.experiment-kinetic:hover
.kinetic-is {

  left: 69%;

  top: 42%;

  font-size:
    clamp(24px,3vw,42px);

  letter-spacing: .08em;

}


.experiment-kinetic:hover
.kinetic-motion {

  left: 8%;

  bottom: 10%;

  font-size:
    clamp(74px,10vw,145px);

  letter-spacing: -.075em;

}



/* ------------------------------------------
META
------------------------------------------ */

.kinetic-meta {

  position: absolute;

  left: 16px;

  right: 16px;

  bottom: 12px;

  display: flex;

  justify-content: space-between;

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

  font-size: 8px;

  letter-spacing: .1em;

  color: white;

  opacity: .4;

}


/* ======================================================
EXP 002 — RESPONSIVE MARK
====================================================== */

.responsive-exp-demo {

  position: relative;

  background: #dad9d3;

  padding: 34px;

}


.experiment-hint {

  position: absolute;

  left: 14px;

  top: 12px;

  z-index: 5;

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

  font-size: 8px;

  letter-spacing: .08em;

  text-transform: uppercase;

}


.responsive-exp-frame {

  position: relative;

  width: 88%;

  height: 270px;

  background: var(--black);

  color: white;

  padding: 18px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  transition:

    width
    1.1s
    var(--mf-ease),

    height
    1.1s
    var(--mf-ease),

    border-radius
    1.1s
    var(--mf-ease),

    padding
    1.1s
    var(--mf-ease);

}


.responsive-exp-meta {

  display: flex;

  justify-content: space-between;

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

  font-size: 8px;

  letter-spacing: .08em;

}


.responsive-exp-logo {

  position: absolute;

  inset: 45px 20px 35px;

  display: flex;

  align-items: center;

  justify-content: center;

}


.responsive-exp-logo svg {

  width: 75%;

  height: 100%;

  overflow: visible;

}


.exp-r-group {

  transform-box: fill-box;

  transform-origin: center;

  transition:
    transform
    1.1s
    var(--mf-ease);

}


.responsive-exp-state {

  display: flex;

  justify-content: flex-end;

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

  font-size: 8px;

  letter-spacing: .08em;

}


.state-small {

  display: none;

}



/* HOVER = CAMBIO DE CONTEXTO */

.experiment-responsive:hover
.responsive-exp-frame {

  width: 43%;

  height: 305px;

  border-radius: 48px;

  padding: 16px;

}


.experiment-responsive:hover
.exp-r-m {

  transform:
    translate(155px,-70px)
    scale(.92);

}


.experiment-responsive:hover
.exp-r-f {

  transform:
    translate(-175px,75px)
    scale(.92);

}


.experiment-responsive:hover
.responsive-exp-meta {

  flex-direction: column;

  gap: 4px;

}


.experiment-responsive:hover
.state-wide {

  display: none;

}


.experiment-responsive:hover
.state-small {

  display: inline;

}

/* ======================================================
EXP 003 — MODULAR TRANSITION
====================================================== */

.modular-transition-demo {

  position: relative;

  background: var(--black);

  color: var(--accent);

  overflow: hidden;

}


.transition-hint {

  color: white;

  opacity: .65;

}


.transition-mf {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 58%;

  height: 75%;

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

  overflow: visible;

  color: var(--accent);

}


.transition-piece {

  transform-box: fill-box;

  transform-origin: center;

  transition:

    transform
    1s
    var(--mf-ease),

    opacity
    .5s ease;

}


/* Cada módulo tiene
   un pequeño delay */

.tp-1 {

  transition-delay: 0s;

}


.tp-2 {

  transition-delay: .06s;

}


.tp-3 {

  transition-delay: .12s;

}


.tp-4 {

  transition-delay: .18s;

}


.tp-5 {

  transition-delay: .24s;

}


.tp-6 {

  transition-delay: .30s;

}



/* ==========================================
ESTADO DE TRANSICIÓN
========================================== */

.experiment-transition:hover
.tp-1 {

  transform:
    translate(-320px,-190px)
    rotate(-10deg);

}


.experiment-transition:hover
.tp-2 {

  transform:
    translate(-280px,200px)
    rotate(8deg);

}


.experiment-transition:hover
.tp-3 {

  transform:
    translate(-90px,-260px)
    rotate(12deg);

}


.experiment-transition:hover
.tp-4 {

  transform:
    translate(280px,-190px)
    rotate(-8deg);

}


.experiment-transition:hover
.tp-5 {

  transform:
    translate(320px,200px)
    rotate(10deg);

}


.experiment-transition:hover
.tp-6 {

  transform:
    translate(100px,250px)
    rotate(-12deg);

}



/* LABELS */

.transition-label {

  position: absolute;

  left: 16px;

  bottom: 16px;

  color: white;

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

  font-size: 9px;

  letter-spacing: .1em;

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

}


.experiment-transition:hover
.transition-from {

  opacity: 0;

  transform:
    translateX(-30px);

}



/* DESTINATION */

.transition-destination {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  pointer-events: none;

}


.transition-destination span {

  color: white;

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

  font-size:
    clamp(45px,7vw,90px);

  font-weight: 500;

  letter-spacing: -.05em;

  opacity: 0;

  transform:
    scale(.8);

  transition:

    opacity .6s ease .45s,

    transform
    .8s
    var(--mf-ease)
    .45s;

}


.experiment-transition:hover
.transition-destination span {

  opacity: 1;

  transform:
    scale(1);

}



/* PROGRESS */

.transition-progress {

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 3px;

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

}


.transition-progress span {

  display: block;

  width: 0;

  height: 100%;

  background:
    var(--accent);

  transition:
    width
    1.3s
    var(--mf-ease);

}


.experiment-transition:hover
.transition-progress span {

  width: 100%;

}

.experiment-future
.experiment-demo {

  background: transparent;

  border:
    1px dashed var(--line);

}


.coming {

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

  font-size: 100px;

  opacity: .2;

}



/* ======================================================
CLOSING
====================================================== */

.closing-section {

  min-height: 100vh;

  background: var(--black);

  color: white;

  padding:
    50px 0;

  display: flex;

  align-items: center;

}


.closing-section h2 {

  margin:
    80px 0;

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

  font-size:
    clamp(70px,15vw,220px);

  font-weight: 500;

  line-height: .78;

  letter-spacing: -.075em;

}


.closing-link {

  display: inline-block;

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

  font-size: 13px;

  border-bottom:
    1px solid white;

  padding-bottom: 5px;

}



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

.lab-footer {

  background: var(--black);

  color: white;

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

  padding:
    25px 0;

}


.lab-footer div > div {

  display: flex;

  justify-content: space-between;

  font-size: 11px;

}



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

.reveal {

  opacity: 0;

  transform:
    translateY(50px);

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

}


.reveal.is-visible {

  opacity: 1;

  transform:
    translateY(0);

}



/* ======================================================
RESPONSIVE
====================================================== */

@media
(max-width: 1050px) {

  .lab-nav {

    display: none;

  }


  .back-mf {

    display: none;

  }


  .menu-button {

    display: block;

  }

}



@media
(max-width: 800px) {

  .container-fluid {

    padding-left: 18px;

    padding-right: 18px;

  }


  .study-heading {

    grid-template-columns: 1fr;

  }


  .study-note {

    grid-template-columns: 1fr;

  }


  .hero-bottom {

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

    row-gap: 10px;

  }


  .experiments-grid {

    grid-template-columns: 1fr;

  }


  .activation-piece {

    position: absolute;

  }


  .piece-web {

    width: 60%;

  }


  .piece-social {

    width: 35%;

  }


  .piece-interface {

    width: 32%;

  }


  .piece-display {

    width: 45%;

  }

}



@media
(max-width: 575px) {

  .lab-navbar {

    min-height: 60px;

  }


  .lab-brand span:last-child {

    font-size: 10px;

  }


  .lab-hero {

    padding-top: 60px;

  }


  .hero-grid {

    min-height:
      calc(100vh - 60px);

  }


  .hero-main h1 {

    font-size: 22vw;

  }


  .hero-main p {

    font-size: 19px;

    margin-top: 35px;

  }


  .lab-intro {

    padding:
      90px 0;

  }


  .study-section {

    padding:
      30px 0 80px;

  }


  .study-heading {

    margin-bottom: 45px;

  }


  .identity-stage,
  .interaction-stage,
  .motion-stage,
  .activation-stage {

    min-height: 500px;

  }


  .motion-line {

    grid-template-columns:
      40px 1fr;

    height: 85px;

  }


  .responsive-stage {

    min-height: 580px;

    padding: 20px;

  }


  .responsive-controls {

    flex-direction: column;

    align-items: flex-start;

  }


  .responsive-frame {

    min-height: 400px;

  }


  .piece-web strong {

    font-size: 60px;

  }


  .piece-interface strong {

    font-size: 60px;

  }


  .piece-display strong {

    font-size: 24px;

  }


  .experiment-card {

    min-height: 520px;

  }


  .experiment-demo {

    height: 300px;

  }


  .lab-footer div > div {

    flex-direction: column;

    gap: 6px;

  }

}@charset "utf-8";
/* CSS Document */