@import url("fonts.css");

:root {
    --color-hex-lightblue: #49658d;
    --color-hex-blue: #00265f;
    
    --color-rgb-lightblue: 73, 101, 141;
    --color-rgb-blue: 0, 38, 95;
}

html {
    box-sizing: border-box;

    scroll-behavior: smooth;
    scroll-padding: 1rem;
    overflow: hidden;
}

*,
*::after,
*::before {
    box-sizing: inherit;
}

body {
    font-family: "Montserrat", sans-serif;
    line-height: 1.6;
    overflow: hidden;
    margin: 0;
}

.container {
    height: 100svh;
    display: grid;
}

.container::before {
    content: 'Rote su dispositivo';
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 1vmin 1vmin 1vmin 5vmin;
    background-color: rgba(255, 255, 255, .85);
    background-image: url("/assets/ciudad-andante/icons/rotate-device.svg");
    background-size: 3%;
    background-position: 35.5% center;
    background-repeat: no-repeat;
    box-shadow: .25vmin .25vmin .5vmin 0 rgba(0, 0, 0, 0.25);
    font-size: 2.75vmin;
    z-index: 100;
    text-align: center;
}

.viewport {
    width: 96vw; 
    height: 72vw;
    max-width: 127.99vh;
    max-height: 96vh;
    margin: auto;
    position: relative;
    animation: fade-in 0.5s linear forwards;
}

.viewport > .content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    overflow: hidden;
    /* border: 1px solid red; */
}

.slider {
    width: 100%;
    height: 100%;
    position: relative;
    /* border: 1px solid green; */
}

.slider .slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    /* border: 1px solid red; */
}

.slider .slide-active {
    display: grid;
}

.slider .slide-fade {
    animation: fade-in 0.5s linear forwards;
}

.slider .static {
    opacity: 1 !important;
    animation: none !important;
}

.slider .btn-next {
    cursor: pointer;
}

.video-wrapper {
    width: 90%;
    padding-top: calc(90% * .75);
    position: relative;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-wrapper + .btn-exit {
    display: block;
    width: 5vmin;
    height: 5vmin;
    border: .25vmin solid #fff;
}

.btn {
    color: #333;
    text-decoration: none;
}

.btn-exit {
    cursor: pointer;
}

.btn-home {
    position: fixed;
    top: 1rem;
    left: 2rem;
    padding: .25rem .5rem;
    display: flex;
    gap: .5rem;
    align-items: center;

    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
    color: #fff;
    background-color: rgb(0, 0, 0, 0.25);
}

.btn-home svg {
    margin-top: 1px;
}

/* #inicio */

#inicio .container {
    background-color: #000;
}

#inicio .title {
    top: 15%;
    left: 0%;
    color: #fff;
    pointer-events: none;
}

#inicio .title :nth-child(1) {
    font-size: 6vmin;
    font-weight: 200; 
    letter-spacing: .075em;
}

#inicio .title :nth-child(2) {
    font-size: 4vmin;
    font-weight: 400;
    font-style: oblique;
    font-family: 'Poppins', sans-serif;
    letter-spacing: .25em;
    margin-top: -8%;
    margin-left: 29%;
}

#inicio ul.links {
    top: 70%;
    left: 5%;
    font-size: 1.25vmin;
    color: #fff;
    list-style: none;
}

#inicio ul.links li {
    margin-bottom: 1.5vmin;
}

#inicio ul.links li .btn {
    display: flex;
    width: 4vmin;
    height: 4vmin;
    background-color: var(--color-hex-blue);
    position: relative;
}

#inicio ul.links li .btn svg {
    margin: auto;
    width: 60%;
    fill: #fff;
}

#inicio ul.links li .btn .square {
    width: 40%;
    padding-top: 40%;
    display: block;
    margin: auto;
    background-color: #fff;
}

#inicio ul.links li .btn div {
    position: absolute;
    top: 0;
    left: 100%;
    width: 14vmin;
    height: 100%;
    display: none;
    align-items: center;
    font-size: 1.5vmin;
    padding-left: 1.5vmin;
    color: #fff;
    opacity: 0;
    background-color: var(--color-hex-lightblue);
}

#inicio ul.links li .btn:hover div {
    display: flex;
    opacity: 1;
    animation: fade-in .5s ease;
}

/* #biografia */

#biografia .container {
    background-color: #000;
}

#biografia .dot {
    position: absolute;
    width: 3vmin;
    padding-top: 3vmin;
    background-color: #fff;
    top: 3vmin;
    right: 3vmin;
    border-radius: 50%;
}

/* #indice */

#indice {
    --bg-color: #c9cbca;
    animation: fade-in 1s ease-out;
    background-color: var(--bg-color);
    background-image: linear-gradient(90deg, #c9cbca, #bfc0b8);
}

#indice .content {
    overflow: visible;
}

#indice .btn-exit {
    position: absolute;
    top: 3.5%;
    right: 3.5%;
    width: 3%;
    padding-top: 3%;
    background-color: hsl(150, 2%, 85%);
    box-shadow: -0.25vmin 0.25vmin 1vmin 0 rgba(0, 0, 0, 0.25);
    z-index: 2;
}

#indice .menu-wrapper {
    margin: auto;
    width: 100%;
    padding-top: 61.75%;
    /* aspect-ratio: 1 / .6175; */
    position: relative;
}

#indice .menu {
    --grid-cols: 6;
    --grid-rows: 4;
    --grid-column-gap: 3.7%;
    --grid-row-gap: 4.8%;

    --transform-origin: center center;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    padding: 2.7% 3.5%;
    margin: auto;
    list-style: none;

    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    grid-template-rows: repeat(var(--grid-rows), 1fr);
    grid-column-gap: var(--grid-column-gap);
    grid-row-gap: var(--grid-row-gap);

    background-image: url("/assets/ciudad-andante/indice/indice.jpg");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;

    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

#indice .menu.active {
    transform-origin: var(--transform-origin);

    animation-name: zoom-in, fade-out;
    animation-duration: 2s, 1s;
    animation-delay: 0s, 2s;
    animation-timing-function: ease-out, ease-in;
}

#indice .menu-item {
    position: relative;
}

#indice .menu-link {
    display: block;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.25); */
}

#indice .menu-label {
    position: absolute;
    color: #000;
    font-size: 1.75vmin;
    font-weight: 500;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-out;
}

#indice .menu-label.top {
    left: 50%;
    top: -10%;
    transform: translate(-50%, -50%);
}

#indice .menu-label.bottom {
    left: 50%;
    top: 108%;
    transform: translate(-50%, -50%);
}

#indice .menu-label.right {
    left: -12%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
}

#indice .menu-item:hover .menu-label {
    opacity: 1;
}

#indice .menu-item.disabled .menu-link {
    pointer-events: none;
}

#indice .menu-item.disabled .menu-label {
    opacity: 0;
}

/* #ciudad */

#ciudad .container {
    --bg-color: #000;
    animation: to-bg-color 1s ease-out forwards;
}

#ciudad .slide-active {
    opacity: 1;
    z-index: 10;
}

/* #punto  */

#punto .dot {
    display: inline-block;
    width: 2vmin;
    height: 2vmin;
    margin: auto;
    border-radius: 50%;
    background-color: #000;
}

#punto img {
    margin: auto;
}

/* #circulos  */

#circulos .container {
    background-color: #fff;
    transition: background-color .5s ease-out;
}

#circulos .content {
    overflow: visible;
}

#circulos .circle,
#circulos img {
    opacity: 0;
    animation: fade-in 0.5s linear forwards;
}

#circulos .circle {
    width: 14.1601%;
    padding-bottom: 14.1601%;
    border-radius: 50%;
    background: #fff;
}

#circulos .circle::after {
    content: "";
    position: absolute;
    top: 3%;
    right: 3%;
    bottom: 3%;
    left: 3%;
    border-radius: 50%;
    background: #000;
}

#circulos .circle.btn-next {
    background: #000;
}

#circulos .circle.btn-next::after {
    background: #fff;
}

/* #cuadrados  */

#cuadrados .square {
    width: 18.898%;
    height: 26.247%;
    opacity: 0;
    background-color: var(--color-hex-blue);
    animation: fade-in 0.5s linear forwards;
}

#cuadrados .square.btn-next {
    background-color: var(--color-hex-lightblue);
    cursor: pointer;
}

#cuadrados .square.btn-next::after {
    background: #95b3d7;
}

/* #subte  */

#subte .container {
    background-color: #fff;
}

/* #global  */

#global .image {
    width: 100%;
    height: 100%;
}

#global .dot,
#tv .dot {
    position: absolute;
    top: 50%;
    right: 4%;
    width: 5%;
    padding-top: 5%;
    border-radius: 50%;
    cursor: pointer;
    background-color: #fff;
    transform: translate(0%, -50%);
    box-shadow: 0 0 1vmin 0 rgba(0, 0, 0, 0.25);
}

/* #tapiz  */
#tapiz .container {
    background-color: #d9d9d9;
    transition: background-color .5s ease;
}

#tapiz p {
    font-size: 2.75vmin;
}

/* #densidad  */

#densidad .slide-active {
    display: grid;
}

#densidad img.glow {
    outline: 1px solid rgba(255, 255, 255, 0);
    transition: outline .5s ease;
}

#densidad img.glow:hover {
    outline: 1px solid rgba(0, 0, 0, 0.5);
}

/* #metropoli  */

#metropoli .slide-active {
    display: grid;
}

#metropoli .image {
    max-width: 100%;
    height: auto;
    margin: auto;
}

/* #tv  */

#tv .container {
    background-color: #000;
    transition: background-color .5s ease;
}

#tv .image {
    width: 100%;
    height: 100%;
}

#tv svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75%;
    transform: translate(-50%, -50%);
}

/* #limites  */
#limites img.glow {
    outline: 1px solid rgba(255, 255, 255, 0);
    transition: outline .5s ease;
}

#limites img.glow:hover {
    outline: 1px solid rgba(0, 0, 0, 0.5);
}

/* #manos  */

#manos .container {
    --bg-color: #000;
    animation: to-bg-color 1s ease-out forwards;
}

#manos img.glow {
    outline: 1px solid rgba(255, 255, 255, 0);
    transition: outline .5s ease;
}

#manos img.glow:hover {
    outline: 1px solid rgba(255, 255, 255, 0.25);
}

/* #aleph  */
#aleph svg {
    max-width: 90% !important;
    margin: auto;
}

/* #saturado  */

#saturado .container {
    --bg-color: #fff;
    animation: to-bg-color 1s ease-out forwards;
}

#saturado .rectangle {
    background-color: #000;
    transition: background-color .5s linear;
}

#saturado .rectangle.btn-next,
#saturado .rectangle.btn-exit {
    background-color: #49658d;
    cursor: pointer;
}

#saturado .image {
    display: none;
    transition: filter .5s linear;
}

#saturado .image.active {
    display: block;
    filter: saturate(0);
    opacity: 0;
    animation: fade-in 0.5s linear forwards;
    cursor: pointer;
}

#saturado .image.saturate {
    display: block;
    filter: saturate(1);
}

/* #panal  */
#panal {
    --honeycomb-rows: 7;
    --honeycomb-cols: 11;
    --hexagon-width: calc(100% / var(--honeycomb-cols));
    --hexagon-factor: 1.1547;
    --hexagon-margin: calc(var(--hexagon-width) * 0.05);
    --hexagon-middle: 36;
}

#panal .container {
    background-color: #000;   
}

#panal .honeycomb {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: transparent;
}

#panal .honeycomb.prev {
    transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1) rotateZ(0deg);
    animation: panal-zoom-rotate-prev 2s ease-in forwards;
    animation-delay: 1.5s;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* pointer-events: none; */
}

#panal .honeycomb.curr {
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0) rotateZ(60deg);
    animation: panal-zoom-rotate-curr 2s ease-in forwards;
    animation-delay: 2s;
}

#panal .honeycomb-row {
    display: flex;
    justify-content: center;
    margin-bottom: calc(var(--hexagon-width) / -4 * var(--hexagon-factor) - (var(--hexagon-margin) / 2));
}

#panal .honeycomb-row:last-child {
    margin-bottom: 0;
}

#panal .honeycomb .hexagon {
    width: var(--hexagon-width);
    padding: var(--hexagon-margin);
}

#panal .honeycomb .hexagon .stroke {
    fill: transparent;
}

#panal .honeycomb .hexagon .fill {
    fill: #fff;
}

#panal .honeycomb.prev .hexagon {
    opacity: 1;
}

#panal .honeycomb.curr .hexagon {
    opacity: 0;
}

#panal .honeycomb.prev .hexagon.active {
    animation: fade-out 0.2s linear forwards;
    animation-delay: calc(var(--delay-index) * 0.01s + 2s);
}

#panal .honeycomb.prev .hexagon.middle {
    animation: fade-out 0.2s linear forwards;
    animation-delay: 1.5s;
}

#panal .honeycomb.curr .hexagon.active {
    animation: fade-in 0.2s linear forwards;
    animation-delay: calc(var(--delay-index) * 0.01s + 2s);
}

#panal .honeycomb.curr .hexagon.static .fill {
    animation: fade-in 0.2s linear forwards,
                panal-bg-to-black 2s linear forwards;
    animation-delay: calc(var(--delay-index) * 0.01s + 2s), 
                    3.5s;
}

#panal .honeycomb.prev .hexagon.static .fill {
    fill: #000;
}

#panal .hexagon.last {
    cursor: pointer;
}

#panal .hexagon.last .stroke {
    fill: #000 !important;
}

#panal .hexagon.last .fill {
    fill: #fff !important;
}

#panal .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, 1) 75%,
        rgba(255, 255, 255, 1) 100%
    );
    background-size: 400% 100%;
    pointer-events: none;
}

#panal .overlay.prev {
    background-position: 100% 100%;
    animation: panal-gradient-prev 2s ease-out forwards;
    animation-delay: 0.5s;
}

#panal .overlay.curr {
    background-position: 0% 100%;
    animation: panal-gradient-curr 2s ease-out forwards;
    animation-delay: 1.5s;
}

/* #escaleras  */

#escaleras .dot {
    box-sizing: content-box;
    width: 3.5%;
    padding-top: 3.5%;
    border-radius: 50%;
    border: .5vmin solid rgba(255, 255, 255, .5);
    background-color: rgba(var(--color-rgb-blue), .5);
}

#escaleras .dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    padding-top: 50%;
    border-radius: 50%;
    background-color: #fff;
    transform: translate(-50%, -50%);
}

#escaleras svg {
    top: 0;
    left: 0;
    z-index: -1;
}

#ciudad svg,
#punto svg,
#subte svg,
#aleph svg,
#escaleras svg {
    font-family: "Montserrat", sans-serif;
    max-width: 100%;
    height: auto;
}

#inicio .image,
#inicio .title,
#inicio .links,
#circulos .circle,
#circulos .image,
#cuadrados .square,
#cuadrados .image,
#global .image,
#global .btn,
#tapiz .text,
#tapiz .image,
#densidad .image,
#limites .image,
#manos .image,
#tramas .image,
#saturado .rectangle,
#saturado .image,
#escaleras .dot,
#escaleras svg,
#escaleras .image,
#subte .image {
    position: absolute;
}

#tiempo,
#periferia,
#habitantes,
#estoy,
#diferencias,
#ambiente,
#urbano {
    background-color: #000;
}

#tiempo .content,
#periferia .content,
#habitantes .content,
#estoy .content,
#diferencias .content,
#ambiente .content,
#urbano .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Utilities */

.nowrap {
    white-space: nowrap;
}

.w-5 {
    width: 1.25rem;
}

.h-5 {
    height: 1.25rem;
}

/* Animations */

@keyframes zoom-in {
    0% {
        transform: scale3d(1, 1, 1);
    }
    100% {
        transform: scale3d(4, 4, 4);
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes panal-zoom-rotate-prev {
    100% {
        transform: translate3d(-50%, -50%, 0) scale3d(12, 12, 12) rotateZ(-30deg);
    }
}

@keyframes panal-zoom-rotate-curr {
    100% {
        transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1) rotateZ(0deg);
    }
}

@keyframes panal-gradient-prev {
    100% {
        background-position: 0% 100%;
    }
}

@keyframes panal-gradient-curr {
    100% {
        background-position: 100% 100%;
    }
}

@keyframes panal-bg-to-black {
    100% {
        fill: #000;
    }
}

@keyframes panal-bg-to-white {
    100% {
        fill: #fff;
    }
}

@keyframes saturate {
    0% {
        filter: saturate(0);
    }
    100% {
        filter: saturate(1);
    }
}

@keyframes to-border-color {
    100% {
        background-color: var(--border-color);
    }
}

@keyframes to-bg-color {
    100% {
        background-color: var(--bg-color);
    }
}

@media screen and (orientation: portrait)
{
    body .container::before
    {
        display: block;
    }
}

@media screen and (max-width:640px)
{
    #indice .menu-link span {
        opacity: 1;
        transition: none;
    }
}

@media (hover: none) {
    #inicio ul.links li .btn div {
        opacity: 1;
        display: flex;
    }

    #indice .menu-link span {
        opacity: 1;
        transition: none;
    }
}